initial commit

489 files changed, 65272 insertions, 0 deletions

diff --git a/files/pt-br/web/api/abortsignal/aborted/index.html b/files/pt-br/web/api/abortsignal/aborted/index.html
new file mode 100644
index 0000000000..6158b810e9
--- /dev/null
+++ b/files/pt-br/web/api/abortsignal/aborted/index.html
@@ -0,0 +1,62 @@
+---
+title: AbortSignal.aborted
+slug: Web/API/AbortSignal/aborted
+tags:
+  - API
+  - AbortSignal
+  - Propriedade
+  - aborted
+translation_of: Web/API/AbortSignal/aborted
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>A propriedade <strong><code>aborted</code></strong> é apenas para leitura e fornece um valor {{domxref("Boolean")}} indicando se as solicitações ao objeto sinal de comunicação DOM forão abortadas (<code>true</code>) ou não (<code>false</code>).</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush: js">var isAborted = abortSignal.aborted;</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Um valor {{domxref("Boolean")}}</p>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>No fragmento abaixo, criamos um novo objeto <code>AbortController</code> e recebemos dele um sinal {{domxref("AbortSignal")}} (disponível na propriedade <code>signal</code>). Depois checamos se o sinal foi ou não abortado usando a propriedade <code>aborted</code>, e então enviamos um log apropriado para o console.</p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+// ...
+
+signal.aborted ? console.log('Pedido foi abortado') : console.log('Pedido nao foi abortado');
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-abortsignal-onabort', 'onabort')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definição Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</h2>
+
+
+
+<p>{{Compat("api.AbortSignal.aborted")}}</p>
+
+<h2 id="Veja_Também">Veja Também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Documentação de busca API</a></li>
+</ul>
diff --git a/files/pt-br/web/api/abortsignal/index.html b/files/pt-br/web/api/abortsignal/index.html
new file mode 100644
index 0000000000..1bfd9766c7
--- /dev/null
+++ b/files/pt-br/web/api/abortsignal/index.html
@@ -0,0 +1,101 @@
+---
+title: AbortSignal
+slug: Web/API/AbortSignal
+tags:
+  - API
+  - AbortSignal
+  - DOM
+  - Experimental
+  - Interface
+  - Referencia
+translation_of: Web/API/AbortSignal
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>A interface <strong><code>AbortSignal</code></strong>  representa o sinal de um objeto que permite a você se comunicar com uma Requisição de DOM (como Fetch) e aborta-la se necessário via um objeto {{domxref("AbortController")}}</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>A interface AbortSignal também herda propriedades de sua interface pai, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AbortSignal.aborted")}} {{readonlyInline}}</dt>
+ <dd>Um {{domxref("Boolean")}} que indica quando a(s) Request(s) com a qual o sinal está se comunicando está/estão abortadas(<code>true</code>) ou não(<code>false</code>).</dd>
+</dl>
+
+<h3 id="Handlers_de_Eventos">Handlers de Eventos</h3>
+
+<dl>
+ <dt>{{domxref("AbortSignal.onabort")}}</dt>
+ <dd>Invocado quando um {{event("abort_(dom_abort_api)", "abort")}} evento dispara, ex: quando as requests do DOM que o sinal estão se comunicando são/estão abortadas.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>A interface AbortSignal também herda métodos de sua interface pai, {{domxref("EventTarget")}}.</em></p>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>No exemplo de código a seguir, nós vamos focar em fazer download de um vídeo usando a <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</p>
+
+<p>Nós primeiro criaremos um controller usando o construtor do {{domxref("AbortController.AbortController","AbortController()")}}, e então pegar a referência de seu objeto {{domxref("AbortSignal")}} associado usando a propriedade {{domxref("AbortController.signal")}}.</p>
+
+<p>Quando a <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">requisição Fetch</a> é iniciada, nós passamos o <code>AbortSignal</code>  como uma opção dentro do objeto de opções da request (veja <code>{signal}</code>, abaixo). Isso associa o sinal e o controller com a requisição fetch e nos permite aborta-la chamando {{domxref("AbortController.abort()")}}, como visto abaixo no segundo <code>event listener</code>.</p>
+
+<pre class="brush: js">var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Download aborted');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Download error: ' + e.message;
+  })
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Quando <code>abort()</code> é chamado, a promessa do <code>fetch()</code> é rejeitada com um <code>AbortError</code>.</p>
+</div>
+
+<p>Você pode encontrar um exemplo completo no GitHub — veja <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> (<a href="https://mdn.github.io/dom-examples/abort-api/">see it running live also</a>).</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-AbortSignal', 'AbortSignal')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+
+
+<p>{{Compat("api.AbortSignal")}}</p>
+
+<h2 id="Veja_Também">Veja Também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="https://developers.google.com/web/updates/2017/09/abortable-fetch">Abortable Fetch</a> by Jake Archibald</li>
+</ul>
diff --git a/files/pt-br/web/api/abstractworker/index.html b/files/pt-br/web/api/abstractworker/index.html
new file mode 100644
index 0000000000..824ccd2aaa
--- /dev/null
+++ b/files/pt-br/web/api/abstractworker/index.html
@@ -0,0 +1,103 @@
+---
+title: AbstractWorker
+slug: Web/API/AbstractWorker
+translation_of: Web/API/AbstractWorker
+---
+<p>{{ APIRef("Web Workers API") }}</p>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>A interface <strong><code>AbstractWorker</code></strong> abstrai propriedades e métodos comuns para todo o tipo de Workers, sendo {{domxref("Worker")}} ou {{domxref("SharedWorker")}}.</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>A interface <code>AbstractWorker</code></em><em> não herda qualquer propriedade..</em></p>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>É um {{ domxref("EventListener") }} que é chamado sempre que um {{domxref("ErrorEvent")}} do tipo <code>error</code> borbulha através do Worker.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>A interface <code>AbstractWorker</code></em><em> não implementa ou herda qualquer método.</em></p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#the-abstractworker-abstract-interface", "AbstractWorker")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sem mudanças para {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers', "#the-abstractworker-abstract-interface", "AbstractWorker")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definição Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</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>Recurso</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>O {{domxref("Worker")}} e {{domxref("SharedWorker")}} herdá-lo.</li>
+</ul>
+
+<p> </p>
diff --git a/files/pt-br/web/api/abstractworker/onerror/index.html b/files/pt-br/web/api/abstractworker/onerror/index.html
new file mode 100644
index 0000000000..b6ce35361e
--- /dev/null
+++ b/files/pt-br/web/api/abstractworker/onerror/index.html
@@ -0,0 +1,104 @@
+---
+title: AbstractWorker.onerror
+slug: Web/API/AbstractWorker/onerror
+translation_of: Web/API/AbstractWorker/onerror
+---
+<p>{{ APIRef("Web Workers API") }}</p>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>A propriedade <code><strong>AbstractWorker</strong></code><strong><code>.onerror</code></strong> da interface {{domxref("AbstractWorker")}} representa um {{domxref("EventHandler")}}, que é uma função a ser chamada quando o evento {{event("error")}} ocorre através de um balão de notificação {{domxref("Worker")}}.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">myWorker.onerror = function() { ... };</pre>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>O seguinte trecho de código mostra criação de um objeto <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker" title="The Worker interface 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."><code>Worker</code></a> usando o construtor de <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker.Worker" title="The Worker() constructor creates a Worker that executes the script at the specified URL. This script must obey the same-origin policy."><code>Worker()</code></a> e criando um manipulador <code>onerror</code> no objeto resultante:</p>
+
+<pre class="brush: js">var myWorker = new Worker("worker.js");
+
+myWorker.onerror = function() {
+  console.log('Há um erro com o seu worker!');
+}</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#handler-abstractworker-onerror", "AbstractWorker.onerror")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Nenhuma mudança em {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers', "#handler-abstractworker-onerror", "AbstractWorker.onerror")}}</td>
+   <td>{{Spec2('Web Workers')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_dos_Navegadores">Compatibilidade dos Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A interface {{domxref("AbstractWorker")}} a que pertence.</li>
+</ul>
diff --git a/files/pt-br/web/api/ambient_light_events/index.html b/files/pt-br/web/api/ambient_light_events/index.html
new file mode 100644
index 0000000000..d011d08e08
--- /dev/null
+++ b/files/pt-br/web/api/ambient_light_events/index.html
@@ -0,0 +1,116 @@
+---
+title: Ambient Light Events
+slug: Web/API/Ambient_Light_Events
+tags:
+  - Ambiente de luz
+  - Ambiente de luz API
+  - Ambiente e luz HTML5 API
+translation_of: Web/API/Ambient_Light_Events
+---
+<div>Os eventos de luz ambiente são uma maneira útil de tornar uma página da Web ou uma aplicação consciente de qualquer alteração na intensidade da luz. Isso permite que eles reajam a tal mudança, por exemplo alterando o contraste de cores da interface do usuário (UI) ou alterando a exposição necessária para tirar uma foto.</div>
+
+<div> </div>
+
+<h2 id="Eventos_de_luz">Eventos de  luz</h2>
+
+<p>Quando o sensor de luz de um dispositivo detecta uma mudança no nível de luz, ele notifica o navegador dessa alteração. Quando o navegador obtém tal notificação, ele dispara um evento <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent">DeviceLightEvent </a>que fornece informações sobre a intensidade da luz exata.</p>
+
+<p>Este evento pode ser capturado no nível do objeto da janela usando o método <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener </a>(usando o nome do evento <a href="https://developer.mozilla.org/en-US/docs/Web/Events/devicelight">devicelight</a>) ou anexando um manipulador de eventos à propriedade <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/ondevicelight">window.ondevicelight</a>.</p>
+
+<p>Uma vez capturado, o objeto de evento dá acesso à intensidade da luz expressa em <a href="http://en.wikipedia.org/wiki/Lux">lux </a>através da propriedade <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent/value">DeviceLightEvent.value</a>.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">window.addEventListener('devicelight', function(event) {
+  var html = document.getElementsByTagName('html')[0];
+
+  if (event.value &lt; 50) {
+    html.classList.add('darklight');
+    html.classList.remove('brightlight');
+  } else {
+    html.classList.add('brightlight');
+    html.classList.remove('darklight');
+  }
+});</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://w3c.github.io/ambient-light/">Sensor de luz ambiente A definição de "Ambient Light Events" nessa especificação</a>.</td>
+   <td>
+    <p>Rascunho do Editor</p>
+   </td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>{{domxref("DeviceLightEvent")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}<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>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>{{domxref("DeviceLightEvent")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>support</td>
+   <td>{{CompatGeckoMobile("15.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] O evento "<a href="https://developer.mozilla.org/en-US/docs/Web/Events/devicelight">devicelight</a>" é implementado e a preferência ativada por padrão no Firefox Mobile para Android (15.0) e no Firefox OS (B2G). Começando com Gecko 22.0 geckoRelease ("22.0"), uma implementação de desktop para Mac OS X também está disponível. O suporte para o Windows 7 está em andamento (veja <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=754199">bug (754199)</a>).</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent">DeviceLightEvent</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Events/devicelight">event("devicelight")</a></li>
+</ul>
diff --git a/files/pt-br/web/api/angle_instanced_arrays/index.html b/files/pt-br/web/api/angle_instanced_arrays/index.html
new file mode 100644
index 0000000000..18f90385a0
--- /dev/null
+++ b/files/pt-br/web/api/angle_instanced_arrays/index.html
@@ -0,0 +1,88 @@
+---
+title: ANGLE_instanced_arrays
+slug: Web/API/ANGLE_instanced_arrays
+tags:
+  - API
+  - Reference
+  - WebGL
+  - WebGL extension
+translation_of: Web/API/ANGLE_instanced_arrays
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>A extenção <code><strong>ANGLE_instanced_arrays</strong></code> é parte do <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> e permite desenhar o mesmo objeto, ou grupos de objectos semelhantes várias vezes, se eles compartilham os mesmos dados de vértice, contagem primitiva e tipo.</p>
+
+<p>As extensões WebGL estão disponíveis usando o método {{domxref("WebGLRenderingContext.getExtension()")}}. Para mais informações, veja também <a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Usando Extenções</a> no <a href="/en-US/docs/Web/API/WebGL_API/Tutorial">WebGL tutorial</a>.</p>
+
+<div class="note">
+<p><strong>Disponibilidade:</strong> Esta extenção só está disponível para contextos {{domxref("WebGLRenderingContext", "WebGL1", "", 1)}}. Em {{domxref("WebGL2RenderingContext", "WebGL2", "", 1)}}, a funcionalidade desta extenção está disponível no contexto WebGL2 por padrão e as constantes e métodos estao disponíveis sem o sufixo "<code>ANGLE</code>".</p>
+
+<p>Apesar do nome "ANGLE", esta extenção funciona em qualquer dispositivo se o hardware oferece suporte a ele e não apenas no Windows ao usar a biblioteca ANGLE. "ANGLE" apenas indica que essa extencão foi escrita pelos autores da biblioteca ANGLE.</p>
+</div>
+
+<h2 id="Constantes">Constantes</h2>
+
+<p>Essa extensão expõe uma nova constante, que pode ser usada no método {{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}}:</p>
+
+<dl>
+ <dt><code>ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE</code></dt>
+ <dd>Retorna um {{domxref("GLint")}} descrevendo o divisor de frequência usado para renderização instanciada quando usado no {{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} como parâmetro <code>pname</code>.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p>Essa extensão expõe três novos métodos.</p>
+
+<dl>
+ <dt>{{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}}</dt>
+ <dd>
+ <p>Se comporta de forma idêntica a {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} exceto que múltiplo instâncias do intervalo de elementos são executadas e a instância avança para cada iteração.</p>
+ </dd>
+ <dt>{{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}</dt>
+ <dd>
+ <p>Comporta-se de forma idêntica para o {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} exceto que várias instâncias do conjunto de elementos são executadas e a instância avança entre cada conjunto.</p>
+ </dd>
+ <dt>{{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}}</dt>
+ <dd>
+ <p>Modifica a taxa na qual os atributos de vértice genéricos avançam ao renderizar várias instâncias de primitivos com {{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}} e {{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}.</p>
+ </dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Habilitando a extenção:</p>
+
+<pre class="brush: js">var ext = gl.getExtension('ANGLE_instanced_arrays');
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ANGLE_instanced_arrays', '', 'ANGLE_instanced_arrays')}}</td>
+   <td>{{Spec2('ANGLE_instanced_arrays')}}</td>
+   <td>definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
+
+<p class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você gostaria de contribuir aos dados, verific por favor para fora <a href="https://ssl.microsofttranslator.com/bv.aspx?from=&amp;to=pt&amp;a=https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e emita-nos um pedido da tração.</p>
+
+<p>{{Compat("api.ANGLE_instanced_arrays")}}</p>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getExtension()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/animation/cancel/index.html b/files/pt-br/web/api/animation/cancel/index.html
new file mode 100644
index 0000000000..ceb1b7cf6c
--- /dev/null
+++ b/files/pt-br/web/api/animation/cancel/index.html
@@ -0,0 +1,120 @@
+---
+title: Animation.cancel()
+slug: Web/API/Animation/cancel
+translation_of: Web/API/Animation/cancel
+---
+<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}</p>
+
+<p>O método <code><strong>Animation.cancel()</strong></code> da interface  {{domxref("Animation")}} , limpa todas as  {{domxref("KeyframeEffect", "keyframeEffects")}} geradas pela animação e aborta esta execução.</p>
+
+<div class="note">
+<p>Quando uma animação é cancelada, os valores de {{domxref("Animation.startTime", "startTime")}} e {{domxref("Animation.currentTime", "currentTime")}} são definidos como <code>null</code>.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<div class="syntaxbox">
+<pre class="brush: js">// cancela animação
+animation.cancel();</pre>
+</div>
+
+<h3 id="Parametros">Parametros</h3>
+
+<p>Nenhum.</p>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Nenhum.</p>
+
+<dl>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Se o método {{domxref("Animation.playState")}} da animação estiver executando quando a operação for cancelada, esta ação vai rejeitar a {{domxref("Animation.finished", "current finished promise")}} com a {{domxref("DOMException")}} nomeada <code>AbortError</code>.</p>
+
+<dl>
+</dl>
+
+<h2 id="Especificações">Especificações</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 Animations', '#dom-animation-cancel', 'Animation.cancel()' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</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>{{CompatGeckoDesktop(40)}}</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>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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("KeyframeEffect")}}</li>
+ <li>{{domxref("Animation")}}</li>
+ <li>{{domxref("Animation.playState")}}</li>
+ <li>{{domxref("Animation.finished")}} returns the promise this action will reject if the animation's <code>playState</code> is not <code>idle</code>.</li>
+</ul>
diff --git a/files/pt-br/web/api/animation/currenttime/index.html b/files/pt-br/web/api/animation/currenttime/index.html
new file mode 100644
index 0000000000..e5b7c25559
--- /dev/null
+++ b/files/pt-br/web/api/animation/currenttime/index.html
@@ -0,0 +1,112 @@
+---
+title: Animation.currentTime
+slug: Web/API/Animation/currentTime
+translation_of: Web/API/Animation/currentTime
+---
+<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>
+
+<p>A propriedade <code><strong>Animation</strong></code><strong><code>.currentTime</code></strong> da <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> retorna e altera o tempo atual da animação em milésimos de segundos, seja estando em execução ou pausada.</p>
+
+<p>Se a animação não tem uma {{domxref("AnimationTimeline", "timeline")}}, está inativa, ou ainda não foi colocada em execução, o valor de retorno do <code>currentTime </code>será<code> null</code>. </p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var<em>tempoAtual</em> = <em>Animation</em>.currentTime;
+<em>Animation</em>.currentTime =<em> novoTempo;</em></pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Um número que representará no tempo atual da animação em milésimos de segundos, ou <code>null</code> para desativar a animação.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>No <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">jogo Drink Me/Eat Me</a>, O tamanho da Alice é animado e pode crescer ou diminuir. No início do jogo, o tamanho dela foi colocado entre os dois extremos do animation's <code>currentTime</code> no meio do <a href="/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options"><code>KeyframeEffect</code>'s duration</a>, desta maneira:</p>
+
+<pre class="brush: js">aliceChange<strong>.</strong>currentTime = aliceChange.effect.timing.duration / 2;</pre>
+
+<p>Outra forma mais genérica para encontrar o marco de 50% da animação pode ser feito da seguinte forma:</p>
+
+<pre class="brush: js">animation.currentTime =
+  animation.effect.getComputedTiming().delay +
+  animation.effect.getComputedTiming().activeDuration / 2;</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#dom-animation-currenttime', 'currentTime')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoDesktop(48)}}<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>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</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>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] A Web Animations API está ativa por padrão apenas no Firefox Developer Edition e nas versões do Nightly. Você pode habilitá-la em versões beta configurando a preferência <code>dom.animations-api.core.enabled</code> para <code>true</code>, e também desativar em qualquer Firefox mudando esta mesma preferência para <code>false</code>.</p>
+
+<h2 id="Veja_também" style="line-height: 30px; font-size: 2.14285714285714rem;">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Animation")}} para outros métodos e propriedades que você pode usar para controlar a animação da página web.</li>
+ <li>{{domxref("Animation.startTime")}} para o tempo que a animação está programada começar.</li>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+</ul>
diff --git a/files/pt-br/web/api/animation/index.html b/files/pt-br/web/api/animation/index.html
new file mode 100644
index 0000000000..09d2f0091c
--- /dev/null
+++ b/files/pt-br/web/api/animation/index.html
@@ -0,0 +1,171 @@
+---
+title: Animation
+slug: Web/API/Animation
+tags:
+  - API
+  - Animations
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web Animations
+  - waapi
+  - web animation api
+translation_of: Web/API/Animation
+---
+<p>{{ APIRef("Web Animations API") }}{{SeeCompatTable}}</p>
+
+<p>A interface <strong><code>Animation</code></strong> da <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> representa um único player de animação e fornece controles e uma linha do tempo (timeline) para um nó de animação ou recurso.</p>
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("Animation.Animation()", "Animation()")}}</dt>
+ <dd>Cria uma nova instância do objeto <code>Animation</code>.</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("Animation.currentTime")}}</dt>
+ <dd>O valor do tempo atual da animação, em milissegundos, esteja ela executando ou pausada. Se a animação não tem uma {{domxref("AnimationTimeline", "timeline")}}, está inativa ou ainda não foi executada, este valor é <code>null</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.effect")}}</dt>
+ <dd>Obtém e define o {{domxref("KeyframeEffect")}} associado a essa animação.</dd>
+ <dt>{{domxref("Animation.finished")}} {{readOnlyInline}}</dt>
+ <dd>Retorna a <code>Primise</code> de finalização atual para essa animação.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.id")}}</dt>
+ <dd>Obtém e define a <code>String</code> usada para identificar a animação.</dd>
+ <dt>{{domxref("Animation.oncancel")}}</dt>
+ <dd>Obtém e define o manipulador para o evento <code>cancel</code>.</dd>
+ <dt>{{domxref("Animation.onfinish")}}</dt>
+ <dd>Obtém e define o manipulador para o evento <code>finish</code>.</dd>
+ <dt>{{domxref("Animation.playState")}} {{readOnlyInline}}</dt>
+ <dd>Retorna um valor enumerado descrevendo o estado de execução de uma animação.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.playbackRate")}}</dt>
+ <dd>Obtém ou define a taxa de execução da animação.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.ready")}} {{readOnlyInline}}</dt>
+ <dd>Retorna a promessa atual para quando essa animação estiver pronta.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.startTime")}}</dt>
+ <dd>Obtém ou define o tempo agendado quando a execução de uma animação deve começar.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.timeline")}}</dt>
+ <dd>Obtém ou define a {{domxref("AnimationTimeline", "timeline")}} associada a essa animação.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("Animation.cancel()")}}</dt>
+ <dd>Limpa todos os {{domxref("KeyframeEffect", "keyframeEffects")}} causados por essa animação e aborta sua execução.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.finish()")}}</dt>
+ <dd>Vai até um dos extremos dessa animação, dependendo se ela está executando ou retornando.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.pause()")}}</dt>
+ <dd>Suspende a execução de uma animação.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.play()")}}</dt>
+ <dd>Inicia ou continua a execução de uma animação ou a recomeça se ela tiver terminado anteriormente.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.reverse()")}}</dt>
+ <dd>Move a animação ao contrário, parando no início da animação.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatChrome(39.0)}} [1]</td>
+   <td>{{CompatGeckoDesktop(40.0)}} [2]</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>Recurso</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatGeckoDesktop(40.0)}} [2]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implementado como <code>AnimationPlayer</code> (nome da interface em uma versão primária da especificação).</p>
+
+<p>[2] Anteriormente ao Firefox 40, estava disponível como <code>AnimationPlayer</code>. Em ambos os casos, é necessário definir a preferência <code>dom.animations-api.core.enabled</code> para poder usá-la.</p>
+
+<p> </p>
diff --git a/files/pt-br/web/api/animation/playstate/index.html b/files/pt-br/web/api/animation/playstate/index.html
new file mode 100644
index 0000000000..a31d8d7c64
--- /dev/null
+++ b/files/pt-br/web/api/animation/playstate/index.html
@@ -0,0 +1,152 @@
+---
+title: Animation.playState
+slug: Web/API/Animation/playState
+translation_of: Web/API/Animation/playState
+---
+<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>
+
+<p><br>
+ A propriedade <code><strong>Animation</strong></code><strong><code>.playState</code></strong> do <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> retorna e altera um valor enumerado que descreve o estado de reprodução da animação.</p>
+
+<div class="note">
+<p>Essa propriedade é apenas de leitura para Animações CSS e Transições.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var<em> estadoAtualDaReproducao</em> = <em>Animation</em>.playState;
+
+<em>Animation</em>.playState =<em>novoEstado</em>;
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<dl>
+ <dt><code>idle</code></dt>
+ <dd>O tempo atual da animação não está acertado e não há tarefas pendentes.</dd>
+ <dt><code>pending</code></dt>
+ <dd>A animação está aguardando a realização de algumas tarefas para ser completada.</dd>
+ <dt><code>running</code></dt>
+ <dd>A animação está rodando.</dd>
+ <dt><code>paused</code></dt>
+ <dd>A animação está parada e a propriedade {{domxref("Animation.currentTime")}} não está sendo atualizada.</dd>
+ <dt><code>finished</code></dt>
+ <dd>A animação alcançou um de seus finais e a propriedade {{domxref("Animation.currentTime")}} não está sendo atualizada.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>No <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">jogo</a> <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice Game</a> , os jogadores podem chegar ao final com a <a href="http://codepen.io/rachelnabors/pen/EPJdJx?editors=0010">Alice chorando em uma poça de lágrimas</a>. No jogo, por razões de performance, as lágrimas só são animadas quando estão visiveis. Então elas devem ficar pausadas enquanto a animação ocorre, como no exemplo:</p>
+
+<pre class="brush: js">// Configurando a animação das lágrimas
+
+tears.forEach(function(el) {
+  el.animate(
+    tearsFalling,
+    {
+      delay: getRandomMsRange(-1000, 1000), // aleatório para cada lágrima
+      duration: getRandomMsRange(2000, 6000), // aleatório para cada lágrima
+      iterations: Infinity,
+      easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
+    });
+  el.playState = 'paused';
+});
+
+
+// Rodar as lágrimas caindo quando o final precisa aparecer.
+
+tears.forEach(function(el) {
+  el.playState = 'playing';
+});
+
+
+// Reseta a animação e coloca o estado em pause.
+
+tears.forEach(function(el) {
+  el.playState = "paused";
+  el.currentTime = 0;
+});
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentários</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#play-state', 'playState')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(39.0)}} [1]</td>
+   <td>{{CompatGeckoDesktop(48)}}<sup>[2]</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>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</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(39.0)}} [1]</td>
+   <td>{{CompatChrome(39.0)}} [1]</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Antes do Chrome 50, este atributo retorna <code>idle</code> para animações que ainda não foram reproduzidas . A partir do Chrome 50, ele retorna <code>paused</code>.</p>
+
+<p>[2] A Web Animations API está ativa por padrão apenas no Firefox Developer Edition e nas versões do Nightly. Você pode habilitá-la em versões beta configurando a preferência <code>dom.animations-api.core.enabled</code> para <code>true</code>, e também desativar em qualquer Firefox mudando esta mesma preferência para <code>false</code>.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}} para outros métodos e propriedades que você pode usar para controlar a animação da página web.</li>
+ <li>Os métodos {{domxref("Animation.play()")}}, {{domxref("Animation.pause()")}}, {{domxref("Animation.finish()")}} conseguem alterar o <code>Animation</code>'s <code>playState</code>.</li>
+</ul>
diff --git a/files/pt-br/web/api/animationevent/animationevent/index.html b/files/pt-br/web/api/animationevent/animationevent/index.html
new file mode 100644
index 0000000000..77fcdeb37e
--- /dev/null
+++ b/files/pt-br/web/api/animationevent/animationevent/index.html
@@ -0,0 +1,134 @@
+---
+title: AnimationEvent()
+slug: Web/API/AnimationEvent/AnimationEvent
+tags:
+  - AnimationEvent
+  - Apps
+  - CSSOM
+  - Experimental
+  - Referencia
+translation_of: Web/API/AnimationEvent/AnimationEvent
+---
+<p>{{APIRef("Web Animations API")}}{{SeeCompatTable}}</p>
+
+<p><code><font face="Open Sans, Arial, sans-serif">O construtor </font><strong>AnimationEvent()</strong></code>retorna o recente criado {{domxref("AnimationEvent")}}, representando um evento em relação a animação.</p>
+
+<h2 id="Síntaxe">Síntaxe</h2>
+
+<pre class="syntaxbox"><em>animationEvent</em> = new AnimationEvent(<em>type</em>, {animationName: <em>aPropertyName</em>,
+                                           elapsedTime  : <em>aFloat</em>,
+                                           pseudoElement: <em>aPseudoElementName</em>});
+</pre>
+
+<h3 id="Argumentos">Argumentos</h3>
+
+<p><em>O construtor <code>AnimationEvent()</code></em><em> também herda argumentos do {{domxref("Event.Event", "Event()")}}.</em></p>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Um {{domxref("DOMString")}} representando o nome do tipo de <code>AnimationEvent</code>. É caso sensitivo e pode ser: <code>'animationstart'</code>, <code>'animationend'</code>, ou <code>'animationiteration'</code>.</dd>
+ <dt><code>animationName</code> {{optional_inline}}</dt>
+ <dd>Um{{domxref("DOMString")}} contendo o valor do {{cssxref("animation-name")}} propriedade CSS associada com a transição. É por padrão <code>""</code>.</dd>
+ <dt><code>elapsedTime</code> {{optional_inline}}</dt>
+ <dd>Um ponto flutuante dando a quantidade de tempo que a animação esteve rodando, em segundos, quando o evento termina, excluindo qualquer tempo que ela passou pausada. Para um evento <code>"animationstart"</code>, <code>elapsedTime</code> é <code>0.0</code> a não ser que haja um valor negativo para <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay" title="The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.">animation-delay</a></code>, nesse caso o evento terminará com <code>elapsedTime contendo</code>  <code>(-1 * </code><em>delay</em><code>)</code>. É por padrão <code>0.0</code>.</dd>
+ <dt><code>pseudoElement</code> {{optional_inline}}</dt>
+ <dd>É um <code>{{domxref("DOMString")}}</code>, começando com<code>"::"</code>, contendo o nome do <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements" title="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> que a animação roda. Se a animação não roda em um pseudo-elementomas em um elemento, então temos um <em>string</em> vazio <code>"" .</code>É por padrão <code>""</code>. </dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent()') }}</td>
+   <td>{{ Spec2('CSS3 Animations')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_os_Navegadores">Compatibilidade com os Navegadores</h2>
+
+<p><code>{{ CompatibilityTable() }}</code></p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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(43.0)}}</td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>pseudoElement</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </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 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("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>pseudoElement</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também </h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Usando animações CSS</a>.</li>
+ <li>Tópicos relacionados a animação CSS, propriedades e regras: <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation" title="The animation CSS property is a shorthand property for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count and animation-direction.">animation</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay" title="The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.">animation-delay</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction" title="The animation-direction CSS property indicates whether the animation should play in reverse on alternate cycles.">animation-direction</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration" title="The animation-duration CSS property specifies the length of time that an animation should take to complete one cycle.">animation-duration</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode" title="The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.">animation-fill-mode</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count" title="The animation-iteration-count CSS property defines the number of times an animation cycle should be played before stopping.">animation-iteration-count</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name" title="The animation-name CSS property specifies a list of animations that should be applied to the selected element. Each name indicates a @keyframes at-rule that defines the property values for the animation sequence.">animation-name</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state" title="The animation-play-state CSS property determines whether an animation is running or paused. You can query this property's value to determine whether or not the animation is currently running; in addition, you can set its value to pause and resume playback of an animation.">animation-play-state</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function" title="The CSS animation-timing-function property specifies how a CSS animation should progress over the duration of each cycle. The possible values are one or several &lt;timing-function>.">animation-timing-function</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes" title="The @keyframes CSS at-rule lets authors control the intermediate steps in a CSS animation sequence by establishing keyframes (or waypoints) along the animation sequence that must be reached by certain points during the animation. This gives you more specific control over the intermediate steps of the animation sequence than you get when letting the browser handle everything automatically.">@keyframes</a></code></li>
+ <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li>
+</ul>
diff --git a/files/pt-br/web/api/animationevent/animationname/index.html b/files/pt-br/web/api/animationevent/animationname/index.html
new file mode 100644
index 0000000000..62a739e4e2
--- /dev/null
+++ b/files/pt-br/web/api/animationevent/animationname/index.html
@@ -0,0 +1,102 @@
+---
+title: AnimationEvent.animationName
+slug: Web/API/AnimationEvent/animationName
+tags:
+  - AnimationEvent
+  - Animação Web
+  - Apps
+  - CSSOM
+  - Propriedade
+  - Referencia
+translation_of: Web/API/AnimationEvent/animationName
+---
+<p><code>{{SeeCompatTable}}{{ apiref("Web Animations API") }}</code></p>
+
+<p><code><font face="Open Sans, Arial, sans-serif">O </font><strong>AnimationEvent.animationName </strong></code>é uma propriedade só de leitura do{{domxref("DOMString")}} contendo o valor de {{cssxref("animation-name")}} propriedade CSS relacionada com a trasição.</p>
+
+<h2 id="Síntaxe">Síntaxe</h2>
+
+<pre class="syntaxbox"><em>name</em> = <em>AnimationEvent</em>.animationName</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{ SpecName('CSS3 Animations', '#AnimationEvent-animationName', 'AnimationEvent.animationName') }}</code></td>
+   <td><code>{{ Spec2('CSS3 Animations')}}</code></td>
+   <td><code>Initial definition.</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_os_Navegadores">Compatibilidade com os Navegadores</h2>
+
+<p><code>{{CompatibilityTable}}</code></p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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("6.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p> </p>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Usando animações CSS</a></li>
+ <li>{{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+ <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li>
+</ul>
diff --git a/files/pt-br/web/api/animationevent/elapsedtime/index.html b/files/pt-br/web/api/animationevent/elapsedtime/index.html
new file mode 100644
index 0000000000..4d04b30c90
--- /dev/null
+++ b/files/pt-br/web/api/animationevent/elapsedtime/index.html
@@ -0,0 +1,103 @@
+---
+title: AnimationEvent.elapsedTime
+slug: Web/API/AnimationEvent/elapsedTime
+tags:
+  - AnimationEvent
+  - Animações Web
+  - Apps
+  - CSSOM
+  - Experimental
+  - Propriedade
+  - Referencia
+translation_of: Web/API/AnimationEvent/elapsedTime
+---
+<p>{{SeeCompatTable}}{{ apiref("Web Animations API") }}</p>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>O <code><strong>AnimationEvent.elapsedTime</strong></code> é uma propriedade só de leitura com um ponto flutuante dando a quantidade de tempo que animação esteve rodando, em segundos, quando o evento termina, excluirá o tempo em que ela esteve em pausa. Para um evento <code>"animationstart" </code>, <code>elapsedTime</code> é <code>0.0</code> a não ser que tenha um valor negativo para {{cssxref("animation-delay")}}, nesse caso o evento irá terminar com <code>elapsedTime</code> contendo <code>(-1 * </code><em>delay</em><code>)</code>.</p>
+
+<h2 id="Síntaxe">Síntaxe</h2>
+
+<pre class="syntaxbox">time = <em>AnimationEvent</em>.elapsedTime</pre>
+
+<h2 id="Especificações">Especificações</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 Animations', '#AnimationEvent-elapsedTime', 'AnimationEvent.elapsedTime') }}</td>
+   <td>{{ Spec2('CSS3 Animations')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_os_Navegadores">Compatibilidade com os Navegadores</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("6.0") }}</td>
+   <td>10.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>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Usando animações CSS.</a></li>
+ <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+ <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li>
+</ul>
diff --git a/files/pt-br/web/api/animationevent/index.html b/files/pt-br/web/api/animationevent/index.html
new file mode 100644
index 0000000000..c2abeb0bf6
--- /dev/null
+++ b/files/pt-br/web/api/animationevent/index.html
@@ -0,0 +1,194 @@
+---
+title: AnimationEvent
+slug: Web/API/AnimationEvent
+tags:
+  - API
+  - Animação Web
+  - Experimental
+  - Expérimental(2)
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Referencia
+  - Référence(2)
+  - TopicStub
+translation_of: Web/API/AnimationEvent
+---
+<p>{{SeeCompatTable}}{{APIRef("Web Animations API")}}</p>
+
+<p>A interface <strong><code>AnimationEvent</code></strong>  representa eventos provendo informações relacionadas a <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations/">animações</a>.</p>
+
+<p><code>{{InheritanceDiagram}}</code></p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>Também propriedades herdadas pelo pai <code>{{domxref("Event")}}</code></em>.</p>
+
+<dl>
+ <dt><code>{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}</code></dt>
+ <dd>O {{domxref("DOMString")}} contém o valor do {{cssxref("animation-name")}} propriedade CSS associada com a transição.</dd>
+ <dt><code>{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}</code></dt>
+ <dd><code><font face="Open Sans, Arial, sans-serif">É um ponto flutuante</font></code> dado pela quantidade de tempo que a animação está rodando, em segundos, quando esse evento termina, excluindo o tempo em que animação esteve pausada. Para o evento <code>"animationstart"</code>, <code>elapsedTime</code> é <code>0.0</code> a não ser que haja um valor negativo para <code>{{cssxref("animation-delay")}}</code>, nesse caso o evento terminará com <code>elapsedTime</code> contendo  <code>(-1 * </code><em>delay</em><code>)</code>.</dd>
+ <dt><code>{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}</code></dt>
+ <dd>Um<code> {{domxref("DOMString")}} </code>começa com  <code>'::'</code>, contendo o nome do <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> onde a animação roda. Se a animação não rodar no pseudo-elemento mas no elemento, então teremos um <em>string </em>vazio <code>' '</code>.</dd>
+</dl>
+
+<h2 id="Constructores">Constructores</h2>
+
+<dl>
+ <dt><code>{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}</code></dt>
+ <dd>Cria um evento <code>AnimationEvent</code> com os dados parâmetros.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Também herda métodos do pai <code>{{domxref("Event")}}</code></em>.</p>
+
+<dl>
+ <dt><code>{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}</code></dt>
+ <dd>Inicializa um <code>AnimationEvent criado usando diminuído </code>{{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} método.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_o_Navegador">Compatibilidade com o Navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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>1.0 {{ property_prefix("webkit") }}</p>
+
+    <p>{{CompatChrome(43.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>10.0</td>
+   <td>12 {{ property_prefix("o") }}<br>
+    12.10<br>
+    15.0 {{ property_prefix("webkit") }}</td>
+   <td>4.0 {{ property_prefix("webkit") }}</td>
+  </tr>
+  <tr>
+   <td>AnimationEvent() constructor</td>
+   <td>
+    <p>{{CompatChrome(43.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>initAnimationEvent() {{non-standard_inline}}{{deprecated_inline}}</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}<br>
+    Removed in {{ CompatGeckoDesktop("23.0") }}</td>
+   <td>10.0</td>
+   <td>12</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>pseudoelement</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<p> </p>
+
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}</td>
+   <td>10.0</td>
+   <td>12 {{ property_prefix("o") }}<br>
+    12.10<br>
+    15.0 {{ property_prefix("webkit") }}</td>
+   <td>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td>AnimationEvent() constructor</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td>initAnimationEvent() {{non-standard_inline}}{{deprecated_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}<br>
+    Removed in {{ CompatGeckoMobile("23.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>pseudoelement</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_animations">Usando animações CSS</a></li>
+</ul>
diff --git a/files/pt-br/web/api/animationevent/initanimationevent/index.html b/files/pt-br/web/api/animationevent/initanimationevent/index.html
new file mode 100644
index 0000000000..e9b0819b98
--- /dev/null
+++ b/files/pt-br/web/api/animationevent/initanimationevent/index.html
@@ -0,0 +1,134 @@
+---
+title: AnimationEvent.initAnimationEvent()
+slug: Web/API/AnimationEvent/initAnimationEvent
+tags:
+  - AnimationEvent
+  - Apps
+  - CSSOM
+  - Método(2)
+  - Não-padrão
+  - Obsolento
+  - Web Animations
+translation_of: Web/API/AnimationEvent/initAnimationEvent
+---
+<p>{{obsolete_header}}{{non-standard_header}}{{ apiref("Web Animations API") }}</p>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>O <code><strong>AnimationEvent.initAnimationEvent() </strong></code>é um método iniciado com o evento da animção criando um depreciativo {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} método.</p>
+
+<p><code>AnimationEvent</code> criado desse modo não é confiável.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Durante o processo de padronização, esse método foi removido das especificações. É que ele foi depreciado e esse processo foi removido da maioria das implementações . <strong>Não use este método</strong>; ao invés, use o construtor padrão, {{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}, para criar um sintético {{domxref("AnimationEvent")}}.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>animationEvent</em>.initAnimationEvent(<em>typeArg</em>, <em>canBubbleArg</em>, <em>cancelableArg</em>, <em>animationNameArg</em>, <em>elapsedTimeArg</em>);</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>typeArg</code></dt>
+ <dd>Um {{domxref("DOMString")}} identificado com um tipo específico de evento animação que ocorreu. Os seguintes valores são aceitados:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Valor</th>
+    <th scope="col">Significado</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>animationstart</code></td>
+    <td>A animação começou.</td>
+   </tr>
+   <tr>
+    <td><code>animationend</code></td>
+    <td>A animação terminou.</td>
+   </tr>
+   <tr>
+    <td><code>animationiteration</code></td>
+    <td>A iteração corrente se completou.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>canBubbleArg</code></dt>
+ <dd>Uma {{domxref("Boolean")}} bandeira indicando se o evento pode ser bolha (<code>true</code>) ou não (<code>false)</code>.</dd>
+ <dt><code>cancelableArg</code></dt>
+ <dd>Uma {{domxref("Boolean")}} bandeira indicando se o evento associado pode ser evitado (<code>true</code>) ou não (<code>false)</code>.</dd>
+ <dt><code>animationNameArg</code></dt>
+ <dd>Um {{domxref("DOMString")}} contendo o valor do{{cssxref("animation-name")}} propriedade CSS associada com a transição.</dd>
+ <dt><code>elapsedTimeArg</code></dt>
+ <dd>Um ponto flutuante indicando a quantidade de tempo que a animação esteve rodando, em segundos, com o tempo do evento terminar, excluirá-se o tempo em que a animação esteve em pausa.Para um <code>"animationstart"</code> evento, <code>elapsedTime</code> é <code>0.0</code> a não ser que haja um valor negativo para <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay" title="The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.">animation-delay</a></code>, nesse caso o evento irá terminar com <code>elapsedTime</code> contendo <code>(-1 * </code><em>delay</em><code>)</code>.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<p><em>Esse método é não-padrão e não é parte de qualquer especificação, no entanto ele esteve presente nos primeiros rascunhos de {{SpecName("CSS3 Animations")}}.</em></p>
+
+<h2 id="Compatibilidade_com_os_Navegadores">Compatibilidade com os Navegadores</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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("6.0") }}<br>
+    Removed in {{ CompatGeckoDesktop("23.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p> </p>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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("6.0") }}<br>
+    Removed in {{ CompatGeckoMobile("23.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li>
+ <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+ <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li>
+</ul>
diff --git a/files/pt-br/web/api/animationevent/pseudoelement/index.html b/files/pt-br/web/api/animationevent/pseudoelement/index.html
new file mode 100644
index 0000000000..0e68a22532
--- /dev/null
+++ b/files/pt-br/web/api/animationevent/pseudoelement/index.html
@@ -0,0 +1,102 @@
+---
+title: AnimationEvent.pseudoElement
+slug: Web/API/AnimationEvent/pseudoElement
+tags:
+  - AnimationEvent
+  - Animação Web
+  - Apps
+  - CSSOM
+  - Propriedade
+  - Referencia
+translation_of: Web/API/AnimationEvent/pseudoElement
+---
+<p>{{SeeCompatTable}}{{ apiref("Web Animations API") }}</p>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>O <code><strong>AnimationEvent.pseudoElement</strong></code> é uma propriedade só de leitura do {{domxref("DOMString")}}, começando com <code>'::'</code>, contendo o nome do <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> em que a animação roda. Se a animação não roda em um pseudo-elemento mas em um elemento, então temos uma<em> string</em> vazia : <code>''</code><code>.</code></p>
+
+<h2 id="Síntaxe">Síntaxe</h2>
+
+<pre class="syntaxbox"><em>name</em> = <em>AnimationEvent</em>.pseudoElement</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-pseudoElement', 'AnimationEvent.pseudoElement') }}</td>
+   <td>{{ Spec2('CSS3 Animations')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_os_Navegadores">Compatibilidade com os Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<p> </p>
+
+<p> </p>
+
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li>
+ <li>{{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+ <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li>
+</ul>
diff --git a/files/pt-br/web/api/api_de_desempenho/index.html b/files/pt-br/web/api/api_de_desempenho/index.html
new file mode 100644
index 0000000000..1b6997e293
--- /dev/null
+++ b/files/pt-br/web/api/api_de_desempenho/index.html
@@ -0,0 +1,138 @@
+---
+title: API de Desempenho
+slug: Web/API/API_de_Desempenho
+translation_of: Web/API/Performance_API
+---
+<div>{{DefaultAPISidebar("High Resolution Time")}}</div>
+
+<p>The <a href="https://www.w3.org/TR/hr-time/">High Resolution Time</a> standard defines a {{domxref("Performance")}} interface that supports client-side latency measurements within applications. The {{domxref("Performance")}} interfaces are considered <em>high resolution</em> because they are accurate to a thousandth of a millisecond (subject to hardware or software constraints). The interfaces support a number of use cases including calculating frame-rates (potentially important in animations) and benchmarking (such as the time to load a resource).</p>
+
+<p>Since a platform's <em>system clock</em> is subject to various <em>skews</em> (such as NTP adjustments), the interfaces support a <em>monotonic clock</em> i.e. a clock that is always increasing. As such, the <code>Performance</code> API defines a {{domxref("DOMHighResTimeStamp")}} type rather than using the {{jsxref("Date.now","Date.now()")}} interface.</p>
+
+<h2 id="DOMHighResTimeStamp">DOMHighResTimeStamp</h2>
+
+<p>The {{domxref("DOMHighResTimeStamp")}} type, as its name implies, represents a high resolution point in time. This type is a <code>double</code> and is used by the performance interfaces. The value could be a discrete point in time or the difference in time between two discrete points in time.</p>
+
+<p>The unit of <code>DOMHighResTimeStamp</code> is milliseconds and should be accurate to 5 µs (microseconds). However, If the browser is unable to provide a time value accurate to 5 microseconds (because, for example, due to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<p>The <code>{{domxref("Performance")}}</code> interface has two methods. The {{domxref("Performance.now","now()")}} method returns a {{domxref("DOMHighResTimeStamp")}} whose value that depends on the {{domxref("PerformanceTiming.navigationStart","navigation start")}} and scope. If the scope is a window, the value is the time the browser context was created and if the scope is a {{domxref("Worker","worker")}}, the value is the time the worker was created.</p>
+
+<p>The {{domxref("Performance.toJSON","toJSON()")}} method returns a serialization of the {{domxref("Performance")}} object, for those attributes that can be serialized.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p>The <code>{{domxref("Performance")}}</code> interface has two properties. The {{domxref("Performance.timing","timing")}} property returns a {{domxref("PerformanceTiming")}} object containing latency-related performance information such as the start of navigation time, start and end times for redirects, start and end times for responses, etc.</p>
+
+<p>The <code>{{domxref("Performance.navigation","navigation")}}</code> property returns a {{domxref("PerformanceNavigation")}} object representing the type of navigation that occurs in the given browsing context, such as the page was navigated to from history, the page was navigated to by following a link, etc.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref('Performance')}}</dt>
+ <dd>Provides methods and properties containing timing-related performance information for the given page.</dd>
+ <dt>{{domxref('PerformanceEntry')}}</dt>
+ <dd>Provides methods and properties the encapsulate a single performance metric that is part of the performance timeline.</dd>
+ <dt>{{domxref('PerformanceFrameTiming')}}</dt>
+ <dd>Provides methods and properties containing frame timing data about the browser's event loop.</dd>
+ <dt>{{domxref('PerformanceMark')}}</dt>
+ <dd>An abstract interface for <a href="/en-US/docs/Web/API/PerformanceEntry"><code>performance entries</code></a> with an <a href="/en-US/docs/Web/API/PerformanceEntry/entryType"><code>entry type</code></a> of "<code>mark</code>". Entries of this type are created by calling <a href="/en-US/docs/Web/API/Performance/mark"><code>performance.mark()</code></a> to add a named <a href="/en-US/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> (the mark) to the browser's performance timeline.</dd>
+ <dt>{{domxref('PerformanceMeasure')}}</dt>
+ <dd>An abstract interface for <a href="/en-US/docs/Web/API/PerformanceEntry"><code>performance entries</code></a> with an <a href="/en-US/docs/Web/API/PerformanceEntry/entryType"><code>entry type</code></a> of "<code>measure</code>". Entries of this type are created by calling <a href="/en-US/docs/Web/API/Performance/measure"><code>performance.measure()</code></a> to add a named<a href="/en-US/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> (the measure) between two marks to the browser's performance timeline.</dd>
+ <dt>{{domxref('PerformanceNavigationTiming')}}</dt>
+ <dd>Provides methods and properties to store and retrieve <a href="/en-US/docs/Web/API/DOMHighResTimeStamp"><code>high resolution timestamps</code></a> or metrics regarding the browser's document navigation events.</dd>
+ <dt>{{domxref('PerformanceObserver')}}</dt>
+ <dd>Provides methods and properties used to observe performance measurement events and be notified of new <a href="/en-US/docs/Web/API/PerformanceEntry">performance entries</a> as they are recorded in the browser's performance timeline.</dd>
+ <dt>{{domxref('PerformanceResourceTiming')}}</dt>
+ <dd>Provides methods and properties for retrieving and analyzing detailed network timing data regarding the loading of an application's resources.</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('Highres Time')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time Level 2')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+   <td>Adds <code>performance</code> attribute on <code>Window</code> and <code>WorkerGlobalScope</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time Level 3')}}</td>
+   <td>{{Spec2('Highres Time Level 3')}}</td>
+   <td>Add <code>timeOrigin</code> property to <code>Performance</code> interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Frame Timing')}}</td>
+   <td>{{Spec2('Frame Timing')}}</td>
+   <td>Adds <code>PerformanceFrameTiming</code> interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Navigation Timing')}}</td>
+   <td>{{Spec2('Navigation Timing')}}</td>
+   <td>Adds the <code>PerformanceTiming</code> and <code>PerformanceNavigation</code> interfaces. Adds <code>timing</code> and <code>navigation</code> properties to the <code>Performance</code> interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Navigation Timing Level 2')}}</td>
+   <td>{{Spec2('Navigation Timing Level 2')}}</td>
+   <td>Adds the <code>PerformanceNavigationTiming</code> interface. Obsolete's the the <code>PerformanceTiming</code> interface, the <code>PerformanceNavigation</code> interface, as well as the <code>timing</code> and <code>navigation</code> properties to the <code>Performance</code> interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Performance Timeline')}}</td>
+   <td>{{Spec2('Performance Timeline')}}</td>
+   <td>Adds the <code>PerformanceEntry</code> interface, the <code>PerformanceEntryList</code> type, as well as the <code>getEntries()</code>, <code>getEntriesByType()</code>, and <code>getEntriesByName()</code> methods on the <code>Performance</code> interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Performance Timeline Level 2')}}</td>
+   <td>{{Spec2('Performance Timeline Level 2')}}</td>
+   <td>Adds serializer to the <code>PerformanceEntry</code> interface as well as adding the <code>PerformanceObserver</code> interface and callback</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Resource Timing')}}</td>
+   <td>{{Spec2('Resource Timing')}}</td>
+   <td>Adds the <code>PerformanceResourceTiming</code> interface. Adds the <code>clearResourceTimings()</code> method, the <code>setResourceTimingBufferSize()</code> method, and the <code>onresourcetimingbufferfull</code> event handler to the <code>Performance</code> interface. Also adds the <code>Timing-Allow-Origin</code> response header.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Resource Timing 2')}}</td>
+   <td>{{Spec2('Resource Timing 2')}}</td>
+   <td>Adds the <code>nextHopProtocol</code>, <code>workerStart</code>, <code>transferSize</code>, <code>encodedBodySize</code>, and <code>decodedBodySize</code> properties to the <code>PerformanceResourceTiming</code> interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Resource Timing 3')}}</td>
+   <td>{{Spec2('Resource Timing 3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing')}}</td>
+   <td>{{Spec2('User Timing')}}</td>
+   <td>Adds <code>mark()</code>, <code>clearMarks()</code>, <code>measure()</code> and <code>clearMeasures()</code> methods to the <code>Performance</code> interface. Adds the <code>PerformanceMark</code> and <code>PeformanceMeasure</code> interfaces.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing Level 2')}}</td>
+   <td>{{Spec2('User Timing Level 2')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Implementation_status">Implementation status</h2>
+
+<p>As shown in the {{domxref("Performance")}} interface's <a href="/Web/API/Performance#Browser_compatibility">Browser Compatibility</a> table, most of these interfaces are broadly implemented by desktop browsers.</p>
+
+<p>To test your browser's support for the {{domxref("Performance")}} interface, run the <code><a href="http://mdn.github.io/web-performance/perf-api-support.html">perf-api-support</a></code> application.</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="http://w3c.github.io/perf-timing-primer/">A Primer for Web Performance Timing APIs</a></li>
+</ul>
diff --git a/files/pt-br/web/api/api_push/best_practices/index.html b/files/pt-br/web/api/api_push/best_practices/index.html
new file mode 100644
index 0000000000..9b0fafd2b7
--- /dev/null
+++ b/files/pt-br/web/api/api_push/best_practices/index.html
@@ -0,0 +1,73 @@
+---
+title: Melhores práticas
+slug: Web/API/API_Push/Best_Practices
+tags:
+  - Apps
+  - Iniciante
+  - Melhores Práticas
+  - Notificações
+  - Push API
+  - Usabilidade
+translation_of: Web/API/Push_API/Best_Practices
+---
+<p>{{draft}}</p>
+
+<p><span class="seoSummary">Este artigo proporciona um compilado das melhores práticas a serem usadas enquanto estiver desenvolvendo websites e aplicações que usem Notificações push para engajamento de usuários.</span></p>
+
+<blockquote>
+<p>“Se feito de uma maneira correta, as notificações ajudam os usuarios, se não, so irritam.” — Conversa entre dois desenvolvedores a respeito da etica das notificações push.</p>
+</blockquote>
+
+<h2 id="Visão_Geral_do_web_push_notifications">Visão Geral do <em>web push notifications</em></h2>
+
+<p><em>Notificações Web Push</em> (criadas usando uma combinação das APIs de <em><a href="/en-US/docs/Web/API/Notifications_API">Notificações</a></em>, <em><a href="/en-US/docs/Web/API/Push_API">Push</a></em> e <em><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker</a></em>) são parte de um movimento crescente em que desenvolvedores e comerciantes estão usando para conseguir atenção para seus sites. Uma procura rápida pelo termo "<em>web push notifications</em>", irá resultar em vários artigos, em que especialistas em marketing que acreditam que deve-se usar a API de Push para recapturar a atenção de pessoas que saíram de seu site para que possam terminar o que estavam fazendo, por exemplo, uma compra, ou então enviar as últimas notícias e até recomendação de produtos</p>
+
+<h3 id="O_Lado_obscuro">O Lado obscuro</h3>
+
+<p>Essa novidade oferece uma oportunidade nova e <span id="docs-internal-guid-5e44340f-7fff-f226-7820-a1cf35011ecf" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">inexplorada</span> para sites empresariais chegarem aos seus consumidores finais. Seu <span id="docs-internal-guid-c76c779d-7fff-d4b2-af33-b77f56148d66" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">usuário</span> trocou de aba para responder um email? Consiga-os de volta com uma oferta que expira em um tempo limitado ou <span id="docs-internal-guid-3522ff41-7fff-722b-9245-fb96096f525a" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">oferecendo</span> frete grátis, o qual ele não vai poder ignorar</p>
+
+<p>Mas <span id="docs-internal-guid-c3a7fd45-7fff-138e-d952-b7fb4778fda0" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">sério</span>, qual o melhor uso das notificações push? Ou é apenas uma nova interação dos bons e velhos pop-ups?</p>
+
+<blockquote>
+<p>“<span class="tlid-translation translation" lang="pt"><span title="">O envio de notificações push não corre o risco de acabar na pasta de spam.</span> <span title="">Nem pode ser bloqueado por bloqueadores de anúncios.</span> <span title="">Ele aparece na sua área de trabalho, mesmo quando o site está fechado.</span> <span title="">No celular, ele aparece na barra de notificações, assim como as notificações por push do aplicativo, mesmo quando o navegador não está em execução</span></span>.” — um site de marketing anonimo</p>
+</blockquote>
+
+<h3 id="Bons_usos_das_notificações">Bons usos das notificações</h3>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Mas há também um lado bom no que se diz respeito as notificações por push.</span> <span title="">Digamos que você e sua equipe usem normalmente um programa de bate-papo para se comunicar, mas hoje você está feliz e saltitante trabalhando e surge um problema.</span> <span title="">Digamos que seu gerente tenha encontrado um problema nas aprovações e queira receber seu feedback sobre algo antes que ela prossiga.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Neste documento, falaremos sobre o uso correto das notificações por push da web.</span> <span title="">Às vezes, eles podem eliminar a frustração e o aborrecimento e, às vezes, causá-los. Cabe a você, como desenvolvedor, fazer recomendações (e decisões) sábias sobre o uso de notificações por push.</span></span></p>
+
+<h2 id="O_que_se_espera_alcançar_com_as_notificações_push">O que se espera alcançar com as notificações push?</h2>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Como tudo, com grande poder vem uma grande responsabilidade.</span> <span title="">Toda notificação push devem ser úteis e sensíveis ao tempo, o usuário sempre deve fornecer a permissão antes de recebe-la primeiro e deve-se oferecer uma maneira fácil de optar por não receber mais no futuro.</span></span></p>
+
+<p>Temos que responder algumas perguntas basicas para verificar se as notificações são necessarias:</p>
+
+<ul>
+ <li><span class="tlid-translation translation" lang="pt"><span title="">Existe alguém esperando em tempo real por uma resposta?</span> <span title="">No exemplo acima, o gerente aguarda sua resposta e, portanto, uma notificação por push é apropriada.</span></span></li>
+ <li><span class="tlid-translation translation" lang="pt"><span title="">A atualização em tempo real é necessária?</span> <span title="">Eu uso um serviço que agrega diferentes fontes de notícias de mídia social.</span> <span title="">Quando uma história em que estou interessado está em alta, gostaria de receber uma notificação!</span></span></li>
+ <li><span class="tlid-translation translation" lang="pt"><span title="">Há notícias de última hora relevantes?</span> <span title="">É aqui que fica um pouco complicado.</span> <span title="">Às vezes, os sites de notícias solicitam notificações por push para que possam dizer "Olhe para mim! Olhe para mim!"</span> <span title="">Tudo se resume ao que o usuário deseja, e você pode usar o comportamento para determinar a interação.</span> <span title="">Por exemplo, se o usuário visualizar mais de um artigo ou permanecer na sua página por vários minutos, ele poderá estar interessado em receber atualizações.</span></span></li>
+</ul>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Além da questão de saber se uma notificação por push é necessária, existem muitas variedades de notificações por push, variando de casual e efêmera a persistente e exigente.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Aconselhamos que você use as notificações que exigem uma interação de forma conciente e com moderação, pois estas podem irritar seu usuario e afasta-lo.</span> <span title="">Suas notificações devem ser acolhedoras, não hostis.</span></span></p>
+
+<h2 id="Gerando_confiança">Gerando confiança</h2>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Alguns estudos mostraram que até 60% das notificações por push não chegam ao usuário final.</span> <span title="">Permitir que seu usuario receba notificações por push em tempo real exige confiança, por parte do aplicativo.</span> <span title="">Você pode criar confiança ao ter um site bem projetado que forneça um bom conteúdo e que mostre respeito pelo usuário alem de um valor claro para que o usuario aceite as notificações push.</span></span></p>
+
+<h2 id="Mitigações_dos_navegadores">Mitigações dos navegadores</h2>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Por causa dos abusos da utilização das notificações por push no passado, os desenvolvedores de navegadores começaram a implementar estratégias para ajudar a mitigar esse problema.</span> <span title="">Por exemplo, o Safari 12.1 agora exige - e outros navegadores já o fazem ou estão planejando</span></span><sup><a href="#mitigations-footnote-1">[1]</a></sup> fazer—<span class="tlid-translation translation" lang="pt"><span title="">que o usuário interaja com a página de alguma forma antes que ela possa solicitar permissão para executar notificações por push, assim como já acontece com os popups.</span> <span title="">Isso pelo menos impede que o usuário receba espontaneamente essa pergunta em páginas da Web que apenas olharam de uma só vez, raramente ou nunca mais.</span></span></p>
+
+<p><a id="mitigations-footnote-1" name="mitigations-footnote-1">[1]</a> No caso do Firefox, veja {{bug(1524619)}}, podemos observar que Firefox 68 implementa isso, desabilitado por padrão, usando a preferência <code>dom.webnotifications.requireuserinteraction</code>.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a></li>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li>
+ <li><a href="/en-US/docs/Web/API/Push_API">Push API</a></li>
+</ul>
diff --git a/files/pt-br/web/api/api_push/index.html b/files/pt-br/web/api/api_push/index.html
new file mode 100644
index 0000000000..563b711cd8
--- /dev/null
+++ b/files/pt-br/web/api/api_push/index.html
@@ -0,0 +1,172 @@
+---
+title: API Push
+slug: Web/API/API_Push
+tags:
+  - API
+  - Experimental
+  - Notificações
+  - Push
+  - Referencia
+  - Service Workers
+translation_of: Web/API/Push_API
+---
+<div>{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}</div>
+
+<p>A <strong>API Push </strong>torna possível que aplicações web recebam mensagens enviadas a elas de um servidor, indepententemente de aplicação estar ou não em primeiro plano, ou até mesmo carregada, em um agente de usuário. Isso permite que desenvolvedores entreguem notificações e atualizações assíncronas a usuários que optarem por elas, resultando num melhor engajamento com conteúdo novo oportuno.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Esta documentação cobre a especificação W3C da API Push; se você procura pela documentação do sistema de notificação proprietária do mecanismo push, veja<a href="/en-US/docs/Web/API/Simple_Push_API"> Simple Push</a>.</p>
+</div>
+
+<h2 id="Conceitos_e_uso_de_Push">Conceitos e uso de Push</h2>
+
+<p>Para uma aplicação receber mensagens push, ela precisa ter um <a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a> ativo. Quando o service worker está ativo, ele pode se inscrever para utilizar notificações push {{domxref("PushManager.subscribe()")}}.</p>
+
+<p>O resultado de {{domxref("PushSubscription")}} inclui toda informação que a aplicação precisa para receber uma mensagem push: um endpoint e a chave encriptada necessária para o envio de dados.</p>
+
+<p>O service worker será iniciado conforme o necessário para lidar com as mensagens recebidas, que são entregues ao manipulador de evento {{domxref("ServiceWorkerGlobalScope.onpush")}} . Isto permite que a aplicação reaja a cada mensagem recebida, por exemplo para exibir a notificação ao usuário (usando {{domxref("ServiceWorkerRegistration.showNotification()")}}.)</p>
+
+<p>Cada assinatura é única para um service worker.  O endpoint para a assinatura é uma <a href="http://www.w3.org/TR/capability-urls/">capability URL</a> única: o conhecimento do endpoint é tudo que é necessário para enviar uma mensagem para sua aplicação. A URL do endpoint precisa ser mantida em segredo, ou outras aplicações estranhas poderão enviar mensagens push para a sua aplicação.</p>
+
+<p>A ativação de um service worker para entregar mensagens push pode resultar em um aumento de uso de recursos, particularmente de bateria. Diferentes navegadores tem diferentes formas para lidar com isso — atualmente não existe uma forma padrão. Firefox permite um número limitado (cota) de mensagens push para serem enviadas para uma aplicação, embora as mensagens Push que gerem notificações são isentas deste limite.  O limite é atualizado a cada site visitado. Numa comparação, Chrome não aplica nenhum limite, mas requer que cada mensagem push exiba uma notificação.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: A partir do Gecko 44, a cota permitida de mensagens push por aplicação não é incrementada quando uma nova notificação é disparada quando outra está visível, por um período de três segundos. Isso lida com casos em que várias notificações são recebidas ao mesmo tempo, mas nem todas estão visíveis.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Chrome atualmente requer que você crie um projeto no <a href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a> para enviar mensagens push e use um número do projeto e chave da API para o envio de notificações push. Isto também requer um <em>app manifest</em> com alguns parâmetros especiais para usar o serviço. Essa restrição deverá ser removida no futuro.</p>
+</div>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("PushEvent")}}</dt>
+ <dd>Representa uma ação push enviada para o <a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope">global scope</a> de um {{domxref("ServiceWorker")}}. Ele contém informações enviadas de uma aplicação para um {{domxref("PushSubscription")}}.</dd>
+ <dt>{{domxref("PushManager")}}</dt>
+ <dd>Fornece uma forma de receber notificações de servidor third-party bem como solicitar URL para notificações push. Essa interface substitui a funcionalidade oferecida que está obsoleta {{domxref("PushRegistrationManager")}} interface.</dd>
+ <dt>{{domxref("PushMessageData")}}</dt>
+ <dd>Fornece acesso aos dados push enviados por um servidor, e inclui métodos para manipular os dados recebidos.</dd>
+ <dt>{{domxref("PushSubscription")}}</dt>
+ <dd>Fornece a URL de assinatura do endpoint e permite o cancelamento da assinatura de um serviço push.</dd>
+</dl>
+
+<h2 id="Service_worker_additions">Service worker additions</h2>
+
+<p>As seguintes informações adicionais para a <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> foram especificadas na Push API spec, para fornecer um ponto de entrada para usar mensagens Push, e para monitorar e responder os eventos de envio e assinatura.</p>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt>
+ <dd>Retorna uma referência para a interface {{domxref("PushManager")}} para administrar assinaturas push incluindo subscrever, obter uma assinatura ativa e acessar o status de permissão de envio. Este é o ponto de entrada para usar mensagens Push.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.onpush")}}</dt>
+ <dd>Um manipulador de eventos disparado sempre que um evento  {{Event("push")}} ocorre; isto é, sempre que uma mensagem do servidor de envio for recebida.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}</dt>
+ <dd>Um manipulador de eventos disparado sempre que um evento  {{Event("pushsubscriptionchange")}} ocorre; por exemplo, quando uma assinatura push está inválida, ou está prestes a ser invalidada (ex. quando um serviço push service define um tempo de expiração.)</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Push API")}}</td>
+   <td>{{Spec2("Push API")}}</td>
+   <td>Definição Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Browsers">Compatibilidade em Browsers</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(44.0)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("PushEvent.data")}},<br>
+    {{domxref("PushMessageData")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(44.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>Funcionalidade</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>Suporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("PushEvent.data")}},<br>
+    {{domxref("PushMessageData")}}</td>
+   <td>{{CompatNo}}</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] Atualmente disponível apenas nas versões desktop do Firefox; ainda, mensagens push são encaminhadas apenas quando o Firefox está em execução.</p>
+
+<p>[2] Ainda não implementado. Veja <a href="https://dev.modern.ie/platform/status/pushapi/">Microsoft Edge status information</a>.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Usando Push API</a></li>
+ <li><a href="https://github.com/chrisdavidmills/push-api-demo">Push API Demo</a>, no Github</li>
+ <li><a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>, Matt Gaunt</li>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li>
+</ul>
diff --git a/files/pt-br/web/api/api_web_audio/index.html b/files/pt-br/web/api/api_web_audio/index.html
new file mode 100644
index 0000000000..8f582eb524
--- /dev/null
+++ b/files/pt-br/web/api/api_web_audio/index.html
@@ -0,0 +1,480 @@
+---
+title: API Web Áudio
+slug: Web/API/API_Web_Audio
+tags:
+  - Web Audio API
+  - api de áudio
+  - áudio api
+  - áudio web
+translation_of: Web/API/Web_Audio_API
+---
+<div class="summary">
+<p>A API de áudio da web disponibiliza um poderoso e versátil sistema de controle de áudio para a Web, permitindo aos desenvolvedores escolher arquivos de áudio, adicionar efeitos a estes arquivos, criar reprodutores de áudio, aplicar <em>spatial effects</em> (como <em>panning</em>) e muito mais.</p>
+</div>
+
+<h2 id="Web_audio_conceitos_e_uso">Web audio: conceitos e uso</h2>
+
+<p>A API de Web audio envolve manipulação de operações com áudio dentro de um <strong>contexto de áudio</strong>, e foi desenvolvida para permitir o <strong>roteamento</strong><strong> </strong><strong>modular</strong>. Operações básicas de áudio são feitas com <strong><em>audio nodes </em>(nós de áudio</strong>), que são ligados para formar <strong>gráficos de</strong><strong> roteamento </strong><strong>de áudio</strong>. Várias fontes - com diferentes tipos de <em>layout</em> de canal - são suportados mesmo em um único contexto. Este <em>design</em> modular permite flexibilidade para criar funções de áudio complexas com efeitos dinâmicos.</p>
+
+<p><em>Audio nodes</em> são ligados pelas suas entradas e saídas, formando uma cadeia que começa com uma ou mais fontes, passa por um ou mais <em>nodes </em>e então acaba em um destino (embora você não tenha que fornecer um destino, por exemplo, se você quiser apenas visualizar alguns dados de áudio). Um fluxo de trabalho simples, com Web áudio, seria algo parecido com isso:</p>
+
+<ol>
+ <li>Crie um contexto de áudio</li>
+ <li>Dentro do contexto, crie fontes de áudio — como <code>&lt;audio&gt;</code>, oscilador, <em>stream</em></li>
+ <li>Crie efeitos de áudio, como <em>reverb</em>, <em>biquad filter</em>, <em>panner</em>, <em>compressor</em></li>
+ <li>Escolha o destino final de áudio, por exemplo os auto-falantes de seu sistema</li>
+ <li>Conecte as fontes de áudio com os efeitos, e os efeitos com o destino.</li>
+</ol>
+
+<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/7893/web-audio-api-flowchart.png" style="display: block; height: 113px; margin: 0px auto; width: 635px;"></p>
+
+<p>O sincronismo é controlado com alta precisão e baixa latência, permitindo aos desenvolvedores escrever códigos que respondam com precisão a eventos e capazes de gerar exemplos específicos, mesmo com uma alta taxa de amostragem. Dessa forma, aplicações como baterias eletrônicas e seqüenciadores estarão facilmente ao alcance dos desenvolvedores.</p>
+
+<p>A API de Web Audio também permite o controle de como o áudio será ordenado. Usando um sistema baseado em um modelo de<em> source-listener</em>, a API permite controlar os painéis de<em> modelo</em> para serem usados e tratados com atenuação de distância induzida ou <em>doppler shift</em> induzido por uma fonte em movimento (ou um ouvinte em movimento).</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode ver mais detalhes sobre a teoria da API de Web Audio em nosso artigo <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a>.</p>
+</div>
+
+<h2 id="Web_Audio_Interfaces_da_API">Web Audio: Interfaces da API</h2>
+
+<p>A API de Web Audio possui um total de 28 interfaces e eventos associados, que nós dividimos e categorizamos em 9 funcionalidades.</p>
+
+<h3 id="Definições_gerais_de_grafos_de_áudio_(audio_graph)">Definições gerais de grafos de áudio (audio graph)</h3>
+
+<p>Definições gerais que moldam os grafos de áudio no uso da API de Web Audio.</p>
+
+<dl>
+ <dt>{{domxref("AudioContext")}}</dt>
+ <dd>A interface <strong><code>AudioContext</code></strong> representa um grafo de processamento de áudio construído a partir de módulos de áudio ligados entre si, cada um representado por um {{domxref("AudioNode")}}. Um contexto de áudio (audio context) controla a criação dos<em>nós </em>que ele contém e a execução do processamento de áudio, ou a decodificação. Como tudo acontece dentro de um contexto, você deve criar um <code><strong>AudioContext</strong></code> antes de fazer qualquer outra coisa.</dd>
+ <dt>{{domxref("AudioNode")}}</dt>
+ <dd>A interface <code><strong>AudioNode</strong></code> representa um módulo de processamento de áudio como uma fonte de áudio (por exemplo, um HTML {{HTMLElement("áudio")}} ou um elemento {{HTMLElement("vídeo")}}), destino de áudio, módulo de processamento intermediário (por exemplo, um filtro como {{domxref("BiquadFilterNode")}}, ou controle de volume, como {{domxref("GainNode")}}).</dd>
+ <dt>{{domxref("AudioParam")}}</dt>
+ <dd>A interface <code><strong>AudioParam</strong></code> representa um parâmetro relacionado ao áudio, como um parâmetro de um {{domxref("AudioNode")}}. Ele pode ser configurado com um valor específico ou uma mudança de valor, e pode ser programado para "acontecer" em um momento específico e seguindo um padrão específico.</dd>
+ <dt>{{event("ended_(Web_Audio)", "ended")}} (event)</dt>
+ <dd>O evento <code>ended</code> é disparado quando a reprodução parou porque o fim da mídia foi atingido.</dd>
+</dl>
+
+<h3 id="Definindo_fontes_de_áudio">Definindo fontes de áudio</h3>
+
+<p>Interfaces que definem fontes de áudio para uso na API de Web Audio.</p>
+
+<dl>
+ <dt>{{domxref("OscillatorNode")}}</dt>
+ <dd>A interface <strong><code>OscillatorNode</code></strong> representa uma onda senoidal. Esta interface é um módulo de processamento de áudio que gera uma onda senoidal com determinada frequência.</dd>
+ <dt>{{domxref("AudioBuffer")}}</dt>
+ <dd>A interface <strong><code>AudioBuffer</code></strong> representa uma pequena porção de áudio armazenada na memória, criada a partir de um arquivo de áudio usando o método {{ domxref("AudioContext.decodeAudioData()") }}, ou criado com os dados brutos usando o método {{ domxref("AudioContext.createBuffer()") }}. Uma vez decodificado neste formato o áudio pode ser colocada em um {{ domxref("AudioBufferSourceNode") }}.</dd>
+ <dt>{{domxref("AudioBufferSourceNode")}}</dt>
+ <dd>A interface AudioBufferSourceNode representa uma fonte de áudio que consiste em dados de áudio na memória, armazenados em um {{domxref ("AudioBuffer")}}. É um {{domxref ("AudioNode")}} que atua como uma fonte de áudio.</dd>
+ <dt>{{domxref("MediaElementAudioSourceNode")}}</dt>
+ <dd>A interface <code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong>  representa uma fonte de audio consiste de um HTML5 {{ htmlelement("audio") }} ou {{ htmlelement("video") }} elemento. É uma {{domxref("AudioNode")}} que atua como uma fonte de áudio.</dd>
+ <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt>
+ <dd>The <code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> interface represents an audio source consisting of a <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (such as a webcam or microphone.) It is an {{domxref("AudioNode")}} that acts as an audio source.</dd>
+</dl>
+
+<h3 id="Definindo_filtros_de_efeitos_de_áudio">Definindo filtros de efeitos de áudio</h3>
+
+<p>Interfaces para definição de efeitos que você deseja aplicar em suas fontes de áudio.</p>
+
+<dl>
+ <dt>{{domxref("BiquadFilterNode")}}</dt>
+ <dd>The <strong><code>BiquadFilterNode</code></strong><strong> </strong>interface represents a simple low-order filter. It is an {{domxref("AudioNode")}} that can represent different kinds of filters, tone control devices or graphic equalizers. A <code>BiquadFilterNode</code> always has exactly one input and one output.</dd>
+ <dt>{{domxref("ConvolverNode")}}</dt>
+ <dd>The <code><strong>Convolver</strong></code><strong><code>Node</code></strong><strong> </strong>interface is an {{domxref("AudioNode")}} that performs a Linear Convolution on a given AudioBuffer, often used to achieve a reverb effect.</dd>
+ <dt>{{domxref("DelayNode")}}</dt>
+ <dd>The <strong><code>DelayNode</code></strong><strong> </strong>interface represents a <a href="http://en.wikipedia.org/wiki/Digital_delay_line" title="http://en.wikipedia.org/wiki/Digital_delay_line">delay-line</a>; an {{domxref("AudioNode")}} audio-processing module that causes a delay between the arrival of an input data and its propagation to the output.</dd>
+ <dt>{{domxref("DynamicsCompressorNode")}}</dt>
+ <dd>The <strong><code>DynamicsCompressorNode</code></strong> interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.</dd>
+ <dt>{{domxref("GainNode")}}</dt>
+ <dd>The <strong><code>GainNode</code></strong><strong> </strong>interface represents a change in volume. It is an {{domxref("AudioNode")}} audio-processing module that causes a given <em>gain</em> to be applied to the input data before its propagation to the output.</dd>
+ <dt>{{domxref("WaveShaperNode")}}</dt>
+ <dd>The <strong><code>WaveShaperNode</code></strong><strong> </strong>interface represents a non-linear distorter. It is an {{domxref("AudioNode")}} that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.</dd>
+ <dt>{{domxref("PeriodicWave")}}</dt>
+ <dd>Used to define a periodic waveform that can be used to shape the output of an {{ domxref("OscillatorNode") }}.</dd>
+</dl>
+
+<h3 id="Definindo_destinos_de_áudio">Definindo destinos de áudio</h3>
+
+<p>Uma vez que você tenha feito o processamento do seu áudio, estas interfaces definirão aonde será a saída do áudio.</p>
+
+<dl>
+ <dt>{{domxref("AudioDestinationNode")}}</dt>
+ <dd>The <strong><code>AudioDestinationNode</code></strong> interface represents the end destination of an audio source in a given context — usually the speakers of your device.</dd>
+ <dt>{{domxref("MediaStreamAudioDestinationNode")}}</dt>
+ <dd>The <code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> interface represents an audio destination consisting of a <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} with a single <code>AudioMediaStreamTrack</code>, which can be used in a similar way to a MediaStream obtained from {{ domxref("Navigator.getUserMedia") }}. It is an {{domxref("AudioNode")}} that acts as an audio destination.</dd>
+</dl>
+
+<h3 id="Análise_dos_dados_e_visualização">Análise dos dados e visualização</h3>
+
+<p>Se você deseja extrair tempo, frequencia e outras informações do seu áudio, o <code>AnalyserNode</code> é o que você necessita.</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode")}}</dt>
+ <dd>The <strong><code>AnalyserNode</code></strong> interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.</dd>
+</dl>
+
+<h3 id="Dividindo_e_mesclando_canais_de_áudio">Dividindo e mesclando canais de áudio</h3>
+
+<p>Para dividir e mesclar canais de áudio, você utilizará essas interfaces.</p>
+
+<dl>
+ <dt>{{domxref("ChannelSplitterNode")}}</dt>
+ <dd>The <code><strong>ChannelSplitterNode</strong></code> interface separates the different channels of an audio source out into a set of <em>mono</em> outputs.</dd>
+ <dt>{{domxref("ChannelMergerNode")}}</dt>
+ <dd>The <code><strong>ChannelMergerNode</strong></code> interface reunites different mono inputs into a single outputs. Each input will be used to fill a channel of the output.</dd>
+</dl>
+
+<h3 id="Audio_spatialization">Audio spatialization</h3>
+
+<p>These interfaces allow you to add audio spatialization panning effects to your audio sources.</p>
+
+<dl>
+ <dt>{{domxref("AudioListener")}}</dt>
+ <dd>The <strong><code>AudioListener</code></strong><strong> </strong>interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.</dd>
+ <dt>{{domxref("PannerNode")}}</dt>
+ <dd>The <strong><code>PannerNode</code></strong><strong> </strong>interface represents the behavior of a signal in space. It is an {{domxref("AudioNode")}} audio-processing module describing its position with right-hand Cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone.</dd>
+</dl>
+
+<h3 id="Processamento_de_áudio_por_JavaScript">Processamento de áudio por JavaScript</h3>
+
+<p>Se você quiser usar um <em>script</em> externo para processar sua fonte de áudio, Node e eventos abaixo tornarão isto possível.</p>
+
+<dl>
+ <dt>{{domxref("ScriptProcessorNode")}}</dt>
+ <dd>The <strong><code>ScriptProcessorNode</code></strong><strong> </strong>interface allows the generation, processing, or analyzing of audio using JavaScript. It is an {{domxref("AudioNode")}} audio-processing module that is linked to two buffers, one containing the current input, one containing the output. An event, implementing the {{domxref("AudioProcessingEvent")}} interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.</dd>
+ <dt>{{event("audioprocess")}} (event)</dt>
+ <dd>The <code>audioprocess</code> event is fired when an input buffer of a Web Audio API {{domxref("ScriptProcessorNode")}} is ready to be processed.</dd>
+ <dt>{{domxref("AudioProcessingEvent")}}</dt>
+ <dd>The <a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> <code>AudioProcessingEvent</code> represents events that occur when a {{domxref("ScriptProcessorNode")}} input buffer is ready to be processed.</dd>
+</dl>
+
+<h3 id="Áudio_offline">Áudio <em>offline</em></h3>
+
+<p>Manipular áudio <em>offline </em>é possível com estas interfaces.</p>
+
+<dl>
+ <dt>{{domxref("OfflineAudioContext")}}</dt>
+ <dd>The <strong><code>OfflineAudioContext</code></strong> interface is an {{domxref("AudioContext")}} interface representing an audio-processing graph built from linked together {{domxref("AudioNode")}}s. In contrast with a standard <code>AudioContext</code>, an <code>OfflineAudioContext</code> doesn't really render the audio but rather generates it, <em>as fast as it can</em>, in a buffer.</dd>
+ <dt>{{event("complete")}} (event)</dt>
+ <dd>The <code>complete</code> event is fired when the rendering of an {{domxref("OfflineAudioContext")}} is terminated.</dd>
+ <dt>{{domxref("OfflineAudioCompletionEvent")}}</dt>
+ <dd>The <code>OfflineAudioCompletionEvent</code> represents events that occur when the processing of an {{domxref("OfflineAudioContext")}} is terminated. The {{event("complete")}} event implements this interface.</dd>
+</dl>
+
+<h2 id="Interfaces_obsoletas">Interfaces obsoletas</h2>
+
+<p>As interfaces a seguir foram definidas em versões antigas das especificações da API de Web Audio, mas agora elas estão obsoletas e serão substituidas por outras interfaces.</p>
+
+<dl>
+ <dt>{{domxref("JavaScriptNode")}}</dt>
+ <dd>Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by {{domxref("ScriptProcessorNode")}}.</dd>
+ <dt>{{domxref("WaveTableNode")}}</dt>
+ <dd>Used to define a periodic waveform. This interface is obsolete, and has been replaced by {{domxref("PeriodicWave")}}.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Este exemplo mostra uma grande variedade de funções da API de Web Audio que podem ser utilizadas. Você pode ver este código em ação na demo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> (também verificar o <a href="https://github.com/mdn/voice-change-o-matic">código-fonte completo no Github</a>) - esta é uma demonstração de um modificador de voz de brinquedo experimental; aconselhamos manter seus alto-falantes baixo ao utilizá-lo, pelo menos para começar!</p>
+
+<p>As linhas API de Web Audio estão destacadas; se você quiser encontrar mais informações sobre os diferentes métodos, faça uma busca através das páginas de referência.</p>
+
+<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151]">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context
+// Webkit/blink browsers need prefix, Safari won't work without window.
+
+var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options
+var visualSelect = document.getElementById("visual"); // select box for selecting audio visualization options
+var mute = document.querySelector('.mute'); // mute button
+var drawVisual; // requestAnimationFrame
+
+var analyser = audioCtx.createAnalyser();
+var distortion = audioCtx.createWaveShaper();
+var gainNode = audioCtx.createGain();
+var biquadFilter = audioCtx.createBiquadFilter();
+
+function makeDistortionCurve(amount) { // function to make curve shape for distortion/wave shaper node to use
+  var k = typeof amount === 'number' ? amount : 50,
+    n_samples = 44100,
+    curve = new Float32Array(n_samples),
+    deg = Math.PI / 180,
+    i = 0,
+    x;
+  for ( ; i &lt; n_samples; ++i ) {
+    x = i * 2 / n_samples - 1;
+    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
+  }
+  return curve;
+};
+
+navigator.getUserMedia (
+  // constraints - only audio needed for this app
+  {
+    audio: true
+  },
+
+  // Success callback
+  function(stream) {
+    source = audioCtx.createMediaStreamSource(stream);
+    source.connect(analyser);
+    analyser.connect(distortion);
+    distortion.connect(biquadFilter);
+    biquadFilter.connect(gainNode);
+    gainNode.connect(audioCtx.destination); // connecting the different audio graph nodes together
+
+    visualize(stream);
+    voiceChange();
+
+  },
+
+  // Error callback
+  function(err) {
+    console.log('The following gUM error occured: ' + err);
+  }
+);
+
+function visualize(stream) {
+  WIDTH = canvas.width;
+  HEIGHT = canvas.height;
+
+  var visualSetting = visualSelect.value;
+  console.log(visualSetting);
+
+  if(visualSetting == "sinewave") {
+    analyser.fftSize = 2048;
+    var bufferLength = analyser.frequencyBinCount; // half the FFT value
+    var dataArray = new Uint8Array(bufferLength); // create an array to store the data
+
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+    function draw() {
+
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteTimeDomainData(dataArray); // get waveform data and put it into the array created above
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // draw wave with canvas
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+
+      for(var i = 0; i &lt; bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();
+
+  } else if(visualSetting == "off") {
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+    canvasCtx.fillStyle = "red";
+    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+  }
+
+}
+
+function voiceChange() {
+  distortion.curve = new Float32Array;
+  biquadFilter.gain.value = 0; // reset the effects each time the voiceChange function is run
+
+  var voiceSetting = voiceSelect.value;
+  console.log(voiceSetting);
+
+  if(voiceSetting == "distortion") {
+    distortion.curve = makeDistortionCurve(400); // apply distortion to sound using waveshaper node
+  } else if(voiceSetting == "biquad") {
+    biquadFilter.type = "lowshelf";
+    biquadFilter.frequency.value = 1000;
+    biquadFilter.gain.value = 25; // apply lowshelf filter to sounds using biquad
+  } else if(voiceSetting == "off") {
+    console.log("Voice settings turned off"); // do nothing, as off option was chosen
+  }
+
+}
+
+// event listeners to change visualize and voice settings
+
+visualSelect.onchange = function() {
+  window.cancelAnimationFrame(drawVisual);
+  visualize(stream);
+}
+
+voiceSelect.onchange = function() {
+  voiceChange();
+}
+
+mute.onclick = voiceMute;
+
+function voiceMute() { // toggle to mute and unmute sound
+  if(mute.id == "") {
+    gainNode.gain.value = 0; // gain set to 0 to mute sound
+    mute.id = "activated";
+    mute.innerHTML = "Unmute";
+  } else {
+    gainNode.gain.value = 1; // gain set to 1 to unmute sound
+    mute.id = "";
+    mute.innerHTML = "Mute";
+  }
+}
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div>
+<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>14 {{property_prefix("webkit")}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div>
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li>
+ <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic example</a></li>
+ <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin example</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/" title="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/" title="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
+ <li><a href="https://github.com/bit101/tones">Tones</a>: a simple library for playing specific tones/notes using the Web Audio API.</li>
+</ul>
+
+<section id="Quick_Links">
+<h3 id="Quicklinks">Quicklinks</h3>
+
+<ol>
+ <li data-default-state="open"><strong><a href="#">Guides</a></strong>
+
+  <ol>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><strong><a href="#">Examples</a></strong>
+  <ol>
+   <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a></li>
+   <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><strong><a href="#">Interfaces</a></strong>
+  <ol>
+   <li>{{domxref("AnalyserNode")}}</li>
+   <li>{{domxref("AudioBuffer")}}</li>
+   <li>{{domxref("AudioBufferSourceNode")}}</li>
+   <li>{{domxref("AudioContext")}}</li>
+   <li>{{domxref("AudioDestinationNode")}}</li>
+   <li>{{domxref("AudioListener")}}</li>
+   <li>{{domxref("AudioNode")}}</li>
+   <li>{{domxref("AudioParam")}}</li>
+   <li>{{event("audioprocess")}} (event)</li>
+   <li>{{domxref("AudioProcessingEvent")}}</li>
+   <li>{{domxref("BiquadFilterNode")}}</li>
+   <li>{{domxref("ChannelMergerNode")}}</li>
+   <li>{{domxref("ChannelSplitterNode")}}</li>
+   <li>{{event("complete")}} (event)</li>
+   <li>{{domxref("ConvolverNode")}}</li>
+   <li>{{domxref("DelayNode")}}</li>
+   <li>{{domxref("DynamicsCompressorNode")}}</li>
+   <li>{{event("ended_(Web_Audio)", "ended")}} (event)</li>
+   <li>{{domxref("GainNode")}}</li>
+   <li>{{domxref("MediaElementAudioSourceNode")}}</li>
+   <li>{{domxref("MediaStreamAudioDestinationNode")}}</li>
+   <li>{{domxref("MediaStreamAudioSourceNode")}}</li>
+   <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
+   <li>{{domxref("OfflineAudioContext")}}</li>
+   <li>{{domxref("OscillatorNode")}}</li>
+   <li>{{domxref("PannerNode")}}</li>
+   <li>{{domxref("PeriodicWaveNode")}}</li>
+   <li>{{domxref("ScriptProcessorNode")}}</li>
+   <li>{{domxref("WaveShaperNode")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/pt-br/web/api/api_web_audio/sintetizador_simples/index.html b/files/pt-br/web/api/api_web_audio/sintetizador_simples/index.html
new file mode 100644
index 0000000000..b0fdf2a0c4
--- /dev/null
+++ b/files/pt-br/web/api/api_web_audio/sintetizador_simples/index.html
@@ -0,0 +1,579 @@
+---
+title: 'Tutorial e exemplo: Teclado de Sintetizador Simples'
+slug: Web/API/API_Web_Audio/Sintetizador_simples
+tags:
+  - Audio
+  - Exemplo
+  - Guía
+  - Media
+  - Oscilador
+  - Piano
+  - Sintetizador
+  - Tutorial
+  - Web Audio API
+translation_of: Web/API/Web_Audio_API/Simple_synth
+---
+<div>{{DefaultAPISidebar("Web Audio API")}}</div>
+
+<p>Este artigo apresenta o código e uma demonstração funcional de um teclado que você pode tocar usando seu mouse. O teclado lhe permite alternar entre formas de onda padrões e customizadas. Esse exemplo utiliza das seguintes interfaces de Web API: {{domxref("AudioContext")}}, {{domxref("OscillatorNode")}}, {{domxref("PeriodicWave")}}, e {{domxref("GainNode")}}.</p>
+
+<p>Já que {{domxref("OscillatorNode")}} é baseado no {{domxref("AudioScheduledSourceNode")}}, isso até certo ponto também é um exemplo pra isto.</p>
+
+<h2 id="The_video_keyboard" name="The_video_keyboard">O Teclado Visual</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Existem três componentes primários para o display do nosso teclado virtual. O primeito do qual é o teclado musical em si. Nós extraimos em um par de elementos {{HTMLElement("div")}} aninhados para permitir a rolagem horizontal caso as teclas não encaixem na tela.</p>
+
+<h4 id="O_Teclado">O Teclado</h4>
+
+<p>Primeiro, criamos o espaço no qual construiremos o teclado. Estaremos construindo o teclado programaticamente, considerando que ao fazer desse jeito teremos a flexibilidade de configurar cada tecla conforme determinamos as informações apropriadas para tecla correspondente. No nosso caso, pegamos a frequência de cada tecla através de uma tabela, mas poderia ser calculado de forma algoritmica também.</p>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;div class="keyboard"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>O {{HTMLElement("div")}} nomeado de <code>"container"</code> é a barra de rolagem que permite o teclado ser rolado horizontalmente se for largo demais para o espaço disponivel. As teclas em si serão inseridas no bloco de classe <code>"keyboard"</code>.</p>
+
+<h4 id="A_barra_de_opções">A barra de opções</h4>
+
+<p>Abaixo do teclado, colocaremos alguns controles para configurar o camada. Por enquanto, teremos dois controles: Um para controlar o volume e outro para selecionar a forma de onda periodica usada ao gerar as notas.</p>
+
+<h5 id="O_controle_de_volume">O controle de volume</h5>
+
+<p>Primeiro criamos o <code>&lt;div&gt;</code> para conter a barra de opções, para ser personalizado conforme preciso. Então estabelecemos uma caixa que será apresentada no lado esquerdo da barra e colocar um rotulo e um elemento {{HTMLElement("input")}} do tipo <code>"range"</code>. O elemento range será tipicamente apresentado como o controle da barra de rolagem ; configuramos ele para permitir qualquer valor entre 0.0 e 1.0 em cada posição.</p>
+
+<pre class="brush: html notranslate">&lt;div class="settingsBar"&gt;
+  &lt;div class="left"&gt;
+    &lt;span&gt;Volume: &lt;/span&gt;
+    &lt;input type="range" min="0.0" max="1.0" step="0.01"
+        value="0.5" list="volumes" name="volume"&gt;
+    &lt;datalist id="volumes"&gt;
+      &lt;option value="0.0" label="Mute"&gt;
+      &lt;option value="1.0" label="100%"&gt;
+    &lt;/datalist&gt;
+  &lt;/div&gt;
+</pre>
+
+<p>Especificamos um valor padrão de 0.5, e provemos um elemento {{HTMLElement("datalist")}} no qual é conectado ao range usando o atributo {{htmlattrxref("name")}} para achar uma lista de opções cujo ID encaixa; nesse caso, o conjunto de informações é nomeado de <code>"volume"</code>. isso nos permite prover um conjunto de valores comuns e strings especiais que o browser pode de forma opcional escolher mostrar de alguma maneira; e então atribuimos nomes aos valores 0.0 ("Mute") e 1.0 ("100%").</p>
+
+<h5 id="A_seleção_de_forma_de_onda">A seleção de forma de onda</h5>
+
+<p>E no lado da barra de configurações, colocamos um rótulo e um elemento {{HTMLElement("select")}} nomeado de <code>"waveform"</code> cujas opções correspondem as formas de onda disponiveis.</p>
+
+<pre class="brush: html notranslate">  &lt;div class="right"&gt;
+    &lt;span&gt;Current waveform: &lt;/span&gt;
+    &lt;select name="waveform"&gt;
+      &lt;option value="sine"&gt;Sine&lt;/option&gt;
+      &lt;option value="square" selected&gt;Square&lt;/option&gt;
+      &lt;option value="sawtooth"&gt;Sawtooth&lt;/option&gt;
+      &lt;option value="triangle"&gt;Triangle&lt;/option&gt;
+      &lt;option value="custom"&gt;Custom&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<div class="hidden">
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.container {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  width: 660px;
+  height: 110px;
+  white-space: nowrap;
+  margin: 10px;
+}
+
+.keyboard {
+  width: auto;
+  padding: 0;
+  margin: 0;
+}
+
+.key {
+  cursor: pointer;
+  font: 16px "Open Sans", "Lucida Grande", "Arial", sans-serif;
+  border: 1px solid black;
+  border-radius: 5px;
+  width: 20px;
+  height: 80px;
+  text-align: center;
+  box-shadow: 2px 2px darkgray;
+  display: inline-block;
+  position: relative;
+  margin-right: 3px;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+
+.key div {
+  position: absolute;
+  bottom: 0;
+  text-align: center;
+  width: 100%;
+  pointer-events: none;
+}
+
+.key div sub {
+  font-size: 10px;
+  pointer-events: none;
+}
+
+.key:hover {
+  background-color: #eef;
+}
+
+.key:active {
+  background-color: #000;
+  color: #fff;
+}
+
+.octave {
+  display: inline-block;
+  padding: 0 6px 0 0;
+}
+
+.settingsBar {
+  padding-top: 8px;
+  font: 14px "Open Sans", "Lucida Grande", "Arial", sans-serif;
+  position: relative;
+  vertical-align: middle;
+  width: 100%;
+  height: 30px;
+}
+
+.left {
+  width: 50%;
+  position: absolute;
+  left: 0;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.left span, .left input {
+  vertical-align: middle;
+}
+
+.right {
+  width: 50%;
+  position: absolute;
+  right: 0;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.right span {
+  vertical-align: middle;
+}
+
+.right input {
+  vertical-align: baseline;
+}</pre>
+</div>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>O código em JavaScript começa inicializando algumas váriaveis.</p>
+
+<pre class="brush: js notranslate">let audioContext = new (window.AudioContext || window.webkitAudioContext)();
+let oscList = [];
+let masterGainNode = null;
+</pre>
+
+<ol>
+ <li><code>audioContext</code> é colocado para referenciar o objeto global {{domxref("AudioContext")}} (ou <code>webkitAudioContext</code> se  necessário).</li>
+ <li><code>oscillators</code> está colocado para conter uma lista de todos os osciladores atualmente tocando. Ele começa nulo, afinal não há nenhum oscilador tocando ainda.</li>
+ <li><code>masterGainNode</code> é colocado como nulo; durante o processo de setup, ele será configurado para contar um {{domxref("GainNode")}} no quall todos os osciladores irão se conectar para permitir o volume geral a ser controlado por apenas uma barra de rolagem.</li>
+</ol>
+
+<pre class="brush: js notranslate">let keyboard = document.querySelector(".keyboard");
+let wavePicker = document.querySelector("select[name='waveform']");
+let volumeControl = document.querySelector("input[name='volume']");
+</pre>
+
+<p>Referencias aos elementos que precisaremos acessar são obtidas através dp:</p>
+
+<ul>
+ <li><code>keyboard</code> que é o elemento que irá alojar as teclas.</li>
+ <li><code>wavePicker</code> é o elemento {{HTMLElement("select")}} usado para seleção da forma de onda das notas.</li>
+ <li><code>volumeControl</code> É o elemento {{HTMLElement("input")}} (do tipo <code>"range"</code>) usado para controlar o volume geral.</li>
+</ul>
+
+<pre class="brush: js notranslate">let noteFreq = null;
+let customWaveform = null;
+let sineTerms = null;
+let cosineTerms = null;
+</pre>
+
+<p>Enfim, variaveis globais que serão usadas quando as formas de onda são criadas:</p>
+
+<ul>
+ <li><code>noteFreq</code> será uma matriz de matrizes; cada matriz representa uma oitava, cada uma possuindo um valor nota daquela oitava. O valor de cada é a frequência, em Hertz, do tom da nota.</li>
+ <li><code>customWaveform</code> será arrumado como um {{domxref("PeriodicWave")}} descrevendo a forma de onda quando o usuário selecionar "Custom" na seleção de forma de onda.</li>
+ <li><code>sineTerms</code> e <code>cosineTerms</code> será utilizado para guardar a informação para gerar a forma de onda; cada um irá conter uma matriz que será gerada caso o usuário escolha "Custom".</li>
+</ul>
+
+<h3 id="Criando_a_tabela_de_notas">Criando a tabela de notas</h3>
+
+<p>A função <code>createNoteTable()</code> constrói a matriz <code>noteFreq</code> para conter uma matriz de objetos representando cada oitava. Cada oitava, possui uma propriedade para cada nota nessa oitava; O nome dessa propriedade é o nome da nota (utilizando da notação em inglês, como "C" para representar "dó"), e o valor é a frequência, em Hertz, daquela nota.</p>
+
+<pre class="brush: js notranslate">function createNoteTable() {
+  let noteFreq = [];
+  for (let i=0; i&lt; 9; i++) {
+    noteFreq[i] = [];
+  }
+
+  noteFreq[0]["A"] = 27.500000000000000;
+  noteFreq[0]["A#"] = 29.135235094880619;
+  noteFreq[0]["B"] = 30.867706328507756;
+
+  noteFreq[1]["C"] = 32.703195662574829;
+  noteFreq[1]["C#"] = 34.647828872109012;
+  noteFreq[1]["D"] = 36.708095989675945;
+  noteFreq[1]["D#"] = 38.890872965260113;
+  noteFreq[1]["E"] = 41.203444614108741;
+  noteFreq[1]["F"] = 43.653528929125485;
+  noteFreq[1]["F#"] = 46.249302838954299;
+  noteFreq[1]["G"] = 48.999429497718661;
+  noteFreq[1]["G#"] = 51.913087197493142;
+  noteFreq[1]["A"] = 55.000000000000000;
+  noteFreq[1]["A#"] = 58.270470189761239;
+  noteFreq[1]["B"] = 61.735412657015513;
+</pre>
+
+<p>... várias oitavas não mostradas para manter breve ...</p>
+
+<div class="hidden">
+<pre class="brush: js notranslate">  noteFreq[2]["C"] = 65.406391325149658;
+  noteFreq[2]["C#"] = 69.295657744218024;
+  noteFreq[2]["D"] = 73.416191979351890;
+  noteFreq[2]["D#"] = 77.781745930520227;
+  noteFreq[2]["E"] = 82.406889228217482;
+  noteFreq[2]["F"] = 87.307057858250971;
+  noteFreq[2]["F#"] = 92.498605677908599;
+  noteFreq[2]["G"] = 97.998858995437323;
+  noteFreq[2]["G#"] = 103.826174394986284;
+  noteFreq[2]["A"] = 110.000000000000000;
+  noteFreq[2]["A#"] = 116.540940379522479;
+  noteFreq[2]["B"] = 123.470825314031027;
+
+  noteFreq[3]["C"] = 130.812782650299317;
+  noteFreq[3]["C#"] = 138.591315488436048;
+  noteFreq[3]["D"] = 146.832383958703780;
+  noteFreq[3]["D#"] = 155.563491861040455;
+  noteFreq[3]["E"] = 164.813778456434964;
+  noteFreq[3]["F"] = 174.614115716501942;
+  noteFreq[3]["F#"] = 184.997211355817199;
+  noteFreq[3]["G"] = 195.997717990874647;
+  noteFreq[3]["G#"] = 207.652348789972569;
+  noteFreq[3]["A"] = 220.000000000000000;
+  noteFreq[3]["A#"] = 233.081880759044958;
+  noteFreq[3]["B"] = 246.941650628062055;
+
+  noteFreq[4]["C"] = 261.625565300598634;
+  noteFreq[4]["C#"] = 277.182630976872096;
+  noteFreq[4]["D"] = 293.664767917407560;
+  noteFreq[4]["D#"] = 311.126983722080910;
+  noteFreq[4]["E"] = 329.627556912869929;
+  noteFreq[4]["F"] = 349.228231433003884;
+  noteFreq[4]["F#"] = 369.994422711634398;
+  noteFreq[4]["G"] = 391.995435981749294;
+  noteFreq[4]["G#"] = 415.304697579945138;
+  noteFreq[4]["A"] = 440.000000000000000;
+  noteFreq[4]["A#"] = 466.163761518089916;
+  noteFreq[4]["B"] = 493.883301256124111;
+
+  noteFreq[5]["C"] = 523.251130601197269;
+  noteFreq[5]["C#"] = 554.365261953744192;
+  noteFreq[5]["D"] = 587.329535834815120;
+  noteFreq[5]["D#"] = 622.253967444161821;
+  noteFreq[5]["E"] = 659.255113825739859;
+  noteFreq[5]["F"] = 698.456462866007768;
+  noteFreq[5]["F#"] = 739.988845423268797;
+  noteFreq[5]["G"] = 783.990871963498588;
+  noteFreq[5]["G#"] = 830.609395159890277;
+  noteFreq[5]["A"] = 880.000000000000000;
+  noteFreq[5]["A#"] = 932.327523036179832;
+  noteFreq[5]["B"] = 987.766602512248223;
+
+  noteFreq[6]["C"] = 1046.502261202394538;
+  noteFreq[6]["C#"] = 1108.730523907488384;
+  noteFreq[6]["D"] = 1174.659071669630241;
+  noteFreq[6]["D#"] = 1244.507934888323642;
+  noteFreq[6]["E"] = 1318.510227651479718;
+  noteFreq[6]["F"] = 1396.912925732015537;
+  noteFreq[6]["F#"] = 1479.977690846537595;
+  noteFreq[6]["G"] = 1567.981743926997176;
+  noteFreq[6]["G#"] = 1661.218790319780554;
+  noteFreq[6]["A"] = 1760.000000000000000;
+  noteFreq[6]["A#"] = 1864.655046072359665;
+  noteFreq[6]["B"] = 1975.533205024496447;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">  noteFreq[7]["C"] = 2093.004522404789077;
+  noteFreq[7]["C#"] = 2217.461047814976769;
+  noteFreq[7]["D"] = 2349.318143339260482;
+  noteFreq[7]["D#"] = 2489.015869776647285;
+  noteFreq[7]["E"] = 2637.020455302959437;
+  noteFreq[7]["F"] = 2793.825851464031075;
+  noteFreq[7]["F#"] = 2959.955381693075191;
+  noteFreq[7]["G"] = 3135.963487853994352;
+  noteFreq[7]["G#"] = 3322.437580639561108;
+  noteFreq[7]["A"] = 3520.000000000000000;
+  noteFreq[7]["A#"] = 3729.310092144719331;
+  noteFreq[7]["B"] = 3951.066410048992894;
+
+  noteFreq[8]["C"] = 4186.009044809578154;
+  return noteFreq;
+}
+</pre>
+
+<p>O resultado é uma matriz, <code>noteFreq</code>, com um objeto para cada oitava. Cada objeto de oitava tem propriedades nomeadas nela onde a propriedade é o nome da nota com a notação em inglês (Como "C" para representar "dó") e o valor da propriedade é a frequência da nota em Hertz.. o objeto resultando se parece com isso:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Octave</th>
+   <td colspan="8" rowspan="1">Notes</td>
+   <td rowspan="1"></td>
+   <td rowspan="1"></td>
+   <td rowspan="1"></td>
+   <td rowspan="1"></td>
+  </tr>
+  <tr>
+   <th scope="row">0</th>
+   <td>"A" ⇒ 27.5</td>
+   <td>"A#" ⇒ 29.14</td>
+   <td>"B" ⇒ 30.87</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">1</th>
+   <td>"C" ⇒ 32.70</td>
+   <td>"C#" ⇒ 34.65</td>
+   <td>"D" ⇒ 36.71</td>
+   <td>"D#" ⇒ 38.89</td>
+   <td>"E" ⇒ 41.20</td>
+   <td>"F" ⇒ 43.65</td>
+   <td>"F#" ⇒ 46.25</td>
+   <td>"G" ⇒ 49</td>
+   <td>"G#" ⇒ 51.9</td>
+   <td>"A" ⇒ 55</td>
+   <td>"A#" ⇒ 58.27</td>
+   <td>"B" ⇒ 61.74</td>
+  </tr>
+  <tr>
+   <th scope="row">2</th>
+   <td colspan="12" rowspan="1" style="text-align: center;">. . .</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Com esta tabela no lugar, podemos descobrir a frequência para uma dada nota em uma oitava particular relativamente fácil. Se queremos a frequência pra nota G# na primeira oitava, nós simplesmente usamos  <code>noteFreq[1]["G#"]</code> e conseguimos o valor 51.9 como resultado.</p>
+
+<div class="note">
+<p>Os valores na tabela de exemplo acima foram arredondados para duas casas decimais.</p>
+</div>
+
+<div class="hidden">
+<p> Esse polyfill  é utilizado quando <code>Object.entries()</code> não existir.</p>
+
+<pre class="brush: js notranslate">if (!Object.entries) {
+    Object.entries = function entries(O) {
+        return reduce(keys(O), (e, k) =&gt; concat(e, typeof k === 'string' &amp;&amp; isEnumerable(O, k) ? [[k, O[k]]] : []), []);
+    };
+}
+</pre>
+</div>
+
+<h3 id="Construindo_o_teclado">Construindo o teclado</h3>
+
+<p>A função <code>setup()</code> é responsavel por construir o teclado e preparar a aplicação para tocar a música.</p>
+
+<pre class="brush: js notranslate">function setup() {
+  noteFreq = createNoteTable();
+
+  volumeControl.addEventListener("change", changeVolume, false);
+
+  masterGainNode = audioContext.createGain();
+  masterGainNode.connect(audioContext.destination);
+  masterGainNode.gain.value = volumeControl.value;
+
+  // Create the keys; skip any that are sharp or flat; for
+  // our purposes we don't need them. Each octave is inserted
+  // into a &lt;div&gt; of class "octave".
+
+  noteFreq.forEach(function(keys, idx) {
+    let keyList = Object.entries(keys);
+    let octaveElem = document.createElement("div");
+    octaveElem.className = "octave";
+
+    keyList.forEach(function(key) {
+      if (key[0].length == 1) {
+        octaveElem.appendChild(createKey(key[0], idx, key[1]));
+      }
+    });
+
+    keyboard.appendChild(octaveElem);
+  });
+
+  document.querySelector("div[data-note='B'][data-octave='5']").scrollIntoView(false);
+
+  sineTerms = new Float32Array([0, 0, 1, 0, 1]);
+  cosineTerms = new Float32Array(sineTerms.length);
+  customWaveform = audioContext.createPeriodicWave(cosineTerms, sineTerms);
+
+  for (i=0; i&lt;9; i++) {
+      oscList[i] = {};
+  }
+}
+
+setup();</pre>
+
+<ol>
+ <li>A tabela que mapeia o nome e oitavas das notas para suas respectivas frequências é criado ao chamar <code>createNoteTable()</code>.</li>
+ <li>Um manipulador de eventos é estabelecido ao chamar nosso velho amigo {{domxref("EventTarget.addEventListener", "addEventListener()")}} para cuidar dos eventos do {{event("change")}} no controle de ganho geral. Isso vai simplesmente atualizar o módulo de ganho de volume para o novo valor.</li>
+ <li>Em seguida, nós replicamos cada oitava na tabela de frequências das notas. Para cada oitava, usamos {{jsxref("Object.entries()")}} para conseguir uma lista de notas daquela oitava.</li>
+ <li>Criar um {{HTMLElement("div")}} para contar as notas daquela oitava (para ter um pouco de espaço entre as oitavas), e mudar o nome de classe para "octave".</li>
+ <li>Para cada tecla na oitava, checamos para ver se o nome daquela nota há mais de um caractere. Nós pulamos essas, pois estamos deixando notas sustenidas de fora deste exemplo. Do contrário, chamamos <code>createKey()</code>, especificando uma string, oitava, e frequência. O elemento retornado é anexado na elemento da oitava criada no passo 4.</li>
+ <li>Quando o elemento da oitava é construido, é então anexada ao teclado.</li>
+ <li>Uma vez que o teclado foi construido, nós rolamos para nota "B" na quinta oitava; isso tem o efeito de garantir que o C médio é visivel junto das notas ao redor.</li>
+ <li>Então uma forma de onda customizada é construida usando {{domxref("AudioContext.createPeriodicWave()")}}. Essa forma de onda será usada toda vez que o usuário selecionar "Custom" da seleção de formas de onda.</li>
+ <li>Enfim, a lista de osciladores é iniciada para garantir que está pronta para receber informação identificando quais osciladores estão associados com que teclas.</li>
+</ol>
+
+<h4 id="Criando_uma_tecla">Criando uma tecla</h4>
+
+<p>A função <code>createKey()</code>  é chamada toda vez que queremos que uma tecla seja apresentada no nosso teclado virtual. Ela cria elementos da tecla e seu rótulo, adiciona informação dos atributos ao elemento para uso posterior, e coloca modificadores de eventos para os eventos que nos importam.</p>
+
+<pre class="brush: js notranslate">function createKey(note, octave, freq) {
+  let keyElement = document.createElement("div");
+  let labelElement = document.createElement("div");
+
+  keyElement.className = "key";
+  keyElement.dataset["octave"] = octave;
+  keyElement.dataset["note"] = note;
+  keyElement.dataset["frequency"] = freq;
+
+  labelElement.innerHTML = note + "&lt;sub&gt;" + octave + "&lt;/sub&gt;";
+  keyElement.appendChild(labelElement);
+
+  keyElement.addEventListener("mousedown", notePressed, false);
+  keyElement.addEventListener("mouseup", noteReleased, false);
+  keyElement.addEventListener("mouseover", notePressed, false);
+  keyElement.addEventListener("mouseleave", noteReleased, false);
+
+  return keyElement;
+}
+</pre>
+
+<p>Após criar  os elementos representando as teclas e seus rótulos, nós configuramos o elemento das teclas ao configurar sua classe para "key" (Que estabelece a aparência). Então adicionamos atributos {{htmlattrxref("data-*")}}  que contém a string da oitava da nota (attribute <code>data-octave</code>), representando a nota a ser tocada (attribute <code>data-note</code>), e frequência (attribute <code>data-frequency</code>) em Hertz. Isso irá nos permitir facilmente pegar informação conforme necessário ao cuidar de eventos.</p>
+
+<h3 id="Fazendo_música">Fazendo música</h3>
+
+<h4 id="Tocando_um_tom">Tocando um tom</h4>
+
+<p>O trabalho da função <code>playTone()</code> é tocar um tom em uma dada frequência. Isso será usado pelo modificador para eventos acionados nas teclas do teclado, para que toquem as notas apropriadas.</p>
+
+<pre class="brush: js notranslate">function playTone(freq) {
+  let osc = audioContext.createOscillator();
+  osc.connect(masterGainNode);
+
+  let type = wavePicker.options[wavePicker.selectedIndex].value;
+
+  if (type == "custom") {
+    osc.setPeriodicWave(customWaveform);
+  } else {
+    osc.type = type;
+  }
+
+  osc.frequency.value = freq;
+  osc.start();
+
+  return osc;
+}
+</pre>
+
+<p>O <code>playTone()</code> começa criando um novo {{domxref("OscillatorNode")}} ao chamar o método {{domxref("AudioContext.createOscillator()")}}. Então conectamos ele para o módulo de ganha geral ao chamar o novo método de osciladores {{domxref("OscillatorNode.connect()")}} method;, Que determina ao oscilador onde ele irá mandar seu output. Ao fazer isso, mudar o valor do ganho do módulo de ganho geral irá mudar o volume de todos os toms gerados.</p>
+
+<p>Então conseguimos o tipo de forma de onda para usar ao checar o valor do controle de seleção de formas de onda na barra de opções. Se o usuário estiver colocado como <code>"custom"</code>, chamamos {{domxref("OscillatorNode.setPeriodicWave()")}} para configurar os osciladores para usar nossa forma de onda customizada. Fazer isso automáticamente coloca o {{domxref("OscillatorNode.type", "type")}} do oscilador como <code>custom</code>. Se qualquer outro tipo de forma de onda é selecionado na seleção de formas de ondas, nós simplesmente colocamos os tipos de osciladores no valor da seleção, esse valor será um entre <code>sine</code>, <code>square</code>, <code>triangle</code>, e <code>sawtooth</code>.</p>
+
+<p>A frequência do oscilador é colocada no valor especificado no paramêtro <code>freq</code> ao colocar o valor dos objetos {{domxref("Oscillator.frequency")}} {{domxref("AudioParam")}} . Então, enfim, o oscilador é iniciado e começa a produzir sons ao chamar o método {{domxref("AudioScheduledSourceNode.start()")}} .</p>
+
+<h4 id="Tocando_um_tom_2">Tocando um tom</h4>
+
+<p>Quando o evento {{event("mousedown")}} ou {{domxref("mouseover")}} ocorre em uma tecla, queremos que toque a nota correspondente. A função <code>notePressed()</code> é usada como o modificador de eventos para esses eventos.</p>
+
+<pre class="brush: js notranslate">function notePressed(event) {
+  if (event.buttons &amp; 1) {
+    let dataset = event.target.dataset;
+
+    if (!dataset["pressed"]) {
+      let octave = +dataset["octave"];
+      oscList[octave][dataset["note"]] = playTone(dataset["frequency"]);
+      dataset["pressed"] = "yes";
+    }
+  }
+}
+</pre>
+
+<p>Começamos checando se o botão esquerdo do mouse é pressionado, por dois motivos. Primeiro, queremos que apenas o botão esquerdo acione as notas. Segundo, e mais importante, estamos usando isso para cuidar do {{event("mouseover")}} para casos onde o usuário arrasta de tecla a tecla, e só queremos tocar uma nota se o mouse estiver pressionado quando entrar no elemento.</p>
+
+<p>Se o botão do mouse estiver de fato sendo pressionado, recebemos o atributo de tecla pressionada {{htmlattrxref("dataset")}} ; isso torna fácil o acesso das informações de atributo customizadas no elemento. Procuramos por um atributo <code>data-pressed</code> ; caso não haja um(o que indica que a nota não está tocando ainda), chamamos <code>playTone()</code> para começar a tocar a nota, passando no valor dos elementos do atributo <code>data-frequency</code>. O valor retornado do oscilador é guardado no <code>oscList</code> para refêrencia futura, e <code>data-pressed</code> é colocado como <code>yes</code> para indicar que a nota está tocando para que não iniciemos novamente na próxima vez que isso for chamado.</p>
+
+<h4 id="Parando_um_tom">Parando um tom</h4>
+
+<p>A função <code>noteReleased()</code> é o modificador de eventos chamado quando o usuário solta o botão do mouse ou move o mouse para fora da tecla que ele está tocando.</p>
+
+<pre class="brush: js notranslate">function noteReleased(event) {
+  let dataset = event.target.dataset;
+
+  if (dataset &amp;&amp; dataset["pressed"]) {
+    let octave = +dataset["octave"];
+    oscList[octave][dataset["note"]].stop();
+    delete oscList[octave][dataset["note"]];
+    delete dataset["pressed"];
+  }
+}
+</pre>
+
+<p><code>noteReleased()</code> usa os atributos customizados <code>data-octave</code> and <code>data-note</code>  para procurar os osciladores das teclas, e então chama o método de oscilador {{domxref("AudioScheduledSourceNode.stop", "stop()")}} para parar de tocar a nota. Finalmente, a entrada <code>oscList</code> para nota é limpa e o atributo <code>data-pressed</code> é removido do elemento da tecla (como identificado pelo {{domxref("event.target")}}), para indicar que a nota não está tocando no momento.</p>
+
+<h4 id="Mudando_o_volume_geral">Mudando o volume geral</h4>
+
+<p>A barra de rolagem do volume na barra de opções dá uma simples interface para mudar o valor do ganho no módulo de ganho geral, então mudando o volume de todas as notas sendo tocadas. O metódo <code>changeVolume()</code> é o modificador do evento {{event("change")}} na barra de rolagem.</p>
+
+<pre class="brush: js notranslate">function changeVolume(event) {
+  masterGainNode.gain.value = volumeControl.value
+}
+</pre>
+
+<p>Isso simplesmente coloca o valor do módulo de ganho geral <code>gain</code> {{domxref("AudioParam")}} para o novo valor na barra de rolagem.</p>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>Coloque tudo junto, o resultado é um simples e funcional teclado virtual que funciona com o clique:</p>
+
+<p>{{ EmbedLiveSample('The_video_keyboard', 680, 200) }}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
+ <li>{{domxref("OscillatorNode")}}</li>
+ <li>{{domxref("GainNode")}}</li>
+ <li>{{domxref("AudioContext")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/attr/index.html b/files/pt-br/web/api/attr/index.html
new file mode 100644
index 0000000000..683dda4847
--- /dev/null
+++ b/files/pt-br/web/api/attr/index.html
@@ -0,0 +1,132 @@
+---
+title: Attr
+slug: Web/API/Attr
+tags:
+  - API
+  - DOM
+  - Gecko DOM
+  - JavaScript
+translation_of: Web/API/Attr
+---
+<p>{{APIRef("DOM")}}<br>
+ Este tipo representa um atributo de elemento DOM como um objeto. Na maioria dos métodos DOM, você provavelmente irá retornar diretamente o atributo como uma string (e.g., {{domxref("Element.getAttribute()")}}, mas certas funções (e.g., {{domxref("Element.getAttributeNode()")}}) ou meios de iteração retornam tipos <code>Attr</code>.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<div class="warning"><strong>Aviso:</strong> Começando no Gecko 7.0 {{geckoRelease("7.0")}}, os que serão removidos mostram mensagens de aviso no console. Você deve revisar seu código de acordo. Veja <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Attr$edit#Deprecated_properties_and_methods">métodos e propriedades descontinuadas</a> para uma lista completa.</div>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("Attr.name", "name")}} {{readOnlyInline}}</dt>
+ <dd>O nome do Atributo.</dd>
+</dl>
+
+<p> </p>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}</dt>
+ <dd>Uma {{domxref("DOMString")}} representando o namespace URI do atributo, ou <code>null</code> se não há namespace</dd>
+ <dt>{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}</dt>
+ <dd>Uma {{domxref("DOMString")}} representando a parte local do nome qualificado do atributo.</dd>
+ <dt>{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}</dt>
+ <dd>Uma {{domxref("DOMString")}} representando o prefixo do namespace do atributo ou <code>null</code> se nenhum prefixo foi especificado.</dd>
+ <dt>{{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}}</dt>
+ <dd>
+ <p>O elemento que possui o atributo.</p>
+ </dd>
+</dl>
+
+<p> </p>
+
+<div class="note">
+<p><strong>Nota:</strong> DOM Level 4 removeu esta propriedade. Foi suposto que como você recebe um objeto <code>Attr</code> de um {{domxref("Element")}}, você já deve saber qual é o elemento associado.<br>
+ Como isto não é sempre verdadeiro em casos como objetos <code>Attr</code> sendo retornados pelo {{domxref("Document.evaluate")}}, o DOM Living Standard reintroduziu a propriedade.</p>
+
+<p>Gecko mostra uma mensagem de descontinuação começando no Gecko 7.0 {{geckoRelease("7.0")}}. Esta mensagem foi removida novamente no Gecko 49.0 {{geckoRelease("49.0")}}.</p>
+</div>
+
+<h2 id="Propriedades_e_métodos_descontinuados">Propriedades e métodos descontinuados</h2>
+
+<p>As seguintes propriedades e métodos foram descontinuados. Quando disponíveis, são substituidas adequadamente.</p>
+
+<dl>
+ <dt><code>attributes</code></dt>
+ <dd>Esta propriedade agora sempre retorna <code>NULL</code>.</dd>
+ <dt><code>childNodes</code></dt>
+ <dd>Esta propriedade agora sempre retorna <code>NULL</code>.</dd>
+ <dt><code>firstChild</code></dt>
+ <dd>Esta propriedade agora sempre retorna <code>NULL</code>.</dd>
+ <dt><code>lastChild</code></dt>
+ <dd>Esta propriedade agora sempre retorna <code>NULL</code>.</dd>
+ <dt><code>nextSibling</code></dt>
+ <dd>Esta propriedade agora sempre retorna <code>NULL</code>.</dd>
+ <dt><code>nodeName</code></dt>
+ <dd>Use {{domxref("Attr.name")}} no lugar.</dd>
+ <dt><code>nodeType</code></dt>
+ <dd>Esta propriedade agora sempre retorna 2 (<code>ATTRIBUTE_NODE</code>).</dd>
+ <dt><code>nodeValue</code></dt>
+ <dd>Use {{domxref("Attr.value")}} no lugar.</dd>
+ <dt><code>ownerDocument</code></dt>
+ <dd>Provavelmente você nunca utilizou isto, então você não se importa que isso vai desaparecer.</dd>
+ <dt><code>ownerElement</code></dt>
+ <dd>Desde que você obtenha o objeto <code>Attr</code> de um {{domxref("Element")}}, você já conhece os elementos associados.</dd>
+ <dt><code>parentNode</code></dt>
+ <dd>Esta propriedade agora sempre retorna <code>NULL</code>.</dd>
+ <dt><code>previousSibling</code></dt>
+ <dd>Esta propriedade agora sempre retorna <code>NULL</code>.</dd>
+ <dt><code>specified</code></dt>
+ <dd>Esta propriedade agora sempre retorna <code>true</code>.</dd>
+ <dt><code>textContent</code></dt>
+ <dd>Use {{domxref("Attr.value")}} no lugar.</dd>
+</dl>
+
+<p>Os seguintes métodos foram reprovados:</p>
+
+<dl>
+ <dt><code>appendChild()</code></dt>
+ <dd>Modifique o valor de {{domxref("Attr.value")}} no lugar.</dd>
+ <dt><code>cloneNode()</code></dt>
+ <dd>Provavelmente você nunca utilizou isto, então você não se importa que isso vai desaparecer.</dd>
+ <dt><code>createAttribute()</code></dt>
+ <dd>Use {{domxref("Element.setAttribute()")}} no lugar.</dd>
+ <dt><code>createAttributeNS()</code></dt>
+ <dd>Use {{domxref("Element.setAttributeNS()")}} no lugar.</dd>
+ <dt><code>getAttributeNode()</code></dt>
+ <dd>Use {{domxref("Element.getAttribute()")}} no lugar.</dd>
+ <dt><code>getAttributeNodeNS()</code></dt>
+ <dd>Use {{domxref("Element.getAttributeNS()")}} no lugar.</dd>
+ <dt><code>hasAttributes() </code>{{obsolete_inline("21.0")}}</dt>
+ <dd>Este método agora sempre retorna false.</dd>
+ <dt><code>hasChildNodes()</code></dt>
+ <dd>Este método agora sempre retorna false.</dd>
+ <dt><code>insertBefore()</code></dt>
+ <dd>Modifique o valor de  {{domxref("Attr.value")}} no lugar.</dd>
+ <dt><code>isSupported()</code></dt>
+ <dd>Provavelmente você nunca utilizou isto, então você não se importa que isso vai desaparecer.</dd>
+ <dt><code>isEqualNode()</code></dt>
+ <dd>Provavelmente você nunca utilizou isto, então você não se importa que isso vai desaparecer.</dd>
+ <dt><code>normalize()</code></dt>
+ <dd>Provavelmente você nunca utilizou isto, então você não se importa que isso vai desaparecer.</dd>
+ <dt><code>removeAttributeNode()</code></dt>
+ <dd>Use {{domxref("Element.removeAttribute()")}} no lugar.</dd>
+ <dt><code>removeChild()</code></dt>
+ <dd>Modifique o valor de {{domxref("Attr.value")}} no lugar.</dd>
+ <dt><code>replaceChild()</code></dt>
+ <dd>Modifique o valor de {{domxref("Attr.value")}} no lugar.</dd>
+ <dt><code>setAttributeNode()</code></dt>
+ <dd>Use {{domxref("Element.setAttribute()")}} no lugar.</dd>
+ <dt><code>setAttributeNodeNS()</code></dt>
+ <dd>Use {{domxref("Element.setAttributeNS()")}} no lugar.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-637646024" title="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-637646024">Document Object Model Core level 3: Interface Attr</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/dom/#interface-attr">Document Object Model 4: Interface Attr</a></li>
+</ul>
diff --git a/files/pt-br/web/api/attr/localname/index.html b/files/pt-br/web/api/attr/localname/index.html
new file mode 100644
index 0000000000..54b7bad202
--- /dev/null
+++ b/files/pt-br/web/api/attr/localname/index.html
@@ -0,0 +1,133 @@
+---
+title: Attr.localName
+slug: Web/API/Attr/localName
+tags:
+  - API
+  - DOM
+  - Propriedade
+  - Referencia
+translation_of: Web/API/Attr/localName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>A propriedade read-only <code><strong>Attr.localName</strong></code> retorna a parte do local de um nome qualificado de elemento.</p>
+
+<div class="note">
+<p>Antes do DOM4 essa API foi definida dentro da interface {{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>name</var> = <var>attribute</var>.localName
+</pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Uma {{domxref("DOMString")}} representando a parte local do nome qualificado do atributo.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>O seguinte exemplo mostra "id" em um diálogo de alerta.</p>
+
+<h3 id="Conteúdo_HTML">Conteúdo HTML</h3>
+
+<pre class="brush: html">&lt;button id="example"&gt;Click me&lt;/button&gt;</pre>
+
+<h3 id="Conteúdo_JavaScript">Conteúdo JavaScript</h3>
+
+<pre class="brush: js">const element = document.querySelector("#example");
+element.addEventListener("click", function() {
+  const attribute = element.attributes[0];
+  alert(attribute.localName);
+});
+</pre>
+
+<p>{{ EmbedLiveSample('Example','100%',30) }}</p>
+
+<h2 id="Notas">Notas</h2>
+
+<p>O nome local de um atributo é a parte do nome qualificado do atributo the vem depois da vírgula. Nome qualificados são tipicamente utilizados em XML como parte do namespace(s) de um documento XML em particular.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> No {{Gecko("1.9.2")}} e anteriores, a propriedade retorna uma versão em letras maiúsculas do nome local para o atributo DOM do HTML (oposto a atributos XHTML no DOM do XML). Em versões posteriores, em conformidade com o HTML5, a propriedade retorna no caso de armazenamento interno do DOM, que é em letras minúsculas para ambos os atributos HTML no DOM do HTML  e XHTML no DOM do XML.</p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM4', '#interface-attr', 'Attr.localName')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Definição inicial</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>Recurso</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>46.0<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</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>Suporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Essa API foi disponibilizada anteriormente na API {{domxref("Node")}}.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Attr.namespaceURI")}}</li>
+ <li>{{domxref("Attr.prefix")}}</li>
+ <li>{{domxref("Element.localName")}}</li>
+ <li>{{domxref("Node.localName")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/audiocontext/currenttime/index.html b/files/pt-br/web/api/audiocontext/currenttime/index.html
new file mode 100644
index 0000000000..71f3c9c894
--- /dev/null
+++ b/files/pt-br/web/api/audiocontext/currenttime/index.html
@@ -0,0 +1,114 @@
+---
+title: AudioContext.currentTime
+slug: Web/API/AudioContext/currentTime
+tags:
+  - API
+  - AudioContext
+  - Propriedade
+  - Referencia
+  - Web Audio API
+  - currentTime
+translation_of: Web/API/BaseAudioContext/currentTime
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>The <code>currentTime</code> read-only property of the {{ domxref("AudioContext") }} interface returns a double representing an ever-increasing hardware timestamp in seconds that can be used for scheduling audio playback, visualizing timelines, etc. It starts at 0.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+console.log(audioCtx.currentTime);
+</pre>
+
+<h2 id="Exemplo">Exemplo:</h2>
+
+<pre class="brush: js;highlight[8]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+// Older webkit/blink browsers require a prefix
+
+...
+
+console.log(audioCtx.currentTime);
+</pre>
+
+<h2 id="Especificações">Especificações:</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificações:</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioContext-currentTime', 'currentTime')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade">Compatibilidade:</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{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>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>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+</div>
+
+<h2 id="Veja_também">Veja também:</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Usando a API Web Audio API</a></li>
+</ul>
diff --git a/files/pt-br/web/api/audiocontext/index.html b/files/pt-br/web/api/audiocontext/index.html
new file mode 100644
index 0000000000..12357d799c
--- /dev/null
+++ b/files/pt-br/web/api/audiocontext/index.html
@@ -0,0 +1,258 @@
+---
+title: AudioContext
+slug: Web/API/AudioContext
+tags:
+  - API
+  - Audio
+  - Interface
+  - Referencia
+  - Som
+  - api de áudio
+translation_of: Web/API/AudioContext
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<div>
+<p>A interface <code>AudioContext</code>  representa um grafo de processamento de áudio construído a partir de nós de áudio conectados, cada um representado por um {{domxref("AudioNode")}} Um contexto de áudio controla a criação dos nós que contém e a execução do processamento de áudio, ou decodificação. Você precisa criar um AudioContext antes de fazer qualquer outra coisa, pois tudo acontece dentro de um contexto.</p>
+</div>
+
+<p>Um <code>AudioContext</code>pode ser um alvo de eventos, portanto, ele implementa a interface {{domxref("EventTarget")}}.</p>
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("AudioContext.AudioContext", "AudioContext()")}}</dt>
+ <dd>Cria e retorna um novo objeto <code>AudioContext</code>.</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("AudioContext.currentTime")}} {{readonlyInline}}</dt>
+ <dd>
+ <p>Retorna um double representando um tempo cada vez maior de hardware em segundos usados ​​para agendamento. Começa em <code>0</code>.</p>
+ </dd>
+ <dt>{{domxref("AudioContext.destination")}} {{readonlyInline}}</dt>
+ <dd>Retorna um {{domxref("AudioDestinationNode")}} representando o destino final de todo o áudio no contexto. Pode ser pensado como o dispositivo de renderização de áudio.</dd>
+ <dt>{{domxref("AudioContext.listener")}} {{readonlyInline}}</dt>
+ <dd>Retorna o objeto  {{domxref("AudioListener")}}, usado para especialização 3D</dd>
+ <dt>{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}</dt>
+ <dd>Retorna um float representando a taxa de amostragem (em amostras por segundo) usado por todos os nós neste contexto. A taxa de amostragem de um {{domxref("AudioContext")}} não pode ser alterada.</dd>
+ <dt>{{domxref("AudioContext.state")}} {{readonlyInline}}</dt>
+ <dd>Retorna o estado atual do <code>AudioContext</code>.</dd>
+ <dt>{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}</dt>
+ <dd>Usado para retornar o canal de áudio que o som toca em um {{domxref("AudioContext")}} irá tocar em um dispositivo do Firefox OS.</dd>
+</dl>
+
+<h3 id="Manipuladores_de_eventos">Manipuladores de eventos</h3>
+
+<dl>
+ <dt>{{domxref("AudioContext.onstatechange")}}</dt>
+ <dd>Um manipulador de evento que é executado quando um evento do tipo {{event("statechange")}} dispara.
+ <p>Isso ocorre quando o estado <code>AudioContext</code> muda, devido ao chamado de um dos métodos de mudança de estado ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, or {{domxref("AudioContext.close")}}).</p>
+ </dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Também implementa métodos a partir da interface </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("AudioContext.close()")}}</dt>
+ <dd>
+ <p>Fecha o contexto de áudio, liberando todos os recursos de áudio do sistema que ele usa.</p>
+ </dd>
+ <dt>{{domxref("AudioContext.createBuffer()")}}</dt>
+ <dd>Cria um novo, objeto  {{ domxref("AudioBuffer") }} vázio, que pode ser preenchido por dados e reproduzido através de um {{ domxref("AudioBufferSourceNode") }}.</dd>
+ <dt>{{domxref("AudioContext.createBufferSource()")}}</dt>
+ <dd>Cria um {{domxref("AudioBufferSourceNode")}}, que pode ser usado para reproduzir e manipular dados de audio contidos dentro de um objeto {{ domxref("AudioBuffer") }}. {{ domxref("AudioBuffer") }} são criados usando {{domxref("AudioContext.createBuffer")}} ou retornado por {{domxref("AudioContext.decodeAudioData")}} quando decodifica com sucesso uma faixa de áudio.</dd>
+ <dt>{{domxref("AudioContext.createMediaElementSource()")}}</dt>
+ <dd>Cria um {{domxref("MediaElementAudioSourceNode")}} associado com um {{domxref("HTMLMediaElement")}}. Isso pode ser usado para reproduzir e manipular o audio This can be used to play and manipulate audio dos elementos  {{HTMLElement("video")}} ou {{HTMLElement("audio")}}.</dd>
+ <dt>{{domxref("AudioContext.createMediaStreamSource()")}}</dt>
+ <dd>Cria um {{domxref("MediaStreamAudioSourceNode")}} associado com um {{domxref("MediaStream")}} um fluxo (stream) de áudio que pode vir do microfone local do computador ou de outras fontes.</dd>
+ <dt>{{domxref("AudioContext.createMediaStreamDestination()")}}</dt>
+ <dd>Cria um {{domxref("MediaStreamAudioDestinationNode")}} associado com um {{domxref("MediaStream")}} representando um fluxo (stream) de audio que pode ser armazenado em um arquivo local ou enviados para outro computador.</dd>
+ <dt>{{domxref("AudioContext.createScriptProcessor()")}}</dt>
+ <dd>Cria um a {{domxref("ScriptProcessorNode")}}, que pode ser usado para processamento de áudio direto via JavaScript.</dd>
+ <dt>{{domxref("AudioContext.createStereoPanner()")}}</dt>
+ <dd>Cria um {{domxref("StereoPannerNode")}}, que pode ser usado para aplicar uma panorâmica estéreo para uma fonte de áudio.</dd>
+ <dt>{{domxref("AudioContext.createAnalyser()")}}</dt>
+ <dd>Creates an {{domxref("AnalyserNode")}}, which can be used to expose audio time and frequency data and for example to create data visualisations.</dd>
+ <dt>{{domxref("AudioContext.createBiquadFilter()")}}</dt>
+ <dd>Cria um {{domxref ("BiquadFilterNode")}}, que representa um filtro de segunda ordem configurável como vários tipos de filtros comuns diferentes: high-pass, low-pass, band-pass, etc.</dd>
+ <dt>{{domxref("AudioContext.createChannelMerger()")}}</dt>
+ <dd>Cria um {{domxref ("ChannelMergerNode")}}, que é usado para combinar canais de múltiplos fluxos de áudio em um único fluxo de áudio.</dd>
+ <dt>{{domxref("AudioContext.createChannelSplitter()")}}</dt>
+ <dd>Cria um {{domxref ("ChannelSplitterNode")}}, que é usado para acessar os canais individuais de um fluxo de áudio e processá-los separadamente.</dd>
+ <dt>{{domxref("AudioContext.createConvolver()")}}</dt>
+ <dd>Cria um {{domxref ("ConvolverNode")}}, que pode ser usado para aplicar efeitos de convolução ao seu gráfico de áudio, por exemplo, um efeito de reverberação.</dd>
+ <dt>{{domxref("AudioContext.createDelay()")}}</dt>
+ <dd>
+ <p>Cria um {{domxref ("DelayNode")}}, que é usado para atrasar o sinal de áudio recebido por uma certa quantia. Este nó também é útil para criar loops de feedback em um gráfico de API de Web Audio.</p>
+ </dd>
+ <dt>{{domxref("AudioContext.createDynamicsCompressor()")}}</dt>
+ <dd>Cria um {{domxref("DynamicsCompressorNode")}}, que pode ser usada para aplicar compressão acústica para um sínal de áudio.</dd>
+ <dt>{{domxref("AudioContext.createGain()")}}</dt>
+ <dd>Cria um {{domxref ("GainNode")}}, que pode ser usado para controlar o volume total do gráfico de áudio.</dd>
+ <dt>{{domxref("AudioContext.createIIRFilter()")}}</dt>
+ <dd>Cria um {{domxref ("IIRFilterNode")}}, que representa um filtro de segunda ordem configurável como vários tipos de filtros comuns diferentes.</dd>
+ <dt>{{domxref("AudioContext.createOscillator()")}}</dt>
+ <dd>Cria um {{domxref ("OscillatorNode")}}, uma fonte que representa uma forma de onda periódica. Isso basicamente gera um tom.</dd>
+ <dt>{{domxref("AudioContext.createPanner()")}}</dt>
+ <dd>Cria um {{domxref ("PannerNode")}}, que é usado para spatializar um fluxo de áudio recebido no espaço 3D.</dd>
+ <dt>{{domxref("AudioContext.createPeriodicWave()")}}</dt>
+ <dd>Cria um {{domxref ("PeriodicWave")}}, usado para definir uma forma de onda periódica que pode ser usada para determinar a saída de um {{domxref ("OscillatorNode")}}.</dd>
+ <dt>{{domxref("AudioContext.createWaveShaper()")}}</dt>
+ <dd>Cria um {{domxref ("WaveShaperNode")}}, que é usado para implementar efeitos de distorção não-lineares.</dd>
+ <dt>{{domxref("AudioContext.createAudioWorker()")}}</dt>
+ <dd>
+ <p>Cria um {{domxref ("AudioWorkerNode")}}, que pode interagir com um segmento de trabalho da Web para gerar, processar ou analisar o áudio diretamente. Isso foi adicionado à especificação em 29 de agosto de 2014, e ainda não foi implementado em nenhum navegador.</p>
+ </dd>
+ <dt>{{domxref("AudioContext.decodeAudioData()")}}</dt>
+ <dd>Decodifica assincronamente dados de arquivos de áudio contidos em {{domxref("ArrayBuffer")}}. Nesse caso, o ArrayBuffer geralmente é carregado a partir de um atributo de <code>resposta</code> {{domxref("XMLHttpRequest")}}'s definir o <code>responseType</code> para <code>arraybuffer</code>. Esse método funciona apenas em arquivos completos, não fragmentos de arquivos de áudio.</dd>
+ <dt>{{domxref("AudioContext.resume()")}}</dt>
+ <dd>Retoma a progressão do tempo em um contexto de áudio que anteriormente foi suspenso.</dd>
+ <dt>{{domxref("AudioContext.suspend()")}}</dt>
+ <dd>Suspende a progressão do tempo no contexto de áudio, interrompendo temporariamente o acesso ao hardware de áudio e reduzindo o uso da CPU / bateria no processo.</dd>
+</dl>
+
+<h2 id="Métodos_obsoletos">Métodos obsoletos</h2>
+
+<dl>
+ <dt>{{domxref("AudioContext.createJavaScriptNode()")}}</dt>
+ <dd>Cria um {{domxref("JavaScriptNode")}}, usado para para processamento de áudio direto via JavaScript. Este método é obsoleto e foi substituído por {{domxref("AudioContext.createScriptProcessor()")}}.</dd>
+ <dt>{{domxref("AudioContext.createWaveTable()")}}</dt>
+ <dd>Cria um {{domxref ("WaveTableNode")}}, usado para definir uma forma de onda periódica. Este método é obsoleto e foi substituído por {{domxref ("AudioContext.createPeriodicWave ()")}}.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Declaração básica de contexto de áudio:</p>
+
+<pre class="brush: js notranslate">var audioCtx = new AudioContext();</pre>
+
+<p>Cruzar a variante do navegador:</p>
+
+<pre class="brush: js notranslate">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var oscillatorNode = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+var finish = audioCtx.destination;
+// etc.</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-audiocontext-interface', 'AudioContext')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}<br>
+    35</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>createStereoPanner()</code></td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(37.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(40.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>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>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(37.0)}} </td>
+   <td>2.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createStereoPanner()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul style="margin-left: 40px;">
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Usando a Web Audio API</a></li>
+ <li>{{domxref("OfflineAudioContext")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/audionode/index.html b/files/pt-br/web/api/audionode/index.html
new file mode 100644
index 0000000000..8660afb978
--- /dev/null
+++ b/files/pt-br/web/api/audionode/index.html
@@ -0,0 +1,191 @@
+---
+title: AudioNode
+slug: Web/API/AudioNode
+translation_of: Web/API/AudioNode
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>A interface AudioNode é uma interface genérica para representar um módulo de processamento como uma fonte de áudio (ex. um elemento HTML {{HTMLElement("audio")}} ou {{HTMLElement("video")}} , um {{domxref("OscillatorNode")}}, etc.), um destino do áudio, um módulo intermediário de processamento (ex. um filtro como {{domxref("BiquadFilterNode")}} ou {{domxref("ConvolverNode")}}), ou um controle de volume (como o {{domxref("GainNode")}}).</p>
+
+<p><img alt="AudioNodes participating in an AudioContext create a audio routing graph." src="https://mdn.mozillademos.org/files/12535/WebAudioBasicspt-br.png" style="display: block; height: 461px; margin: 0px auto; width: 677px;"></p>
+
+<p>Um <code>AudioNode</code> tem entradas (inputs) e saídas (outputs), cada uma delas com uma determinada quantidade de canais. Um <code>AudioNode</code> sem nenhuma entrada e uma ou múltiplas saídas é chamado de <em>source node</em>. The exact processing done varies from one <code>AudioNode</code> to another but, in general, a node reads its inputs, does some audio-related processing, and generates new values for its outputs, or simply lets the audio pass through (for example in the {{domxref("AnalyserNode")}}, where the result of the processing is accessed separately).</p>
+
+<p>Different nodes can be linked together to build a <em>processing graph</em>. Such a graph is contained in an {{domxref("AudioContext")}}. Each <code>AudioNode</code> participates in exactly one such context. In general, processing nodes inherit the properties and methods of <code>AudioNode</code>, but also define their own functionality on top. See the individual node pages for more details, as listed on the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> homepage.</p>
+
+<div class="note">
+<p><strong>Note</strong>: An <code>AudioNode</code> can be target of events, therefore it implements the {{domxref("EventTarget")}} interface.</p>
+</div>
+
+<h2 id="Properties" style="">Properties</h2>
+
+<dl>
+ <dt>{{domxref("AudioNode.context")}} {{readonlyInline}}</dt>
+ <dd>Returns the associated {{domxref("AudioContext")}}, that is the object representing the processing graph the node is participating in.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}</dt>
+ <dd>Returns the number of inputs feeding the node. Source nodes are defined as nodes having a <code>numberOfInputs</code> property with a value of <code>0</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}</dt>
+ <dd>Returns the number of outputs coming out of the node. Destination nodes — like {{ domxref("AudioDestinationNode") }} — have a value of <code>0</code> for this attribute.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.channelCount")}}</dt>
+ <dd>Represents an integer used to determine how many channels are used when <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> connections to any inputs to the node. Its usage and precise definition depend on the value of {{domxref("AudioNode.channelCountMode")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.channelCountMode")}}</dt>
+ <dd>Represents an enumerated value describing the way channels must be matched between the node's inputs and outputs.</dd>
+ <dt>{{domxref("AudioNode.channelInterpretation")}}</dt>
+ <dd>Represents an enumerated value describing the meaning of the channels. This interpretation will define how audio <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> will happen.<br>
+ The possible values are <code>"speakers"</code> or <code>"discrete"</code>.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Also implements methods from the interface </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("AudioNode.connect(AudioNode)")}}</dt>
+ <dd>Allows us to connect one output of this node to one input of another node.</dd>
+ <dt>{{domxref("AudioNode.connect(AudioParam)")}}</dt>
+ <dd>Allows us to connect one output of this node to one input of an audio parameter.</dd>
+ <dt>{{domxref("AudioNode.disconnect()")}}</dt>
+ <dd>Allows us to disconnect the current node from another one it is already connected to.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>This simple snippet of code shows the creation of some audio nodes, and how the <code>AudioNode</code> properties and methods can be used. You can find examples of such usage on any of the examples linked to on the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> landing page (for example <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.)<span class="p"> </span></p>
+
+<pre class="brush: js;highlight[8,9,11,12,13,14]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+
+var audioCtx = new AudioContext();
+
+var oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+oscillator.context;
+oscillator.numberOfInputs;
+oscillator.numberOfOutputs;
+oscillator.channelCount;</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 Audio API', '#the-audionode-interface', 'AudioNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>channelCount</code> <code>channelCountMode</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>connect</code><code>(AudioParam)</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</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>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>25.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>channelCount</code><br>
+    <code>channelCountMode</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>connect</code><code>(AudioParam)</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/pt-br/web/api/background_tasks_api/index.html b/files/pt-br/web/api/background_tasks_api/index.html
new file mode 100644
index 0000000000..e5973e9400
--- /dev/null
+++ b/files/pt-br/web/api/background_tasks_api/index.html
@@ -0,0 +1,509 @@
+---
+title: Background Tasks API
+slug: Web/API/Background_Tasks_API
+translation_of: Web/API/Background_Tasks_API
+---
+<div>{{DefaultAPISidebar("Tarefas em segundo plano")}}{{draft}}</div>
+
+<p>The <strong>Cooperative Scheduling of Background Tasks API</strong> (also referred to as the Background Tasks API or simply the <code>requestIdleCallback()</code> API) provides the ability to queue tasks to be executed automatically by the user agent when it determines that there is free time to do so.</p>
+
+<h2 id="Conceitos_e_uso">Conceitos e uso</h2>
+
+<p>The main thread of a Web browser is centered around its event loop. This code draws any pending updates to the {{domxref("Document")}} currently being displayed, runs any JavaScript code the page needs to run, accepts events from input devices, and dispatches those events to the elements that should receive them. In addition, the event loop handles interactions with the operating system, updates to the browser's own user interface, and so forth. It's an extremely busy chunk of code, and your main JavaScript code may run right inside this thread along with all of this. Certainly most if not all code that is capable of making changes to the DOM is running in the main thread, since it's common for user interface changes to only be available to the main thread.</p>
+
+<p>Because event handling and screen updates are two of the most obvious ways users notice performance issues, it's important for your code to be a good citizen of the Web and help to prevent stalls in the execution of the event loop. In the past, there's been no way to do this reliably other than by writing code that's as efficient as possible and by offloading as much work as possible to <a href="/en-US/docs/Web/API/Web_Workers_API">workers</a>. {{domxref("Window.requestIdleCallback()")}} makes it possible to become actively engaged in helping to ensure that the browser's event loop runs smoothly, by allowing the browser to tell your code how much time it can safely use without causing the system to lag. If you stay within the limit given, you can make the user's experience much better.</p>
+
+<h3 id="Getting_the_most_out_of_idle_callbacks">Getting the most out of idle callbacks</h3>
+
+<p>Because idle callbacks are intended to give your code a way to cooperate with the event loop to ensure that the system is utilized to its full potential without over-tasking it, resulting in lag or other performance problems, you should be thoughtful about how you go about using them.</p>
+
+<ul>
+ <li><strong>Use idle callbacks for tasks which don't have high priority.</strong> Because you don't know how many callbacks have been established, and you don't know how busy the user's system is, you don't know how often your callback will be run (unless you specify a <code>timeout</code>. There's no guarantee that every pass through the event loop (or even every screen update cycle) will include any idle callbacks being executed; if the event loop uses all available time, you're out of luck (again, unless you've used a <code>timeout</code>).</li>
+ <li><strong>Idle callbacks should do their best not to overrun the time allotted.</strong> While the browser, your code, and the Web in general will continue to run normally if you go over the specified time limit (even if you go<strong> </strong><em>way</em> over it), the time restriction is intended to ensure that you leave the system enough time to finish the current pass through the event loop and get on to the next one without causing other code to stutter or animation effects to lag. Currently, {{domxref("IdleDeadline.timeRemaining", "timeRemaining()")}} has an upper limit of 50 milliseconds, but in reality you will often have less time than that, since the event loop may already be eating into that time on complex sites, with browser extensions needing processor time, and so forth.</li>
+ <li><strong>Avoid making changes to the DOM within your idle callback.</strong> By the time your callback is run, the current frame has already finished drawing, and all layout updates and computations have been completed. If you make changes that affect layout, you may force a situation in which the browser has to stop and do recalculations that would otherwise be unnecessary. If your callback needs to change the DOM, it should use {{domxref("Window.requestAnimationFrame()")}} to schedule that.</li>
+ <li><strong>Avoid tasks whose run time can't be predicted.</strong> Your idle callback should avoid doing anything that could take an unpredictable amount of time. For example, anything which might affect layout should be avoided. You should also avoid resolving or rejecting {{domxref("Promise")}}s, since that would invoke the handler for that promise's resolution or rejection as soon as your callback returns.</li>
+ <li><strong>Use timeouts when you need to, but only when you need to.</strong> Using timeouts can ensure that your code runs in a timely manner, but it can also allow you to cause lag or animation stutters by mandating that the browser call you when there's not enough time left for you to run without disrupting performance.</li>
+</ul>
+
+<h3 id="Falling_back_to_setTimeout">Falling back to setTimeout</h3>
+
+<p>Because the Background Tasks API is fairly new, your code may need to be able to work on browsers that don't yet support it. You can do so with a simple shim that uses {{domxref("WindowTimers.setTimeout()", "setTimeout()")}} as a fallback option. This isn't a {{Glossary("polyfill")}}, since it's not functionally identical; <code>setTimeout()</code> doesn't let you make use of idle periods, but instead runs your code when possible, leaving us to do the best we can to avoid causing the user to experience performance lag.</p>
+
+<pre class="brush: js">window.requestIdleCallback = window.requestIdleCallback || function(handler) {
+  let startTime = Date.now();
+
+  return setTimeout(function() {
+    handler({
+      didTimeout: false,
+      timeRemaining: function() {
+        return Math.max(0, 50.0 - (Date.now() - startTime));
+      }
+    });
+  }, 1);
+}</pre>
+
+<p>If {{domxref("Window.requestIdleCallback", "window.requestIdleCallback")}} is undefined, we create it here. The function begins by recording the time at which our implementation was called. We'll be using that to compute the value returned by our shim for {{domxref("IdleDeadline.timeRemaining()", "timeRemaining()")}}.</p>
+
+<p>Then we call {{domxref("WindowTimers.setTimeout", "setTimeout()")}}, passing into it a function which runs the callback passed into our implementation of <code>requestIdleCallback()</code>. The callback is passed an object which conforms to {{domxref("IdleDeadline")}}, with {{domxref("IdleDeadline.didTimeout", "didTimeout")}} set to <code>false</code> and a<code> </code>{{domxref("IdleDeadline.timeRemaining", "timeRemaining()")}} method which is implemented to give the callback 50 milliseconds of time to begin with. Each time <code>timeRemaining()</code> is called, it subtracts the elapsed time from the original 50 milliseconds to determine the amount of time left.</p>
+
+<p>As a result, while our shim doesn't constrain itself to the amount of idle time left in the current event loop pass like the true <code>requestIdleCallback()</code>, it does at least limit the callback to no more than 50 milliseconds of run time per pass.</p>
+
+<p>The implementation of our shim for {{domxref("Window.cancelIdleCallback", "cancelIdleCallback()")}} is much simpler:</p>
+
+<pre class="brush: js">window.cancelIdleCallback = window.cancelIdleCallback || function(id) {
+  clearTimeout(id);
+}</pre>
+
+<p>If <code>cancelIdleCallback()</code> isn't defined, this creates one which simply passes the specified callback ID through to {{domxref("WindowTimers.clearTimeout", "clearTimeout()")}}.</p>
+
+<p>Now your code will work even on browsers that don't support the Background Tasks API, albeit not as efficiently.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>The Background Tasks API adds only one new interface:</p>
+
+<dl>
+ <dt>{{domxref("IdleDeadline")}}</dt>
+ <dd>An object of this type is passed to the idle callback to provide an estimate of how long the idle period is expected to last, as well as whether or not the callback is running because its timeout period has expired.</dd>
+</dl>
+
+<p>The {{domxref("Window")}} interface is also augmented by this API to offer the new {{domxref("window.requestIdleCallback", "requestIdleCallback()")}} and {{domxref("window.cancelIdleCallback", "cancelIdleCallback()")}} methods.</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p>In this example, we'll take a look at how you can use {{domxref("window.requestIdleCallback", "requestIdleCallback()")}} to run time-consuming, low-priority tasks during time the browser would otherwise be idle. In addition, this example demonstrates how to schedule updates to the document content using {{domxref("window.requestAnimationFrame", "requestAnimationFrame()")}}.</p>
+
+<p>Below you'll find only the HTML and JavaScript for this example. The CSS is not shown, since it's not particularly crucial to understanding this functionality.</p>
+
+<h3 id="HTML_content">HTML content</h3>
+
+<p>In order to be oriented about what we're trying to accomplish, let's have a look at the HTML. This establishes a box (ID <code>"Container"</code>) that's used to present the progress of an operation (because you never know how long decoding "quantum filament tachyon emissions" will take, after all) as well as a second main box (with the ID <code>"logBox"</code>), which is used to display textual output.</p>
+
+<pre class="brush: html">&lt;p&gt;
+  Demonstration of using &lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API"&gt;
+  cooperatively scheduled background tasks&lt;/a&gt; using the &lt;code&gt;requestIdleCallback()&lt;/code&gt;
+  method.
+&lt;/p&gt;
+
+&lt;div class="container"&gt;
+  &lt;div class="label"&gt;Decoding quantum filament tachyon emissions...&lt;/div&gt;
+  &lt;progress id="progress" value="0"&gt;&lt;/progress&gt;
+  &lt;div class="button" id="startButton"&gt;
+    Start
+  &lt;/div&gt;
+  &lt;div class="label counter"&gt;
+    Task &lt;span id="currentTaskNumber"&gt;0&lt;/span&gt; of &lt;span id="totalTaskCount"&gt;0&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="logBox"&gt;
+  &lt;div class="logHeader"&gt;
+    Log
+  &lt;/div&gt;
+  &lt;div id="log"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>The progress box uses a {{HTMLElement("progress")}} element to show the progress, along with a label with sections that are changed to present numeric information about the progress. In addition, there's a "Start" button (creatively given the ID "startButton"), which the user will use to start the data processing.</p>
+
+<div class="hidden">
+<h3 id="CSS_content">CSS content</h3>
+
+<pre class="brush: css">body {
+  font-family: "Open Sans", "Lucida Grande", "Arial", sans-serif;
+  font-size: 16px;
+}
+
+.logBox {
+  margin-top: 16px;
+  width: 400px;
+  height:500px;
+  border-radius: 6px;
+  border: 1px solid black;
+  box-shadow: 4px 4px 2px black;
+}
+
+.logHeader {
+  margin: 0;
+  padding: 0 6px 4px;
+  height: 22px;
+  background-color: lightblue;
+  border-bottom: 1px solid black;
+  border-radius: 6px 6px 0 0;
+}
+
+#log {
+  font: 12px "Courier", monospace;
+  padding: 6px;
+  overflow: auto;
+  overflow-y: scroll;
+  width: 388px;
+  height: 460px;
+}
+
+.container {
+  width: 400px;
+  padding: 6px;
+  border-radius: 6px;
+  border: 1px solid black;
+  box-shadow: 4px 4px 2px black;
+  display: block;
+  overflow: auto;
+}
+
+.label {
+  display: inline-block;
+}
+
+.counter {
+  text-align: right;
+  padding-top: 4px;
+  float: right;
+}
+
+.button {
+  padding-top: 2px;
+  padding-bottom: 4px;
+  width: 100px;
+  display: inline-block;
+  float: left;
+  border: 1px solid black;
+  cursor: pointer;
+  text-align: center;
+  margin-top: 0;
+  color: white;
+  background-color: darkgreen;
+}
+
+#progress {
+  width: 100%;
+  padding-top: 6px;
+}</pre>
+</div>
+
+<h3 id="JavaScript_content">JavaScript content</h3>
+
+<p>Now that the document structure is defined, construct the JavaScript code that will do the work. The goal: to be able to add requests to call functions to a queue, with an idle callback that runs those functions whenever the system is idle for long enough a time to make progress.</p>
+
+<h4 id="Declaração_de_variáveis">Declaração de variáveis</h4>
+
+<pre class="brush: js">let taskList = [];
+let totalTaskCount = 0;
+let currentTaskNumber = 0;
+let taskHandle = null;
+</pre>
+
+<p>These variables are used to manage the list of tasks that are waiting to be performed, as well as status information about the task queue and its execution:</p>
+
+<ul>
+ <li><code>taskList</code> is an {{jsxref("Array")}} of objects, each representing one task waiting to be run.</li>
+ <li><code>totalTaskCount</code> is a counter of the number of tasks that have been added to the queue; it will only go up, never down. We use this to do the math to present progress as a precentage of total work to do.</li>
+ <li><code>currentTaskNumber</code> is used to track how many tasks have been processed so far.</li>
+ <li><code>taskHandle</code> is a reference to the task currently being processed.</li>
+</ul>
+
+<pre class="brush: js">let totalTaskCountElem = document.getElementById("totalTaskCount");
+let currentTaskNumberElem = document.getElementById("currentTaskNumber");
+let progressBarElem = document.getElementById("progress");
+let startButtonElem = document.getElementById("startButton");
+let logElem = document.getElementById("log");
+</pre>
+
+<p>Next we have variables which reference the DOM elements we need to interact with. These elements are:</p>
+
+<ul>
+ <li><code>totalTaskCountElem</code> is the {{HTMLElement("span")}} we use to insert the total number of tasks created into the status display in the progress box.</li>
+ <li><code>currentTaskNumberElem</code> is the element used to display the number of tasks processed so far.</li>
+ <li><code>progressBarElem</code> is the {{HTMLElement("progress")}} element showing the percentage of the tasks processed so far.</li>
+ <li><code>startButtonElem</code> is the start button.</li>
+ <li><code>logElem</code> is the {{HTMLElement("div")}} we'll insert logged text messages into.</li>
+</ul>
+
+<pre class="brush: js">let logFragment = null;
+let statusRefreshScheduled = false;
+</pre>
+
+<p>Finally, we set up a couple of variables for other items:</p>
+
+<ul>
+ <li><code>logFragment</code> will be used to store a {{domxref("DocumentFragment")}} that's generated by our logging functions to  create content to append to the log when the next animation frame is rendered.</li>
+ <li><code>statusRefreshScheduled</code> is used to track whether or not we've already scheduled an update of the status display box for the upcoming frame, so that we only do it once per frame</li>
+</ul>
+
+<div class="hidden">
+<p>The shim to function even if idle callbacks aren't supported. Already discussed above, so it's hidden here to save space in the article.</p>
+
+<pre class="brush: js">window.requestIdleCallback = window.requestIdleCallback || function(handler) {
+  let startTime = Date.now();
+
+  return setTimeout(function() {
+    handler({
+      didTimeout: false,
+      timeRemaining: function() {
+        return Math.max(0, 50.0 - (Date.now() - startTime));
+      }
+    });
+  }, 1);
+};
+
+window.cancelIdleCallback = window.cancelIdleCallback || function(id) {
+  clearTimeout(id);
+};
+</pre>
+</div>
+
+<h4 id="Gerenciando_a_lista_de_tarefas">Gerenciando a lista de tarefas</h4>
+
+<p>Next, let's look at the way we manage the tasks that need to be performed. We're going to do this by creating a FIFO queue of tasks, which we'll run as time allows during the idle callback period.</p>
+
+<h5 id="Enqueueing_tasks">Enqueueing tasks</h5>
+
+<p>First, we need a function that enqueues tasks for future execution. That function, <code>enqueueTask()</code>, looks like this:</p>
+
+<pre class="brush: js">function enqueueTask(taskHandler, taskData) {
+  taskList.push({
+    handler: taskHandler,
+    data: taskData
+  });
+
+  totalTaskCount++;
+
+  if (!taskHandle) {
+    taskHandle = requestIdleCallback(runTaskQueue, { timeout: 1000 });
+  }
+
+  scheduleStatusRefresh();
+}
+</pre>
+
+<p><code>enqueueTask()</code> accepts as input two parameters:</p>
+
+<ul>
+ <li><code>taskHandler</code> is a function which will be called to handle the task.</li>
+ <li><code>taskData</code> is an object which is passed into the task handler as an input parameter, to allow the task to receive custom data.</li>
+</ul>
+
+<p>To enqueue the task, we <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push">push</a> an object onto the <code>taskList</code> array; the object contains the <code>taskHandler</code> and <code>taskData</code> values under the names <code>handler</code> and <code>data</code>, respectively, then increment <code>totalTaskCount</code>, which reflects the total number of tasks which have ever been enqueued (we don't decrement it when tasks are removed from the queue).</p>
+
+<p>Next, we check to see if we already have an idle callback created; if <code>taskHandle</code> is 0, we know there isn't an idle callback yet, so we call {{domxref("Window.requestIdleCallback", "requestIdleCallback()")}} to create one. It's configured to call a function called <code>runTaskQueue()</code>, which we'll look at shortly, and with a <code>timeout</code> of 1 second, so that it will be run at least once per second even if there isn't any actual idle time available.</p>
+
+<h5 id="Running_tasks">Running tasks</h5>
+
+<p>Our idle callback handler, runTaskQueue(), gets called when the browser determines there's enough idle time available to let us do some work or our timeout of one second expires. This function's job is to run our enqueued tasks.</p>
+
+<pre class="brush: js">function runTaskQueue(deadline) {
+  while ((deadline.timeRemaining() &gt; 0 || deadline.didTimeout) &amp;&amp; taskList.length) {
+    let task = taskList.shift();
+    currentTaskNumber++;
+
+    task.handler(task.data);
+    scheduleStatusRefresh();
+  }
+
+  if (taskList.length) {
+    taskHandle = requestIdleCallback(runTaskQueue, { timeout: 1000} );
+  } else {
+    taskHandle = 0;
+  }
+}
+</pre>
+
+<p><code>runTaskQueue()</code>'s core is a loop which continues as long as there's time left (as determined by checking {{domxref("IdleDeadline.timeRemaining", "deadline.timeRemaining")}}) to be sure it's more than 0 or if the timeout limit was reached ({{domxref("IdleDeadline.didTimeout", "deadline.didTimeout")}} is true), and as long as there are tasks in the task list.</p>
+
+<p>For each task in the queue that we have time to execute, we do the following:</p>
+
+<ol>
+ <li>We <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift">remove the task object from the queue</a>.</li>
+ <li>We increment <code>currentTaskNumber</code> to track how many tasks we've executed.</li>
+ <li>We call the task's handler, <code>task.handler</code>, passing into it the task's data object (<code>task.data</code>).</li>
+ <li>We call a function, <code>scheduleStatusRefresh()</code>, to handle scheduling a screen update to reflect changes to our progress.</li>
+</ol>
+
+<p>When time runs out, if there are still tasks left in the list, we call {{domxref("Window.requestIdleCallback", "requestIdleCallback()")}} again so that we can continue to process the tasks the next time there's idle time available. If the queue is empty, we set taskHandle to 0 to indicate that we don't have a callback scheduled. That way, we'll know to request a callback next time <code>enqueueTask()</code> is called.</p>
+
+<h4 id="Updating_the_status_display">Updating the status display</h4>
+
+<p>One thing we want to be able to do is update our document with log output and progress information. However, you can't safely change the DOM from within an idle callback. Instead, we'll use {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} to ask the browser to call us when it's safe to update the display.</p>
+
+<h5 id="Scheduling_display_updates">Scheduling display updates</h5>
+
+<p>DOM changes are scheduled by calling the <code>scheduleStatusRefresh()</code> function.</p>
+
+<pre class="brush: js">function scheduleStatusRefresh() {
+    if (!statusRefreshScheduled) {
+      requestAnimationFrame(updateDisplay);
+      statusRefreshScheduled = true;
+  }
+}
+</pre>
+
+<p>This is a simple function. It checks to see if we've already scheduled a display refresh by checking the value of <code>statusRefreshScheduled</code>. If it's <code>false</code>, we call {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} to schedule a refresh, providing the <code>updateDisplay()</code> function to be called to handle that work.</p>
+
+<h5 id="Updating_the_display">Updating the display</h5>
+
+<p>The <code>updateDisplay()</code> function is responsible for drawing the contents of the progress box and the log. It's called by the browser when the DOM is in a safe condition for us to apply changes during the process of rendering the next frame.</p>
+
+<pre class="brush: js">function updateDisplay() {
+  let scrolledToEnd = logElem.scrollHeight - logElem.clientHeight &lt;= logElem.scrollTop + 1;
+
+  if (totalTaskCount) {
+    if (progressBarElem.max != totalTaskCount) {
+      totalTaskCountElem.textContent = totalTaskCount;
+      progressBarElem.max = totalTaskCount;
+    }
+
+    if (progressBarElem.value != currentTaskNumber) {
+      currentTaskNumberElem.textContent = currentTaskNumber;
+      progressBarElem.value = currentTaskNumber;
+    }
+  }
+
+  if (logFragment) {
+    logElem.appendChild(logFragment);
+    logFragment = null;
+  }
+
+  if (scrolledToEnd) {
+      logElem.scrollTop = logElem.scrollHeight - logElem.clientHeight;
+  }
+
+  statusRefreshScheduled = false;
+}</pre>
+
+<p>First, <code>scrolledToEnd</code> is set to <code>true</code> if the text in the log is scrolled to the bottom; otherwise it's set to <code>false</code>. We'll use that to determine if we should update the scroll position to ensure that the log stays at the end when we're done adding content to it.</p>
+
+<p>Next, we update the progress and status information if any tasks have been enqueued.</p>
+
+<ol>
+ <li>If the current maximum value of the progress bar is different from the current total number of enqueued tasks (<code>totalTaskCount</code>), then we update the contents of the displayed total number of tasks (<code>totalTaskCountElem</code>) and the maximum value of the progress bar, so that it scales properly.</li>
+ <li>We do the same thing with the number of tasks processed so far; if <code>progressBarElem.value</code> is different from the task number currently being processed (<code>currentTaskNumber</code>), then we update the displayed value of the currently-being-processed task and the current value of the progress bar.</li>
+</ol>
+
+<p>Then, if there's text waiting to be added to the log (that is, if <code>logFragment</code> isn't <code>null</code>), we append it to the log element using {{domxref("Node.appendChild", "Element.appendChild()")}} and set <code>logFragment</code> to <code>null</code> so we don't add it again.</p>
+
+<p>If the log was scrolled to the end when we started, we make sure it still is. Then we set <code>statusRefreshScheduled</code> to <code>false</code> to indicate that we've handled the refresh and that it's safe to request a new one.</p>
+
+<h4 id="Adding_text_to_the_log">Adding text to the log</h4>
+
+<p>The <code>log()</code> function adds the specified text to the log. Since we don't know at the time <code>log()</code> is called whether or not it's safe to immediately touch the DOM, we will cache the log text until it's safe to update. Above, in the code for <code>updateDisplay</code><code>()</code>, you can find the code that actually adds the logged text to the log element when the animation frame is being updated.</p>
+
+<pre class="brush: js">function log(text) {
+  if (!logFragment) {
+      logFragment = document.createDocumentFragment();
+  }
+
+  let el = document.createElement("div");
+  el.innerHTML = text;
+  logFragment.appendChild(el);
+}
+</pre>
+
+<p>First, we create a {{domxref("DocumentFragment")}} object named <code>logFragment</code> if one doesn't currently exist. This element is a pseudo-DOM into which we can insert elements without immediately changing the main DOM itself.</p>
+
+<p>We then create a new {{HTMLElement("div")}} element and set its contents to match the input <code>text</code>. Then we append the new element to the end of the pseudo-DOM in <code>logFragment</code>. <code>logFragment</code> will accumulate log entries until the next time <code>updateDisplay()</code> is called because the DOM for the changes.</p>
+
+<h3 id="Running_tasks_2">Running tasks</h3>
+
+<p>Now that we've got the task management and display maintenance code done, we can actually start setting up code to run tasks that get work done.</p>
+
+<h4 id="The_task_handler">The task handler</h4>
+
+<p>The function we'll be using as our task handler—that is, the function that will be used as the value of the task object's <code>handler</code> property—is <code>logTaskHandler</code>(). It's a simple function that outputs a bunch of stuff to the log for each task. In your own application, you'd replace this code with whatever task it is you wish to perform during idle time. Just remember that anything you want to do that changes the DOM needs to be handled through {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}}.</p>
+
+<pre class="brush: js">function logTaskHandler(data) {
+  log("&lt;strong&gt;Running task #" + currentTaskNumber + "&lt;/strong&gt;");
+
+  for (i=0; i&lt;data.count; i+=1) {
+    log((i+1).toString() + ". " + data.text);
+  }
+}
+</pre>
+
+<h4 id="The_main_program">The main program</h4>
+
+<p>Everything is triggered when the user clicks the Start button, which causes the <code>decodeTechnoStuff()</code> function to be called.</p>
+
+<div class="hidden">
+<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random?document_saved=true#Getting_a_random_integer_between_two_values_inclusive">getRandomIntInclusive()</a></code> method comes from the examples for {{jsxref("Math.random()")}}; we'll just link to it below but it needs to be included here for the example to work.</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;
+}
+</pre>
+</div>
+
+<pre class="brush: js">function decodeTechnoStuff() {
+  totalTaskCount = 0;
+  currentTaskNumber = 0;
+  updateDisplay();
+
+  let n = getRandomIntInclusive(100, 200);
+
+  for (i=0; i&lt;n; i++) {
+    let taskData = {
+      count: getRandomIntInclusive(75, 150),
+      text: "This text is from task number " + (i+1).toString() + " of " + n
+    };
+
+    enqueueTask(logTaskHandler, taskData);
+  }
+}
+
+document.getElementById("startButton").addEventListener("click", decodeTechnoStuff, false);</pre>
+
+<p><code>decodeTechnoStuff()</code> starts by zeroing the values of totalTaskCount (the number of tasks added to the queue so far) and currentTaskNumber (the task currently being run), and then calls <code>updateDisplay()</code> to reset the display to its "nothing's happened yet" state.</p>
+
+<p>This example will create a random number of tasks (between 100 and 200 of them). To do so, we use the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random?document_saved=true#Getting_a_random_integer_between_two_values_inclusive"><code>getRandomIntInclusive()</code> function</a> that's provided as an example in the documentation for {{jsxref("Math.random()")}} to get the number of tasks to create.</p>
+
+<p>Then we start a loop to create the actual tasks. For each task, we create an object, <code>taskData</code>, which includes two properties:</p>
+
+<ul>
+ <li><code>count</code> is the number of strings to output into the log from the task.</li>
+ <li><code>text</code> is the text to output to the log the number of times specified by <code>count</code>.</li>
+</ul>
+
+<p>Each task is then enqueued by calling <code>enqueueTask()</code>, passing in <code>logTaskHandler</code><code>()</code> as the handler function and the <code>taskData</code> object as the object to pass into the function when it's called.</p>
+
+<dl>
+</dl>
+
+<h3 id="Result">Result</h3>
+
+<p>Below is the actual functioning result of the code above. Try it out, play with it in your browser's developer tools, and experiment with using it in your own code.</p>
+
+<p>{{ EmbedLiveSample('Example', 600, 700) }}</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("Background Tasks")}}</td>
+   <td>{{Spec2("Background Tasks")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.Window.requestIdleCallback")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window.requestIdleCallback()")}}</li>
+ <li>{{domxref("Window.cancelIdleCallback()")}}</li>
+ <li>{{domxref("IdleDeadline")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/batterymanager/charging/index.html b/files/pt-br/web/api/batterymanager/charging/index.html
new file mode 100644
index 0000000000..3a079ebc11
--- /dev/null
+++ b/files/pt-br/web/api/batterymanager/charging/index.html
@@ -0,0 +1,33 @@
+---
+title: BatteryManager.charging
+slug: Web/API/BatteryManager/charging
+tags:
+  - API
+  - Battery API
+  - Propriedade
+translation_of: Web/API/BatteryManager/charging
+---
+<p>{{APIRef("Battery API")}}</p>
+
+<p>Um valor Booleano que indica se a bateria está sendo ou não carregada no momento.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>charging</em> = navigator.battery.charging</pre>
+
+<p>No retorno, <code>charging</code> indica se a bateria está sendo carregada no momento; se a bateria está carregando (ou se não há bateria), este valor é  <code>true</code>. Caso contrário, o valor é <code>false</code>.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Specifications")}}</p>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Browser_compatibility")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("Navigator.battery")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/batterymanager/chargingtime/index.html b/files/pt-br/web/api/batterymanager/chargingtime/index.html
new file mode 100644
index 0000000000..3a02666207
--- /dev/null
+++ b/files/pt-br/web/api/batterymanager/chargingtime/index.html
@@ -0,0 +1,34 @@
+---
+title: BatteryManager.chargingTime
+slug: Web/API/BatteryManager/chargingTime
+tags:
+  - API
+  - Battery API
+  - Propriedade
+  - Referencia
+translation_of: Web/API/BatteryManager/chargingTime
+---
+<p>{{APIRef("Battery API")}}</p>
+
+<p>Indica a quantidade de tempo, em segundos, que resta até que a bateria esteja totalmente carregada.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>time</em> = navigator.battery.chargingTime</pre>
+
+<p>No retorno, <code>time</code> é o tempo restante em segundos até que a bateria esteja totalmente carregada, ou 0 se a bateria já estiver com sua carga completa. Se a bateria estiver descarregando (ou se o sistema não é capaz de derminar o tempo restante para o carregamento), este valor é <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Specifications")}}</p>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Browser_compatibility")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("Navigator.battery")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/batterymanager/dischargingtime/index.html b/files/pt-br/web/api/batterymanager/dischargingtime/index.html
new file mode 100644
index 0000000000..e5ca6b486c
--- /dev/null
+++ b/files/pt-br/web/api/batterymanager/dischargingtime/index.html
@@ -0,0 +1,34 @@
+---
+title: BatteryManager.dischargingTime
+slug: Web/API/BatteryManager/dischargingTime
+tags:
+  - API
+  - Battery API
+  - Propriedade
+  - Referencia
+translation_of: Web/API/BatteryManager/dischargingTime
+---
+<p>{{APIRef("Battery API")}}</p>
+
+<p>Indica a quantidade de tempo, em segundos, que restam até a bateria estar totalmente descarregada.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>time</em> = navigator.battery.dischargingTime</pre>
+
+<p>No retorno, <code>time</code> é o tempo restante em segundos até que a bateria esteja totamente descarregada e o sistema suspenda. Este valor é <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> se a bateria estiver carregando, ao invés de descarregando, ou se o sistema não for capaz de determinar o tempo restante de carregamento (ou ainda se não existir uma bateria disponível).</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Specifications")}}</p>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Browser_compatibility")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("Navigator.battery")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/batterymanager/index.html b/files/pt-br/web/api/batterymanager/index.html
new file mode 100644
index 0000000000..1febd0d799
--- /dev/null
+++ b/files/pt-br/web/api/batterymanager/index.html
@@ -0,0 +1,140 @@
+---
+title: BatteryManager
+slug: Web/API/BatteryManager
+tags:
+  - API
+  - Battery API
+  - Referencia
+translation_of: Web/API/BatteryManager
+---
+<p>{{APIRef("Battery API")}}</p>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>A interface <code>BatteryManager</code> fornece maneiras de obter informações sobre o nível de carga da bateria do sistema.</p>
+
+<p>A propriedade {{domxref("Navigator.battery","navigator.battery")}} retorna uma instância da interface <code>BatteryManager</code> que você pode utilizar para interajir com a API de status da bateria.</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("BatteryManager.charging")}} {{ReadOnlyInline}}</dt>
+ <dd>
+ <p>Um valor Booleano que indica se a bateria está sendo carregada no momento.</p>
+ </dd>
+ <dt>{{domxref("BatteryManager.chargingTime")}} {{ReadOnlyInline}}</dt>
+ <dd>
+ <p>Um número representando o tempo restante em segundos até a bateria estar completamente carregada, ou 0 se a carga já estiver completa.</p>
+ </dd>
+ <dt>{{domxref("BatteryManager.dischargingTime")}} {{ReadOnlyInline}}</dt>
+ <dd>Um número representando o tempo restante em segundos até a bateria estar completamente descarregada e o sistema ser suspenso.</dd>
+ <dt>{{domxref("BatteryManager.level")}} {{ReadOnlyInline}}</dt>
+ <dd>Um número representando o nível de carga da bateria do sistema em uma escala de valores entre 0.0 e 1.0.</dd>
+</dl>
+
+<h3 id="Eventos">Eventos</h3>
+
+<dl>
+ <dt>{{domxref("BatteryManager.onchargingchange")}}</dt>
+ <dd>Tratamento para o evento {{event("chargingchange")}}; Esse evento é enviado quando o status de carregamento da bateria é atualizado.</dd>
+ <dt>{{domxref("BatteryManager.onchargingtimechange")}}</dt>
+ <dd>Tratamento para o evento {{event("chargingtimechange")}}; Esse evento é enviado quando o tempo de carregamento da bateria é atualizado.</dd>
+ <dt>{{domxref("BatteryManager.ondischargingtimechange")}}</dt>
+ <dd>Tratamento para o evento {{event("dischargingtimechange")}}; Esse evento é enviado quando o tempo de descarregamento da bateria é atualizado.</dd>
+ <dt>{{domxref("BatteryManager.onlevelchange")}}</dt>
+ <dd>Tratamento para o evento {{event("levelchange")}}; Esse evento é enviado quando a nível da bateria é atualizado.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p>Herdado de {{domxref("EventTarget")}}:</p>
+
+<p>{{page("/pt-BR/docs/Web/API/EventTarget","Métodos")}}</p>
+
+<h2 id="Specifications" name="Specifications">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Battery API')}}</td>
+   <td>{{Spec2('Battery API')}}</td>
+   <td>Especificação Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade entre navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatNo() }}<br>
+    Chrome para Android: <a href="http://crbug.com/135863">crbug.com/135863</a><br>
+    Chrome OS: <a href="http://crbug.com/122593">crbug.com/122593</a></td>
+   <td>{{CompatGeckoDesktop("10")}} {{ property_prefix("moz") }} [1]<br>
+    {{CompatGeckoDesktop("16")}} (sem prefixo) [2]</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>Funcionalidade</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatGeckoMobile("10")}} {{ property_prefix("moz") }} [1]<br>
+    {{CompatGeckoMobile("16")}} (sem prefixo) [2]</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notas_para_o_Gecko">Notas para o Gecko</h3>
+
+<p>[1] Desabilitado por padrão no Firefox 10.0, mas pode ser habilitado alterando a preferência <code>dom.battery.enabled</code> para <code>true</code>. A partir do Firefox 11.0, <code>mozBattery</code> é habilitado por padrão.</p>
+
+<p>[2] A Battery API é atualmente suportada no Android, Windows e Linux com UPower instalado. O suporte para MacOS está disponível a partir do Gecko 18.0 {{geckoRelease("18.0")}};</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{ domxref("Navigator.battery","navigator.battery") }}</li>
+ <li>A <a href="/pt-BR/docs/WebAPI/Battery_Status" title="/en-US/docs/WebAPI/Battery_Status">Battery Status API</a></li>
+</ul>
diff --git a/files/pt-br/web/api/batterymanager/level/index.html b/files/pt-br/web/api/batterymanager/level/index.html
new file mode 100644
index 0000000000..b8d58c68c6
--- /dev/null
+++ b/files/pt-br/web/api/batterymanager/level/index.html
@@ -0,0 +1,34 @@
+---
+title: BatteryManager.level
+slug: Web/API/BatteryManager/level
+tags:
+  - API
+  - Battery API
+  - Propriedade
+  - Referencia
+translation_of: Web/API/BatteryManager/level
+---
+<p>{{APIRef("Battery API")}}</p>
+
+<p>Indica o nível de carga atual da bateria como um valor entre <code>0.0</code> e <code>1.0</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var level = navigator.battery.level</pre>
+
+<p>No retorno, <code>level</code> é um número representando o nível de carga da bateria do sistema em uma escala de valores entre 0.0 e 1.0. Um valor de 0.0 significa que a bateria está vazia e o sistema está prestes a ser suspenso. Um valor de 1.0 significa que a bateria está cheia. Um valor de 1.0 é também retornado se a implementação não é capaz de determinar o nível de carga ou se o sistema não é alimentado por bateria.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Specifications")}}</p>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Browser_compatibility")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("Navigator.battery","navigator.battery")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/batterymanager/onchargingchange/index.html b/files/pt-br/web/api/batterymanager/onchargingchange/index.html
new file mode 100644
index 0000000000..2a2e687801
--- /dev/null
+++ b/files/pt-br/web/api/batterymanager/onchargingchange/index.html
@@ -0,0 +1,35 @@
+---
+title: BatteryManager.onchargingchange
+slug: Web/API/BatteryManager/onchargingchange
+tags:
+  - API
+  - Battery API
+  - Event Handler
+  - Propriedade
+  - Referencia
+translation_of: Web/API/BatteryManager/onchargingchange
+---
+<p>{{APIRef("Battery API")}}</p>
+
+<p>Especifica um <em>event listener</em> para receber eventos {{event("chargingchange")}}. Esses eventos ocorrem quando o estado {{domxref("BatteryManager.charging", "charging")}} (carregando) da bateria é atualizado.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">navigator.battery.onchargingchange = funcRef</pre>
+
+<p>Onde <code><em>funcRef</em></code> é uma função para ser chamada quando o evento {{event("chargingchange")}} ocorre.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Specifications")}}</p>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Browser_compatibility")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("Navigator.battery")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/batterymanager/onchargingtimechange/index.html b/files/pt-br/web/api/batterymanager/onchargingtimechange/index.html
new file mode 100644
index 0000000000..8c711d75d6
--- /dev/null
+++ b/files/pt-br/web/api/batterymanager/onchargingtimechange/index.html
@@ -0,0 +1,35 @@
+---
+title: BatteryManager.onchargingtimechange
+slug: Web/API/BatteryManager/onchargingtimechange
+tags:
+  - API
+  - Battery API
+  - Event Handler
+  - Propriedade
+  - Referencia
+translation_of: Web/API/BatteryManager/onchargingtimechange
+---
+<p>{{APIRef("Battery API")}}</p>
+
+<p>Especifica um <em>event listener</em> para receber eventos {{event("chargingtimechange")}}. Esses eventos ocorrem quando a propriedade {{domxref("BatteryManager.chargingTime","chargingTime")}} (tempo de carregamento) da bateria é atualizada.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">navigator.battery.onchargingtimechange = funcRef</pre>
+
+<p>Onde <code><em>funcRef</em></code> é uma função para ser chamada quando o evento {{event("chargingtimechange")}} ocorre.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Specifications")}}</p>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Browser_compatibility")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("Navigator.battery")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/batterymanager/ondischargintimechange/index.html b/files/pt-br/web/api/batterymanager/ondischargintimechange/index.html
new file mode 100644
index 0000000000..4f5c402588
--- /dev/null
+++ b/files/pt-br/web/api/batterymanager/ondischargintimechange/index.html
@@ -0,0 +1,35 @@
+---
+title: BatteryManager.ondischargingtimechange
+slug: Web/API/BatteryManager/ondischargintimechange
+tags:
+  - API
+  - Battery API
+  - Event Handler
+  - Propriedade
+  - Referencia
+translation_of: Web/API/BatteryManager/ondischargingtimechange
+---
+<p>{{APIRef("Battery API")}}</p>
+
+<p>Especifica um <em>event listener</em> para receber eventos {{event("dischargingtimechange")}}. Esses eventos ocorrem quando a propriedade {{domxref("BatteryManager.dischargingTime","dischargingTime")}} (tempo de descarregamento) da bateria é atualizada.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">navigator.battery.ondischargingtimechange = funcRef</pre>
+
+<p>Onde <code><em>funcRef</em></code> é uma função para ser chamada quando o evento {{event("dischargingtimechange")}} ocorre.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Specifications")}}</p>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Browser_compatibility")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("Navigator.battery")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/batterymanager/onlevelchange/index.html b/files/pt-br/web/api/batterymanager/onlevelchange/index.html
new file mode 100644
index 0000000000..911d760327
--- /dev/null
+++ b/files/pt-br/web/api/batterymanager/onlevelchange/index.html
@@ -0,0 +1,35 @@
+---
+title: BatteryManager.onlevelchange
+slug: Web/API/BatteryManager/onlevelchange
+tags:
+  - API
+  - Battery API
+  - Event Handler
+  - Propriedade
+  - Referencia
+translation_of: Web/API/BatteryManager/onlevelchange
+---
+<p>{{APIRef("Battery API")}}</p>
+
+<p>Especifica um <em>event listener</em> para receber eventos {{event("levelchange")}}. Esses eventos ocorrem quando o {{domxref("BatteryManager.level","level")}} (nível) da bateria é atualizado.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">navigator.battery.onlevelchange = funcRef</pre>
+
+<p>Onde <code><em>funcRef</em></code> é uma função para ser chamada quando o evento {{event("levelchange")}} ocorre.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Specifications")}}</p>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Browser_compatibility")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("Navigator.battery")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/biquadfilternode/index.html b/files/pt-br/web/api/biquadfilternode/index.html
new file mode 100644
index 0000000000..c23c1eff33
--- /dev/null
+++ b/files/pt-br/web/api/biquadfilternode/index.html
@@ -0,0 +1,186 @@
+---
+title: BiquadFilterNode
+slug: Web/API/BiquadFilterNode
+tags:
+  - API
+  - BiquadFilterNode
+  - CompatibilidadeNavegadorCelular
+  - Interface
+  - Referencia
+  - Web Audio API
+translation_of: Web/API/BiquadFilterNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<div>
+<p><span class="seoSummary">A interface <code>BiquadFilterNode</code> representa um filtro simples de ordem baixa, e é criada utilizando o método {{ domxref("AudioContext.createBiquadFilter()") }} . É o {{domxref("AudioNode")}} que pode representar diferentes tipos de filtros, dispositivo de controle de timbre, e equalizadores gráficos. </span>Um <code>BiquadFilterNode</code> sempre tem exatamente uma entrada e uma saída.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Número de entradas</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Número de saídas</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Modo de contagem de canal</th>
+   <td><code>"max"</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Contagem de canal</th>
+   <td><code>2</code> (não utilizado no modo de contagem padrão)</td>
+  </tr>
+  <tr>
+   <th scope="row">Interpretação de canal</th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("BiquadFilterNode.BiquadFilterNode", "BiquadFilterNode()")}}</dt>
+ <dd>Cria uma nova instância de um objeto do tipo <code>BiquadFilterNode</code>.</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>Herda as propriedades de seu pai, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("BiquadFilterNode.frequency")}}</dt>
+ <dd>É um <a href="/en-US/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref("AudioParam")}}, um double que representa a frequência no algoritmo de filtragem atual, medido em hertz (Hz).</dd>
+ <dt>{{domxref("BiquadFilterNode.detune")}}</dt>
+ <dd>É um  <a href="/en-US/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref("AudioParam")}} representando a dessintonização da frequência em <a class="external external-icon" href="http://en.wikipedia.org/wiki/Cent_%28music%29">cents</a>.</dd>
+ <dt>{{domxref("BiquadFilterNode.Q")}}</dt>
+ <dd>É um <a href="/en-US/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref("AudioParam")}}, um double representando um <a href="http://en.wikipedia.org/wiki/Q_factor" title="http://en.wikipedia.org/wiki/Q_factor">Q factor</a>, ou<em> fator de qualidade</em>.</dd>
+ <dt>{{domxref("BiquadFilterNode.gain")}} {{readonlyInline}}</dt>
+ <dd>É um <a href="/en-US/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref("AudioParam")}}, um double representando o <a href="http://en.wikipedia.org/wiki/Gain" title="http://en.wikipedia.org/wiki/Gain">gain</a> utilizado no algoritmo de filtragem atual.</dd>
+ <dt>{{domxref("BiquadFilterNode.type")}}</dt>
+ <dd>É um valor string que define o tipo de algoritmo de filtragem que o nó está implementando.<br>
+
+ <table class="standard-table">
+  <caption>O significado dos diferentes parâmetros de acordo com o tipo de filtro (detune tem o mesmo significado, então não está listado abaixo)</caption>
+  <thead>
+   <tr>
+    <th scope="row"><code>tipo</code></th>
+    <th scope="col">Descrição</th>
+    <th scope="col"><code>frequência</code></th>
+    <th scope="col"><code>Q</code></th>
+    <th scope="col"><code>ganho</code></th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <th scope="row"><code>lowpass</code></th>
+    <td>
+     <p>Filtro de resonância lowpass padrão de segunda ordem com 12dB/octave rolloff. Frequências abaixo do ponto de corte passam; frequências acima são atenuadas.</p>
+    </td>
+    <td>A frequência de corte.</td>
+    <td>Indica o quão perto a frequência chegou em relação ao ponto de corte. Quantomaior o valor, maior será a aproximação.</td>
+    <td><em>Não utilizado</em></td>
+   </tr>
+   <tr>
+    <th scope="row"><code>highpass</code></th>
+    <td>Filtro de resonância highpass padrão de segunda ordem com 12dB/octave rolloff. Frequências abaixo do ponto de corte são atenuadas; frequências acima passam.</td>
+    <td>A frequência de corte.</td>
+    <td>Indica o quão perto a frequência chegou em relação ao ponto de corte. Quantomaior o valor, maior será a aproximação.</td>
+    <td><em>Não utilizado</em></td>
+   </tr>
+   <tr>
+    <th scope="row"><code>bandpass</code></th>
+    <td>Filtro bandpass padrão de segunda ordem. Frequências fora do dado limite de frequências são atenuadas; frequências dentro do limite passam.</td>
+    <td>O centro de alcance de frequências.</td>
+    <td>Controla a largura da banda de frequência. Quanto maior o valor <code>Q</code>, menor a frequência de banda.</td>
+    <td><em>Não utilizado</em></td>
+   </tr>
+   <tr>
+    <th scope="row"><code>lowshelf</code></th>
+    <td>Filtro lowshelf padrão de segunda ordem. Frequências menores que a frequência recebem um aumento, ou uma atenuação; frequências maiores não sofrem alterações.</td>
+    <td>O limite superior das frequênicas recebe um aumento ou atenuação.</td>
+    <td><em>Não utilizado</em></td>
+    <td>O aumento, em dB, para ser aplicado; se negativo, ele será uma atenuação.</td>
+   </tr>
+   <tr>
+    <th scope="row"><code>highshelf</code></th>
+    <td>Filtro highshelf padrão de segunda ordem. Frequências maiores que a frequência recebem aumento ou atenuação; frequências abaixo disso não sofrem alterações.</td>
+    <td>O limite inferior de frequências recebe aumento ou uma atenuação.</td>
+    <td><em>Não utilizado</em></td>
+    <td>
+     <p>O aumento, em dB, para ser aplicado; se negativo, ele será uma atenuação.</p>
+    </td>
+   </tr>
+   <tr>
+    <th scope="row"><code>peaking</code></th>
+    <td>Frequências dentro da faixa de frequencias  recebem aumento ou atenuação; frequências fora da faixa não sofrem alterações.</td>
+    <td>O meio da faixa de frequência recebe um aumento ou uma atenuação.</td>
+    <td>Controla a largura da banda de frequência. Quanto maior o valor <code>Q</code>, menor a frequência de banda.</td>
+    <td>O aumento, em dB, para ser aplicado; se negativo, ele será uma atenuação.</td>
+   </tr>
+   <tr>
+    <th scope="row"><code>notch</code></th>
+    <td>Filtro <a href="http://en.wikipedia.org/wiki/Band-stop_filter" title="/en-US/docs/">notch</a> padrão, também chamado de filtro <em>band-stop</em> ou <em>band-rejection</em>. É o oposto do filtro de de bandpass: frequências fora da faixa de frequências atribuída passam; frequências de dentro da faixa são atenuadas.</td>
+    <td>O centro de alcance de frequências.</td>
+    <td>Controla a largura da banda de frequência. Quanto maior o valor <code>Q</code>, menor a frequência de banda.</td>
+    <td><em>Não utilizado</em></td>
+   </tr>
+   <tr>
+    <th scope="row"><code>allpass</code></th>
+    <td>Filtro <a href="http://en.wikipedia.org/wiki/All-pass_filter#Digital_Implementation" title="/en-US/docs/">allpass</a> padrão de segunda ordem. Permite que todas as frequências passem, porém altera a relação de fase entre as diversas frequências.</td>
+    <td>A frequência com o máximo <a href="http://en.wikipedia.org/wiki/Group_delay_and_phase_delay" title="/en-US/docs/">group delay</a>, ou seja, a frequência onde o centro da fase de transição ocorre.</td>
+    <td>Controla o quão apurada a transição é na frequência média. Quanto maior este parâmetro, mais apurada e ampla será a transição</td>
+    <td><em>Não utilizado</em></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Herda os métodos de seu pai, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("BiquadFilterNode.getFrequencyResponse()")}}</dt>
+ <dd>A partir dos parâmetros de configuração do filtro atual, este método calcula a frequência de resposta para frequências especificadas no array de frequências.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>{{page("/en-US/docs/Web/API/AudioContext.createBiquadFilter","Example")}}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-biquadfilternode-interface', 'BiquadFilterNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2>
+
+<div>
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com dados, verifique <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request.</div>
+
+<p>{{Compat("api.BiquadFilterNode")}}</p>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utilizando a Web Audio API</a></li>
+</ul>
diff --git a/files/pt-br/web/api/blob/blob/index.html b/files/pt-br/web/api/blob/blob/index.html
new file mode 100644
index 0000000000..fbb8b121c5
--- /dev/null
+++ b/files/pt-br/web/api/blob/blob/index.html
@@ -0,0 +1,65 @@
+---
+title: Blob
+slug: Web/API/Blob/Blob
+translation_of: Web/API/Blob/Blob
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>Blob()</p>
+
+<p> </p>
+
+<p>Retorna um novo objeto <font>Blob</font> criado, cujo o conteúdo consiste na concatenação de um array de valores estabelecidos no parâmetro da função.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var aBlob = new Blob(<em> array[</em>, <em>options]</em>);
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<ul>
+ <li><em>array</em> é um {{jsxref("Array")}} de objetos {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou uma combinação de quaisquer um destes objetos, que serão colocados dentro do {{domxref("Blob")}}. DOMStrings são codificadas como UTF-8.</li>
+ <li><em>option</em><em>s</em> é um dicionário opcional <code>BlobPropertyBag</code> que pode especificar os dois atributos seguintes:
+  <ul>
+   <li><code>type</code>, com um valor padrão de <code>""</code>, que representa o MIME type do conteúdo do array que será inserido no blob.</li>
+   <li><code>endings</code>, com um valor padrão de <code>"transparent"</code>, especifica como strings contendo o caracter de final de linha <code>\n</code> deverão ser escritos. Tem um dos dois valores: <code>"native"</code>, indicando que caracteres de final de linha são modificados para coincidir com a convenção do Sistema Operacional, ou <code>"transparent", </code>indicando que finais são armazenados no blob sem quaisquer modificações. {{non-standard_inline}}</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js  language-js">var aFileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;']; // an array consisting of a single DOMString
+var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob</pre>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#constructorBlob', 'Blob()')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>
+
+<div class="hidden">A tabela de compatibilidade desta página, é gerada a partir de dados estruturados. Se você quiser contribuir com mais dados, por favor vá em <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request.</div>
+
+<p>{{Compat("api.Blob.Blob")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A versão descontinuada que o construtor {{domxref("BlobBuilder")}} substitui.</li>
+</ul>
+
+<p> </p>
diff --git a/files/pt-br/web/api/blob/index.html b/files/pt-br/web/api/blob/index.html
new file mode 100644
index 0000000000..f976675a1a
--- /dev/null
+++ b/files/pt-br/web/api/blob/index.html
@@ -0,0 +1,130 @@
+---
+title: Blob
+slug: Web/API/Blob
+translation_of: Web/API/Blob
+---
+<p>{{ APIRef("File API") }}</p>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>Um objeto <code>Blob</code> representa um objeto do tipo arquivo, com  dados brutos imutáveis. Blobs representam dados que não estão necessariamente em um formato JavaScript nativo. A interface {{ domxref("File") }} é baseada no <code>Blob</code>, herdando funcionalidade blob e expandindo-o para suportar arquivos no sistema do usuário.</p>
+
+<p>Para construir um <code>Blob</code> a partir de outro objeto ou dado não-blob , utilize o construtor {{domxref("Blob.Blob","Blob()")}}. Para criar um blob que contém um subconjunto de dados de outro blob, use o método {{domxref("Blob.slice()", "slice()")}}. Para obter um objeto Blob de um arquivo no sistema de arquivos do usuário, veja a documentação {{domxref("File")}}.</p>
+
+<p>The APIs accepting <code>Blob</code> objects are also listed on the {{domxref("File")}} documentation.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> O método <code>slice()</code> usava inicialmente <code>length</code> como segundo argumento para indicar o numero de bytes a copiar no novo <code>Blob</code>.  Se você especificou valores de maneira que <code>start + length</code> excederam o tamanho do <code>Blob</code> de origem, o <code>Blob</code> retornado contém dados a partir do início do índice até o final do <code>Blob</code> de origem.</p>
+</div>
+
+<div class="note"><strong>Nota:</strong>  Esteja ciente que o método <code>slice()</code> possui prefixos de fornecedores em alguns navegadores e versões: <code>blob.mozSlice()</code> para Firefox 12 e anteriores, e <code>blob.webkitSlice()</code> para Safari. Uma versão antiga do método <code>slice()</code>, sem prefixos de fornecedor, tem semântica diferente, e portanto é obsoleta. O suporta para <code>blob.mozSlice()</code> foi descontinuado a partir do Firefox 30.</div>
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("Blob.Blob", "Blob(blobParts[, opções])")}}</dt>
+ <dd>Retorna um novo <code>Blob</code> object cujo conteúdo consiste na concatenação do array de valores passados por parâmentro.</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
+ <dd>Tamanho em bytes dos dados contidos no objeto <code>Blob</code>.</dd>
+ <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
+ <dd>Uma string que indica o MIME type dos dados no <code>Blob</code>. Se o tipo é desconhecido, então retorna uma string vazia.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
+ <dd>Retorna um novo  <code>Blob</code> object contendo dados em no intervalo de bytes especificado do <code>Blob</code> de origem.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Exemplos_de_uso_do_construtor_Blob">Exemplos de uso do construtor Blob</h3>
+
+<p>O código a seguir:</p>
+
+<pre class="brush: js">var aFileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'];
+var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // o blob
+</pre>
+
+<p>equivale a:</p>
+
+<pre class="brush: js">var oBuilder = new BlobBuilder();
+var aFileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'];
+oBuilder.append(aFileParts[0]);
+var oMyBlob = oBuilder.getBlob('text/xml'); // o blob
+</pre>
+
+<div class="warning">
+<p>O {{ domxref("BlobBuilder") }} oferece outra maneira para criar Blobs, mas é depreciado e não deveria mais ser usado.</p>
+</div>
+
+<h3 id="Exemplo_para_criar_uma_URL_para_uma_array_tipada_usando_blob">Exemplo para criar uma URL para uma array tipada usando blob</h3>
+
+<p>O código a seguir:</p>
+
+<pre class="brush: js">var typedArray = GetTheTypedArraySomehow();
+var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // passe um MIME-type útil aqui
+var url = URL.createObjectURL(blob);
+// url será algo do tipo: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
+// agora você pode usar a URL em qualquer contexto em que URLs regulares podem ser usadas, por exemplo: img.src, etc.
+</pre>
+
+<h3 id="Exemplo_de_Extração_de_Dados_de_Um_Blob">Exemplo de Extração de Dados de Um Blob</h3>
+
+<p>O único jeito de ler o conteúdo de um Blob é usando {{domxref("FileReader")}}. O código a seguir lê o conteudo de um Blob como um Array.</p>
+
+<pre class="brush: js">var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result contém o conteúdo do blob como uma array tipada
+});
+reader.readAsArrayBuffer(blob);</pre>
+
+<p>Ao usar outros métodos de {{domxref("FileReader")}}, é possível ler o conteúdo de um Blob como uma string ou como uma data URL.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API','#blob','Blob')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de Browser</h2>
+
+<div class="hidden">Tabela de compatibilidade gerada a partir de dados estruturados. Para contribuir, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um Pull-Request.</div>
+
+<p>{{Compat("api.Blob")}}</p>
+
+<h3 id="Notas_para_Gecko">Notas para Gecko</h3>
+
+<p>Anterior ao Gecko 12.0 {{ geckoRelease("12.0") }}, havia um bug que afetava o comportamento do {{ manch("slice") }}; que não funcionava para as posições <code>start</code> e <code>end</code> fora do intervalo de valores assinados como 64-bit; este bug foi corrigido para dar suporte a valores assinados como 64-bit.</p>
+
+<h2 id="Chrome_Code_-_Disponibilidade_de_Escopo">Chrome Code - Disponibilidade de Escopo</h2>
+
+<p>No escopo JSM, <code>Blob</code> é disponivel sem a necessidade de nada especial.</p>
+
+<p>No escopo Bootstrap, ele deve ser importado como tal:</p>
+
+<pre class="brush: js">const {Blob, Services} = Cu.import('resource://gre/modules/Services.jsm', {});</pre>
+
+<h2 id="Veja_Também">Veja Também</h2>
+
+<ul>
+ <li>{{ domxref("BlobBuilder") }}</li>
+ <li>{{ domxref("File") }}</li>
+</ul>
diff --git a/files/pt-br/web/api/blob/size/index.html b/files/pt-br/web/api/blob/size/index.html
new file mode 100644
index 0000000000..f73f76dca2
--- /dev/null
+++ b/files/pt-br/web/api/blob/size/index.html
@@ -0,0 +1,60 @@
+---
+title: Blob.size
+slug: Web/API/Blob/size
+translation_of: Web/API/Blob/size
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>A propriedade <strong><code>Blob.size</code></strong> retorna o tamanho em bytes de {{domxref("Blob")}} ou um {{domxref("File")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var sizeInBytes = <em>blob</em>.size
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Um número.</p>
+
+<h2 id="Exempl0">Exempl0</h2>
+
+<pre class="brush:js">// fileInput é um HTMLInputElement: &lt;input type="file" multiple id="myfileinput"&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files é um objeto FileList (similiar ao NodeList)
+var files = fileInput.files;
+
+for (var i = 0; i &lt; files.length; i++) {
+  console.log(files[i].name + " has a size of " + files[i].size + " Bytes");
+}</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-size', 'size')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("api.Blob.size")}}</p>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/blob/slice/index.html b/files/pt-br/web/api/blob/slice/index.html
new file mode 100644
index 0000000000..a6f44cfebd
--- /dev/null
+++ b/files/pt-br/web/api/blob/slice/index.html
@@ -0,0 +1,115 @@
+---
+title: Blob.slice()
+slug: Web/API/Blob/slice
+translation_of: Web/API/Blob/slice
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>O método <strong><code>Blob.slice()</code></strong> é usado para criar um novo {{domxref("Blob")}} object  <span lang="pt">contendo os dados no intervalo especificado de bytes da fonte </span>{{domxref("Blob")}}.</p>
+
+<div class="note"><span lang="pt">Nota: Esteja ciente de que o método <code>slice ()</code> tem prefixos de fornecedores em alguns navegadores e versões: <code>blob.mozSlice ()</code> para Firefox 12 e anteriores e <code>blob.webkitSlice ()</code> no Safari. Uma versão antiga do método <code>slice ()</code>, sem prefixos de fornecedor, tinha uma semântica diferente e é obsoleta</span></div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">let blob = instanceOfBlob.slice([start [, end [, contentType]]]);</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>start</code> {{optional_inline}}</dt>
+ <dd>An index into the {{domxref("Blob")}} indicating the first byte to include in the new {{domxref("Blob")}}. If you specify a negative value, it's treated as an offset from the end of the string toward the beginning. For example, -10 would be the 10th from last byte in the {{domxref("Blob")}}. The default value is 0. If you specify a value for <code>start</code> that is larger than the size of the source {{domxref("Blob")}}, the returned {{domxref("Blob")}} has size 0 and contains no data.</dd>
+ <dt><code>end</code> {{optional_inline}}</dt>
+ <dd>An index into the {{domxref("Blob")}} indicating the first byte that will *not* be included in the new {{domxref("Blob")}} (i.e. the byte exactly at this index is not included). If you specify a negative value, it's treated as an offset from the end of the string toward the beginning. For example, -10 would be the 10th from last byte in the {{domxref("Blob")}}. The default value is <code>size</code>.</dd>
+ <dt><code>contentType</code> {{optional_inline}}</dt>
+ <dd>The content type to assign to the new {{domxref("Blob")}}; this will be the value of its <code>type</code> property. The default value is an empty string.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A new {{domxref("Blob")}} object containing the specified data from the source {{domxref("Blob")}}.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#dfn-slice", "Blob.slice()")}}</td>
+   <td>{{Spec2("File API")}}</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>10 {{property_prefix("webkit")}} [1]<br>
+    21</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5 {{property_prefix("moz")}} [1]<br>
+    13 [2]</td>
+   <td>10</td>
+   <td>12 [1]</td>
+   <td>5.1 {{property_prefix("webkit")}} [3]</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>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The <code>slice()</code> method had initially taken <code>length</code> as the second argument to indicate the number of bytes to include in the new <code>Blob</code>. If you specified values such that <code>start + length</code> exceeded the size of the source <code>Blob</code>, the returned <code>Blob</code> contained data from the start index to the end of the source <code>Blob</code>. That version of the <code>slice()</code> was implemented in <a href="https://hg.mozilla.org/mozilla-central/rev/1b3947ed93c6">Firefox 4</a>, <a href="http://trac.webkit.org/changeset/55670">WebKit</a>, and <a href="http://www.opera.com/docs/specs/presto28/file/#blob">Opera 11.10</a>. However, since that syntax is differed from <a href="/en-US/JavaScript/Reference/Global_Objects/Array/slice"><code>Array.slice()</code></a> and <a href="/en-US/JavaScript/Reference/Global_Objects/String/slice"><code>String.slice()</code></a>, Gecko and WebKit removed support and added support for the new syntax as <code>Blob.slice()</code>/<a href="http://trac.webkit.org/changeset/83873"><code>Blob.webkitSlice</code></a>.</p>
+
+<p>[2] Prior to Gecko 12.0 {{geckoRelease("12.0")}}, there was a bug that affected the behavior of <code>Blob.slice()</code>; it did not work for <code>start</code> and end positions outside the range of signed 64-bit values; it has now been fixed to support unsigned 64-bit values.</p>
+
+<p>[3] This was implemented in <a href="http://trac.webkit.org/changeset/83873">534.29</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Blob")}}</li>
+ <li>{{domxref("BlobBuilder")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/blob/type/index.html b/files/pt-br/web/api/blob/type/index.html
new file mode 100644
index 0000000000..789aa0c9c9
--- /dev/null
+++ b/files/pt-br/web/api/blob/type/index.html
@@ -0,0 +1,68 @@
+---
+title: Blob.type
+slug: Web/API/Blob/type
+translation_of: Web/API/Blob/type
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>A propriedade <strong><code>type</code></strong> de um objeto <a href="/en-US/docs/Web/API/Blob"><code>Blob</code></a> fornece <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types">MIME type</a> do arquivo. Ela retorna uma string vazia se o tipo não puder ser determinado.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var mimetype = <var>instanceOfFile</var>.type</pre>
+
+<h2 id="Valor">Valor</h2>
+
+<p>Uma string</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush:js">var i, fileInput, files, allowedFileTypes;
+
+// fileInput é um HTMLInputElement: &lt;input type="file" multiple id="myfileinput"&gt;
+fileInput = document.getElementById("myfileinput");
+
+// files é um objeto FileList (similiar ao NodeList)
+files = fileInput.files;
+
+// nossa aplicação permite apenas imagens dos tipos *.png, *.jpeg and *.gif
+allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
+
+for (i = 0; i &lt; files.length; i++) {
+  // Testa se file.type é um tipo de arquivo permitido.
+  if (allowedFileTypes.indexOf(<strong>files[i].type</strong>) &gt; -1) {
+    // file type é um dos tipos permitidos. Código aqui.
+  }
+});
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-type', 'type')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("api.Blob.type")}}</p>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/body/index.html b/files/pt-br/web/api/body/index.html
new file mode 100644
index 0000000000..121e93718b
--- /dev/null
+++ b/files/pt-br/web/api/body/index.html
@@ -0,0 +1,97 @@
+---
+title: Body
+slug: Web/API/Body
+tags:
+  - API
+  - BODY
+  - Experimental
+  - Fetch
+  - Fetch API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - request
+translation_of: Web/API/Body
+---
+<div>{{ APIRef("Fetch") }}</div>
+
+<p><span class="seoSummary">The <strong><code>Body</code></strong> {{glossary("mixin")}} of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.</span></p>
+
+<p><code>Body</code> is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated <dfn>body</dfn> (a <a href="/en-US/docs/Web/API/Streams_API">stream</a>), a <dfn>used flag</dfn> (initially unset), and a <dfn>MIME type</dfn> (initially the empty byte sequence).</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>A {{jsxref("Boolean")}} that indicates whether the body has been read.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{jsxref("ArrayBuffer")}}.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is <em>always</em> decoded using UTF-8.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.</p>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html notranslate">&lt;img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"&gt;
+</pre>
+
+<h3 id="JS_Content">JS Content</h3>
+
+<pre class="brush: js notranslate">const myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
+	.then(res =&gt; res.blob())
+	.then(res =&gt; {
+		const objectURL = URL.createObjectURL(res);
+		myImage.src = objectURL;
+});</pre>
+
+<p>{{ EmbedLiveSample('Examples', '100%', '250px') }}</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','#body-mixin','Body')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Body")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/pt-br/web/api/body/json/index.html b/files/pt-br/web/api/body/json/index.html
new file mode 100644
index 0000000000..7ee4482fe5
--- /dev/null
+++ b/files/pt-br/web/api/body/json/index.html
@@ -0,0 +1,89 @@
+---
+title: Body.json()
+slug: Web/API/Body/json
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - JSON
+  - Referencia
+translation_of: Web/API/Body/json
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>O método <strong><code>json()</code></strong>  do mixin {{DOMxRef("Body")}} usa uma stream do objeto {{DOMxRef("Response")}} para tratar. O método <strong>json() </strong>retorna uma Promise como resultado do processamento da stream, retornando um objeto {{JSxRef("JSON")}} em caso de sucesso.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>response</em>.json().then(<em>data</em> =&gt; {
+  // do something with your data
+});</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<p>Nenhum.</p>
+
+<h3 id="Retorno">Retorno</h3>
+
+<p>Uma {{jsxref("Promise")}} que retorna um objeto Javascript no método <strong>resolve()</strong>. Pode ser qualquer tipo que pode ser representado com JSON — objeto, array, string, numeral...</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Em nosso <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">exemplo de fetch em json</a> (teste <a href="http://mdn.github.io/fetch-examples/fetch-json/">aqui a busca em json com fetch</a>), nós criamos uma nova requisição usando o constructor de {{DOMxRef("Request.Request", "Request()")}}, e em seguimos a usamos para buscar um arquivo <code>.json</code>. Quando o fetch é bem-sucedido, nós lemos e tratamos a stream com o método <code>json()</code>, lê os valores em forma de objeto retornados como esperado e inserimos na lista para exibir os dados dos produtos.</p>
+
+<pre class="brush: js highlight[5] notranslate">const myList = document.querySelector('ul');
+const myRequest = new Request('products.json');
+
+fetch(myRequest)
+  .then(response =&gt; response.json())
+  .then(data =&gt; {
+    for (const product of data.products) {
+      let listItem = document.createElement('li');
+      listItem.appendChild(
+        document.createElement('strong')
+      ).textContent = product.Name;
+      listItem.append(
+        ` can be found in ${
+          product.Location
+        }. Cost: `
+      );
+      listItem.appendChild(
+        document.createElement('strong')
+      ).textContent = `£${product.Price}`;
+      myList.appendChild(listItem);
+    }
+  })
+  .catch(console.error);</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentários</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Fetch", "#dom-body-json", "Body.json()")}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Definição Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Navegador">Compatibilidade de Navegador</h2>
+
+
+
+<p>{{Compat("api.Body.json")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/pt-br/web/api/broadcastchannel/index.html b/files/pt-br/web/api/broadcastchannel/index.html
new file mode 100644
index 0000000000..e15c5f23a4
--- /dev/null
+++ b/files/pt-br/web/api/broadcastchannel/index.html
@@ -0,0 +1,81 @@
+---
+title: BroadcastChannel
+slug: Web/API/BroadcastChannel
+tags:
+  - API
+  - Broadcast Channel API
+  - Experimental
+  - HTML API
+  - Interface
+  - Reference
+translation_of: Web/API/BroadcastChannel
+---
+<p>{{APIRef("Broadcast Channel API")}}</p>
+
+<p>A interface <code><strong>BroadcastChannel</strong></code><strong> </strong>(canal de transmissão)<strong> </strong>representa um canal com um nome em que qualquer {{glossary("browsing context")}} (contexto de navegação) de uma determinada {{glossary("origin")}} (origem) pode assinar. Permite a comunicação entre diferentes documentos (em diferentes janelas, abas, frames ou iframes) da mesma <em>origin</em>. As mensagens são transmitidas através de um evento {{event("message")}} acionado em todos objetos do tipo <code>BroadcastChannel</code> que estão ouvindo o canal.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("BroadcastChannel.BroadcastChannel", "BroadcastChannel()")}}</dt>
+ <dd>Cria um objeto, no qual faz o vínculo com um canal nomeado.</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>Essa interface também herda propriedades de seu pai, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("BroadcastChannel.name")}}</dt>
+ <dd>Retorna um {{domxref("DOMString")}}, o nome do canal.</dd>
+ <dt>
+ <h3 id="Event_handlers">Event handlers</h3>
+ </dt>
+ <dt>{{domxref("BroadcastChannel.onmessage")}}</dt>
+ <dd>Uma propriedade {{domxref("EventHandler")}} que específica a função a ser executada quando um evento {{event("message")}} é acionado a este objeto.</dd>
+ <dt>{{domxref("BroadcastChannel.onmessageerror")}}</dt>
+ <dd>Uma chamada {{domxref("EventHandler")}} quando um {{domxref("MessageEvent")}} do tipo {{domxref("MessageError")}} é disparado - isto é, quando recebe uma mensagem que não pode ser desserializada.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Essa interface também herda métodos de seu pai, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("BroadcastChannel.postMessage()")}}</dt>
+ <dd>Envia a mensagem, de qualquer tipo de objeto, para cada objeto <code>BroadcastChannel</code> ouvindo o mesmo canal.</dd>
+ <dt>{{domxref("BroadcastChannel.close()")}}</dt>
+ <dd>Fecha o objeto do canal, indicando que ele não receberá novas mensagens e eventualmente será descartado.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#broadcastchannel", "BroadcastChannel")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_Navegadores">Compatibilidade entre Navegadores</h2>
+
+
+
+<p>{{Compat("api.BroadcastChannel")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>Outra forma mais pesada de comunicação entre <em>browser contexts</em>: {{domxref("ServiceWorker")}}.</li>
+ <li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Visão geral de Broadcast Channel API</a></li>
+</ul>
diff --git a/files/pt-br/web/api/cache/index.html b/files/pt-br/web/api/cache/index.html
new file mode 100644
index 0000000000..9647fb506e
--- /dev/null
+++ b/files/pt-br/web/api/cache/index.html
@@ -0,0 +1,282 @@
+---
+title: Cache
+slug: Web/API/Cache
+tags:
+  - API
+  - Armazenamento
+  - Cache
+  - Experimental
+  - Interface
+  - Offline
+  - Rascunho
+  - Referencia
+  - Service Workers
+translation_of: Web/API/Cache
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>A interface de <strong>Cache</strong> provê um mecanismo de pares de objeto <a href="http://fetch.spec.whatwg.org/#request">Request</a> / <a href="http://fetch.spec.whatwg.org/#response">Response</a> que estão cacheados, por exemplo, como parte do ciclo de vida de um {{domxref("ServiceWorker")}}. Note que a interface do <code>Cache</code> é exposta a escopos de janela como também aos workers. Você não precisa utiliza-la em conjunto com os service workers em si, mesmo que ela esteja definida na especificação dos mesmos.</p>
+
+<p>Uma origem pode ter múltiplos objetos de <code>cache</code> nomeados. Você é o responsável por implementar como seu script (por exemplo, em um {{domxref("ServiceWorker")}}) trata uma atualização deste <code>Cache</code>. Itens em um <code>Cache</code> não são atualizados a não ser que explicitamente comandados para fazer tal coisa, também não expiram a não ser quando são deletados. Use {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} para abrir um <code>Cache</code> nomeado específico e depois chame qualquer um dos métodos presentes no <code>Cache</code> para manter os objetos cacheados.</p>
+
+<p>Você é também o responsavel por, periódicamente, limpar as entradas de cache. Cada browser tem um limite fixo do tamanho de armazenamento de cache que cada origem pode utilizar. O browser faz o melhor que pode para gerenciar o espaço em disco, mas ele pode deletar um cache que não devia. Ele também vai, geralmente, deletar todos os dados de uma origem ou nenhum dado da mesma, nunca haverá uma ocasião não atômica onde o browser delete parcialmente os dados.</p>
+
+<p>Certifique-se de versionar seus caches por nome e usar somente os caches nas versões do script que eles podem seguramente operar. Veja também o artigo sobre <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers#Deleting_old_caches">remoção de caches antigos</a> para mais informações.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Implementações iniciais do Cache (tanto no Blink quando no Gecko) resolvem promises de {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, e {{domxref("Cache.put")}} somente quando o corpo completo da resposta foi armazenado. Versões mais recentes desta especificação possuem uma melhora de linguagem informando que o browser pode resolver a promise assim que a entrada é registrada no banco de dados, mesmo que o corpo da resposta ainda esteja sendo enviado.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: O algoritmo de comparação de chaves depende do <a href="https://www.fastly.com/blog/best-practices-for-using-the-vary-header">cabeçalho VARY</a> no valor. Então, comparar uma nova chave depende tanto de olhar para o valor e para a própria chave para novas entradas no cache.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota:</strong> A API de cache não segue os padrões HTTP de cabeçalhos de Cache.</p>
+</div>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("Cache.match", "Cache.match(request, options)")}}</dt>
+ <dd>Retorna uma {{jsxref("Promise")}} que resolve para a resposta associada com a primeira requisição encontrada no objeto {{domxref("Cache")}}.</dd>
+ <dt>{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}}</dt>
+ <dd>Retorna uma {{jsxref("Promise")}} que resolve para um array com todas as referências encontradas de requisições presentes no objeto {{domxref("Cache")}}.</dd>
+ <dt>{{domxref("Cache.add", "Cache.add(request)")}}</dt>
+ <dd>Pega a URL, obtém o resultado da resposta e adiciona o mesmo no cache informado. Esta funcionalidade é equivalente a chamar <code>fetch()</code>, e depois utilizar <code>Cache.put()</code> para adicionar o resultado no cache.</dd>
+ <dt>{{domxref("Cache.addAll", "Cache.addAll(requests)")}}</dt>
+ <dd>A partir de um array de URL's, obtém as respostas e adiciona todos os objetos resultantes no cache informado.</dd>
+ <dt>{{domxref("Cache.put", "Cache.put(request, response)")}}</dt>
+ <dd>Dado uma requisição e uma resposta, adiciona ambas ao cache informado.</dd>
+ <dt>{{domxref("Cache.delete", "Cache.delete(request, options)")}}</dt>
+ <dd>Encontra a entrada do {{domxref("Cache")}} na qual a chave é a requisição e, se encontrada, deleta a entrada do {{domxref("Cache")}} e retorna uma {{jsxref("Promise")}} que se resolve para <code>true</code>. Se nenhuma entrada do {{domxref("Cache")}} for encontrada, ela é resolvida para <code>false</code>.</dd>
+ <dt>{{domxref("Cache.keys", "Cache.keys(request, options)")}}</dt>
+ <dd>Retorna uma {{jsxref("Promise")}} que resolve em um array de chaves de {{domxref("Cache")}}.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Este trecho de código é da <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">amostra de cache seletivo</a> (veja <a href="https://googlechrome.github.io/samples/service-worker/selective-caching/">seleção live de cache</a>), ele utiliza {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} para abrir quaisquer objetos {{domxref("Cache")}} com um cabeçalho <code>Content-Type</code> que inicie com <code>font/</code>.</p>
+
+<p>Então, utilizamos {{domxref("Cache.match", "Cache.match(request, options)")}} para verificar se já existe uma fonte encontrada no cache e, se existir, retorna-la. Caso contrário, o código busca a fonte da rede e utiliza {{domxref("Cache.put","Cache.put(request, response)")}} para adiciona-la ao cache.</p>
+
+<p>O código gerencia as exceções disparadas pela operação {{domxref("Globalfetch.fetch","fetch()")}}. Note que uma resposta de erro HTTP (como o 404) não vai ativar uma exceção. Será retornado um objeto de resposta padrão que possui seu próprio código de erros.</p>
+
+<p>O trecho também mostra as melhores práticas de versionamento de caches utilizadas pelo service worker. Mesmo que só estejamos utilizando um cache neste exemplo, a mesma aproximação pode ser utilizada para múltiplos caches. Mapeamos um identificador para um cache específico e versionado. Por fim, o código deleta todos os cache que não estão presentes em <code>CURRENT_CACHES</code>.</p>
+
+<p>No exemplo, "Caches" é um atributo dos service workers no WorkerGlobalScope. Ele contém o CacheStorage, um objeto pelo qual podemos acessar a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage">API de mesmo nome</a>.</p>
+
+<div class="note"><strong>Nota:</strong> No Chrome, visite <code>chrome://inspect/#service-workers</code> e clique no link "inspect" abaixo do service worker registrado para analisar os logs das várias ações que o script "<a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">service-worker.js</a>" está executando.</div>
+
+<pre class="brush: js">var CACHE_VERSION = 1;
+
+// Identificador menor para uma versão específica do cache
+var CURRENT_CACHES = {
+  font: 'font-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('activate', function(event) {
+  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
+    return CURRENT_CACHES[key];
+  });
+
+  // O worker não vai ser tratado como ativo até que a Promise se resolva.
+  event.waitUntil(
+    caches.keys().then(function(cacheNames) {
+      return Promise.all(
+        cacheNames.map(function(cacheName) {
+          if (expectedCacheNames.indexOf(cacheName) == -1) {
+            console.log('Deletando cache expirado:', cacheName);
+
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  console.log('Obtendo evento fetch para', event.request.url);
+
+  event.respondWith(
+
+    // Abre o objeto de cache que inicia com 'font'
+    caches.open(CURRENT_CACHES['font']).then(function(cache) {
+      return cache.match(event.request).then(function(response) {
+        if (response) {
+          console.log(' Encontrou resposta em cache:', response);
+
+          return response;
+        }
+      }).catch(function(error) {
+
+        // Trata exceções que vem de match() ou fetch().
+        console.error('  Erro na handler:', error);
+
+        throw error;
+      });
+    })
+  );
+});</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tabela_de_compatibilidade">Tabela de compatibilidade</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoDesktop(39)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>add()</td>
+   <td>{{CompatChrome(44.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>addAll()</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>matchAll()</td>
+   <td>{{CompatChrome(47.0)}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Requere HTTPS para <code>add()</code>, <code>addAll()</code>, e <code>put()</code></td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatVersionUnknown}}<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>Recurso</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>Suporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+  <tr>
+   <td>add()</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(44.0)}}</td>
+  </tr>
+  <tr>
+   <td>addAll()</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+  <tr>
+   <td>matchAll()</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+  <tr>
+   <td>Requere HTTPS para <code>add()</code>, <code>addAll()</code>, e <code>put()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (e <a href="/en-US/docs/Web/API/Push_API">Push</a>) foram desabilitados no <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 &amp; 52 Extended Support Releases</a> (ESR.)</p>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Usando Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Exemplo básico de service workers</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Service workers estão prontos?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Usando Web Workers</a></li>
+</ul>
diff --git a/files/pt-br/web/api/cameracontrol/autofocus/index.html b/files/pt-br/web/api/cameracontrol/autofocus/index.html
new file mode 100644
index 0000000000..1ce3b547d3
--- /dev/null
+++ b/files/pt-br/web/api/cameracontrol/autofocus/index.html
@@ -0,0 +1,61 @@
+---
+title: CameraControl.autoFocus()
+slug: Web/API/CameraControl/autoFocus
+translation_of: Archive/B2G_OS/API/CameraControl/autoFocus
+---
+<p>{{APIRef("Camera API")}}{{ non-standard_header() }}{{B2GOnlyHeader2('privileged')}}</p>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>This method attempts to focus the camera. If the camera is able to attempt to focus, a success callback is issued, regardless of whether or not the focusing attempt succeeds. If unable to attempt to focus, an error callback is performed instead.</p>
+
+<p>The success or failure of the focus operation is indicated by the value of a parameter passed into the callback function.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre>CameraControl.autoFocus(onsuccess[, onerror]);</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>onsuccess</code></dt>
+ <dd>A callback function called when a focus attempt is made</dd>
+ <dt><code>onerror</code> {{optional_inline()}}</dt>
+ <dd>An optional callback function that accepts an error string as an input parameter; this is called if it's not possible to attempt to focus the camera.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">function onFocusPossible( success ) {
+  if ( success ) {
+    console.log("The image has been focused");
+  } else {
+    console.log("The image has not been focused");
+  }
+}
+
+function onFocusNotPossible( error ) {
+  console.log("The camera is not able to focus anything");
+  console.log( error );
+}
+
+function onAccessCamera( camera ) {
+  camera.autoFocus(onFocusPossible, onFocusNotPossible);
+};
+
+var options = {
+  camera: navigator.mozCameras.getListOfCameras()[0]
+};
+
+navigator.mozCameras.getCamera(options, onAccessCamera)
+</pre>
+
+<h2 id="Specification" name="Specification">Especificações</h2>
+
+<p>Not part of any specification; however, this API should be removed when the <a class="external" href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html" rel="external" title="http://dev.w3.org/2011/webrtc/editor/getusermedia.html">WebRTC Capture and Stream API</a> has been implemented.</p>
+
+<h2 id="Leia_mais">Leia mais</h2>
+
+<ul>
+ <li>{{domxref("CameraControl")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/cameracontrol/index.html b/files/pt-br/web/api/cameracontrol/index.html
new file mode 100644
index 0000000000..e0b5bdd2c0
--- /dev/null
+++ b/files/pt-br/web/api/cameracontrol/index.html
@@ -0,0 +1,108 @@
+---
+title: CameraControl
+slug: Web/API/CameraControl
+tags:
+  - API
+  - B2G
+  - DOM
+  - DOM Reference
+  - Firefox OS
+  - Graphics
+  - JavaScript
+  - NeedsTranslation
+  - Non-standard
+  - Reference
+  - TopicStub
+  - WebAPI
+  - camera
+translation_of: Archive/B2G_OS/API/CameraControl
+---
+<p>{{APIRef("Camera API")}}</p>
+
+<p>{{ non-standard_header() }}</p>
+
+<p>{{B2GOnlyHeader2('privileged')}}</p>
+
+<p><span class="seoSummary">When you use the {{domxref("CameraManager.getCamera()")}} method to get a reference to a camera, you specify a callback function to be invoked on success. That function receives as a parameter a <code>CameraControl</code> object. You can use its methods and properties to manage and make use of the camera.</span></p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("CameraControl.capabilities")}} {{readonlyinline}}</dt>
+ <dd>A {{domxref("CameraCapabilities")}} object indicating all the capabilities for the given camera.</dd>
+ <dt>{{domxref("CameraControl.effect")}}</dt>
+ <dd>A string defining the effect to be used by the camera (<code>none</code> by default). Its value must be one of the values available in {{domxref("CameraCapabilities.effects")}}.</dd>
+ <dt>{{domxref("CameraControl.exposureCompensation")}} {{readonlyinline}}</dt>
+ <dd>A value used to compensate the camera exposure. This attribute is read-only; to change the exposure, you need to call the {{domxref("CameraControl.setExposureCompensation()")}} method.</dd>
+ <dt>{{domxref("CameraControl.flashMode")}}</dt>
+ <dd>A string that defines how the flash, if any, is to be used; this is <code>auto</code> by default if the device has a flash, <code>none</code> otherwise. When set, its value must be chosen from the list of options specified by  {{domxref("CameraCapabilities.flashModes")}}<code>.</code></dd>
+ <dt>{{domxref("CameraControl.focalLength")}} {{readonlyinline}}</dt>
+ <dd>A number that express the camera's focal length in millimeters.</dd>
+ <dt>{{domxref("CameraControl.focusAreas")}}</dt>
+ <dd>An <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a> of one or more objects that define where the camera will perform auto-focusing.</dd>
+ <dt>{{domxref("CameraControl.focusDistanceFar")}} {{readonlyinline}}</dt>
+ <dd>This value is a distance in meter used with {{domxref("CameraControl.focusDistanceNear")}} to defined the image's depth of field. The value for this property may be <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>.</dd>
+ <dt>{{domxref("CameraControl.focusDistanceNear")}} {{readonlyinline}}</dt>
+ <dd>This value is a distance in meter used with {{domxref("CameraControl.focusDistanceFar")}} to defined the image's depth of field.</dd>
+ <dt>{{domxref("CameraControl.focusDistanceOptimum")}} {{readonlyinline}}</dt>
+ <dd>This value is a distance in meter where the subject will appear sharpest.</dd>
+ <dt>{{domxref("CameraControl.focusMode")}}</dt>
+ <dd>A string that defines which kind of focus mode the camera should use (<code>auto</code> or <code>fixed</code> by default). Its value must be chosen from {{domxref("CameraCapabilities.focusModes")}}.</dd>
+ <dt>{{domxref("CameraControl.meteringAreas")}}</dt>
+ <dd>An <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a> of one or more objects that define where the camera will perform auto-focusing.</dd>
+ <dt>{{domxref("CameraControl.onShutter")}}</dt>
+ <dd>A handler for the camera's "shutter" event, to trigger a shutter sound and/or a visual shutter indicator.</dd>
+ <dt>{{domxref("CameraControl.onClosed")}}</dt>
+ <dd>A handler called when a new <code>CameraControl</code> object in the same app takes over the camera.</dd>
+ <dt>{{domxref("CameraControl.onRecorderStateChange")}}</dt>
+ <dd>A function to call when the recorder changes state, either because the recording process encountered an error, or because one of the recording limits (see {{domxref("CameraControl.startRecording()")}}) was reached.</dd>
+ <dt>{{domxref("CameraControl.sceneMode")}}</dt>
+ <dd>A string that defines which scene mode the camera is to use (<code>auto</code> by default). Its value must be chosen from {{domxref("CameraCapabilities.sceneModes")}}.</dd>
+ <dt>{{domxref("CameraControl.whiteBalanceMode")}}</dt>
+ <dd>A string that defines which white balance mode the camera is to use (<code>auto</code> by default). Its value must be chosen from {{domxref("CameraCapabilities.whiteBalanceModes")}}.</dd>
+ <dt>{{domxref("CameraControl.zoom")}}</dt>
+ <dd>A number that defines which kind of zoom factor mode the camera is to use (1 by default). Its value must be chosen from {{domxref("CameraCapabilities.zoomRatios")}}.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{ domxref("CameraControl.autoFocus()") }}</dt>
+ <dd>Tells the camera to attempt to focus the image.</dd>
+ <dt>{{ domxref("CameraControl.getPreviewStream()") }}</dt>
+ <dd>Gets a video stream from the camera; you can use this in an arbitrary context.</dd>
+ <dt>{{ domxref("CameraControl.getPreviewStreamVideoMode()") }}</dt>
+ <dd>Gets a video stream from the camera based on a specific video mode.</dd>
+ <dt>{{ domxref("CameraControl.release()") }}</dt>
+ <dd>Releases the camera so that other applications can use it.</dd>
+ <dt>{{ domxref("CameraControl.resumePreview()") }}</dt>
+ <dd>Resumes the preview video stream after it's been paused by a call to {{domxref("CameraControl.takePicture()")}}.</dd>
+ <dt>{{ domxref("CameraControl.setExposureCompensation()") }}</dt>
+ <dd>Lets you specify the exposure compensation factor.</dd>
+ <dt>{{ domxref("CameraControl.startRecording()") }}</dt>
+ <dd>Lets you start recording a video stream.</dd>
+ <dt>{{ domxref("CameraControl.stopRecording()") }}</dt>
+ <dd>Lets you stop recording a video stream.</dd>
+ <dt>{{ domxref("CameraControl.pauseRecording()") }}</dt>
+ <dd>Pauses the recording of a video stream.</dd>
+ <dt>{{ domxref("CameraControl.resumeRecording()") }}</dt>
+ <dd>Resumes the recording of a video stream that has previously been paused.</dd>
+ <dt>{{ domxref("CameraControl.takePicture()") }}</dt>
+ <dd>Lets you capture a single image, receiving it as a {{domxref("Blob")}}.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p>{{page("/en-US/docs/Web/API/Navigator.MozCameras","Specification")}}</p>
+
+<h2 id="Permissions">Permissions</h2>
+
+<p>{{page("/en-US/docs/Web/API/Navigator.MozCameras","Permissions")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ domxref("CameraManager") }}</li>
+ <li>{{ domxref("CameraCapabilities") }}</li>
+ <li>{{ domxref("navigator.mozCamera") }}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/arc/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/arc/index.html
new file mode 100644
index 0000000000..763831af7d
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/arc/index.html
@@ -0,0 +1,138 @@
+---
+title: CanvasRenderingContext2D.arc()
+slug: Web/API/CanvasRenderingContext2D/arc
+tags:
+  - API
+  - Arco
+  - Canvas
+  - CanvasRenderingContext2D
+  - Circulo
+  - Method
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/arc
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arc()</code></strong> da API Canvas 2D adiciona um arco circular para o atual sub-caminhoa (<em>sub-path</em>).</span></p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox notranslate">void <em>ctx</em>.arc(<em>x</em>, <em>y</em>, <em>raio</em>, <em>anguloInicial</em>, <em>anguloFinal</em> [, <em>antiHorario</em>]);
+</pre>
+
+<p>O método <code>arc()</code> cria um arco circular centralizado em <code>(x, y)</code> com um <code>raio</code>. O caminho inicia-se no <code>anguloInicial</code>, e finaliza no <code>anguloFinal</code>, e é desenhado no sentido <code>antiHoario</code> (o padrão é no sentido horario).</p>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>A coordenada horizontal do centro do arco.</dd>
+ <dt><code>y</code></dt>
+ <dd>A coordenada vertical do centro do arco.</dd>
+ <dt><code>raio</code></dt>
+ <dd>O raio do arco. Deve ser um valor positivo.</dd>
+ <dt><code>anguloInicial</code></dt>
+ <dd>O ângulo em radianos em que o arco começa medido a partir do eixo x positivo.</dd>
+ <dt><code>anguloFinal</code></dt>
+ <dd>O ângulo em que o arco finaliza medido a partir do eixo x positivo.</dd>
+ <dt><code>antiHorario</code> {{optional_inline}}</dt>
+ <dd>Um {{jsxref("Boolean")}} opcional. Se <code>verdadeiro</code>, desenha o arco no sentido anti-horário entre os ângulos inicial e final. O padrão é <code>falso</code> (sentido horário).</dd>
+</dl>
+
+<h2 id="Examplos">Examplos</h2>
+
+<h3 id="Desenhando_um_círculo_completo">Desenhando um círculo completo</h3>
+
+<p>O exemplo desenha um círculo completo com o método <code>arc()</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;canvas&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>O arco recebe 100 como uma coordenada x, e 75 como uma coordenada y e um raio de 50. para fazer um círculo completo, o arco inicia no ângulo 0 (0º) em radianos e finaliza em um ângulo de 2π radianos (360<strong>°</strong>).</p>
+
+<pre class="brush: js; highlight:[5] notranslate">const canvas = document.querySelector('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(100, 75, 50, 0, 2 * Math.PI);
+ctx.stroke();
+</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{ EmbedLiveSample('Drawing_a_full_circle', 700, 180) }}</p>
+
+<h3 id="Diferentes_formas_demonstradas">Diferentes formas demonstradas</h3>
+
+<p>Este exemplo desenha diversas formas para mostrar o que é possível fazer com o método <code>arc()</code>.</p>
+
+<div class="hidden">
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;canvas width="150" height="200"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+</div>
+
+<pre class="brush: js notranslate">const canvas = document.querySelector('canvas');
+const ctx = canvas.getContext('2d');
+
+// Draw shapes
+for (let i = 0; i &lt;= 3; i++) {
+  for (let j = 0; j &lt;= 2; j++) {
+    ctx.beginPath();
+    let x             = 25 + j * 50;                 // coordenada x
+    let y             = 25 + i * 50;                 // coordenada y
+    let radius        = 20;                          // raio
+    let startAngle    = 0;                           // angulo inicial
+    let endAngle      = Math.PI + (Math.PI * j) / 2; // angulo final
+    let anticlockwise = i % 2 == 1;                  // sentido anti-horário
+
+    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+    if (i &gt; 1) {
+      ctx.fill();
+    } else {
+      ctx.stroke();
+    }
+  }
+}</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser constribuir com os dados, por favor acesse o link <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um <em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.arc")}}</p>
+
+<h2 id="Veja_mais">Veja mais</h2>
+
+<ul>
+ <li>A interface definindo este método: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>Utilize {{domxref("CanvasRenderingContext2D.ellipse()")}} para desenhar um arco elíptico.</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/arcto/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/arcto/index.html
new file mode 100644
index 0000000000..c4fcdc1e69
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/arcto/index.html
@@ -0,0 +1,147 @@
+---
+title: CanvasRenderingContext2D.arcTo()
+slug: Web/API/CanvasRenderingContext2D/arcTo
+translation_of: Web/API/CanvasRenderingContext2D/arcTo
+---
+<div>{{APIRef}}</div>
+
+<p> </p>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arcTo()</code></strong> da API 2D do Canvas adiciona um arco ao caminho quando fornecemos seus pontos de controle e raio.</p>
+
+<p>O arco será parte de um círculo, nunca de uma elipse. Frequentemente é usado para fazer cantos arredoondados.</p>
+
+<p>Pode-se imaginar o arco como dois segmentos de reta, partindo de um ponto inicial (ponto mais recente definido no caminho) até o primeiro ponto de controle e, em seguida, do primeiro ponto de controle até o segundo ponto de controle. Esses dois segmentos de reta formam um angulo, com o primeiro ponto de controle sendo a curva. Usando arcTo, o ângulo será formado de acordo com o raio fornecido.</p>
+
+<p>O arco é tangencial ao dois segmentos de reta, e por vezes, pode produzir resultados inesperados se, por exemplo, o raio fornecido for maior que a distância entre o ponto inicial e o primeiro ponto de controle.</p>
+
+<p>Se o raio fornecido não atingir o ponto inicial (ponto mais recente definido no caminho), o ponto inicial é conectado ao arco por um segmento de reta.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.arcTo(x1, y1, x2, y2, radius);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>x1</code></dt>
+ <dd>coordenada do eixo x para o primeiro ponto de controle.</dd>
+ <dt><code>y1</code></dt>
+ <dd>coordenada do eixo y para o primeiro ponto de controle.</dd>
+ <dt><code>x2</code></dt>
+ <dd>coordenada do eixo x para o segundo ponto de controle.</dd>
+ <dt><code>y2</code></dt>
+ <dd>coordenada do eixo y para o segundo ponto de controle.</dd>
+ <dt><code>radius</code></dt>
+ <dd>O raio do arco.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Using_the_arc_method" name="Using_the_arc_method">Usando o método <code>arcTo</code> </h3>
+
+<p>Esse é um trecho simples de código que desenha um arco. O ponto de partida é azul e os pontos de controls são vermelhos.</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.beginPath();
+ctx.moveTo(150, 20);
+ctx.arcTo(150, 100, 50, 20, 30);
+ctx.lineTo(50, 20)
+ctx.stroke();
+
+ctx.fillStyle = 'blue';
+// starting point
+ctx.fillRect(150, 20, 10, 10);
+
+ctx.fillStyle = 'red';
+// control point one
+ctx.fillRect(150, 100, 10, 10);
+// control point two
+ctx.fillRect(50, 20, 10, 10);
+</pre>
+
+<p>{{ EmbedLiveSample('Using_the_arc_method', 315, 165) }}</p>
+
+<h3 id="Trying_the_arcTo_parameters" name="Trying_the_arcTo_parameters">Treinando os parâmetros do  <code>arcTo</code> </h3>
+
+<p>Altere o código abaixo e veja suas alterações atualizadas na tela:</p>
+
+<div style="display: none;">
+<pre class="brush: html">&lt;canvas id="canvas" class="playable-canvas" height="200" width="400"&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.beginPath();
+ctx.moveTo(150, 20);
+ctx.arcTo(150,100,50,100,20);
+ctx.stroke();&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('Trying_the_arcTo_parameters', 700, 360) }}</p>
+
+<h2 id="Espeficicações">Espeficicações</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-context-2d-arcto", "CanvasRenderingContext2D.arcTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade">Compatibilidade</h2>
+
+<div class="hidden">A tabela de compatibilidade desta página é gerada a partir de dados estruturados. Caso queira contribuir, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos mande um pull request.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.arcTo")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/beginpath/index.html
new file mode 100644
index 0000000000..b3ad87ff61
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/beginpath/index.html
@@ -0,0 +1,184 @@
+---
+title: CanvasRenderingContext2D.beginPath()
+slug: Web/API/CanvasRenderingContext2D/beginPath
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/beginPath
+---
+<div>{{APIRef}}</div>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.beginPath()</code></strong> da API Canvas 2D  inicia um novo caminho (<em>path</em>), esvaziando a lista de sub-caminhos (<em>sub-paths</em>). Use esse método quando você quiser criar um novo <em>path</em>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.beginPath();</var>
+</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_beginPath">Usando o método <code>beginPath</code></h3>
+
+<p>Isto é só um simples trecho de código que usa o método <code>fillRect</code>.</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:[5,12]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Primeiro path
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20, 20);
+ctx.lineTo(200, 20);
+ctx.stroke();
+
+// Segundo path
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20, 20);
+ctx.lineTo(120, 120);
+ctx.stroke();
+</pre>
+
+<p>Edite o código abaixo e veja as alterações instantâneas no canvas:</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" style="height:200px"&gt;
+// First path
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.stroke();
+
+// Second path
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20,20);
+ctx.lineTo(120, 120);
+ctx.stroke();&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, 460) }}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</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>Característica</th>
+   <th>Android</th>
+   <th>Chrome para 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>Suporte básico</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>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A definição da interface {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.closePath()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/clearrect/index.html
new file mode 100644
index 0000000000..ec1be69b57
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/clearrect/index.html
@@ -0,0 +1,195 @@
+---
+title: CanvasRenderingContext2D.clearRect()
+slug: Web/API/CanvasRenderingContext2D/clearRect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/clearRect
+---
+<div>{{APIRef}}</div>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.clearRect()</code></strong> da API Canvas 2D limpa todos os pixels de um retângulo definido na posição <em>(x, y)</em> e tamanho (<em>width</em> (largura)<em>, height </em>(altura)) para uma cor preta transparente, apagando algum conteúdo anterior.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.clearRect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>O valor da coordenada x para o ponto inicial do retângulo.</dd>
+ <dt><code>y</code></dt>
+ <dd>O valor da coordenada y para o ponto inicial do retângulo.</dd>
+ <dt><code>width</code></dt>
+ <dd>A largura do retângulo.</dd>
+ <dt><code>height</code></dt>
+ <dd>A altura do retângulo.</dd>
+</dl>
+
+<h2 id="Notas_de_uso">Notas de uso</h2>
+
+<p>Um problema comum com <code>clearRect</code> que pode acontecer, é que pode não funcionar corretamente, caso não seja usada alguma <a href="https://developer.mozilla.org/pt_BR/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#Drawing_paths">propriedade de <em>path</em></a>. Não esqueça de usar {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} antes de começar um novo frame depois de chamar <code>clearRect</code>.</p>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_clearRect">Usando o método <code>clearRect</code></h3>
+
+<p>Isto é só um simples trecho de código que usa o método <code>clearRect</code>.</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:[11]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineTo(200, 20);
+ctx.lineTo(120, 120);
+ctx.closePath(); // draws last line of the triangle
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);
+
+// clear the whole canvas
+// ctx.clearRect(0, 0, canvas.width, canvas.height);
+</pre>
+
+<p>Edite o código abaixo e veja as alterações instantâneas no canvas:</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" style="height:140px;"&gt;
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // draws last line of the triangle
+ctx.stroke();
+
+ctx.clearRect(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, 400) }}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</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>Característica</th>
+   <th>Android</th>
+   <th>Chrome para 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>Suporte básico</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>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A definição da interface {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/clip/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/clip/index.html
new file mode 100644
index 0000000000..780ba3cd58
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/clip/index.html
@@ -0,0 +1,195 @@
+---
+title: CanvasRenderingContext2D.clip()
+slug: Web/API/CanvasRenderingContext2D/clip
+translation_of: Web/API/CanvasRenderingContext2D/clip
+---
+<div>{{APIRef}}</div>
+
+<p>O método<code><strong> CanvasRenderingContext2D</strong></code><strong><code>.clip()</code></strong> da API do Canvas 2D transforma o caminho atualmente construido em um caminho atual de recorte.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.clip();</var>
+void <var><em>ctx</em>.clip(fillRule);</var>
+void <var><em>ctx</em>.clip(path, fillRule);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;"></p>
+
+<dl>
+ <dt><code>fillRule</code></dt>
+ <dd>O algoritmo pelo qual determina se um ponto esta dentro de um caminho ou fora de um caminho.<br>
+ Valores Possíveis:
+ <ul>
+  <li><code><strong>"nonzero</strong></code>": A <a href="http://en.wikipedia.org/wiki/Nonzero-rule">regra contorno diferente de zero</a>, que é a regra padrão.</li>
+  <li><code><strong>"evenodd"</strong></code>: A <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">regra do contorno par ou ímpar</a>.</li>
+ </ul>
+ </dd>
+ <dt><code>path</code></dt>
+ <dd>Um {{domxref("Path2D")}} caminho para recorte.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_do_método_de_corte">Usando do método de corte</h3>
+
+<p>Isso é só um simples fragmento de código que usa o método de corte para criar uma região de recorte.</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");
+
+// Cria uma região de recorte
+ctx.arc(100, 100, 75, 0, Math.PI*2, false);
+ctx.clip();
+
+ctx.fillRect(0, 0, 100,100);
+</pre>
+
+<p>Edite o código abaixo e veja suas mudanças atualizadas ao vivo no canvas:</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.arc(100, 100, 75, 0, Math.PI*2, false);
+ctx.clip();
+ctx.fillRect(0, 0, 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>
+
+<div class="note">
+<p><strong>Nota</strong>: Tenha consciência de que o <code>clip()</code> só funciona com formas adicionadas ao caminho; ele não funciona com uma forma primitiva, como retângulos criados com {{domxref("CanvasRenderingContext2D.fillRect()","fillRect()")}}. Nesse caso você teria que usar {{domxref("CanvasRenderingContext2D.rect()","rect()")}} para desenhar um caminho de forma retângular para ser recortado.</p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clip", "CanvasRenderingContext2D.clip")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Parametro do Caminho</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(31) }}</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>Característica</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Parametro do Caminho</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile(31) }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<ul>
+ <li>A interface como defini-la, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/closepath/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/closepath/index.html
new file mode 100644
index 0000000000..62c72086f7
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/closepath/index.html
@@ -0,0 +1,170 @@
+---
+title: CanvasRenderingContext2D.closePath()
+slug: Web/API/CanvasRenderingContext2D/closePath
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/closePath
+---
+<div>{{APIRef}}</div>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.closePath()</code></strong> da API Canvas 2D faz o ponto da caneta (<em>pen</em>) mover-se de volta para o início do sub-caminho (<em>sub-path</em>) atual. Tenta adicionar uma nova linha (mas não a desenha realmente) que conecta o ponto atual até o ponto inicial. Se a região (<em>shape</em>) já estiver fechada, ou tem somente um ponto na tela, esta função não funciona.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.closePath();</var>
+</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_beginPath">Usando o método <code>beginPath</code></h3>
+
+<p>Isto é só um simples trecho de código que usa o método <code>fillRect</code>.</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:[8]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineTo(200, 20);
+ctx.lineTo(120, 120);
+ctx.closePath(); // desenha a última linha do triângulo
+ctx.stroke();
+</pre>
+
+<p>Edite o código abaixo e veja as alterações instantâneas no canvas:</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" style="height:140px;"&gt;
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // draws last line of the triangle
+ctx.stroke();&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, 400) }}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</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>Característica</th>
+   <th>Android</th>
+   <th>Chrome para 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>Suporte básico</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>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A definição da interface {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.beginPath()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/fill/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/fill/index.html
new file mode 100644
index 0000000000..0c0c1dd890
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/fill/index.html
@@ -0,0 +1,196 @@
+---
+title: CanvasRenderingContext2D.fill()
+slug: Web/API/CanvasRenderingContext2D/fill
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/fill
+---
+<div>{{APIRef}}</div>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fill()</code></strong> da API Canvas 2D preenche um dado <em>path</em> ou o <em>path</em> atual com o estilo atual de preenchimento usando uma regra de controle diferente de zero, ou uma regra par-ímpar.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.fill();</var>
+void <var><em>ctx</em>.fill(fillRule);</var>
+void <var><em>ctx</em>.fill(path, fillRule);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>fillRule</code></dt>
+ <dd>O algoritmo que determina se um ponto está do lado de dentro do path ou do lado fora do path.<br>
+ Possíveis valores:
+ <ul>
+  <li><code><strong>"nonzero</strong></code>": A <a href="http://en.wikipedia.org/wiki/Nonzero-rule">regra de controle não-zero</a>, que é a regra padrão.</li>
+  <li><code><strong>"evenodd"</strong></code>: A <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">regra de controle par-ímpar</a>.</li>
+ </ul>
+ </dd>
+ <dt><code>path</code></dt>
+ <dd>Um <em>path</em> de <a class="new" href="https://developer.mozilla.org/pt-BR/docs/Web/API/Path2D" title="The documentation about this has not yet been written; please consider contributing!"><code>Path2D</code></a> para preenchimento.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_fill">Usando o método <code>fill</code></h3>
+
+<p>Isto é só um simples trecho de código que usa o métod <code>fill</code> para contornar um <em>path</em>.</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:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+</pre>
+
+<p>Edite o código abaixo e veja as alterações instantâneas no canvas:</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.fill();&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="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</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>Suporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Suporte para o parâmetro<em> path</em></td>
+   <td>{{ CompatVersionUnknown() }}</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>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>Suporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Suporte para o parâmetro<em> path</em></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(31) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A definição da interface {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/fillrect/index.html
new file mode 100644
index 0000000000..44b57ca77a
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/fillrect/index.html
@@ -0,0 +1,179 @@
+---
+title: CanvasRenderingContext2D.fillRect()
+slug: Web/API/CanvasRenderingContext2D/fillRect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/fillRect
+---
+<div>{{APIRef}}</div>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillRect()</code></strong> da API Canvas 2D desenha um retângulo preenchido na posição <em>(x, y)</em>, no qual o tamanho é determinado pela <em>width</em> (largura) e pela <em>height</em> (altura), e cujo o estilo é determinado pelo atributo <code>fillStyle</code>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.fillRect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>O valor da coordenada x para o ponto inicial do retângulo.</dd>
+ <dt><code>y</code></dt>
+ <dd>O valor da coordenada y para o ponto inicial do retângulo.</dd>
+ <dt><code>width</code></dt>
+ <dd>A largura do retângulo.</dd>
+ <dt><code>height</code></dt>
+ <dd>A altura do retângulo.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_fillRect">Usando o método <code>fillRect</code></h3>
+
+<p>Isto é só um simples trecho de código que usa o método <code>fillRect</code>.</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:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+// preenche todo o canvas
+// ctx.fillRect(0, 0, canvas.width, canvas.height);
+</pre>
+
+<p>Edite o código abaixo e veja as alterações instantâneas no canvas:</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.fillStyle = "green";
+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>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</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>Característica</th>
+   <th>Android</th>
+   <th>Chrome para 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>Suporte básico</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>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A definição da interface {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillStyle")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/fillstyle/index.html
new file mode 100644
index 0000000000..37dd9ba936
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/fillstyle/index.html
@@ -0,0 +1,213 @@
+---
+title: CanvasRenderingContext2D.fillStyle
+slug: Web/API/CanvasRenderingContext2D/fillStyle
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Propriedade
+  - Referencia
+translation_of: Web/API/CanvasRenderingContext2D/fillStyle
+---
+<div>{{APIRef}}</div>
+
+<p>A propriedade <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillStyle</code></strong> da API do Canvas 2D <span id="result_box" lang="pt"><span>especifica a cor ou o estilo para usar regiões internas</span></span>. O valor inicial é <code>#000</code> (preto).</p>
+
+<p>Veja também o capítulo <a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors">Aplicando estilos e cores</a> no <a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial">Canvas Tutorial</a>.</p>
+
+<h2 id="Sintaxe">Sintaxe</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="Opções">Opções</h3>
+
+<dl>
+ <dt><code>color</code></dt>
+ <dd>Um {{domxref("DOMString")}} passado como um valor de CSS {{cssxref("&lt;color&gt;")}}.</dd>
+ <dt><code>gradient</code></dt>
+ <dd>Um objeto {{domxref("CanvasGradient")}} (um gradiente linear ou radial).</dd>
+ <dt><code>pattern</code></dt>
+ <dd>Um objeto {{domxref("CanvasPattern")}} (uma imagem repetitiva).</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Using_the_fillStyle_property" name="Using_the_fillStyle_property">Usando a propriedade <code>fillStyle</code> para definir uma cor diferente</h3>
+
+<p><span id="result_box" lang="pt"><span class="alt-edited">Isto é apenas um trecho de código simples usando a propriedade</span></span> <code>fillStyle</code> para definir uma cor diferente.</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><span id="result_box" lang="pt"><span>Edite o código abaixo e veja as alterações atualizadas na tela</span></span>:</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="Um_exemplo_de_fillStyle_com_laços_for">Um exemplo de <code>fillStyle</code> com laços <code>for</code></h3>
+
+<p>Neste exemplo, nós usamos dois laços <code>for</code> para desenhar uma grade de retângulos, cada um com uma cor diferente. <span id="result_box" lang="pt"><span>A imagem resultante deve parecer algo como uma captura de tela.</span> <span>Não há nada de espetacular acontecendo aqui.</span> <span>Usamos as duas variáveis</span></span> <code>i</code> é <code>j</code> <span id="result_box" lang="pt"><span>para gerar uma cor RGB exclusiva para cada quadrado, e apenas modificamos os valores vermelho e verde.</span> <span>O canal azul tem um valor fixo.</span> <span>Ao modificar os canais, você pode gerar todos os tipos de paletas.</span> <span>Ao aumentar os valores, você pode conseguir algo que pareça com as paletas de cores que o Photoshop usa.</span></span></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><span class="short_text" id="result_box" lang="pt"><span>O resultado fica assim</span></span>:</p>
+
+<p>{{EmbedLiveSample("Um_exemplo_de_fillStyle_com_laços_for", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</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="Compatibibidade_com_o_Navegador">Compatibibidade com o Navegador</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</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>Característica</th>
+   <th>Android</th>
+   <th>Chrome para 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>Suporte Básico</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>
+
+<h2 id="Notas_específicas_doWebKitBlink"><span class="short_text" id="result_box" lang="pt"><span>Notas específicas do</span></span>WebKit/Blink</h2>
+
+<ul>
+ <li>Nos navegadores baseados em WebKit e Blink, <span class="short_text" id="result_box" lang="pt"><span>além da propriedade </span></span><code>fillStyle</code><span class="short_text" lang="pt"><span>, o método não padrão e obsoleto</span></span> <code>ctx.setFillColor()</code> <span class="short_text" id="result_box" lang="pt"><span>é implementado</span></span>.
+
+  <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="Veja_também">Veja também</h2>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="pt"><span>A interface que o define</span></span>, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/index.html
new file mode 100644
index 0000000000..38ec19a3e3
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/index.html
@@ -0,0 +1,450 @@
+---
+title: 'Canvas: Contexto de Renderização em "2D"'
+slug: Web/API/CanvasRenderingContext2D
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Games
+  - Graphics
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/CanvasRenderingContext2D
+---
+<div>{{APIRef}}</div>
+
+<div>A interface <strong>Canvas Renderização de Contexto de duas Dimensões (</strong> <strong>CanvasRenderingContext2D</strong>) é usada para desenhar retangulos, textos, imagens e outros objetos na tag ou elemento canvas. Fornece o contexto de renderização em 2D para a superfície de desenho do elemento  {{ HTMLElement("canvas") }}.</div>
+
+<div></div>
+
+<p>Para obter um objeto desta interface, chama-se  {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} em um <code>elemento &lt;canvas&gt;</code>, adicionando "2d" como argumento, veja o exemplo abaixo:</p>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('meuCanvas'); // em seu HTML esse elemento se parece com &lt;canvas id="meuCanvas"&gt;&lt;/canvas&gt;
+var ctx = canvas.getContext('2d');
+</pre>
+
+<p>Agora que você possui o contexto de renderização 2D, você pode desenhar dentro deste canvas. Por exemplo:</p>
+
+<pre class="brush: js notranslate">ctx.fillStyle = "rgb(200,0,0)"; // define a cor de preenchimento do retângulo
+ctx.fillRect(10, 10, 55, 50);   // desenha o retângulo na posição 10, 10 com 55 pixels de largura e uma altura de 50
+</pre>
+
+<p>Veja as propriedades e métodos no menu lateral e abaixo. O <a href="/en-US/docs/Web/API/Canvas_API/Tutorial" title="Canvas tutorial">tutorial canvas</a> tem mais informações, exemplos e recursos.</p>
+
+<h2 id="Desenhando_Retângulos">Desenhando Retângulos</h2>
+
+<p>Existem três métodos que imediatamente desenham retângulos ao canvas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt>
+ <dd>Determina todos os pixels no retângulo definido, pelo ponto inicial (<em>x, y</em>) e tamanho (<em>largura</em>, <em>altura</em>) para preto transparente, apagando qualquer conteúdo desenhado anteriormente.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt>
+ <dd>Desenha um retângulo preenchido na posição (<em>x, y</em>) com tamanho definido pela <em>largura </em>e <em>altura</em></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt>
+ <dd>Pinta um retângulo o qual possui um ponto inicial em <em>(x, y)</em> e possui um<em> w</em> <em>width</em>(largura) e um <em>h</em> <em>height</em>(altura) dentro da tela(canvas), usando o estilo de traçado(stroke) atual.</dd>
+</dl>
+
+<h2 id="Desenhando_Textos">Desenhando Textos</h2>
+
+<p>Os métodos seguintes são fornecidos para desenhar texto. Veja também o objeto {{domxref("TextMetrics")}} para propriedades de texto.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt>
+ <dd>Desenha(preenche) um texto fornecido, em uma posição fornecida(<em>x,y</em>).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt>
+ <dd>Desenha(traçados) um texto fornecido, em uma posição fornecida(<em>x,y</em>).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt>
+ <dd>Retorna um objeto {{domxref("TextMetrics")}} .</dd>
+</dl>
+
+<h2 id="Estilos_de_linha">Estilos de linha</h2>
+
+<p>Os seguintes métodos e propriedades, controlam como as linhas são desenhadas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt>
+ <dd>Largura das linhas. Padrão: <code>1.0</code></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt>
+ <dd>Tipos de pontas no final das linhas. Valores possíveis: <code>butt</code> (padrão), <code>round</code>, <code>square</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt>
+ <dd>Define o tipo de encontro entre duas linhas. Possíveis valores: <code>round</code>, <code>bevel</code>, <code>miter</code> (default).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt>
+ <dd>Relação do limite de esquadria. Padrão: <code>10</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt>
+ <dd>Retorna a matriz de padrão de traço de linha atual contendo um número par de números não negativos.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt>
+ <dd>Define o padrão de traço de linha atual.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt>
+ <dd>Especifica onde iniciar uma matriz de traços em uma linha.</dd>
+</dl>
+
+<h2 id="Estilos_de_textos">Estilos de textos</h2>
+
+<p>As propriedades abaixo controlam a estilização do texto a ser apresentado:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt>
+ <dd>Configuração da fonte. Valor padrão: <code>10px sans-serif</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt>
+ <dd>Alinhamento do texto. Possíveis valores: <code>start</code> (padrão), <code>end</code>, <code>left</code>, <code>right</code> or <code>center</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt>
+ <dd>Configuração de alinhamento da linha de base (Baseline). Possíveis valores: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (padrão), <code>ideographic</code>, <code>bottom</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt>
+ <dd>Direção do texto. Possívels valores: <code>ltr, rtl</code>, <code>inherit</code> (padrão).</dd>
+</dl>
+
+<h2 id="Estilos_de_preenchimento_e_traço">Estilos de preenchimento e traço</h2>
+
+<p>O estilo de preenchimento é usado para cores e estilos dentro das formas e o estilo de traço é usado para as linhas ao redor das formas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt>
+ <dd>Cor ou estilo para usar formas internas. Padrão <code>#000</code> (preto).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt>
+ <dd>Cor ou estilo a ser usado para as linhas em torno das formas. Padrão: <code>#000</code> (preto).</dd>
+</dl>
+
+<h2 id="Gradientes_e_padrões">Gradientes e padrões</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt>
+ <dd>Cria um gradiente linear ao longo da linha fornecida pelas coordenadas representadas pelos parâmetros.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt>
+ <dd>Cria um gradiente radial dado pelas coordenadas dos dois círculos representados pelos parâmetros.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt>
+ <dd>Cria um padrão usando a imagem especificada (uma {{domxref("CanvasImageSource")}}). Ele repete a fonte nas direções especificadas pelo argumento de repetição. Este método retorna um {{domxref("CanvasPattern")}}.</dd>
+</dl>
+
+<h2 id="Sombras">Sombras</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dt>
+ <dd>Especifica o efeito de desfoque. Padrão: <code>0</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt>
+ <dd>Cor da sombra. Padrão: fully-transparent black (preto totalmente transparente).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt>
+ <dd>Distância horizontal em que a sombra será deslocada. Padrão: <code>0</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt>
+ <dd>Distância vertical em que a sombra será deslocada. Padrão: <code>0</code>.</dd>
+</dl>
+
+<h2 id="Caminhos">Caminhos</h2>
+
+<p>Os seguintes métodos podem ser usados para manipular caminhos de desenhos.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt>
+ <dd>Inicia um novo caminho esvaziando a lista de subcaminhos. Chame esse método quando você quiser criar um novo caminho.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt>
+ <dd>Faz com que a ponta da caneta se mova de volta para o início do subcaminho atual. Ele tenta traçar uma linha reta do ponto atual ao início. Se o desenho já foi fechado ou tem apenas um ponto, este método não faz nada.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt>
+ <dd>Move o ponto inicial de um novo subcaminho para as coordenadas (x, y).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt>
+ <dd>Conecta o último ponto do caminho atual com as coordenadas (x, y) com linha reta.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt>
+ <dd>Adiciona uma curva de Bézier ao caminho atual.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt>
+ <dd>Adiciona uma curva de Bézier quadrática ao caminho atual.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt>
+ <dd>Adiciona um arco circular ao caminho atual.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt>
+ <dd>Adiciona um arco no caminho atual com os pontos de controle e raio fornecidos, conectado ao ponto anterior por uma linha reta.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}}</dt>
+ <dd>Adiciona um arco elíptico ao caminho atual.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt>
+ <dd>Cria um caminho de retângulo na posição (x, y) com o tamanho determinado por <em>width</em> e <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="Transformações">Transformações</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="Desenhando_imagens">Desenhando imagens</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="Manipulação_de_pixels">Manipulação de pixels</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>CSS and SVG filters as Canvas APIs. 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="Especificações">Especificações</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="Compatibilidade_do_Navegador">Compatibilidade do Navegador</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>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<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="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/lineto/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/lineto/index.html
new file mode 100644
index 0000000000..1876b469a8
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/lineto/index.html
@@ -0,0 +1,176 @@
+---
+title: CanvasRenderingContext2D.lineTo()
+slug: Web/API/CanvasRenderingContext2D/lineTo
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/lineTo
+---
+<div>{{APIRef}}</div>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineTo()</code></strong> da API Canvas 2D conecta o último ponto do sub-caminho (<em>sub-path</em>) para as coordenadas <code>x, y</code>, através de uma linha (mas na realidade não a desenha).</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.lineTo(x, y);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>O valor da coordenada x que indica o fim da linha.</dd>
+ <dt><code>y</code></dt>
+ <dd>O valor da coordenada y que indica o fim da linha.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_lineTo">Usando o método <code>lineTo</code></h3>
+
+<p>sto é só um simples trecho de código que usa o método <code>lineTo</code>. Use o {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} para indicar o <em>path</em> onde será desenhada a linha, mova a caneta (<em>pen</em>) com {{domxref("CanvasRenderingContext.moveTo", "moveTo()")}} e use o método {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} para desenhar a linha.</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.beginPath();
+ctx.moveTo(50, 50);
+ctx.lineTo(100, 100);
+ctx.stroke();
+</pre>
+
+<p>Edite o código abaixo e veja as alterações instantâneas no canvas:</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.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(100, 100);
+ctx.stroke();&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="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</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>Característica</th>
+   <th>Android</th>
+   <th>Chrome para 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>Suporte básico</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>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A definição da interface {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.moveTo()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/moveto/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/moveto/index.html
new file mode 100644
index 0000000000..137e4e2203
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/moveto/index.html
@@ -0,0 +1,176 @@
+---
+title: CanvasRenderingContext2D.moveTo()
+slug: Web/API/CanvasRenderingContext2D/moveTo
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/moveTo
+---
+<div>{{APIRef}}</div>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.moveTo()</code></strong> da API Canvas 2D move o ponto inicial de um novo sub-caminho (sub-path) para as coordenadas <code>(x, y)</code>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.moveTo(x, y);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>O valor da coordenada x.</dd>
+ <dt><code>y</code></dt>
+ <dd>O valor da coordenada y.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_moveTo">Usando o método <code>moveTo</code></h3>
+
+<p>Isto é só um simples trecho de código que usa o método <code>moveTo</code> para mover a caneta (<em>pen</em>) para um deteminado ponto onde vai iniciar o desenho.</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:[5]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(50, 50);
+ctx.lineTo(200, 50);
+ctx.stroke();
+</pre>
+
+<p>Edite o código abaixo e veja as alterações instantâneas no canvas:</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.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(200, 50);
+ctx.stroke()&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="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</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>Característica</th>
+   <th>Android</th>
+   <th>Chrome para 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>Suporte básico</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>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A definição da interface {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineTo()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html
new file mode 100644
index 0000000000..b60b7de07c
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html
@@ -0,0 +1,182 @@
+---
+title: CanvasRenderingContext2D.quadraticCurveTo()
+slug: Web/API/CanvasRenderingContext2D/quadraticCurveTo
+translation_of: Web/API/CanvasRenderingContext2D/quadraticCurveTo
+---
+<div>{{APIRef}}</div>
+
+<p>o método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.quadraticCurveTo()</code></strong> da API Canvas 2D adiciona uma Curva de Bézier quadrática ao caminho. São exigidos dois pontos. O primeiro ponto é um ponto de controle e o segundo é o ponto final. The starting point is the last point in the current path, which can be changed using <code>moveTo()</code> before creating the quadratic Bézier curve.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.quadraticCurveTo(cpx, cpy, x, y);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>cpx</code></dt>
+ <dd>O eixo X da coordenada para o ponto de controle.</dd>
+ <dt><code>cpy</code></dt>
+ <dd>O eixo Y da coordenada para o ponto de controle.</dd>
+ <dt><code>x</code></dt>
+ <dd>O eixo X da coordenada para o ponto final.</dd>
+ <dt><code>y</code></dt>
+ <dd>O eixo Y da coordenada para o ponto final.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_quadraticCurveTo">Usando o método <code>quadraticCurveTo</code></h3>
+
+<p>This is just a simple code snippet drawing a quadratic bezier curve. The <span style="color: red;">control point is red</span> and the <span style="color: blue;">start and end points are blue</span>.</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.beginPath();
+ctx.moveTo(50,20);
+ctx.quadraticCurveTo(230, 30, 50, 100);
+ctx.stroke();
+
+ctx.fillStyle = 'blue';
+// start point
+ctx.fillRect(50, 20, 10, 10);
+// end point
+ctx.fillRect(50, 100, 10, 10);
+
+ctx.fillStyle = 'red';
+// control point
+ctx.fillRect(230, 30, 10, 10);</pre>
+
+<p>{{ EmbedLiveSample('Using_the_quadraticCurveTo_method', 315, 165) }}</p>
+
+<h3 id="Trying_the_quadraticCurveTo_parameters">Trying the <code>quadraticCurveTo</code> parameters</h3>
+
+<p>Edit the code below and see your changes update live in the canvas:</p>
+
+<div style="display: none;">
+<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.beginPath();
+ctx.moveTo(50,20);
+ctx.quadraticCurveTo(230, 30, 50, 100);
+ctx.stroke();&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('Trying_the_quadraticCurveTo_parameters', 700, 360) }}</p>
+
+<h2 id="Especificações">Especificações</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-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">{{CompatVersionUnknown}}
+<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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">{{CompatVersionUnknown}}
+<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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li><a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">WikiPedia article on Bézier curves</a>.</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/rect/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/rect/index.html
new file mode 100644
index 0000000000..6c19b38495
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/rect/index.html
@@ -0,0 +1,177 @@
+---
+title: CanvasRenderingContext2D.rect()
+slug: Web/API/CanvasRenderingContext2D/rect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/rect
+---
+<div>{{APIRef}}</div>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rect()</code></strong> da Canvas 2D API cria um <em>path </em>(trajeto) para um retângulo na posição <em>(x, y)</em>, cujo tamanho é determinado pelo <em>width </em>(largura) e <em>height</em> (altura). <span id="result_box" lang="pt"><span>Esses quatro pontos estão conectados por linhas retas e o </span></span> <em>sub-path</em> <span lang="pt"><span>(sub-</span></span>trajeto<span lang="pt"><span>) é marcado como fechado, para que você possa</span></span> <code>fill (preencher)</code> ou <code>stroke (contornar)</code> o retângulo.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.rect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>O valor da coordenada x que indica ponto de início (superior esquerdo) do retângulo.</dd>
+ <dt><code>y</code></dt>
+ <dd>O valor da coordenada y que indica ponto de início (superior esquerdo) do retângulo.</dd>
+ <dt><code>width</code></dt>
+ <dd>A largura do retângulo.</dd>
+ <dt><code>height</code></dt>
+ <dd>A altura do retângulo.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_rect">Usando o método <code>rect</code></h3>
+
+<p>Isto é somente um simples fragmentode código que usa o método <code>rect</code> para criar um <em>path</em>. Para verdadeiramente desenhar um <em>path </em>no canvas, você pode usar o método {{domxref("CanvasRenderingContext2D.fill", "fill()")}} ou o {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Veja também os métodos {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} e {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}}, que podem fazer isto em um único passo.</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:[3]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+</pre>
+
+<p>Edite o código abaixo e veja as alterações instantâneas no canvas:</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.fill();&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="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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>{{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>Característica</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>{{CompatVersionUnknown}}</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="Veja_também">Veja também</h2>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="pt"><span>A interface que a define</span></span>, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillRect")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fill()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/stroke/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/stroke/index.html
new file mode 100644
index 0000000000..866e317383
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/stroke/index.html
@@ -0,0 +1,187 @@
+---
+title: CanvasRenderingContext2D.stroke()
+slug: Web/API/CanvasRenderingContext2D/stroke
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/stroke
+---
+<div>{{APIRef}}</div>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.stroke()</code></strong> da API Canvas 2D contorna um dado <em>path</em> ou o <em>path</em> atual com o estilo atual de traçado usando uma regra de controle diferente de zero.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.stroke();</var>
+void <var><em>ctx</em>.stroke(path);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>path</code></dt>
+ <dd>Um <em>path</em> de {{domxref("Path2D")}} para contorno.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_stroke">Usando o método <code>stroke</code></h3>
+
+<p>Isto é só um simples trecho de código que usa o método <code>stroke</code> para contornar um <em>path</em>.</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:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+</pre>
+
+<p>Edite o código abaixo e veja as alterações instantâneas no canvas:</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();&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="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</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>Suporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Suporte para o parâmetro<em> path</em></td>
+   <td>{{ CompatVersionUnknown() }}</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>Feature</th>
+   <th>Android</th>
+   <th>Chrome para 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>Suporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Suporte para o parâmetro<em> path</em></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(31) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A definição da interface {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/pt-br/web/api/canvasrenderingcontext2d/strokerect/index.html b/files/pt-br/web/api/canvasrenderingcontext2d/strokerect/index.html
new file mode 100644
index 0000000000..e11812857f
--- /dev/null
+++ b/files/pt-br/web/api/canvasrenderingcontext2d/strokerect/index.html
@@ -0,0 +1,177 @@
+---
+title: CanvasRenderingContext2D.strokeRect()
+slug: Web/API/CanvasRenderingContext2D/strokeRect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Referencia
+  - metodo
+translation_of: Web/API/CanvasRenderingContext2D/strokeRect
+---
+<div>{{APIRef}}</div>
+
+<p>O método <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeRect()</code></strong> da API Canvas 2D desenha um retângulo na posição <em>(x, y)</em>, que possui uma largura<em> </em>(<em>width</em>) <em>w</em> e uma altura (<em>height</em>) <em>h</em><code>,</code> e não tem nenhum preenchimento (estilo <em>stroke</em>).</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.strokeRect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>O valor da coordenada x para o ponto inicial do retângulo.</dd>
+ <dt><code>y</code></dt>
+ <dd>O valor da coordenada y para o ponto inicial do retângulo.</dd>
+ <dt><code>width</code></dt>
+ <dd>A largura do retângulo.</dd>
+ <dt><code>height</code></dt>
+ <dd>A altura do retângulo.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_o_método_strokeRect">Usando o método <code>strokeRect</code></h3>
+
+<p>Isto é só um simples trecho de código que usa o método <code>strokeRect</code>.</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:[5]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.strokeStyle = 'green';
+ctx.strokeRect(10, 10, 100, 100);
+</pre>
+
+<p>Edite o código abaixo e veja as alterações instantâneas no canvas:</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.strokeStyle = "green";
+ctx.strokeRect(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>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_Navegadores">Compatibilidade em Navegadores</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>Suporte básico</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 para 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>Suporte básico</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>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A definição da interface {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/characterdata/index.html b/files/pt-br/web/api/characterdata/index.html
new file mode 100644
index 0000000000..8eb415f6e3
--- /dev/null
+++ b/files/pt-br/web/api/characterdata/index.html
@@ -0,0 +1,94 @@
+---
+title: CharacterData
+slug: Web/API/CharacterData
+translation_of: Web/API/CharacterData
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>A interface abstrata <strong>CharacterData  </strong>representa um objeto {{domxref("Node")}} que contém caracteres. Esta é uma interface abstrata, o que significa que não há nenhum objeto do tipo <code>CharacterData</code>: ela é implementada por outras interfaces, como {{domxref("Text")}}, {{domxref("Comment")}} ou {{domxref("ProcessingInstruction")}}, que não são abstratas.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>Herda propriedades de seu pai, {{domxref("Node")}}, e implementa as interfaces {{domxref("ChildNode")}} e {{domxref("NonDocumentTypeChildNode")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("CharacterData.data")}}</dt>
+ <dd>É um {{domxref("DOMString")}} representando os dados textuais contidos neste objeto.</dd>
+ <dt>{{domxref("CharacterData.length")}} {{readonlyInline}}</dt>
+ <dd>Retorna um <code>unsigned long</code> representando o tamanho da string contida em <code>CharacterData.data</code>.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Element")}} immediately following the specified one in its parent's children list, or <code>null</code> if the specified element is the last one in the list.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Element")}} immediately prior to the specified one in its parent's children list, or <code>null</code> if the specified element is the first one in the list.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("Node")}}, and implements the {{domxref("ChildNode")}} <em>and {{domxref("NonDocumentTypeChildNode")}} </em>interface.</em></p>
+
+<dl>
+ <dt>{{domxref("CharacterData.appendData()")}}</dt>
+ <dd>Appends the given {{domxref("DOMString")}} to the <code>CharacterData.data</code> string; when this method returns, <code>data</code> contains the concatenated {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("CharacterData.deleteData()")}}</dt>
+ <dd>Removes the specified amount of characters, starting at the specified offset, from the <code>CharacterData.data</code> string; when this method returns, <code>data</code> contains the shortened {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("CharacterData.insertData()")}}</dt>
+ <dd>Inserts the specified characters, at the specified offset, in the <code>CharacterData.data</code> string; when this method returns, <code>data</code> contains the modified {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Removes the object from its parent children list.</dd>
+ <dt>{{domxref("CharacterData.replaceData()")}}</dt>
+ <dd>Replaces the specified amount of characters, starting at the specified offset, with the specified {{domxref("DOMString")}}; when this method returns, <code>data</code> contains the modified {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("CharacterData.substringData()")}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the part of <code>CharacterData.data</code> of the specified length and starting at the specified offset.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#characterdata', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Added implemention of the {{domxref("ChildNode")}} and {{domxref("NonDocumentTypeChildNode")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</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> </p>
+
+<p>{{Compat("api.CharacterData")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<p> </p>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a>.</li>
+</ul>
diff --git a/files/pt-br/web/api/childnode/after/index.html b/files/pt-br/web/api/childnode/after/index.html
new file mode 100644
index 0000000000..8d8d40df47
--- /dev/null
+++ b/files/pt-br/web/api/childnode/after/index.html
@@ -0,0 +1,187 @@
+---
+title: ChildNode.after()
+slug: Web/API/ChildNode/after
+tags:
+  - API
+  - DOM
+  - Experimental
+  - Nó
+  - Referencia
+  - metodo
+translation_of: Web/API/ChildNode/after
+---
+<div>{{APIRef("DOM")}} {{SeeCompatTable}}</div>
+
+<p>The <code><strong>ChildNode</strong></code><strong><code>.after()</code></strong> method inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just after this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">[Throws, Unscopable]
+void ChildNode.after((Node or DOMString)... nodes);
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>nós</code></dt>
+ <dd>A set of {{domxref("Node")}} or {{domxref("DOMString")}} objects to insert.</dd>
+</dl>
+
+<h3 id="Exceções">Exceções</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}}: Nó não pode ser inserido até que seja especificado o ponto da hierarquia. </li>
+</ul>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Inserindo_uum_elemento">Inserindo uum elemento</h3>
+
+<pre class="brush: js">var parente = document.createElement("div");
+var filho = document.createElement("p");
+parente.appendChild(filho);
+var span = document.createElement("span");
+
+filho.after(span);
+
+console.log(parente.outerHTML);
+// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;"
+</pre>
+
+<h3 id="Inserindo_texto">Inserindo texto</h3>
+
+<pre class="brush: js">var parente = document.createElement("div");
+var filho = document.createElement("p");
+parente.appendChild(filho);
+
+filho.after("Text");
+
+console.log(parente.outerHTML);
+// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;Text&lt;/div&gt;"</pre>
+
+<h3 id="Inserindo_um_elemento_e_um_texto">Inserindo um elemento e um texto </h3>
+
+<pre class="brush: js">var parente = document.createElement("div");
+var filho = document.createElement("p");
+parente.appendChild(filho);
+var span = document.createElement("span");
+
+filho.after(span, "Text");
+
+console.log(parente.outerHTML);
+// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;Text&lt;/div&gt;"</pre>
+
+<h3 id="ChildNode.after()_is_unscopable"><code>ChildNode.after()</code> is unscopable</h3>
+
+<p>The <code>after()</code> method is not scoped into the <code>with</code> statement. Veja {{jsxref("Symbol.unscopables")}} para maior infomação.</p>
+
+<pre class="brush: js">with(node) {
+  after("foo");
+}
+// ReferenceError: after is not defined </pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Você pode usar polyfill com  o método <code> after() </code> no Internet Explorer 9 e com o seguinte código:</p>
+
+<pre class="brush: js">//from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/after()/after().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('after')) {
+      return;
+    }
+    Object.defineProperty(item, 'after', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function after() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.parentNode.insertBefore(docFrag, this.nextSibling);
+      }
+    });
+  });
+})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre>
+
+<h2 id="_Polyfill_Element.prototype.after" name="_Polyfill_Element.prototype.after"> </h2>
+
+<pre class="brush: js">//https://github.com/FabioVergani/js-Polyfill_Element.prototype.after/blob/master/after.js
+
+(function(x){
+ var o=x.prototype,p='after';
+ if(!o[p]){
+    o[p]=function(){
+     var e, m=arguments, l=m.length, i=0, t=this, p=t.parentNode, n=Node, s=String, d=document;
+     if(p!==null){
+        while(i&lt;l){
+         e=m[i];
+         if(e instanceof n){
+            t=t.nextSibling;
+            if(t!==null){
+                p.insertBefore(e,t);
+            }else{
+                p.appendChild(e);
+            };
+         }else{
+            p.appendChild(d.createTextNode(s(e)));
+         };
+         ++i;
+        };
+     };
+    };
+ };
+})(Element);
+
+
+
+/*
+min:
+
+(function(x){
+ var o=x.prototype;
+ o.after||(o.after=function(){var e,m=arguments,l=m.length,i=0,t=this,p=t.parentNode,n=Node,s=String,d=document;if(p!==null){while(i&lt;l){((e=m[i]) instanceof n)?(((t=t.nextSibling )!==null)?p.insertBefore(e,t):p.appendChild(e)):p.appendChild(d.createTextNode(s(e)));++i;}}});
+}(Element));
+
+*/
+</pre>
+
+<h3 id="sect1"> </h3>
+
+<h2 id="Especificação">Especificação</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-childnode-after', 'ChildNode.after()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegador_compatível">Navegador compatível</h2>
+
+<div class="hidden">A compatibilidade table sobre esta página é gerada a partir da estruta de dado. 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.ChildNode.after")}}</p>
+
+<h2 id="Veja_mais">Veja mais</h2>
+
+<ul>
+ <li>{{domxref("ChildNode")}} and {{domxref("ParentNode")}}</li>
+ <li>{{domxref("ChildNode.before()")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/childnode/index.html b/files/pt-br/web/api/childnode/index.html
new file mode 100644
index 0000000000..a5bb9c280c
--- /dev/null
+++ b/files/pt-br/web/api/childnode/index.html
@@ -0,0 +1,78 @@
+---
+title: ChildNode
+slug: Web/API/ChildNode
+tags:
+  - API
+  - DOM
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Node
+  - TopicStub
+translation_of: Web/API/ChildNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div>A interface <code><strong>ChildNode</strong></code> contém métodos que são particulares para os objetos</div>
+
+<p>{{domxref("Node")}} que podem ter um pai.</p>
+
+<p><code>ChildNode</code> é uma interface bruta e nenhum objeto desse tipo pode ser criado; eles são implementados pelos objetos {{domxref("Element")}}, {{domxref("DocumentType")}}, e {{domxref("CharacterData")}}.</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em><font><font>Não há propriedades herdadas nem específicas.</font></font></em></p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Não há métodos herdados.</em></p>
+
+<dl>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Removes this <code>ChildNode</code> from the children list of its parent.</dd>
+ <dt>{{domxref("ChildNode.before()")}} {{experimental_inline}}</dt>
+ <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just before this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+ <dt>{{domxref("ChildNode.after()")}} {{experimental_inline}}</dt>
+ <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just after this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+ <dt>{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}</dt>
+ <dd>Replaces this <code>ChildNode</code> in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Split the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}} and <code>ChildNode</code>. <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. Added the <code>remove()</code>, <code>before()</code>, <code>after()</code> and <code>replaceWith()</code> 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 use it on {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>External on github: <a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></p>
+
+<h2 id="Compatibilidade_Com_Navegadores">Compatibilidade Com Navegadores</h2>
+
+<p>{{Compat("api.ChildNode")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("ParentNode")}} pure interface.</li>
+ <li>
+  <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, {{domxref("Element")}}, and {{domxref("DocumentType")}}.</div>
+ </li>
+</ul>
diff --git a/files/pt-br/web/api/childnode/remove/index.html b/files/pt-br/web/api/childnode/remove/index.html
new file mode 100644
index 0000000000..98fba11b93
--- /dev/null
+++ b/files/pt-br/web/api/childnode/remove/index.html
@@ -0,0 +1,100 @@
+---
+title: ChildNode.remove()
+slug: Web/API/ChildNode/remove
+tags:
+  - API
+  - ChildNode
+  - DOM
+  - Experimental
+  - Método(2)
+  - remove
+translation_of: Web/API/ChildNode/remove
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>O método <code><strong>ChildNode.remove()</strong></code> remove o objeto da árvore a que ele pertence.</p>
+
+<h2 id="Sintase">Sintase</h2>
+
+<pre class="syntaxbox"><em>elementNodeReference</em>.remove();
+</pre>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<h3 id="Usando_remove()">Usando <code>remove()</code></h3>
+
+<pre class="brush: html">&lt;div id="div-01"&gt;Here is div-01&lt;/div&gt;
+&lt;div id="div-02"&gt;Here is div-02&lt;/div&gt;
+&lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var el = document.getElementById('div-01');
+el.nextElementSibling.remove(); // Remove o div com o id 'div-02'
+</pre>
+
+<h3 id="ChildNode.remove()_não_tem_escopo"><code>ChildNode.remove()</code> não tem escopo</h3>
+
+<p>O método <code>remove()</code> não tem escopo na função <code>with</code>. Veja {{jsxref("Symbol.unscopables")}} para mais informação.</p>
+
+<pre class="brush: js">with(node) {
+  remove();
+}
+// ReferenceError: remove is not defined </pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Você pode evitar incompatibilidade ao usar o método <code>remove() no</code> Internet Explorer 9 em diante com o seguinte código:</p>
+
+<pre class="brush: js">// de: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('remove')) {
+      return;
+    }
+    Object.defineProperty(item, 'remove', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function remove() {
+        this.parentNode.removeChild(this);
+      }
+    });
+  });
+})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Situação</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definição Inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-childnode-remove', 'ChildNode.remove')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<div>{{Compat("api.ChildNode.remove")}}</div>
+
+<p> </p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A interface pura {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Tipos de objeto implementando esta interface pura: {{domxref("CharacterData")}}, {{domxref("Element")}}, e {{domxref("DocumentType")}}.</div>
+ </li>
+</ul>
diff --git a/files/pt-br/web/api/clipboardevent/index.html b/files/pt-br/web/api/clipboardevent/index.html
new file mode 100644
index 0000000000..ca14f4478f
--- /dev/null
+++ b/files/pt-br/web/api/clipboardevent/index.html
@@ -0,0 +1,59 @@
+---
+title: ClipboardEvent
+slug: Web/API/ClipboardEvent
+translation_of: Web/API/ClipboardEvent
+---
+<p>{{APIRef("Clipboard API")}} {{SeeCompatTable}}</p>
+
+<p>A interface <strong><code>ClipboardEvent</code></strong> representa eventos correlatos à modificação da área de transferência, i. e., eventos de cortar ({{event("cut")}}), de copiar ({{event("copy")}}), e de colar ({{event("paste")}}).</p>
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("ClipboardEvent.ClipboardEvent", "ClipboardEvent()")}}</dt>
+ <dd>Cria um evento <code>ClipboardEvent</code> com os parâmetros fornecidos.</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>Ainda, propriedades herdadas de sua superclasse {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("ClipboardEvent.clipboardData")}} {{readonlyInline}}</dt>
+ <dd>é um objeto {{domxref("DataTransfer")}} contendo informação oriunda das operações de {{event("cut")}}, de {{event("copy")}}, ou de {{event("paste")}} iniciadas pelo usuário, juntamente com sua espécie/tipo MIME.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Não há método próprio; métodos herdados de {{domxref("Event")}}</em>.</p>
+
+<h2 id="Especificações">Especificações</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('Clipboard API', '#clipboard-event-interfaces', 'ClipboardEvent') }}</td>
+   <td>{{ Spec2('Clipboard API') }}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegadores_e_Compatibilidade">Navegadores e Compatibilidade</h2>
+
+<div class="hidden">A tabela de compatibilidade é gerada a partir de dados estruturados. Caso queira contribuir-lhes, por favor, acesse <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e enviel-nos um pull request.</div>
+
+<p>{{Compat("api.ClipboardEvent")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Copy-related events: {{event("copy")}}, {{event("cut")}}, {{event("paste")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/closeevent/closeevent/index.html b/files/pt-br/web/api/closeevent/closeevent/index.html
new file mode 100644
index 0000000000..d5b7f088c0
--- /dev/null
+++ b/files/pt-br/web/api/closeevent/closeevent/index.html
@@ -0,0 +1,71 @@
+---
+title: CloseEvent()
+slug: Web/API/CloseEvent/CloseEvent
+tags:
+  - API
+  - CloseEvent
+  - Construtor
+  - Referencia
+translation_of: Web/API/CloseEvent/CloseEvent
+---
+<div>{{APIRef("Websockets API")}}</div>
+
+<p>O construtor <strong><code>CloseEvent()</code></strong>cria uma nova instância {{domxref("CloseEvent")}}.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>event</em> = new CloseEvent(<em>typeArg</em>, <em>closeEventInit</em>);</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>typeArg</code></dt>
+ <dd>É uma {{domxref("DOMString")}} que representa o nome do evento.</dd>
+ <dt><code>closeEventInit</code> {{optional_inline}}</dt>
+</dl>
+
+<dl>
+ <dd>É uma coleção <code>CloseEventInit</code>, que possui os seguintes campos:
+
+ <ul>
+  <li><code>"wasClean"</code>, opcional e inicialmente de valor <code>false</code>, do tipo <code>long</code>, indica se uma conexão foi encerrada de forma limpa ou não.</li>
+  <li><code>"code"</code>, opcional e inicialmente de valor <code>0</code>, do tipo <code>unsigned short</code>, este é o código de encerramento da conexão enviado pelo servidor.</li>
+  <li><code>"reason"</code>, opcional e inicialmente de valor <code>''</code>, do tipo {{domxref("DOMString")}}, esta é uma razão humanamente compreensível do porque o servidor encerrou a conexão.</li>
+ </ul>
+
+ <div class="note">
+ <p>A coleção <code>CloseEventInit</code> também aceita campos vindos da coleção {{domxref("Event.Event", "EventInit")}}.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <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','comms.html#closeevent','CloseEvent()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+
+
+<p>{{Compat("api.CloseEvent.CloseEvent")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("CloseEvent")}}, a interface de construção de seus objetos.</li>
+</ul>
diff --git a/files/pt-br/web/api/closeevent/index.html b/files/pt-br/web/api/closeevent/index.html
new file mode 100644
index 0000000000..94f718e8b2
--- /dev/null
+++ b/files/pt-br/web/api/closeevent/index.html
@@ -0,0 +1,239 @@
+---
+title: CloseEvent
+slug: Web/API/CloseEvent
+translation_of: Web/API/CloseEvent
+---
+<p>{{APIRef("Websockets API")}}</p>
+
+<p>Um <code>CloseEvent</code> é enviado aos clientes que usam {{Glossary("WebSockets")}} quando a conexão está fechada (closed). Ele<span id="result_box" lang="pt"> <span>é enviado ao</span> ouvinte(listener) <span>pelo</span> <span>atributo</span> <code><span>onclose</span></code> <span>do objeto</span> <code><span>WebSocket</span></code><span>.</span></span></p>
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}</dt>
+ <dd>Cria um <code>CloseEvent</code> novo.</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>Esta interface também herda as propriedades de seu objeto pai, {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("CloseEvent.code")}} {{readOnlyInline}}</dt>
+ <dd>Retorna um valor <code>unsigned short</code> contendo o código de encerramento enviado pelo servidor. Os seguintes valores são status de códigos permitidos. As definições seguintes são originadas da página da IANA [<a href="https://www.iana.org/assignments/websocket/websocket.xml#close-code-number">Ref</a>]. Observe que os códigos 1xxx são exclusivamente Websockets internos e não para os mesmos propósitos dos dados enviados (como quando o protocolo da camada de aplicação é invalido). Os únicos códigos que permitem especificação no Firefox são o 1000 e do 3000 ao 4999 [<a href="https://searchfox.org/mozilla-central/rev/bf81d741ff5dd11bb364ef21306da599032fd479/dom/websocket/WebSocket.cpp#2533">Source</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1467107">Bug</a>].
+ <table class="standard-table" id="Status_codes">
+  <tbody>
+   <tr>
+    <td class="header">Código de Status</td>
+    <td class="header">Nome</td>
+    <td class="header">Descrição</td>
+   </tr>
+   <tr>
+    <td><code>0</code>–<code>999</code></td>
+    <td></td>
+    <td><strong>Reservado e não utilizado.</strong></td>
+   </tr>
+   <tr>
+    <td><code>1000</code></td>
+    <td><code>CLOSE_NORMAL</code></td>
+    <td>Encerramento normal. A conexão foi completada com sucesso sempre que o propósito para o qual ela foi criada tenha sido atingida.</td>
+   </tr>
+   <tr>
+    <td><code>1001</code></td>
+    <td><code>CLOSE_GOING_AWAY</code></td>
+    <td>O "endpoint" desapareceu, por causa de uma falha no servidor ou por que o navegador navegou para fora da página que abriu a conexão.</td>
+   </tr>
+   <tr>
+    <td><code>1002</code></td>
+    <td><code>CLOSE_PROTOCOL_ERROR</code></td>
+    <td>O "endpoint" finalizou a conexão <span id="result_box" lang="pt"><span> devido a</span> <span>um erro de protocolo</span><span>.</span></span></td>
+   </tr>
+   <tr>
+    <td><code>1003</code></td>
+    <td><code>CLOSE_UNSUPPORTED</code></td>
+    <td>A conexão está sendo finalizada por causa de o dado do "endpoint" recebido ser de um tipo que não pode ser aceito (por exemplo, um "text-only endpoint" recebido como dado binário).</td>
+   </tr>
+   <tr>
+    <td><code>1004</code></td>
+    <td></td>
+    <td><strong>Reservado.</strong> Um significado pode ser definido futuramente.</td>
+   </tr>
+   <tr>
+    <td><code>1005</code></td>
+    <td><code>CLOSE_NO_STATUS</code></td>
+    <td><strong>Reservado.</strong>  Indica que um código "no status" foi fornecido mesmo que qualquer outro código seja esperado.</td>
+   </tr>
+   <tr>
+    <td><code>1006</code></td>
+    <td><code>CLOSE_ABNORMAL</code></td>
+    <td><strong>Reservado.</strong> Usado para indicar que uma conexão foi fechada anormalmente (isto é, sem o "close frame" ter sido enviado) quando um "status code" é esperado.</td>
+   </tr>
+   <tr>
+    <td><code>1007</code></td>
+    <td>Unsupported Data</td>
+    <td>O "endpoint" está finalizando a conexão por causa da mensagem ter sido recebida com dados inconsistentes (por exemplo, dados que não estejam no padrão UTF-8, dentro de uma mensagem de texto).</td>
+   </tr>
+   <tr>
+    <td><code>1008</code></td>
+    <td>Policy Violation</td>
+    <td>O "endpoint" está finalizando a conexão por causa dele ter recebido uma mensagem que viola sua política. Este é um código de status genérico, usado quando o código 1003 e o código 1009 não sejam adequados.</td>
+   </tr>
+   <tr>
+    <td><code>1009</code></td>
+    <td><code>CLOSE_TOO_LARGE</code></td>
+    <td>O "endpoint" está finalizando a conexão por causa de que o "data frame" recebido é muito grande.</td>
+   </tr>
+   <tr>
+    <td><code>1010</code></td>
+    <td>Missing Extension</td>
+    <td>O cliente está fechando a conexão por causa de que navegador espera o servidor negociar uma ou mais extensões esperadas, o servidor não responde corretamente.</td>
+   </tr>
+   <tr>
+    <td><code>1011</code></td>
+    <td>Internal Error</td>
+    <td>O servidor está finalizando uma conexão por causa de que ele <span id="result_box" lang="pt"><span>encontrou uma condição inesperada</span> <span>que o impediu</span> <span>de cumprir</span> <span>a solicitação.</span></span></td>
+   </tr>
+   <tr>
+    <td><code>1012</code></td>
+    <td>Service Restart</td>
+    <td>
+     <p>O servidor está finalizando uma conexão por que ele está em processo de "restar". [<a href="https://www.ietf.org/mail-archive/web/hybi/current/msg09670.html">Ref</a>]</p>
+    </td>
+   </tr>
+   <tr>
+    <td><code>1013</code></td>
+    <td>Try Again Later</td>
+    <td>
+     <p><span id="result_box" lang="pt"><span>O servidor</span> <span>está </span></span> finalizando <span lang="pt"><span>a conexão devido a</span> <span>uma condição temporária</span><span>, por exemplo,</span> <span>ele</span> <span>estar sobrecarregado e</span> <span>estar rejeitando</span><span> alguns dos</span> <span>seus clientes.</span></span> [<a href="https://www.ietf.org/mail-archive/web/hybi/current/msg09670.html">Ref</a>]</p>
+    </td>
+   </tr>
+   <tr>
+    <td><code>1014</code></td>
+    <td></td>
+    <td><strong>Reservado para o futuro uso de um padrão WebSocket.</strong></td>
+   </tr>
+   <tr>
+    <td><code>1015</code></td>
+    <td>TLS Handshake</td>
+    <td>
+     <p><strong>Reservado.</strong> <span id="result_box" lang="pt"><span>Indica que a conexão</span> <span>foi fechada</span> <span>devido a uma falha</span> <span>para executar</span> <span>um "</span></span> TLS handshake" (por exemplo, o certificado do servidor não pode ser verificado).</p>
+    </td>
+   </tr>
+   <tr>
+    <td><code>1016</code>–<code>1999</code></td>
+    <td></td>
+    <td><strong>Reservado para o futuro uso de um padrão WebSocket.</strong></td>
+   </tr>
+   <tr>
+    <td><code>2000</code>–<code>2999</code></td>
+    <td></td>
+    <td><strong>Reservado para uso de "WebSocket extensions".</strong></td>
+   </tr>
+   <tr>
+    <td><code>3000</code>–<code>3999</code></td>
+    <td></td>
+    <td>
+     <p>Disponível para uso de bibliotecas e frameworks. <strong>Não pode</strong> ser usado para aplicações. Disponível para registro em "IANA via first-come, first-serve".</p>
+    </td>
+   </tr>
+   <tr>
+    <td><code>4000</code>–<code>4999</code></td>
+    <td></td>
+    <td>Disponível para uso em aplicações.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("CloseEvent.reason")}} {{readOnlyInline}}</dt>
+ <dd>Retorna um {{domxref("DOMString")}} indicando a razão do porquê o servidor fechou uma conexão. Isto é especifico para um servidor e sub-protocolo particular.</dd>
+ <dt>{{domxref("CloseEvent.wasClean")}} {{readOnlyInline}}</dt>
+ <dd>Retorna um {{jsxref("Boolean")}} indicando se a conexão está ou não está claramente fechada.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Esta interface também herda as propriedades de seu objeto pai,</em> <em> {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("CloseEvent.initCloseEvent()")}} {{Non-standard_inline}} {{Obsolete_inline}}</dt>
+ <dd>Inicializa o valor de um <code>CloseEvent</code> criado. Se o evento já tenha sido enviado, este método não realiza nada.  <span class="short_text" id="result_box" lang="pt"><span>Não use</span> <span>este método</span> <span>mais</span></span>, use o construtor {{domxref("CloseEvent.CloseEvent", "CloseEvent()")}} em vez disso.</dd>
+</dl>
+
+<h2 id="Compatibilidade_nos_navegadores">Compatibilidade nos navegadores</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>{{CompatGeckoDesktop("8.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("12.0")}}<sup>[2]</sup></td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>initCloseEvent</code><code>()</code> {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("8.0")}}<br>
+    {{CompatNo}} 41.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>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>
+  <tr>
+   <td><code>initCloseEvent</code><code>()</code> {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("8.0")}}<br>
+    {{CompatNo}} 41.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Anterior ao Gecko 8.0 {{geckoRelease("8.0")}}, o Gecko envia o evento WebSocket {{event("close")}}  ao ouvinte como um evento simples. O suporte para o <code>CloseEvent</code> foi implementado no Gecko 8.0.</p>
+
+<p>[2] Anterior ao Gecko 12.0 {{geckoRelease("12.0")}}, o Gecko reportava o código de encerramento <code>CLOSE_NORMAL</code> quando o canal se fechava devido a um erro inesperado, ou se a condição de erro não era coberta pela especificação. Agora <code>CLOSE_GOING_AWAY</code> é reportado em seu lugar.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebSocket"><code>WebSocket</code></a></li>
+</ul>
diff --git a/files/pt-br/web/api/console/assert/index.html b/files/pt-br/web/api/console/assert/index.html
new file mode 100644
index 0000000000..571815d791
--- /dev/null
+++ b/files/pt-br/web/api/console/assert/index.html
@@ -0,0 +1,148 @@
+---
+title: Console.assert()
+slug: Web/API/Console/assert
+translation_of: Web/API/console/assert
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Escreve uma mensagem de erro para o console se a afirmação é falsa. Se a firmação é verdadeira, nada acontece.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="note">
+<p><strong>Note:</strong> <em>O método <code>console.assert()</code> é implementado de forma diferente em Node.js.</em><br>
+ Especificamente, em navegadores, chamando o método console.assert() com uma afirmação falsa fará com que a mensagem a ser impressa para o console não interrompa a execução do código subsequente. Em Node.js, no entanto, uma afirmação falsa causará um <em>AssertionError.</em></p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">console.assert(<em>afirmação</em>, <em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.assert(<em>afirmação</em>, <em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]); // c-mensagem de formatação
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>afirmação</code></dt>
+ <dd>Qualquer expressão booleana. Se a afirmação é falsa, a mensagem é impressa no console.</dd>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Uma lista de objetos JavaScript para escrever. As representações de strings de cada um desses objetos são acrescentados juntos na ordem dada e saída.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Uma String que contém zero ou mais seguências de substituição.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Objetos JavaScript com qual as strings de substituição <code>msg </code>serão substituidas. Isto dá um contriole adicional sobre a mensagem que será escrita.</dd>
+</dl>
+
+<p>Ver <a href="/en-US/docs/Web/API/console#Outputting_text_to_the_console">Outputting text to the console</a> na documentação do {{domxref("console")}} para mais detalhes.</p>
+
+<p><strong style="font-size: 2.143rem; font-weight: 700; letter-spacing: -1px;">Especificações</strong></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#consoleassertexpression-object", "console.assert()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_os_navegadores">Compatibilidade entre os navegadores</h2>
+
+<h2 id="CompatibilityTable"><span style="font-size: 14px; font-weight: normal;">{{CompatibilityTable}}</span></h2>
+
+<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>Suporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("28.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>
+    <p>Disponível para trabalhadores</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>c-like message formatting</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("28.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>Suporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("28.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponível para trabalhadores</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>c-like message formatting</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("28.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<ul>
+ <li><a href="https://console.spec.whatwg.org/#assert-condition-data">WHATWG Console Standard: console.assert</a></li>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/console#assertions">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/pt-br/web/api/console/clear/index.html b/files/pt-br/web/api/console/clear/index.html
new file mode 100644
index 0000000000..f7ae8df40f
--- /dev/null
+++ b/files/pt-br/web/api/console/clear/index.html
@@ -0,0 +1,38 @@
+---
+title: console.clear()
+slug: Web/API/Console/clear
+translation_of: Web/API/Console/clear
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>O método <strong><code>console.clear()</code></strong> limpa o console, se o ambiente permitir.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">console.clear();
+</pre>
+
+<h2 id="Especificações">Especificações</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("Console API", "#clear", "console.clear()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma pull request.</div>
+
+<p>{{Compat("api.Console.clear")}}</p>
diff --git a/files/pt-br/web/api/console/count/index.html b/files/pt-br/web/api/console/count/index.html
new file mode 100644
index 0000000000..b9328b5e91
--- /dev/null
+++ b/files/pt-br/web/api/console/count/index.html
@@ -0,0 +1,168 @@
+---
+title: Console.count()
+slug: Web/API/Console/count
+translation_of: Web/API/Console/count
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Exibe o número de vezes em que a chamada <code>count()</code> em particular foi invocada. Essa função recebe um argumento opcional <code>label</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>Se <code>label</code> é fornecido, essa função exibe o número de vezes que a função <code>count()</code> foi chamada com a respectiva label.</p>
+
+<p>Se <code>label</code> for omitido, a função exibe o número de vezes que a função <code>count() </code>foi chamada na respectiva linha.</p>
+
+<p>Por exemplo, no código abaixo:</p>
+
+<pre class="brush: js">var usuario = "";
+
+function cumprimentar() {
+  console.count();
+  return "olá " + usuario;
+}
+
+usario = "bob";
+cumprimentar();
+usario = "alice";
+cumprimentar();
+cumprimentar();
+console.count();</pre>
+
+<p>A saída do console será algo como:</p>
+
+<pre class="eval">"&lt;no label&gt;: 1"
+"&lt;no label&gt;: 2"
+"&lt;no label&gt;: 3"
+"&lt;no label&gt;: 1"
+</pre>
+
+<p>Note a última linha da saída do console: a chamada individual de <code>count()</code> na linha 11 é tratada como um evento independente.</p>
+
+<p>Se passarmos a variável <code>usuario</code> como o argumento <code>label</code> para a primeira invocação de <code>count()</code>, e a string "alice" para a segunda:</p>
+
+<pre class="brush: js">var usuario = "";
+
+function cumprimentar() {
+  console.count(usuario);
+  return "olá " + usuario;
+}
+
+usuario = "bob";
+cumprimentar();
+usuario = "alice";
+cumprimentar();
+cumprimentar();
+console.count("alice");</pre>
+
+<p>Teremos uma saída assim:</p>
+
+<pre class="eval">"bob: 1"
+"alice: 1"
+"alice: 2"
+"alice: 3"</pre>
+
+<p>Agora estamos mantendo contagens separadamente baseadas no valor de <code>label</code>. Como a label "alice" na linha 11 corresponde ao valor de <code>usuario</code> duas vezes, não é considerado um evento independente.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">console.count([label]);
+</pre>
+
+<h2 id="Parâmetros">Parâmetros</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Uma string. Se for fornecida, exibe o número de vezes que  <code>count()</code> foi invocada com a mesma label.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#count", "console.count()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_browsers">Compatibilidade de browsers</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("30.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponível em workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.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>Recurso</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>Suporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("30.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponível em Workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/pt-br/web/api/console/dir/index.html b/files/pt-br/web/api/console/dir/index.html
new file mode 100644
index 0000000000..aa5c153903
--- /dev/null
+++ b/files/pt-br/web/api/console/dir/index.html
@@ -0,0 +1,108 @@
+---
+title: Console.dir()
+slug: Web/API/Console/dir
+tags:
+  - API
+  - console
+translation_of: Web/API/Console/dir
+---
+<p>{{ APIRef("Console API") }}{{Non-standard_header}}</p>
+
+<h2 id="Summary" name="Summary">Resumo</h2>
+
+<p>Exibe uma lista interativa das propriedades do objeto JavaScript especificado. A saída é apresentada como uma lista hierárquica com triângulos que permitem ver o conteúdo de objetos-filho.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p><img alt="console-dir.png" class="default internal" src="/@api/deki/files/6081/=console-dir.png"></p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">console.dir(<em>object</em>);
+</pre>
+
+<h2 id="Parâmetros">Parâmetros</h2>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Um objeto JavaScript cujas propriedades devem ser emitidas.</dd>
+</dl>
+
+<h3 id="Specification" name="Specification">Especificação</h3>
+
+<p><a href="https://github.com/DeveloperToolsWG/console-object/blob/master/api.md#consoledirobject">Console Object API</a></p>
+
+<h2 id="Compatibilidade_do_Browser">Compatibilidade do Browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("8.0") }}</td>
+   <td>9</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Disponível em trabalhos</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("38.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>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("8.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Disponível em trabalhos</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("38.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Documentação Opera Dragonfly: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: usando o F12 Ferramentas de Console para exibir erros e status</a></li>
+</ul>
diff --git a/files/pt-br/web/api/console/error/index.html b/files/pt-br/web/api/console/error/index.html
new file mode 100644
index 0000000000..bf0ff45540
--- /dev/null
+++ b/files/pt-br/web/api/console/error/index.html
@@ -0,0 +1,160 @@
+---
+title: Console.error()
+slug: Web/API/Console/error
+translation_of: Web/API/Console/error
+---
+<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>
+
+<p>'<em>Escreve</em>' uma mensagem de erro no  Web Console.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">console.error(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.error(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+console.exception(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.exception(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> <code>console.exception()</code> é um alias para <code>console.error()</code>; as funcionalidades deles são identicas.</p>
+</div>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Uma lista de objetos Javascript para serem escritos. As representações String de cada um destes objetos é ligada junto na ordem listada e escrita.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Uma String Javascript contendo zero ou mais Strings de substituição.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Objetos JavaScript o qual substituirão as Strings no <code>msg</code>. Este parâmetro fornece controle adicional sobre o formato de output.</dd>
+</dl>
+
+<p>Veja <a href="/en-US/docs/Web/API/console#Outputting_text_to_the_console">Outputting text to the console</a> na documentação de {{domxref("console")}} para mais detalhes.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#consoleerrorobject--object-", "console.error()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</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>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Substituição de Strings</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>console.exception</code> alias</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("28.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Disponível em workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.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>Suporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Substituição de Strings</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>console.exception</code> alias</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("28.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Disponível em workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/pt-br/web/api/console/index.html b/files/pt-br/web/api/console/index.html
new file mode 100644
index 0000000000..c8d6331685
--- /dev/null
+++ b/files/pt-br/web/api/console/index.html
@@ -0,0 +1,242 @@
+---
+title: Console
+slug: Web/API/Console
+translation_of: Web/API/Console
+---
+<div>
+<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>
+</div>
+
+<p>O objeto <code>console</code> fornece acesso ao console de debug do navegador (por exemplo, o <a href="/en-US/docs/Tools/Web_Console">Web Console</a> do Firefox). O seu funcionamento específico varia de navegador para navegador, mas existe um conjunto de ferramentas que na prática são fornecidas normalmente.</p>
+
+<p>Esta página documenta os {{anch("Métodos")}} disponíveis no objeto <code>console</code> e fornece alguns exemplos de {{anch("Uso")}}.</p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("console.assert()", "console.assert(expression, object[, object...])")}}</dt>
+ <dd>Emite uma mensagem e traça a sequência de operações até o primeiro argumento for falso.</dd>
+ <dt>{{domxref("console.count()", "console.count([label])")}}</dt>
+ <dd>Mostra o número de vezes que esta linha foi chamada com a label fornecida.</dd>
+ <dt>{{domxref("console.log()", "console.debug(object[, object...])")}} {{deprecated_inline("5.0")}}</dt>
+ <dd>Um atalho para <code>log()</code>; que foi adicionado para melhorar a compatibilidade de páginas já existentes que utilizavam <code>debug()</code>. Porém, ao invés destes comandos você deve utilizar {{domxref("console.log()")}}.</dd>
+ <dt>{{domxref("console.dir()", "console.dir(object)")}}</dt>
+ <dd>Exibe uma listagem interativa das propriedades de um objeto JavaScript especificado. Esta listagem permite a você expandir o objeto para visualizar o conteúdo de objetos filhos.</dd>
+ <dt>{{domxref("console.error()", "console.error(object[, object...])")}}</dt>
+ <dd>Emite uma mensagem de erro<span>.</span> Você pode usar substituição de string e outros argumentos adicionais com este método. Consulte {{anch("Uso de substituição de string")}}.</dd>
+ <dt>{{domxref("console.error()", "console.exception(object[, object...])")}}</dt>
+ <dd>Um atalho para <code>error();</code></dd>
+ <dt>{{domxref("console.group()", "console.group(object[, object...])")}}</dt>
+ <dd>Cria um novo grupo em linha e recua todas as mensagens seguintes para um nível de indentação superior. Para voltar um nível, utilize <code>groupEnd()</code>. Consulte {{anch("Uso de grupos no console")}}.</dd>
+ <dt>{{domxref("console.groupCollapsed()", "console.groupCollapsed(object[, object...])")}}</dt>
+ <dd>Cria um novo grupo em linha e recua todas as mensagens seguintes para um nível de indentação superior; ao contrário de <code>group()</code>, o grupo em linha começa recolhido. Para revelar seu conteúdo, basta clicar no botão de revelação para expandí-lo. Para recuar um nível, utilize <code>groupEnd().</code> Consulte {{anch("Uso de grupos no console")}}.</dd>
+ <dt>{{domxref("console.groupEnd()")}}</dt>
+ <dd>Sai do grupo em linha atual. Veja {{anch("Uso de grupos no console")}}.</dd>
+ <dt>{{domxref("console.info()", "console.info(object[, object...])")}}</dt>
+ <dd>Informações de registro. Você pode utilizar substituição de string e outros argumentos com este método. Consulte {{anch("Uso de substituição de string")}}.</dd>
+ <dt>{{domxref("console.log()", "console.log(object[, object...])")}}</dt>
+ <dd>Utilizado para a emissão de informações de registro em geral. Você pode utilizar substituição de string e outros argumentos com este método. Consulte {{anch("Uso de substituição de string")}}.</dd>
+ <dt>{{domxref("console.profile()", "console.profile( [profileLabel] )")}}</dt>
+ <dd>Inicia o <a href="/en-US/docs/Tools/Profiler">JavaScript profiler</a>. Você pode especificar qualquer label opcional para o perfil.</dd>
+ <dt>{{domxref("console.profileEnd()")}}</dt>
+ <dd>Interrompe o profiler. Você pode ver o profile resultante no <a href="/en-US/docs/Tools/Profiler">JavaScript profiler</a>.</dd>
+</dl>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("Console.table()")}}</dt>
+ <dd>Exibe dados, como objeto e array, como uma tabela.</dd>
+</dl>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("console.time()", "console.time(name)")}}</dt>
+ <dd>Inicia um contador de tempo com o nome especificado no parâmetro <em>name</em>. Até 10.000 contadores de tempo podem ser rodados por página.</dd>
+ <dt>{{domxref("console.timeEnd()", "console.timeEnd(name)")}}</dt>
+ <dd>Interrompe o contador de tempo especificado e emite o tempo e registros do contador de tempo em milisegundos desde o seu início. Veja {{anch("Contadores de Tempo")}}.</dd>
+ <dt>{{domxref("console.trace()")}}</dt>
+ <dd>Emite um traçado de pilha. See {{anch("Traçados de pilha")}}.</dd>
+ <dt>{{domxref("console.warn()", "console.warn(object[, object...])")}}</dt>
+ <dd>Emite uma mensagem de alerta. Você pode utilizar substituição de string e argumentos adicionais com este método. Veja {{anch("Uso de substituição de string")}}.</dd>
+</dl>
+
+
+<h2 id="Usage" name="Usage">Uso</h2>
+
+<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Output de texto para o console</h3>
+
+<p>A utilização mais frequente do console é realizar o log de texto e de outros dados. Há quatro categorias de output que podem ser geradas, utilizando os métodos {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}} e o {{domxref("console.error()")}}. Cada um destes resultam em outputs que possuem estilos diferentes no log, e você pode utilizar os controles de filtragem fornecidos pelo navegador para ver apenas os outputs que lhe interessam.</p>
+
+<p>Há duas maneiros da utilizar cada um dos métodos de outuput. Você pode simplemente passar uma lista dos objetos cuja representação em string será concatenadas em uma string e então realizar o output  para o console, ou você pode passar uma string contendo zero ou mais substituições de strings seguidas por uma lista de objetos para serem utilizados na substituição.</p>
+
+<h4 id="Output_de_um_único_objeto">Output de um único objeto</h4>
+
+<p>A forma mais simples de utilizar os métodos de log é realizar o output de um único objeto:</p>
+
+<pre class="brush: js">var algumObjeto = { str: "Algum texto", id: 5 };
+console.log(algumObjeto);
+</pre>
+
+<p>O output vai se parecer como algo assim:</p>
+
+<pre>[09:27:13.475] ({str:"Algum texto", id:5})</pre>
+
+<h4 id="Output_de_múltiplos_objetos">Output de múltiplos objetos</h4>
+
+<p>Você também pode realizar o output de múltiplos objetos ao simplesmente listá-los ao chamar o método de log, desta forma:</p>
+
+<pre class="brush: js">var carro = "Fusca";
+var algumObjeto = {str:"Algum texto", id:5};
+console.info("Meu primeiro carro era um ", carro, ". O objeto é: ", algumObjeto);</pre>
+
+<p>O output será algo assim:</p>
+
+<pre>[09:28:22.711] Meu primeiro carro era um Fusca. O objeto é:  ({str:"Algum texto", id:5})
+</pre>
+
+<h4 id="Uso_de_substituição_de_string">Uso de substituição de string</h4>
+
+<p>O Gecko 9.0 {{geckoRelease("9.0")}} introduziu o suporte à substituição de strings. Ao fornecer uma string para um dos métodos do console que aceitam uma string, você pode utilizar estas strings de substituição:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">String de substituição</td>
+   <td class="header">Descrição</td>
+  </tr>
+  <tr>
+   <td>%o</td>
+   <td>Emite um link para o objeto JavaScript. Clicar no link abre um inspetor.</td>
+  </tr>
+  <tr>
+   <td>%d ou %i</td>
+   <td>Emite uma numero inteiro. A formatação ainda não possui suporte.</td>
+  </tr>
+  <tr>
+   <td>%s</td>
+   <td>Emite uma string.</td>
+  </tr>
+  <tr>
+   <td>%f</td>
+   <td>Emite um número de ponto flutuante. A formatação ainda não possui suporte.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Cada um destes puxam o próximo argumento na lista de parâmetros após a string fornecida inicialmente. Por exemplo:</p>
+
+<pre>for (var i=0; i&lt;5; i++) {
+  console.log("Olá, %s. Você me chamou pela %dª vez.", "João", i+1);
+}
+</pre>
+
+<p>O output será algo assim:</p>
+
+<pre>[13:14:13.481] Olá, João. Você me chamou pela 1ª vez.
+[13:14:13.483] Olá, João. Você me chamou pela 2ª vez.
+[13:14:13.485] Olá, João. Você me chamou pela 3ª vez.
+[13:14:13.487] Olá, João. Você me chamou pela 4ª vez.
+[13:14:13.488] Olá, João. Você me chamou pela 5ª vez.
+</pre>
+
+<h4 id="Estilizando_o_output_no_console">Estilizando o output no console</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("%cMy stylish message", "color: red; font-style: italic");</pre>
+
+<div><img alt="" src="https://mdn.mozillademos.org/files/7739/console-style.png" style="display: block; height: 52px; margin-left: auto; margin-right: auto; width: 293px;"></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 class="note">To exit the current group, simply call <code>console.groupEnd()</code>.</p>
+
+<p class="note">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 only parameter. To stop the timer, and to get the elapsed time in miliseconds, 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.timeEnd("answer time");
+</pre>
+
+<p>will log the time needed by the user to discard the alert box:</p>
+
+<p><img alt="timerresult.png" class="default internal" src="/@api/deki/files/6084/=timerresult.png"></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>foo();
+
+function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+</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="Notes">Notes</h2>
+
+<ul>
+ <li>At least in Firefox, if a page defines a console 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/Firefox_OS/Using_the_App_Manager">Debugging apps on Firefox OS</a> - using the App Manager to debug apps running on Firefox OS</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>
+
+<p> </p>
+
+<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/pt-br/web/api/console/info/index.html b/files/pt-br/web/api/console/info/index.html
new file mode 100644
index 0000000000..e4033e254d
--- /dev/null
+++ b/files/pt-br/web/api/console/info/index.html
@@ -0,0 +1,154 @@
+---
+title: Console.info()
+slug: Web/API/Console/info
+translation_of: Web/API/Console/info
+---
+<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>
+
+<p>Apresenta uma mensagem de saída no console do navegador . No Firefox e Chrome , um pequeno ícone "i" e apresentado próximo aos items do log do console .  </p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">console.info(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.info(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h2 id="Parâmetros">Parâmetros</h2>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd><code>A lista de objetos javascript para saída . As representações de strings de cada um desses objetos são anexados juntos em ordem de listagem e saida . </code></dd>
+ <dt><code>msg</code></dt>
+ <dd><code>Uma string javascript que contém zero ou mais strings para substituição.</code></dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd><code>Objeto javascript o qual substitui strings com msg. Isso permite controle adicional sobre o formato da saída.</code></dd>
+</dl>
+
+<p>Veja <a href="/en-US/docs/Web/API/console#Outputting_text_to_the_console">Outputting text to the console</a> na documentação {{domxref("console")}} para mais  detalhes.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentários</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#consoleinfoobject--object-", "console.info()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Substituição de strings</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Icones informação</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Disponível para trabalhadores</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.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>Características</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Substituição de  strings</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>
+    <table class="compat-table">
+     <tbody>
+      <tr>
+       <td>Disponível para trabalhadores</td>
+       <td> </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja  também</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+</ul>
diff --git a/files/pt-br/web/api/console/log/index.html b/files/pt-br/web/api/console/log/index.html
new file mode 100644
index 0000000000..b25a14a3fe
--- /dev/null
+++ b/files/pt-br/web/api/console/log/index.html
@@ -0,0 +1,119 @@
+---
+title: Console.log()
+slug: Web/API/Console/log
+translation_of: Web/API/Console/log
+---
+<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>Exibe uma mensagem na console do navegador.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</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>
+
+<h2 id="Parameters">Parameters</h2>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Uma lista de objetos JavaScript para exibir. A representação por escrito de cada um desses objetos é exibida na ordem com a qual foram inseridos na função.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Uma string JavaScript com zero ou mais substituições.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Strings ou objetos JavaScript para substituirem as marcações de substituição em <code>msg</code>. Estas substituições ocorrem de um para um e na ordem em que são passadas para a console.log.</dd>
+</dl>
+
+<p>Veja <a href="/en-US/docs/DOM/console#Outputting_text_to_the_console" title="DOM/console#Outputting_text_to_the_console">Exibindo texto na console</a> na documentação do objeto {{domxref("console")}} para mais detalhes.</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<p>Não faz parte de nenhuma especificação.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Strings de substituição</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+
+    <p>{{CompatChrome(28)}}</p>
+
+    <p>%d - se um valor fracional negativo é passado, ele será arredondado para baixo, exemplo: -0,35 será arredondado para 1</p>
+   </td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>
+    <p>10 - parcial</p>
+
+    <p>%c - não suportado<br>
+     <span style="line-height: 1.572;">%d - irá renderizar como 0 quando NaN</span></p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Strings de substituição</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="http://getfirebug.com/wiki/index.php/Console_API" title="http://getfirebug.com/wiki/index.php/Console_API">Firebug wiki: Console API</a> - Firebug supports additional features in its console.log() implementation, such as <a href="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/" title="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/">styled logging</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/pt-br/web/api/console/table/index.html b/files/pt-br/web/api/console/table/index.html
new file mode 100644
index 0000000000..946a642003
--- /dev/null
+++ b/files/pt-br/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">Exibe dados tabulares como uma tabela.</span></p>
+
+<p>Essa função recebe um parâmetro obrigatório <code>data</code>, que deve ser um array ou um objeto, e um parametro opcional <code>columns</code>.</p>
+
+<p>Registra <code>data</code> como uma tabela. Cada elemento no array (ou propriedade enumerável se <code>data</code> for um objeto) será uma linha na tabela.</p>
+
+<p>A primeira coluna na tabela será rotulada <code>(index)</code>. Se <code>data</code> for um array, seus valores serão os índices da matriz. Se <code>data</code> for um objeto, seus valores serão os nomes das propriedades. Observe que (no Firefox) o <code>console.table</code> está limitado a exibir 1000 linhas (a primeira linha é o índice rotulado).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h3 id="Coleções_de_tipos_primitivos">Coleções de tipos primitivos</h3>
+
+<p>O argumento <code>data</code> pode ser um array ou um objeto.</p>
+
+<pre class="brush: js">// um array de strings
+
+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">// um objeto cujas propriedades são strings
+
+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="Coleções_de_tipos_compostos">Coleções de tipos compostos</h3>
+
+<p>Se os elementos no array, ou propriedades no objeto, forem arrays ou objetos, seus elementos ou propriedades serão enumerados na linha, um por coluna:</p>
+
+<pre class="brush: js">// um array de 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">// um array de objetos
+
+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>Observe que, se a matriz contiver objetos, as colunas serão rotuladas com o nome da propriedade.</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">// um objeto cujas propriedades são objetos
+
+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="Restringindo_as_colunas_exibidas">Restringindo as colunas exibidas</h3>
+
+<p>Por padrão, <code>console.table()</code> lista todos os elementos em cada linha. Você pode usar o parâmetro opcional <code>columns</code> para selecionar um subconjunto de colunas a serem exibidas:</p>
+
+<pre class="brush: js">// um array de objetos, registrando apenas 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="Classificando_colunas">Classificando colunas</h3>
+
+<p>Você pode classificar a tabela por uma coluna específica clicando no rótulo dessa coluna.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">console.table(data [, <em>columns</em>]);
+</pre>
+
+<h3 id="Parâmentros">Parâmentros</h3>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Os dados a serem exibidos. Deve ser um array ou um objeto.</dd>
+ <dt><code>columns</code></dt>
+ <dd>Um array contendo os nomes das colunas para incluir na saída.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#table", "console.table()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_browsers">Compatibilidade de browsers</h2>
+
+<div>
+
+
+<p>{{Compat("api.Console.table")}}</p>
+</div>
diff --git a/files/pt-br/web/api/console/time/index.html b/files/pt-br/web/api/console/time/index.html
new file mode 100644
index 0000000000..14b6f4a03c
--- /dev/null
+++ b/files/pt-br/web/api/console/time/index.html
@@ -0,0 +1,103 @@
+---
+title: Console.time()
+slug: Web/API/Console/time
+translation_of: Web/API/Console/time
+---
+<p>{{ APIRef("Console API") }}{{Non-standard_header}}</p>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>Inicia um cronômetro que você pode usar para monitorar quanto tempo uma operação leva. Você dá para cada cronômetro um nome único, e deve ter no máximo 10.000 deles sendo executados na página. Quando você chama {{ domxref("console.timeEnd()") }} com o mesmo nome, o navegador mostrará o tempo, em milisegundos, que se passou desde que o cronômetro iniciou.</p>
+
+<p>Veja <a href="/pt-BR/DOM/console#Timers">Timers </a>na documentação {{ domxref("console") }} para detalhes e exemplos.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">console.time(<em>cronometroNome</em>);
+</pre>
+
+<h2 id="Parâmetros">Parâmetros</h2>
+
+<dl>
+ <dt><code>cronometroNome</code></dt>
+ <dd>O nome para dar ao novo cronômetro. Ele identificará o cronômetro; use o mesmo quando chamar {{ domxref("console.timeEnd()") }} para parar o cronômetro e obter o tempo na saída do console.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<p><a href="/pt-BR/docs/Web/API/Console">API do objeto Console</a></p>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>2</td>
+   <td>{{ CompatGeckoDesktop("10.0") }}</td>
+   <td>11</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Disponível em Workers</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("38.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>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("10.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Disponível em Workers</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("38.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{ domxref("Console.timeEnd()") }}</li>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/pt-br/web/api/console/timeend/index.html b/files/pt-br/web/api/console/timeend/index.html
new file mode 100644
index 0000000000..7ef63ea5bc
--- /dev/null
+++ b/files/pt-br/web/api/console/timeend/index.html
@@ -0,0 +1,90 @@
+---
+title: Console.timeEnd()
+slug: Web/API/Console/timeEnd
+tags:
+  - Desenvolvimento Web
+  - metodo
+translation_of: Web/API/Console/timeEnd
+---
+<div>
+<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>
+</div>
+
+<h2 id="Summary" name="Summary">Resumo</h2>
+
+<p>Interrompe um temporizador que foi anteriormente iniciado por uma chamada a {{domxref("console.time()")}}.</p>
+
+<p>Veja <a href="/en-US/docs/DOM/console#Timers" title="DOM/console#Timers">Timers</a> na documentação de {{domxref("console")}} para detalhes e exemplos.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">console.timeEnd(<var>timerName</var>);
+</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>timerName</code></dt>
+ <dd>O nome do temporizador a ser interrompido. Uma vez interrompido, o tempo decorrido é automaticamente apresentado no <a href="/en-US/docs/Tools/Web_Console" title="Web Console">Web Console</a>.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<p>Não é parte de qualquer especificação.</p>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</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>2</td>
+   <td>{{CompatGeckoDesktop("10.0")}}</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</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>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("10.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Console.time")}}</li>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/pt-br/web/api/console/timestamp/index.html b/files/pt-br/web/api/console/timestamp/index.html
new file mode 100644
index 0000000000..774ee4048b
--- /dev/null
+++ b/files/pt-br/web/api/console/timestamp/index.html
@@ -0,0 +1,106 @@
+---
+title: Console.timeStamp()
+slug: Web/API/Console/timeStamp
+translation_of: Web/API/Console/timeStamp
+---
+<p>{{ APIRef("Console API") }}{{Non-standard_header}}</p>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>Adiciona um marcador simples para as ferramentas <a class="external external-icon" href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> ou <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> do navegador. Ele deixa você relacionar um ponto no seu código com os outros eventos gravados na linha do tempo, como um evento de layout ou de pintura.</p>
+
+<p>Opcionalmente, você pode fornecer um argumento como rótulo do carimbo de hora, e esse rótulo será então mostrado juntamente com a marcação.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> essa funcionalidade está disponível em <a href="/pt-BR/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="eval">console.timeStamp(rotulo);
+</pre>
+
+<h2 id="Parâmetros">Parâmetros</h2>
+
+<dl>
+ <dt><code>rotulo</code></dt>
+ <dd>Rótulo para o carimbo de hora. Opcional.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<p><a href="https://github.com/DeveloperToolsWG/console-object/blob/master/api.md#consoletimestamplabel">API do objeto Console</a></p>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">{{ CompatUnknown() }}
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Disponível em workers</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("38.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>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("10.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Disponível em workers</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("38.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{ domxref("Console.time()") }}</li>
+ <li>{{ domxref("Console.timeEnd()") }}</li>
+ <li><a href="/en-US/docs/Tools/Performance/Waterfall#Timestamp_markers">Adding timestamps to the Waterfall</a></li>
+</ul>
diff --git a/files/pt-br/web/api/console/warn/index.html b/files/pt-br/web/api/console/warn/index.html
new file mode 100644
index 0000000000..73eab6abee
--- /dev/null
+++ b/files/pt-br/web/api/console/warn/index.html
@@ -0,0 +1,139 @@
+---
+title: Console.warn()
+slug: Web/API/Console/warn
+translation_of: Web/API/Console/warn
+---
+<div>{{APIRef("Console API")}}{{non-standard_header}}</div>
+
+<p>Escreve uma mensagem de alerta no Console Web.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>{{Note("No Firefox, <em>warnings</em> têm um pequeno icone de ponto de exclamação perto deles no log do Console Web.")}}</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">console.warn(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.warn(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h2 id="Parâmetros">Parâmetros</h2>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Uma lista de objetos JavaScript para escrever. A representação String de cada um destes objetos é ligada junto na ordem listada e escrita.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Uma string JavaScript contendo zero ou mais strings de substituição.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Objetos JavaScript com qual as strings de substituição <code>msg </code>serão substituidas. Isto dá um contriole adicional sobre a mensagem que será escrita.</dd>
+</dl>
+
+<p>Ver <a href="/en-US/docs/Web/API/console#Outputting_text_to_the_console">Outputting text to the console</a> na documentação do {{domxref("console")}} para mais detalhes.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#consolewarnobject--object-", "console.warn()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_os_navegadores">Compatibilidade entre os navegadores</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>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Substituição strings</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponível em workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("38.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>Suporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Substituição strings</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponível em workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("38.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+</ul>
diff --git a/files/pt-br/web/api/console_api/index.html b/files/pt-br/web/api/console_api/index.html
new file mode 100644
index 0000000000..560264eb23
--- /dev/null
+++ b/files/pt-br/web/api/console_api/index.html
@@ -0,0 +1,68 @@
+---
+title: Console API
+slug: Web/API/Console_API
+translation_of: Web/API/Console_API
+---
+<div>{{DefaultAPISidebar("Console API")}}</div>
+
+<p>O Console API  traz funcionalidades que permitem desenvolvedores realizar tarefas de debug, como registrar mensagens or os valores das variáveis em sertoes pontos do código, or cronometrar quanto tempo uma operação leva para concluir.</p>
+
+<h2 id="Conceitos_e_uso">Conceitos e uso</h2>
+
+<p>O Console API começou como uma API proprietária, com diferentes navegadores a implementando. <a href="https://console.spec.whatwg.org/"> A especificação do Console API</a> foi criado para definir um comportamento consistente, e todos o navegadores atuais ventualmente foram implementando a funconalidade — Apsar de algumas implementações ainda terem funções adicionais proprietárias. Veja mais sobre isso em:</p>
+
+<ul>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools implementação</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari DevTools implementação</a></li>
+</ul>
+
+<p>Uso é bastante simples — o objeto {{domxref("console")}} — disponível via {{domxref("window.console")}}, ou {{domxref("WorkerGlobalScope.console")}} em workers; acessível apenas usando <code>console</code> — contém vários métodos que você pode chamar para executar tarefas de depuração, geralmente focado no registro de vários valores no navegador <a href="/en-US/docs/Tools/Web_Console">Web Console</a>.</p>
+
+<p>De longe o método mais comum usado é o {{domxref("console.log")}}, que é usado para mostrar o valor atual contido em uma variável específica.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("console")}}</dt>
+ <dd>Provides rudimentary debugging functionality, including logging, stack traces, timers, and counters.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">let myString = 'Hello world';
+
+// Output "Hello world" to the console
+console.log(myString)</pre>
+
+<p>See the <a href="/en-US/docs/Web/API/Console#Usage">Console reference page</a> for more examples.</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="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>
+</ul>
diff --git a/files/pt-br/web/api/crypto/index.html b/files/pt-br/web/api/crypto/index.html
new file mode 100644
index 0000000000..cc9a0214d1
--- /dev/null
+++ b/files/pt-br/web/api/crypto/index.html
@@ -0,0 +1,72 @@
+---
+title: Crypto
+slug: Web/API/Crypto
+tags:
+  - API
+  - Interface
+  - Referencia
+  - Web Crypto API
+translation_of: Web/API/Crypto
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>A interface <code><strong>Crypto</strong></code> apresenta características de criptografia básica disponíveis no contexto atual. Isto permite acesso a um forte gerador criptográfico de números aleatórios e a criptografias primitivas.</p>
+
+<p>Um objeto com essa interface está disponível no contexto web via propriedade {{domxref("Window.crypto")}} .</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>Esta interface implementa propriedades definidas em {{domxref("RandomSource")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Crypto.subtle")}} {{experimental_inline}}{{readOnlyInline}}</dt>
+ <dd>Retorna um objeto {{domxref("SubtleCrypto")}} provendo acesso a criptografias primitivas comuns, como hashing, signing, encryption ou decryption.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Esta interface implementa métodos definidos em {{domxref("RandomSource")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("RandomSource.getRandomValues()")}}</dt>
+ <dd>Preenche a {{ jsxref("TypedArray") }} com valores criptografados aleatórios.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}}</td>
+   <td>{{Spec2("Web Crypto API")}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de 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.Crypto")}}</p>
+
+<div id="compat-desktop"> </div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
+
+<h2 id="Dicionário">Dicionário:</h2>
+
+<p>"Key" = "Chave"</p>
diff --git a/files/pt-br/web/api/crypto/subtle/index.html b/files/pt-br/web/api/crypto/subtle/index.html
new file mode 100644
index 0000000000..caf7e0d4f0
--- /dev/null
+++ b/files/pt-br/web/api/crypto/subtle/index.html
@@ -0,0 +1,51 @@
+---
+title: Crypto.subtle
+slug: Web/API/Crypto/subtle
+tags:
+  - API
+  - Criptografía
+  - Propriedade
+  - Read-only
+  - Referencia
+  - Web Crypto API
+translation_of: Web/API/Crypto/subtle
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>A prorpiedade <strong><code>Crypto.subtle</code></strong> de apenas leitura retorna como objeto {{domxref("SubtleCrypto")}} permitindo exercer operações de criptografia.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre>var <em>crypto</em> = crypto.subtle;</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+
+
+<p>{{Compat("api.Crypto.subtle")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Crypto")}}.</li>
+ <li>{{domxref("SubtleCrypto")}}.</li>
+ <li><a href="https://vibornoff.github.io/webcrypto-examples/index.html">Compatibility test page</a>.</li>
+ <li><a href="https://github.com/vibornoff/webcrypto-shim">Shim for IE11 and Safari</a>.</li>
+</ul>
diff --git a/files/pt-br/web/api/cryptokey/algorithm/index.html b/files/pt-br/web/api/cryptokey/algorithm/index.html
new file mode 100644
index 0000000000..ab2440f6b6
--- /dev/null
+++ b/files/pt-br/web/api/cryptokey/algorithm/index.html
@@ -0,0 +1,112 @@
+---
+title: CryptoKey.algorithm
+slug: Web/API/CryptoKey/algorithm
+tags:
+  - API
+  - CryptoKey
+  - Propriedade
+  - Read-only
+  - Referencia
+  - Web Crypto API
+translation_of: Web/API/CryptoKey
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>A propriedade <code><strong>CryptoKey.algorithm</strong></code> de apenas leitura é um valor opaco contendo todas as informações sobre o algoritmo relacionado à key.</p>
+
+<p>Implementações diferentes tem diferentes tipos de valores opacos para os mesmos: tal objeto não pode ser compartilhado.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>result</em> = <em><code>key</code></em><code>.algorithm</code>
+</pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<ul>
+ <li><code><em>result</em></code> é um objeto opaco descrevendo o algoritmo com o qual a key está relacionado.</li>
+</ul>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey-algorithm', 'CryptoKey.algorithm') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatChrome(37) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(34) }}</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>Característica</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>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>37</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li>
+ <li>{{domxref("CryptoKey")}}, a interface a qual ele pertence.</li>
+</ul>
+
+<h2 id="Dicionário">Dicionário</h2>
+
+<p>"Key" = "Chave"</p>
diff --git a/files/pt-br/web/api/cryptokey/extractable/index.html b/files/pt-br/web/api/cryptokey/extractable/index.html
new file mode 100644
index 0000000000..6ff8bde9c7
--- /dev/null
+++ b/files/pt-br/web/api/cryptokey/extractable/index.html
@@ -0,0 +1,110 @@
+---
+title: CryptoKey.extractable
+slug: Web/API/CryptoKey/extractable
+tags:
+  - API
+  - CryptoKey
+  - Propriedade
+  - Read-only
+  - Referencia
+  - Web Crypto API
+translation_of: Web/API/CryptoKey
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>A propriedade de apenas leitura <code><strong>CryptoKey.extractable</strong></code> que indica se a key bruta do material pode ser extraída, para por exemplo arquivá-la.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>result</em> = <em><code>key</code></em><code>.extractable</code>
+</pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<ul>
+ <li><code><em>result</em></code> é um {{jsxref("Boolean")}} indicando se a chave pode ser extraída.</li>
+</ul>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey-extractable', 'CryptoKey.extractable') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatChrome(37) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(34) }}</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>Característica</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>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>37</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li>
+ <li>{{domxref("CryptoKey")}}, a interface a qual ele pertence.</li>
+</ul>
+
+<h3 id="Dicionário">Dicionário</h3>
+
+<p>"Key" = "Chave"</p>
diff --git a/files/pt-br/web/api/cryptokey/index.html b/files/pt-br/web/api/cryptokey/index.html
new file mode 100644
index 0000000000..e532bba078
--- /dev/null
+++ b/files/pt-br/web/api/cryptokey/index.html
@@ -0,0 +1,120 @@
+---
+title: CryptoKey
+slug: Web/API/CryptoKey
+tags:
+  - API
+  - Chaves Criptografadas
+  - Interface
+  - Referencia
+  - Web Crypto API
+translation_of: Web/API/CryptoKey
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>A interface <strong><code>CryptoKey</code></strong> representa uma {{glossary("key")}} criptografada derivada de uma key de algoritmo definido.</p>
+
+<p>Um objeto <strong><code>CryptoKey</code></strong> pode ser obtido utilizando {{domxref("SubtleCrypto.generateKey()")}}, {{domxref("SubtleCrypto.deriveKey()")}} ou {{domxref("SubtleCrypto.importKey()")}}</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>Esta interface não herda nehunha propriedade.</em></p>
+
+<dl>
+ <dt>{{domxref("CryptoKey.type")}}</dt>
+ <dd>Retorna um valor enumerado representando o tipo da key, uma key secreta (para algoritmos simétricos), uma key pública ou privada (para algoritmos assimétricos).</dd>
+ <dt>{{domxref("CryptoKey.extractable")}}</dt>
+ <dd>Retorna um {{jsxref("Boolean")}} indicando se a informação bruta pode ser exportada para a aplicação ou não.</dd>
+ <dt>{{domxref("CryptoKey.algorithm")}}</dt>
+ <dd>Retorna um objeto opaco representando uma cifra em particular que deve ser utilizada com a key.</dd>
+ <dt>{{domxref("CryptoKey.usages")}}</dt>
+ <dd>Retorna uma matriz de valores enumerados indicando onde a key pode ser utilizada.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Esta interface não herda, nem implementa nenhum método.</em></p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey', 'CryptoKey') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_o_Browser">Compatibilidade com o Browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico.</td>
+   <td>{{ CompatChrome(37) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(34) }}</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>Característica</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>Suporte básico.</td>
+   <td>37</td>
+   <td>{{ CompatChrome(37) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li>
+</ul>
+
+<h3 id="Dicionário">Dicionário:</h3>
+
+<p>"Key" = "Chave"</p>
diff --git a/files/pt-br/web/api/cryptokey/type/index.html b/files/pt-br/web/api/cryptokey/type/index.html
new file mode 100644
index 0000000000..6a1bc1703e
--- /dev/null
+++ b/files/pt-br/web/api/cryptokey/type/index.html
@@ -0,0 +1,117 @@
+---
+title: CryptoKey.type
+slug: Web/API/CryptoKey/type
+tags:
+  - API
+  - Apenas Leitura
+  - CryptoKey
+  - Propriedades
+  - Referencia
+  - Web Crypto API
+translation_of: Web/API/CryptoKey
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>O <code><strong>CryptoKey.type</strong></code> é uma propriedade de apenas leitura que indica o tipo de key: se for uma key para um algoritmo simétrico (<code>"secret"</code>) ou, para um algoritmo assimétrico, (<code>"public"</code> ou <code>"private"</code>, dependendo do seu propósito).</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>result</em> = <em><code>key</code></em><code>.type</code>
+</pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<ul>
+ <li><code><em>result</em></code> é um valor enumerado que pode ser:
+
+  <ul>
+   <li><code>"secret"</code> representa uma key única utilizada para criptografar ou descriptografar uma mensagem que faz uso de um algoritmo simétrico.</li>
+   <li><code>"public"</code> representa uma key pública e compartilhável usada em um algoritmo assimétrico.</li>
+   <li><code>"private"</code> representa uma key utilizada em um algoritmo assimétrico que deve ser mantida em privado.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey-type', 'CryptoKey.type') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatChrome(37) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(34) }}</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>Características</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>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>37</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li>
+ <li>{{domxref("CryptoKey")}}, a interface a qual ele pertence.</li>
+</ul>
+
+<h3 id="Dicionário">Dicionário:</h3>
+
+<p>"Key" = "Chave"</p>
diff --git a/files/pt-br/web/api/cryptokey/usages/index.html b/files/pt-br/web/api/cryptokey/usages/index.html
new file mode 100644
index 0000000000..ba51dbaa0f
--- /dev/null
+++ b/files/pt-br/web/api/cryptokey/usages/index.html
@@ -0,0 +1,123 @@
+---
+title: CryptoKey.usages
+slug: Web/API/CryptoKey/usages
+tags:
+  - API
+  - CryptoKey
+  - Propriedade
+  - Read-only
+  - Referencia
+  - Web Crypto API
+translation_of: Web/API/CryptoKey
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>A propriedade de apenas leitura <code><strong>CryptoKey.usages</strong></code> é um conjunto enumerado que indica os propósitos da key.</p>
+
+<p>Possíveis valores são:</p>
+
+<ul>
+ <li><code>"encrypt"</code>, permitindo que a key seja utilizada para {{glossary("encryption", "encrypting")}} mensagens.</li>
+ <li><code>"decrypt"</code>, permitindo que a key seja utilizada para {{glossary("decryption", "decrypting")}} mensagens.</li>
+ <li><code>"sign"</code>, permitindo que a key seja utilizada para {{glossary("signature", "signing")}} mensagens.</li>
+ <li><code>"verify"</code>, permitindo que a key seja utilizada para {{glossary("verification", "verifying the signature")}} de mensagens.</li>
+ <li><code>"deriveKey"</code>, permitindo que a key seja utilizada como key base na derivação de uma nova key.</li>
+ <li><code>"deriveBits"</code>, permitindo que a key seja utilizada como key base na derivação de bits de informação para uso em criptografias primitivas.</li>
+ <li><code>"wrapKey"</code>, permitindo que a key envolva uma key simétrica para uso (transferência, armazenamento) em ambientes não seguros.</li>
+ <li><code>"unwrapKey"</code>, permitindo que a key desvincule uma key simétrica para uso (transferência, armazenamento) em ambientes não seguros.</li>
+</ul>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>result</em> = <em><code>key</code></em><code>.usages</code>
+</pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<ul>
+ <li><code><em>result</em></code> é um {{jsxref("Array")}} de valores enumerados.</li>
+</ul>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey-usages', 'CryptoKey.usages') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatChrome(37) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(34) }}</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>Característica</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>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>37</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li>
+ <li>{{domxref("CryptoKey")}}, a interface a qual ele pertence.</li>
+</ul>
+
+<h2 id="Dicionário">Dicionário:</h2>
+
+<p>"Key" = "Chave"</p>
diff --git a/files/pt-br/web/api/css/index.html b/files/pt-br/web/api/css/index.html
new file mode 100644
index 0000000000..9e7e83f1d2
--- /dev/null
+++ b/files/pt-br/web/api/css/index.html
@@ -0,0 +1,136 @@
+---
+title: CSS
+slug: Web/API/CSS
+tags:
+  - Apps
+  - CSSOM
+  - Referencia
+translation_of: Web/API/CSS
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p><code><font face="Open Sans, Arial, sans-serif">A interface </font><strong>CSS</strong></code> carrega métodos CSS-relacionados úteis. Nenhum objeto com essa interface foi implementado: Aqui só contém métodos estáticos e futuramente uma interface útil.</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>A interface CSS é a interface utilizada e nenhum objeto desse tipo pode ser criado: só métodos estáticos são definidos aqui.</em></p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>A interface CSS é a interface utilizada e nenhum objeto desse tipo pode ser criado: só métodos estáticos são definidos aqui.</em></p>
+
+<h2 id="Métodos_státicos">Métodos státicos</h2>
+
+<p><em>Nenhuma método estático herdado</em>.</p>
+
+<dl>
+ <dt>{{domxref("CSS.supports()")}}</dt>
+ <dd>Retorna um {{domxref("Boolean")}} indicando se o par <em>property-value</em>, ou a condição dada do parâmetro é suportada.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("CSS.escape()")}} {{experimental_inline}}</dt>
+ <dd>Pode ser usado para escapar um string mais usado como parte de um seletor CSS.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table" style="font-size: 14px; font-weight: normal; line-height: 1.5;">
+ <thead>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM', '#the-css.escape%28%29-method', 'CSS')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Adicionado o   <code>escape()</code> método estático.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_os_Navegadores">Compatibilidade com os Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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>28.0</td>
+   <td>{{CompatGeckoDesktop("22.0")}} [1]</td>
+   <td>6.0</td>
+   <td>12.1</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>escape()</code>{{experimental_inline}}</td>
+   <td>46.0</td>
+   <td>{{CompatGeckoDesktop("31.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>Característica</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("22.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>12.1</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>escape()</code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Também disponível através do <code>layout.css.supports-rule.enabled</code> preferência desde Gecko 20.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/pt-br/web/api/css_object_model/index.html b/files/pt-br/web/api/css_object_model/index.html
new file mode 100644
index 0000000000..df8709c400
--- /dev/null
+++ b/files/pt-br/web/api/css_object_model/index.html
@@ -0,0 +1,133 @@
+---
+title: CSS Object Model
+slug: Web/API/CSS_Object_Model
+tags:
+  - API
+  - CSSOM
+  - Referencia
+translation_of: Web/API/CSS_Object_Model
+---
+<p>{{DefaultAPISidebar('CSSOM')}}</p>
+
+<p>O CSS Object Model é um conjunto de APIs que permite manipular o CSS através do JavaScript. Isto depende do DOM e da HTML APIs. Com isto é permitido a leitura e a modificação dos estilos CSS dinamicamente.</p>
+
+<h2 id="Referências">Referências</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>{{domxref("CaretPosition")}}</li>
+ <li>{{domxref("CSS")}}</li>
+ <li>{{domxref("CSSCharsetRule")}}</li>
+ <li>{{domxref("CSSConditionRule")}}</li>
+ <li>{{domxref("CSSCounterStyleRule")}}</li>
+ <li>{{domxref("CSSFontFaceRule")}}</li>
+ <li>{{domxref("CSSFontFeatureValuesMap")}}</li>
+ <li>{{domxref("CSSFontFeatureValuesRule")}}</li>
+ <li>{{domxref("CSSGroupingRule")}}</li>
+ <li>{{domxref("CSSImportRule")}}</li>
+ <li>{{domxref("CSSKeyframeRule")}}</li>
+ <li>{{domxref("CSSKeyframesRule")}}</li>
+ <li>{{domxref("CSSMarginRule")}}</li>
+ <li>{{domxref("CSSMediaRule")}}</li>
+ <li>{{domxref("CSSNamespaceRule")}}</li>
+ <li>{{domxref("CSSPageRule")}}</li>
+ <li>{{domxref("CSSRule")}}</li>
+ <li>{{domxref("CSSRuleList")}}</li>
+ <li>{{domxref("CSSStylesheet")}}</li>
+ <li>{{domxref("CSSStyleDeclaration")}}</li>
+ <li>{{domxref("CSSSupportsRule")}}</li>
+ <li>{{domxref("CSSVariablesMap")}}</li>
+ <li>{{domxref("CSSViewportRule")}}</li>
+ <li>{{domxref("ElementCSSInlineStyle")}}</li>
+ <li>{{domxref("GeometryUtils")}}</li>
+ <li>{{domxref("GetStyleUtils")}}</li>
+ <li>{{domxref("LinkStyle")}}</li>
+ <li>{{domxref("MediaList")}}</li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("PseudoElement")}}</li>
+ <li>{{domxref("Screen")}}</li>
+ <li>{{domxref("Stylesheet")}}</li>
+ <li>{{domxref("StylesheetList")}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
+</div>
+
+<p>Outras interfaces podem ser usadas com  CSSOM:</p>
+
+<p>{{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, and {{domxref("SVGElement")}}.</p>
+
+<h2 id="Tutoriais">Tutoriais</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determinando dimensões de elementos</a> (É necessário algumas atualizações, já que foi feito com DHTML/Ajax).</li>
+ <li><a href="/en-US/docs/WebAPI/Managing_screen_orientation">Gerenciando as orientações da tela</a></li>
+</ul>
+
+<h2 id="Especificações">Especificações</h2>
+
+<p> </p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Screen Orientation")}}</td>
+   <td>{{Spec2("Screen Orientation")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Fonts")}}</td>
+   <td>{{Spec2("CSS3 Fonts")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Animations")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Transitions")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Variables")}}</td>
+   <td>{{Spec2("CSS3 Variables")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Conditional")}}</td>
+   <td>{{Spec2("CSS3 Conditional")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Device")}}</td>
+   <td>{{Spec2("CSS3 Device")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Counter Styles")}}</td>
+   <td>{{Spec2("CSS3 Counter Styles")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notas_de_compatibilidade_do_navegador">Notas de compatibilidade do navegador</h2>
+
+<p>Todos esses recursos foram adicionados pouco a pouco ao logo dos anos para os diferentes navegadores: Foi um processo bastante complexo que não podem ser sintetizados em uma simples tabela. Por favor, pesquise por uma interface específica e sua disponibilidade.</p>
diff --git a/files/pt-br/web/api/customelementregistry/index.html b/files/pt-br/web/api/customelementregistry/index.html
new file mode 100644
index 0000000000..b1e3be4458
--- /dev/null
+++ b/files/pt-br/web/api/customelementregistry/index.html
@@ -0,0 +1,93 @@
+---
+title: CustomElementRegistry
+slug: Web/API/CustomElementRegistry
+translation_of: Web/API/CustomElementRegistry
+---
+<p>{{DefaultAPISidebar("Web Components")}}</p>
+
+<p><span class="seoSummary">A interface <strong><code>CustomElementRegistry</code></strong> provê métodos para registro de elementos customizados e busca de elementos registrados. Para instancia-lo, use a propriedade {{domxref("window.customElements")}}. </span></p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("CustomElementRegistry.define()")}}</dt>
+ <dd>Define um novo <a href="/en-US/docs/Web/Web_Components/Custom_Elements">elemento customizado</a>.</dd>
+ <dt>{{domxref("CustomElementRegistry.get()")}}</dt>
+ <dd>Retorna o construtor do nome do elemento informado, ou <code>undefined</code> caso não tenha sido definido.</dd>
+ <dt>{{domxref("CustomElementRegistry.whenDefined()")}}</dt>
+ <dd>Retorna um {{jsxref("Promise", "promise")}} vazio que é resolvido quando o elemento customizado é inserido. Se o elemento já foi definido, o retorno ja é informado.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>O código a seguir foi pego do nosso <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> exemplo (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">veja em ação</a>). Perceba que usamos o método {{domxref("CustomElementRegistry.define()")}} para definir um elemento customizado.</p>
+
+<pre class="brush: js">// Cria uma classe para o elemento
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Sempre execute primeiro o método super
+    super();
+
+    // Conta as palavras no elemento pai
+    var wcParent = this.parentNode;
+
+    function countWords(node){
+      var text = node.innerText || node.textContent
+      return text.split(/\s+/g).length;
+    }
+
+    var count = 'Words: ' + countWords(wcParent);
+
+    // Cria um shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Cria um nó de texto e adiciona o contador de palavra nele
+    var text = document.createElement('span');
+    text.textContent = count;
+
+    // Acrescenta ao shadow root
+    shadow.appendChild(text);
+
+
+    // Atualiza o contador quando houver mudança
+    setInterval(function() {
+      var count = 'Words: ' + countWords(wcParent);
+      text.textContent = count;
+    }, 200)
+
+  }
+}
+
+// Define um novo elemento
+customElements.define('word-count', WordCount, { extends: 'p' });</pre>
+
+<div class="note">
+<p>Note: The CustomElementsRegistry is available through the {{domxref("Window.customElements")}} property.</p>
+</div>
+
+<h2 id="Especificações">Especificações</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", "custom-elements.html#customelementregistry", "CustomElementRegistry")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<p> </p>
+
+
+
+<p>{{Compat("api.CustomElementRegistry")}}</p>
+
+<p> </p>
diff --git a/files/pt-br/web/api/datatransfer/index.html b/files/pt-br/web/api/datatransfer/index.html
new file mode 100644
index 0000000000..96358c84d0
--- /dev/null
+++ b/files/pt-br/web/api/datatransfer/index.html
@@ -0,0 +1,383 @@
+---
+title: DataTransfer
+slug: Web/API/DataTransfer
+translation_of: Web/API/DataTransfer
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>{{ gecko_minversion_header("1.9") }} O objeto <code>DataTransfer</code> é usado para guardar os dados que estão sendo arrastados durante uma operação de Drag e Drop (arrastar e soltar). Ele pode guardar um ou mais itens de dados, cada um de um ou mais tipos de dados. Para mais informações sobre drag e drop (arrastar e soltar), veja <a class="internal" href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag and Drop">Drag and Drop</a>.</p>
+
+<p>Esse objeto está disponível pela propriedade <code>dataTransfer</code> de todos os eventos de drag. Ele não pode ser criado separadamente.</p>
+
+<h2 id="Properties" name="Properties">Visão geral das propriedades</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Propriedades</td>
+   <td class="header">Tipo</td>
+  </tr>
+  <tr>
+   <td><code><a href="#dropEffect.28.29" title="En/DragDrop/DataTransfer#dropEffect">dropEffect</a></code></td>
+   <td><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String" title="en/String">String</a></code></td>
+  </tr>
+  <tr>
+   <td><code><a href="#effectAllowed.28.29" title="En/DragDrop/DataTransfer#effectAllowed">effectAllowed</a></code></td>
+   <td><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String" title="en/String">String</a></code></td>
+  </tr>
+  <tr>
+   <td><a href="#files.28.29" title="En/DragDrop/DataTransfer#files"><code>files</code></a> {{ gecko_minversion_inline("1.9.2") }}</td>
+   <td>{{ domxref("FileList") }}</td>
+  </tr>
+  <tr>
+   <td><code><a href="#mozCursor" title="En/DragDrop/DataTransfer#mozCursor">mozCursor</a></code> {{ non-standard_inline() }} {{ gecko_minversion_inline("1.9.1") }}</td>
+   <td><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String" title="en/String">String</a></code></td>
+  </tr>
+  <tr>
+   <td><code><a href="#mozItemCount.28.29" title="En/DragDrop/DataTransfer#mozItemCount">mozItemCount</a></code> {{ non-standard_inline() }}</td>
+   <td><code>unsigned long</code></td>
+  </tr>
+  <tr>
+   <td><a href="#mozSourceNode" title="En/DragDrop/DataTransfer#mozSourceNode"><code>mozSourceNode</code></a> {{ non-standard_inline() }} {{ gecko_minversion_inline("2") }}</td>
+   <td>{{ domxref("Node") }}</td>
+  </tr>
+  <tr>
+   <td><a href="#mozUserCancelled" title="En/DragDrop/DataTransfer#mozUserCancelled"><code>mozUserCancelled</code></a></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Boolean" title="en/Core JavaScript 1.5 Reference/Global Objects/Boolean"><code>Boolean</code></a></td>
+  </tr>
+  <tr>
+   <td><code><a href="#types.28.29" title="En/DragDrop/DataTransfer#types">types</a></code></td>
+   <td><code><a href="/en-US/docs/Web/API/DOMStringList" title="en-US/docs/Web/API/DOMStringList">DOMStringList</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Method_overview" name="Method_overview">Visão geral dos métodos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#addElement.28.29">addElement</a>(in <a href="/en/XPCOM_Interface_Reference/nsIDOMElement" title="en/nsIDOMElement">Element</a> element)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#clearData.28.29">clearData</a>([in <a href="/en/String" title="en/String">String</a> type])</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/String" title="en/String">String</a> <a href="#getData.28.29">getData</a>(in <a href="/en/String" title="en/String">String</a> type)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#setData.28.29">setData</a>(in <a href="/en/String" title="en/String">String</a> type, in <a href="/en/String" title="en/String">String</a> data)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#setDragImage.28.29">setDragImage</a>(in <a href="/en/XPCOM_Interface_Reference/nsIDOMElement" title="en/nsIDOMElement">nsIDOMElement</a> image, in long x, in long y)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#mozClearDataAt.28.29">mozClearDataAt</a>([in <a href="/en/String" title="en/String">String</a> type, in unsigned long index])</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/XPCOM_Interface_Reference/NsIVariant" title="en/nsIVariant">nsIVariant</a> <a href="#mozGetDataAt.28.29">mozGetDataAt</a>(in <a href="/en/String" title="en/String">String</a> type, in unsigned long index)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#mozSetDataAt.28.29">mozSetDataAt</a>(in <a href="/en/String" title="en/String">String</a> type, in <a href="/en/XPCOM_Interface_Reference/NsIVariant" title="en/nsIVariant">nsIVariant</a> data, in unsigned long index)</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/StringList" title="en/StringList">StringList</a> <a href="#mozTypesAt.28.29">mozTypesAt</a>([in unsigned long index])</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Properties" name="Properties">Propriedades</h2>
+
+<h3 id="dropEffect.28.29" name="dropEffect.28.29">dropEffect</h3>
+
+<p>O efeito atual que será usado, e deve sempre ser um dos possíveis valores de <code>effectAllowed</code>. Isso afetará qual cursor será exibido enquanto arrasta.</p>
+
+<p>Para os eventos <code>dragenter</code> e <code>dragover</code>, o <code>dropEffect</code> será inicializado com base na ação que o usuário está solicitando. Como isso é determinado é específico da plataforma, mas, normalmente o usuário pode pressionar teclas de modificação, como a tecla alt, para ajustar qual ação é desejada. Com um manipulador de evento para os eventos <code>dragenter</code> e <code>dragover, o dropEffect</code> deverá ser modificado se a ação desejada é diferente da ação que o usuário está solicitando.</p>
+
+<p>Para os eventos <code>dragstart, drag,</code> e <code>dragleave</code>, o <code>dropEffect</code> será inicializado como "none". Qualquer valor atribuído à <code>dropEffect</code> será definido, mas o valor não será usado para nada.</p>
+
+<p>Para os eventos <code>drop</code> e <code>dragend</code>, o <code>dropEffect</code> será inicializado para a ação que foi desejada, que será o valor que o <code>dropEffect</code> tinha depois do último evento de <code>dragenter</code> ou <code>dragover</code>. Em um evento de dragend, por exemplo, se a o <code>dropEffect</code> desejado for "move", então os dados que estão sendo arrastados deverão ser removidos da origem.</p>
+
+<p>Valores possíveis:</p>
+
+<ul>
+ <li><strong>copy</strong>: Uma cópia do ítem de origem é feita na nova localização.</li>
+ <li><strong>move</strong>: Um ítem é movido para a nova localização.</li>
+ <li><strong>link</strong>: Um link é estabelecido com a origem na nova localização.</li>
+ <li><strong>none</strong>: O ítem não pode ser solto.</li>
+</ul>
+
+<p>Atribuindo qualquer outro valor não terá efeito e o valor antigo será mantido.</p>
+
+<h3 id="effectAllowed.28.29" name="effectAllowed.28.29">effectAllowed</h3>
+
+<p>Especifica os efeitos que são permitidos para esse drag. Você pode definir isso no evento <code>dragstart</code> para definir os efeitos desejados para a origem. Com os eventos <code>dragenter</code> e <code>dragover</code>, o <code>effectAllowed</code> será definido para qualquer que seja o valor que foi atribuído durante o evento <code>dragstart</code>. Isso pode ser usado para determinar quais efeitos são permitidos. Atribuindo um valor para <code>effectAllowed</code> nos outros eventos, exceto <code>dragstart</code>, não terá efeito.</p>
+
+<p>Valores possíveis:</p>
+
+<ul>
+ <li><strong>copy</strong>: Uma cópia do ítem de origem pode ser feita na nova localização.</li>
+ <li><strong>move</strong>: Um itém pode ser movido para a nova localização.</li>
+ <li><strong>link</strong>: Um link pode ser estabelicido com a origem na nova localização.</li>
+ <li><strong>copyLink</strong>: As operações de copy e link são permitidas.</li>
+ <li><strong>copyMove</strong>: As operações de copy e move são permitidas.</li>
+ <li><strong>linkMove</strong>: As operações de link e move são permitidas.</li>
+ <li><strong>all</strong>: Todas as operações são permitidas. </li>
+ <li><strong>none</strong>: O ítem não pode ser solto.</li>
+ <li><strong>uninitialized</strong>: O valor padrão quando o efeito não foi definido, equivalente a all.</li>
+</ul>
+
+<p>Atribuindo qualquer outro valor não terá efeito e permanece o valor anterior.</p>
+
+<h3 id="files.28.29" name="files.28.29">files</h3>
+
+<p>{{ gecko_minversion_header("1.9.2") }}</p>
+
+<p>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. An invalid index access on the {{ domxref("FileList") }} specified by this property will return <code>undefined</code>.</p>
+
+<h4 id="Example">Example</h4>
+
+<p>These examples dump the list of files dragged into the browser window.</p>
+
+<ul>
+ <li>(Firefox only):  <a class="external" href="http://jsfiddle.net/9C2EF/" title="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></li>
+ <li>(All browsers):  <a class="external" href="https://jsbin.com/hiqasek/edit?html,js,output" title="https://jsbin.com/hiqasek">https://jsbin.com/hiqasek/</a></li>
+</ul>
+
+<h3 id="types.28.29" name="types.28.29">types</h3>
+
+<p>Guarda uma lista dos tipos de formato dos dados que estão armazenados para o primeiro ítem, na mesma ordem que os dados foram adicionados. Uma lista vazia será retornada caso nenhum dado tenha sido adicionado.</p>
+
+<p>{{ gecko_minversion_note("1.9.2", 'A string "Files" é incluída nessa lista se houverem arquivos sendo arrastados.') }}</p>
+
+<p>{{ h3_gecko_minversion("mozCursor", "1.9.1", "mozCursor") }}</p>
+
+<p>O estado do cursor de drag. Isto é usado principalmente para controlar o cursor durante a guia de drag.</p>
+
+<div class="note"><strong>Nota:</strong> Esse método está atualmente implementado somento no Windows.</div>
+
+<h4 id="Valores_possíveis">Valores possíveis</h4>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Utiliza o comportamento padrão do sistema.</dd>
+ <dt><code>default</code></dt>
+ <dd>Utiliza o comportamento padrão Gecko, que é definir o cursor para uma seta durante a operação de arrastar.</dd>
+</dl>
+
+<div class="note"><strong>Nota:</strong> Se você especificar qualquer valor diferente de "default", "auto" é assumido.</div>
+
+<h3 id="mozItemCount.28.29" name="mozItemCount.28.29">mozItemCount</h3>
+
+<p>O número de ítens sendo arrastados.</p>
+
+<div class="note"><strong>Nota:</strong> Essa propriedade é específica Gecko.</div>
+
+<h3 id="mozSourceNode">mozSourceNode</h3>
+
+<p>{{ gecko_minversion_header("2") }}</p>
+
+<p>O {{ domxref("Node") }} sobre o qual o cursor do mouse estava localizado quando o botão foi pressionado para iniciar a operação de arrastar. O valor é <code>null</code> para drags externos ou se o elmento não pode acessar o node.</p>
+
+<div class="note"><strong>Nota:</strong> Essa propriedade é específica Gecko.</div>
+
+<h3 id="mozItemCount.28.29" name="mozItemCount.28.29">mozUserCancelled</h3>
+
+<p>Essa propriedade é aplicada apenas no evento <code>dragend</code>, e é <code>true</code> se o usuário cancelar a operação de arrastar pressionando escape (esc). Será <code>false</code> em qualquer outro caso, incluindo se a operação de arrastar falhar por algum motivo, por exemplo devido a ação de soltar em um local inválido.</p>
+
+<div class="note"><strong>Nota:</strong> Essa propriedade é específica Gecko.</div>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<h3 id="addElement.28.29" name="addElement.28.29">addElement()</h3>
+
+<p>Set the drag source. Usually you would not change this, but it will affect which node the drag and dragend events are fired at. The default target is the node that was dragged.</p>
+
+<pre class="eval"> void addElement(
+   in Element element
+ );
+</pre>
+
+<h6 id="Parameters_addElement" name="Parameters_addElement">Parameters</h6>
+
+<dl>
+ <dt><code>element </code></dt>
+ <dd>The element to add.</dd>
+</dl>
+
+<h3 id="clearData.28.29" name="clearData.28.29">clearData()</h3>
+
+<p>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.</p>
+
+<pre class="eval"> void clearData(
+   [optional] in String type
+ );
+</pre>
+
+<h6 id="Parameters_clearData" name="Parameters_clearData">Parameters</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>The type of data to remove.</dd>
+</dl>
+
+<h3 id="getData.28.29" name="getData.28.29">getData()</h3>
+
+<p>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.</p>
+
+<p>A security error will occur if you attempt to retrieve data during a drag that was set from a different domain, or the caller would otherwise not have access to. This data will only be available once a drop occurs during the drop event.</p>
+
+<pre class="eval"> String getData(
+   in String type
+ );
+</pre>
+
+<h6 id="Parameters_getData" name="Parameters_getData">Parameters</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>The type of data to retrieve.</dd>
+</dl>
+
+<h3 id="setData.28.29" name="setData.28.29">setData()</h3>
+
+<p>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. That is, the order of the types list is not changed when replacing data of the same type.</p>
+
+<pre class="eval"> void setData(
+   in String type,
+   in String data
+ );
+</pre>
+
+<h6 id="Parameters_setData" name="Parameters_setData">Parameters</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>The type of data to add.</dd>
+ <dt><code>data </code></dt>
+ <dd>The data to add.</dd>
+</dl>
+
+<h3 id="setDragImage.28.29" name="setDragImage.28.29">setDragImage()</h3>
+
+<p>Set the image to be used for dragging if a custom one is desired. Most of the time, this would not be set, as a default image is created from the node that was dragged.</p>
+
+<p>If the node is an HTML img element, an HTML canvas element or a XUL image element, the image data is used. Otherwise, image should be a visible node and the drag image will be created from this. If image is null, any custom drag image is cleared and the default is used instead.</p>
+
+<p>The coordinates specify the offset into the image where the mouse cursor should be. To center the image, for instance, use values that are half the width and height of the image.</p>
+
+<pre class="eval"> void setDragImage(
+   in Element image,
+   in long x,
+   in long y
+ );
+</pre>
+
+<h6 id="Parameters_setDragImage" name="Parameters_setDragImage">Parameters</h6>
+
+<dl>
+ <dt><code>image </code></dt>
+ <dd>An element to use as the drag feedback image</dd>
+ <dt><code>x </code></dt>
+ <dd>Horizontal offset within the image.</dd>
+ <dt><code>y </code></dt>
+ <dd>Vertical offset within the image.</dd>
+</dl>
+
+<h3 id="mozClearDataAt.28.29" name="mozClearDataAt.28.29">mozClearDataAt()</h3>
+
+<p>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.</p>
+
+<p>If the last format for the item is removed, the entire item is removed, reducing <code>mozItemCount</code> by one.</p>
+
+<p>If the <code>format</code> list is empty, then the data associated with all formats is removed. If the format is not found, then this method has no effect.</p>
+
+<div class="note"><strong>Note:</strong> This method is Gecko-specific.</div>
+
+<pre class="eval"> void mozClearDataAt(
+   [optional] in String type,
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozClearDataAt" name="Parameters_mozClearDataAt">Parameters</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>The type of data to remove.</dd>
+ <dt><code>index </code></dt>
+ <dd>The index of the data to remove.</dd>
+</dl>
+
+<h3 id="mozGetDataAt.28.29" name="mozGetDataAt.28.29">mozGetDataAt()</h3>
+
+<p>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.</p>
+
+<div class="note"><strong>Note:</strong> This method is Gecko-specific.</div>
+
+<pre class="eval"> nsIVariant mozGetDataAt(
+   [optional] in String type,
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozClearDataAt" name="Parameters_mozClearDataAt">Parameters</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>The type of data to retrieve.</dd>
+ <dt><code>index </code></dt>
+ <dd>The index of the data to retrieve.</dd>
+</dl>
+
+<h3 id="mozSetDataAt.28.29" name="mozSetDataAt.28.29">mozSetDataAt()</h3>
+
+<p>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.</p>
+
+<p>Data should be added in order of preference, with the most specific format added first and the least specific format added last. If data of the given format already exists, it is replaced in the same position as the old data.</p>
+
+<p>The data should be either a string, a primitive boolean or number type (which will be converted into a string) or an {{ interface("nsISupports") }}.</p>
+
+<div class="note"><strong>Note:</strong> This method is Gecko-specific.</div>
+
+<pre class="eval"> void mozSetDataAt(
+   [optional] in String type,
+   in nsIVariant data,
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozSetDataAt" name="Parameters_mozSetDataAt">Parameters</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>The type of data to add.</dd>
+ <dt><code>data </code></dt>
+ <dd>The data to add.</dd>
+ <dt><code>index </code></dt>
+ <dd>The index of the data to add.</dd>
+</dl>
+
+<h3 id="mozTypesAt.28.29" name="mozTypesAt.28.29">mozTypesAt()</h3>
+
+<p>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.</p>
+
+<div class="note"><strong>Note:</strong> This method is Gecko-specific.</div>
+
+<pre class="eval"> nsIVariant mozTypesAt(
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozTypesAt" name="Parameters_mozTypesAt">Parameters</h6>
+
+<dl>
+ <dt><code>index </code></dt>
+ <dd>The index of the data for which to retrieve the types.</dd>
+</dl>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<p><a class="internal" href="/En/DragDrop/Drag_and_Drop" title="Drag and Drop">Drag and Drop</a></p>
+
+<p>{{ languages( { "ja": "Ja/DragDrop/DataTransfer" } ) }}</p>
diff --git a/files/pt-br/web/api/deviceacceleration/index.html b/files/pt-br/web/api/deviceacceleration/index.html
new file mode 100644
index 0000000000..7f46e75436
--- /dev/null
+++ b/files/pt-br/web/api/deviceacceleration/index.html
@@ -0,0 +1,42 @@
+---
+title: DeviceAcceleration
+slug: Web/API/DeviceAcceleration
+tags:
+  - API
+  - Experimental
+  - Interface
+translation_of: Web/API/DeviceMotionEventAcceleration
+---
+<div>{{ ApiRef("Device Orientation Events") }}{{SeeCompatTable}}</div>
+
+<p>Um objeto <code>DeviceAcceleration</code> fornece informações sobre a quantidade de aceleração que o dispositivo desempenha ao longo dos três eixos.</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("DeviceAcceleration.x")}} {{readonlyInline}}</dt>
+ <dd>A quantidade de aceleração ao longo do eixo X. <strong>Somente leitura</strong>.</dd>
+ <dt>{{domxref("DeviceAcceleration.y")}} {{readonlyInline}}</dt>
+ <dd>A quantidade de aceleração ao longo do eixo Y. <strong>Somente leitura</strong>.</dd>
+ <dt>{{domxref("DeviceAcceleration.z")}} {{readonlyInline}}</dt>
+ <dd>A quantidade de aceleração ao longo do eixo Z.<strong>Somente leitura</strong>.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Device Orientation", "#device_acceleration", "DeviceAcceleration")}}</td>
+   <td>{{Spec2("Device Orientation")}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/pt-br/web/api/devicerotationrate/index.html b/files/pt-br/web/api/devicerotationrate/index.html
new file mode 100644
index 0000000000..bce9a29495
--- /dev/null
+++ b/files/pt-br/web/api/devicerotationrate/index.html
@@ -0,0 +1,92 @@
+---
+title: DeviceRotationRate
+slug: Web/API/DeviceRotationRate
+translation_of: Web/API/DeviceMotionEventRotationRate
+---
+<p>{{ ApiRef("Device Orientation Events") }} {{SeeCompatTable}}</p>
+
+<p>Um objeto <code>DeviceRotationRate</code> fornece informações sobre a taxa na qual o dispositivo está girando em torno de todos os três eixos.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{ domxref("DeviceRotationRate.alpha") }} {{readonlyInline}}</dt>
+ <dd>A quantidade de rotação em torno do eixo Z, em graus por segundo.</dd>
+ <dt>{{ domxref("DeviceRotationRate.beta") }} {{readonlyInline}}</dt>
+ <dd>A quantidade de rotação em torno do eixo Y, em graus por segundo</dd>
+ <dt>{{ domxref("DeviceRotationRate.gamma") }} {{readonlyInline}}</dt>
+ <dd>A quantidade de rotação em torno do eixo X, em graus por segundo</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificacões</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegador_compativeís">Navegador compativeís</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</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>Suporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</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>Características</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>Suporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/pt-br/web/api/devicestorage.get/index.html b/files/pt-br/web/api/devicestorage.get/index.html
new file mode 100644
index 0000000000..9258c4da29
--- /dev/null
+++ b/files/pt-br/web/api/devicestorage.get/index.html
@@ -0,0 +1,58 @@
+---
+title: DeviceStorage.get
+slug: Web/API/DeviceStorage.get
+tags:
+  - API
+  - B2G
+  - Device Storage
+  - Firefox OS
+  - Method
+  - Non Standard
+  - Non-standard
+  - Não Padrão
+  - Reference
+  - Referencia
+  - WebAPI
+  - metodo
+translation_of: Archive/B2G_OS/API/DeviceStorage/get
+---
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('privileged') }}</p>
+<h2 id="Sumário">Sumário</h2>
+<p>O metodo <code>get</code> é usado para obter um arquivo somente-leitura de uma dada área de armazenamento.</p>
+<p>Caso o pedido seja bem-sucedido, o resultado do pedido <code>result</code> é um objeto {{domxref("File")}} contendo os dados do arquivo original do dispositivo.</p>
+<h2 id="Sintaxe">Sintaxe</h2>
+<pre>var <em>instanciaDeDOMRequest</em> = <em>instanciaDeDeviceStorage</em>.get(<em>nomeDoArquivo</em>);</pre>
+<h3 id="Parametros">Parametros</h3>
+<dl>
+ <dt>
+  <code>nomeDoArquivo</code></dt>
+ <dd>
+  Uma string representando o nome completo (caminho + nome do arquivo) do arquivo a ser obtido.</dd>
+</dl>
+<h3 id="Retorno">Retorno</h3>
+<p>Retorna um objeto {{domxref("DOMRequest")}} para manipular o sucesso ou o erro da operação.</p>
+<h2 id="Exemplo">Exemplo</h2>
+<pre class="brush: js"><code class="language-js"><span class="token keyword">var</span> sdcard <span class="token operator">=</span> navigator<span class="token punctuation">.</span>getDeviceStorage<span class="token punctuation">(</span><span class="token string">"sdcard"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+<span class="token keyword">var</span> pedido <span class="token operator">=</span> sdcard<span class="token punctuation">.</span>get<span class="token punctuation">("meuArquivo.txt"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+pedido<span class="token punctuation">.</span>onsuccess <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+<span class="token keyword">  var</span> name <span class="token operator">=</span> this<span class="token punctuation">.</span>result<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
+  console<span class="token punctuation">.</span>log<span class="token punctuation">(</span><span class="token string">'O arquivo "'</span> <span class="token operator">+</span> name <span class="token operator">+</span> <span class="token string">'" foi obtido com sucesso da área de armazenamento do sdcard'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+
+request<span class="token punctuation">.</span>onerror <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  console<span class="token punctuation">.</span>warn<span class="token punctuation">(</span><span class="token string">'Nao foi possivel obter o arquivo: '</span> <span class="token operator">+</span> this<span class="token punctuation">.</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span></code>
+</pre>
+<h2 id="Specification" name="Specification">Especificação</h2>
+<p>Não é parte de nenhuma especificação.</p>
+<h2 id="Veja_também">Veja também</h2>
+<ul>
+ <li>{{domxref("DeviceStorage")}}</li>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("DOMRequest")}}</li>
+ <li><a href="/en-US/docs/WebAPI/Device_Storage" title="/en-US/docs/WebAPI/Device_Storage">Device Storage API</a></li>
+ <li><a href="/en-US/docs/WebAPI/FileHandle" title="/en-US/docs/WebAPI/FileHandle">FileHandle API</a></li>
+</ul>
diff --git a/files/pt-br/web/api/devicestorage.onchange/index.html b/files/pt-br/web/api/devicestorage.onchange/index.html
new file mode 100644
index 0000000000..1b1b1db375
--- /dev/null
+++ b/files/pt-br/web/api/devicestorage.onchange/index.html
@@ -0,0 +1,30 @@
+---
+title: DeviceStorage.onchange
+slug: Web/API/DeviceStorage.onchange
+translation_of: Archive/B2G_OS/API/DeviceStorage/onchange
+---
+<p>{{ ApiRef() }}</p>
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('privileged') }}</p>
+<h2 id="Resumo">Resumo</h2>
+<p>A propriedade <code>onchange</code> é usado para especificar um manuseador de eventos para receber eventos {{event("change")}}. Estes eventos são disparados cada vez que um arquivo é criado, modificado ou excluído na area de armazenamento.</p>
+<h2 id="Sintaxe">Sintaxe</h2>
+<pre><em>instanceOfDeviceStorage</em>.onchange = <em>funcRef</em></pre>
+<p>Onde <code><em>funcRef</em></code> é uma função para ser chamada quando o evento {{event("change")}} ocorre. Estes eventos são do tipo {{domxref("DeviceStorageChangeEvent")}}.</p>
+<h2 id="Exemplo">Exemplo</h2>
+<pre class="brush: js language-html waffle-beta"><code class="language-js">var sdcard = navigator.getDeviceStorage('sdcard');
+
+sdcard.onchange = function (change) {
+  var reason = change.reason;
+  var path   = change.path;
+
+  console.log('O arquivo "' + path + '" foi ' + reason);
+}</code></pre>
+<h2 id="Specification" name="Specification">Especificação</h2>
+<p>Não faz parte de qualquer especificação.</p>
+<h2 id="Veja_também">Veja também</h2>
+<ul>
+ <li>{{domxref("DeviceStorage")}}</li>
+ <li>{{domxref("DeviceStorageChangeEvent")}}</li>
+ <li><a href="/en-US/docs/WebAPI/Device_Storage" title="/en-US/docs/WebAPI/Device_Storage">Device Storage API</a></li>
+</ul>
diff --git a/files/pt-br/web/api/document/activeelement/index.html b/files/pt-br/web/api/document/activeelement/index.html
new file mode 100644
index 0000000000..c29692eaf3
--- /dev/null
+++ b/files/pt-br/web/api/document/activeelement/index.html
@@ -0,0 +1,164 @@
+---
+title: Document.activeElement
+slug: Web/API/Document/activeElement
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - Property
+  - Reference
+translation_of: Web/API/DocumentOrShadowRoot/activeElement
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Retorna o {{ domxref("Element", "elemento") }} atualmente em foco, ou seja, o elemento que receberá os eventos do teclado caso o usuário digite algo. Esse atributo é somente-leitura.</p>
+
+<p>Geralmente retorna um {{ HTMLElement("input") }} ou {{ HTMLElement("textarea") }}, caso esteja com uma seleção de texto ativa. Caso esteja, pode obter mais informações sobre a seleção utilizando as propriedades <code>selectionStart</code> e <code>selectionEnd</code>. Caso o elemento em foco seja um {{ HTMLElement("select") }}(menu) ou {{ HTMLElement("input") }} do tipo <code>button</code>, <code>checkbox</code> ou <code>radio</code>.</p>
+
+<div class="note"><strong>Note:</strong> No Mac, elementos que nao sejam campos de texto geralmente não recebem foco.</div>
+
+<p>Normalmente o usuário pode navegar entre os elementos que pode receber foco na página com o uso da tecla <code>tab</code> e ativar estes elementos com a tecla <code>espaço</code> (apertar um botão ou selecionar uma opção).</p>
+
+<p>Não confunda foco com uma seleção de texto no documento, que consiste em sua maioria de nódos de texto estáticos. Veja {{ domxref("window.getSelection()") }}.</p>
+
+<p>Quando não há nada selecionado, o <code>activeElement</code> da página é o {{ HTMLElement("body") }} ou <code>null</code>. </p>
+
+<div class="note">
+<p>Este atributo é parte da seção "Em desenvolvimento" da especificação do HTML 5.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="eval">var curElement = document.activeElement;
+</pre>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE HTML&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;script type="text/javascript" charset="utf-8"&gt;
+    function init() {
+
+        function onMouseUp(e) {
+            console.log(e);
+            var outputElement = document.getElementById('output-element');
+            var outputText = document.getElementById('output-text');
+            var selectedTextArea = document.<strong>activeElement</strong>;
+            var selection = selectedTextArea.value.substring(
+            selectedTextArea.<strong>selectionStart</strong>, selectedTextArea.<strong>selectionEnd</strong>);
+            outputElement.innerHTML = selectedTextArea.id;
+            outputText.innerHTML = selection;
+        }
+
+        document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false);
+        document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false);
+    }
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="init()"&gt;
+&lt;div&gt;
+    Select some text from one of the Textareas below:
+&lt;/div&gt;
+&lt;form id="frm-example" action="#" accept-charset="utf-8"&gt;
+&lt;textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40"&gt;
+This is Textarea Example One:
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.
+&lt;/textarea&gt;
+&lt;textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40"&gt;
+This is Textarea Example Two:
+Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
+&lt;/textarea&gt;
+&lt;/form&gt;
+Active Element Id: &lt;span id="output-element"&gt;&lt;/span&gt;&lt;br/&gt;
+Selected Text: &lt;span id="output-text"&gt;&lt;/span&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><a href="https://jsfiddle.net/w9gFj">View on JSFiddle</a></p>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Originalmente apresentada como extensão DOM proprietária no Internet Explorer 4, esta propriedade também é suportada no Opera e Safari (versão 4 ou maior)</p>
+
+<h2 id="Specification" name="Specification">Especificações</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', 'interaction.html#dom-document-activeelement', 'activeElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_nos_navegadores">Compatibilidade nos navegadores</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>2</td>
+   <td>3.0</td>
+   <td>4 [1]</td>
+   <td>9.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 Phone</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]: O IE9 tem um bug que ao tentar acessar o activeElement do {{domxref("window.parent")}} {{domxref("Document")}} de um {{HTMLElement("iframe")}}(i.e. <code>parent.document.activeElement</code>) é lançado um erro</p>
+
+<h2 id="Eventos_relacionados">Eventos relacionados</h2>
+
+<ul>
+ <li>{{event("focus")}}</li>
+ <li>{{event("blur")}}</li>
+ <li>{{event("focusin")}}</li>
+ <li>{{event("focusout")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/document/alinkcolor/index.html b/files/pt-br/web/api/document/alinkcolor/index.html
new file mode 100644
index 0000000000..85d2bfaa77
--- /dev/null
+++ b/files/pt-br/web/api/document/alinkcolor/index.html
@@ -0,0 +1,36 @@
+---
+title: Document.alinkColor
+slug: Web/API/Document/alinkColor
+tags:
+  - Depreciado
+  - Propriedade
+  - Referencia
+translation_of: Web/API/Document/alinkColor
+---
+<div>{{APIRef("DOM")}}{{Deprecated_header}}</div>
+
+<p>Retorna ou define a cor de um link ativo no corpo do documento. Um link está ativo durante o tempo entre os eventos <code>mousedown</code> e <code>mouseup</code>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <var>color</var> = <var>document</var>.alinkColor;
+<var>document</var>.alinkColor = <var>color</var>;
+</pre>
+
+<p>color é uma string que contém o nome da cor (e.g., <code>blue</code>, <code>darkblue</code>, etc.) ou o valor hexadecimal da cor (e.g., <code>#0000FF</code>)</p>
+
+<h2 id="Notas">Notas</h2>
+
+<p>O valor padrão para esta propriedade no Mozilla Firefox é vermelho (<code>#ee0000</code> em hexadecimal).</p>
+
+<p><code>document.alinkColor</code> está obsoleto em <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a>. Uma alternativa é o seletor de CSS {{Cssxref(":active")}}.</p>
+
+<p>Outra alternativa é <code>document.body.aLink</code>, embora tenha sido <a class="external" href="http://www.w3.org/TR/html401/struct/global.html#adef-alink">depreciado no HTML 4.01</a> a favor da alternativa CSS.</p>
+
+<p><a href="/en-US/docs/Mozilla/Gecko">Gecko</a> suporta ambos <code>alinkColor</code>/<code>:active</code> e {{Cssxref(":focus")}}. Suporte para Internet Explorer 6 e 7 <code>alinkColor</code>/<code>:active</code> apenas para <a href="/en-US/docs/Web/HTML/Element/a">HTML anchor (&lt;a&gt;) links</a> e o comportamento é o mesmo que <code>:focus</code> sob Gecko. Não há suporte para <code>:focus</code> no IE.</p>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de recebimento.</div>
+
+<p>{{Compat("api.Document.alinkColor")}}</p>
diff --git a/files/pt-br/web/api/document/anchors/index.html b/files/pt-br/web/api/document/anchors/index.html
new file mode 100644
index 0000000000..624c955b0e
--- /dev/null
+++ b/files/pt-br/web/api/document/anchors/index.html
@@ -0,0 +1,107 @@
+---
+title: Document.anchors
+slug: Web/API/Document/anchors
+tags:
+  - API
+  - Deprecated
+  - HTML DOM
+  - NeedsCompatTable
+  - Property
+  - Reference
+translation_of: Web/API/Document/anchors
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{deprecated_header("HTML5")}}</p>
+
+<p><code>anchors</code> retorna uma lista de todas as âncoras no documento.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>nodeList</var> = document.anchors;
+</pre>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:js">if ( document.anchors.length &gt;= 5 ) {
+  dump("dump found too many anchors");
+  window.location = "http://www.google.com";
+}
+</pre>
+
+<p>O código a seguir é um exemplo que popula automaticamente um índice de conteúdo com cada âncora encontrada na página:</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;Test&lt;/title&gt;
+&lt;script&gt;
+function init() {
+  var toc = document.getElementById("toc");
+  var i, li, newAnchor;
+  for (i = 0; i &lt; document.anchors.length; i++) {
+    li = document.createElement("li");
+    newAnchor = document.createElement('a');
+    newAnchor.href = "#" + document.anchors[i].name;
+    newAnchor.innerHTML = document.anchors[i].text;
+    li.appendChild(newAnchor);
+    toc.appendChild(li);
+  }
+}
+&lt;/script&gt;
+
+&lt;/head&gt;
+&lt;body onload="init()"&gt;
+
+&lt;h1&gt;Title&lt;/h1&gt;
+&lt;h2&gt;&lt;a name="contents"&gt;Contents&lt;/a&gt;&lt;/h2&gt;
+&lt;ul id="toc"&gt;&lt;/ul&gt;
+
+&lt;h2&gt;&lt;a name="plants"&gt;Plants&lt;/a&gt;&lt;/h2&gt;
+&lt;ol&gt;
+    &lt;li&gt;Apples&lt;/li&gt;
+    &lt;li&gt;Oranges&lt;/li&gt;
+    &lt;li&gt;Pears&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;h2&gt;&lt;a name="veggies"&gt;Veggies&lt;/a&gt;&lt;/h2&gt;
+&lt;ol&gt;
+    &lt;li&gt;Carrots&lt;/li&gt;
+    &lt;li&gt;Celery&lt;/li&gt;
+    &lt;li&gt;Beats&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><a href="https://jsfiddle.net/S4yNp">View on JSFiddle</a></p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Por motivos de compatibilidade, o conjunto de âncoras retornadas por <code>anchors</code> contém apenas as âncoras criadas com o atributo <code>name</code>, não incluindo as âncoras criadas com o atributo {{ htmlattrxref("id") }}.</p>
+
+<h2 id="Specifications" name="Specifications">Especificações</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', '#dom-document-anchors', 'Document.anchors')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Obsoleted.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-7577272', 'Document.anchors')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/pt-br/web/api/document/bgcolor/index.html b/files/pt-br/web/api/document/bgcolor/index.html
new file mode 100644
index 0000000000..66ec8d48ca
--- /dev/null
+++ b/files/pt-br/web/api/document/bgcolor/index.html
@@ -0,0 +1,35 @@
+---
+title: Document.bgColor
+slug: Web/API/Document/bgColor
+tags:
+  - Obsoleto
+  - Propriedade
+  - Referencia
+translation_of: Web/API/Document/bgColor
+---
+<p>{{APIRef("DOM")}} {{ Deprecated_header() }}</p>
+
+<p>A propriedade obsoleta <code>bgColor</code> obtém ou atribue a cor de fundo do documento atual.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>color</em> = document.bgColor
+document.bgColor = <em>color</em>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<ul>
+ <li><code>color</code> é uma sequência de caracteres representando a cor como uma palavra (p. ex. "red") ou um valor hexadecimal (p. ex. "<code>#ff0000</code>").</li>
+</ul>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="eval">document.bgColor = "darkblue";
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>O valor padrão para esta propriedade no Firefox é branco (<code>#ffffff</code> em hexadecimal).</p>
+
+<p><code>document.bgColor</code> está obsoleto no <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a>. A alternativa recomendada é fazer uso do atributo CSS {{Cssxref("background-color")}} que pode ser acessado através do DOM com <code>document.body.style.backgroundColor</code>. Uma outra alternativa é o <code>document.body.bgColor</code>, apesar dessa também estar obsoleta no HTML 4.01 em funcão da alternativa do CSS.</p>
diff --git a/files/pt-br/web/api/document/body/index.html b/files/pt-br/web/api/document/body/index.html
new file mode 100644
index 0000000000..cb21522c4f
--- /dev/null
+++ b/files/pt-br/web/api/document/body/index.html
@@ -0,0 +1,44 @@
+---
+title: Document.body
+slug: Web/API/Document/body
+translation_of: Web/API/Document/body
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Retorna o elemento {{HTMLElement("body")}} ou o {{HTMLElement("frameset")}} do documento atual, ou <code>null</code> se nenhum destes elementos existir.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>var objRef</em> = document.body;
+document.body = <em>objRef;</em></pre>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:js">// No 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="Notes" name="Notes">Notas</h2>
+
+<p><code>document.body</code> é o elemento que envolve o conteúdo do documento. Em documentos com conteúdo no <code>&lt;body&gt;</code>, retorna o elemento <code>&lt;body&gt;</code>, e em documentos que usam frameset, retorna o elemento <code>&lt;frameset&gt;</code> mais periférico.</p>
+
+<p>Apesar do <code>body</code> ser configurável, definir um novo <code>body</code> em um documento irá remover todos os elementos contidos no elemento <code>&lt;body&gt;</code> existente.</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-56360201">DOM Level 2 HTML: HTMLDocument.body</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/html5/dom.html#dom-tree-accessors" title="http://www.w3.org/TR/html5/dom.html#dom-document-head">HTML5: DOM Tree Accessors</a></li>
+</ul>
+
+<h2 id="Veja_Também">Veja Também</h2>
+
+<ul>
+ <li>{{domxref("document.head")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/document/characterset/index.html b/files/pt-br/web/api/document/characterset/index.html
new file mode 100644
index 0000000000..30ec060745
--- /dev/null
+++ b/files/pt-br/web/api/document/characterset/index.html
@@ -0,0 +1,65 @@
+---
+title: Document.characterSet
+slug: Web/API/Document/characterSet
+tags:
+  - Documento
+  - Propriedade
+  - Referencia
+translation_of: Web/API/Document/characterSet
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div><span class="tlid-translation translation" lang="pt"><span title="">A propriedade somente leitura Document.characterSet retorna a</span></span><span class="seoSummary"> <a href="/en-US/docs/Glossary/character_encoding">character encoding</a></span><span class="tlid-translation translation" lang="pt"><span title="">(codificação de caracteres) do documento com o qual ele é renderizado atualmente.</span> <span title="">(Uma codificação de caracteres é um conjunto de caracteres e como interpretar bytes nesses caracteres.)</span></span></div>
+
+<div></div>
+
+<div class="note">
+<p>Um “character set”(conjunto de caracteres) e “character encoding”(<span class="tlid-translation translation" lang="pt"><span title="">codificação de caracteres</span></span>) <span class="tlid-translation translation" lang="pt"><span title="">estão relacionados, mas diferentes.</span> <span title="">Apesar do nome dessa propriedade, ela retorna a codificação.</span></span></p>
+</div>
+
+<p>Usuários podem sobrepor <span class="tlid-translation translation" lang="pt"><span title="">a codificação especificada pelo desenvolvedor dentro do cabeçalho <a href="/pt-BR/docs/Web/HTTP/Headers/Content-Type">Content-Type</a> (tipo de conteúdo) ou embutida como &lt;meta charset = "utf-8"&gt;, como no menu</span></span> <kbd>Exibir → Codificacao de Texto </kbd>. <span class="tlid-translation translation" lang="pt"><span title="">Essa substituição é fornecida para corrigir codificações especificadas pelo desenvolvedor incorretas que resultam em</span></span> <a href="https://en.wikipedia.org/wiki/Mojibake">texto ilegivel</a>.</p>
+
+<div class="note">
+<p>As propriedades <code>document.charset</code> e <code>document.inputEncoding</code> <span class="tlid-translation translation" lang="pt"><span title="">são aliases legados para</span></span> <code>document.characterSet</code>. N<span class="tlid-translation translation" lang="pt"><span title="">ã</span></span>o use mais eles.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>string</em> = document.characterSet;</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<pre class="brush: html">&lt;button onclick="console.log(document.characterSet);"&gt;
+  Registro de Codificacao de Caracteres
+&lt;/button&gt;
+&lt;!-- mostra a codificacao de caracteres do documento no console do desevolvedor, como "ISO-8859-1" ou "UTF-8" --&gt;
+</pre>
+
+<h2 id="Especificações">Especifica<span class="tlid-translation translation" lang="pt"><span title="">ções</span></span></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>
+    <p>Defini<span class="tlid-translation translation" lang="pt"><span title="">ção</span></span> Inicial.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_navegador"><span class="tlid-translation translation" lang="pt"><span title="">Compatibilidade do navegador</span></span></h2>
+
+<div class="hidden">
+<div class="text-wrap tlid-copy-target">
+<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation" lang="pt"><span title="">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados.</span> <span title="">Se você deseja contribuir com os dados, confira:</span></span></div>
+</div>
+<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span class="tlid-translation translation" lang="pt"><span title="">e envie-nos uma</span></span> pull request(<span class="tlid-translation translation" lang="pt"><span title="">solicitação de recebimento</span></span>).</div>
+
+<p>{{Compat("api.Document.characterSet")}}</p>
diff --git a/files/pt-br/web/api/document/close/index.html b/files/pt-br/web/api/document/close/index.html
new file mode 100644
index 0000000000..7c9b110edd
--- /dev/null
+++ b/files/pt-br/web/api/document/close/index.html
@@ -0,0 +1,27 @@
+---
+title: Document.close()
+slug: Web/API/Document/close
+translation_of: Web/API/Document/close
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>O metodo <code>document.close()</code> termina a gravação em um documento, aberto com  <a href="/en/DOM/document.open" title="en/DOM/document.open">document.open()</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="eval">document.close();
+</pre>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre>// abre um documento e escreve nele.
+// escreve o conteúdo no documento.
+// fecha o documento.
+document.open();
+document.write("&lt;p&gt;O primeiro e unico conteúdo.&lt;/p&gt;");
+document.close();
+</pre>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<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/pt-br/web/api/document/compatmode/index.html b/files/pt-br/web/api/document/compatmode/index.html
new file mode 100644
index 0000000000..1ca33ff573
--- /dev/null
+++ b/files/pt-br/web/api/document/compatmode/index.html
@@ -0,0 +1,42 @@
+---
+title: Document.compatMode
+slug: Web/API/Document/compatMode
+translation_of: Web/API/Document/compatMode
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Indica se o documento está renderizado no <a href="/pt-BR/Quirks_Mode_and_Standards_Mode" title="en/Mozilla's Quirks Mode">Quirks mode</a> ou no modo dos Padrões.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="eval"><em>modo</em> = document.compatMode
+</pre>
+
+<h2 id="Valores">Valores</h2>
+
+<ul>
+ <li><code>"BackCompat"</code> se o documento está em <strong>quirks mode</strong>;</li>
+ <li><code>"CSS1Compat"</code> se o documento está no modo "não-<em>quirks</em>" (também conhecido como "<strong>full standards mode</strong>") ou "<em>limited-quirks</em>" (também conhecido como "<strong>almost standards mode</strong>").</li>
+</ul>
+
+<dl>
+ <dt><code>modo</code></dt>
+ <dd>É um valor enumerado que pode ser:</dd>
+</dl>
+
+<div class="note">
+<p>Nota: todos estes modos agora são definidos em padrões, então os antigos nomes "standards" e "almost standards" são sem sentido, e portanto não são mais usados nos padrões.</p>
+</div>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="eval">if (document.compatMode == "BackCompat") {
+  // in Quirks mode
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Especificações</h2>
+
+<ul>
+ <li><a class="external" href="http://dom.spec.whatwg.org/#dom-document-compatmode" title="http://dom.spec.whatwg.org/#dom-document-compatmode">DOM: Document.compatMode</a></li>
+</ul>
diff --git a/files/pt-br/web/api/document/contenttype/index.html b/files/pt-br/web/api/document/contenttype/index.html
new file mode 100644
index 0000000000..5d29907089
--- /dev/null
+++ b/files/pt-br/web/api/document/contenttype/index.html
@@ -0,0 +1,46 @@
+---
+title: Document.contentType
+slug: Web/API/Document/contentType
+translation_of: Web/API/Document/contentType
+---
+<div>{{APIRef}}</div>
+
+<p><code><strong>Document.contentType</strong></code> é uma propriedade somente de leitura, que retorna o tipo MIME do documento que esta sendo rendenrizado.Isso pode vir de cabeçalhos HTPP ou de outras fontes de informações MIME, e pode se afetado por conversões realizadas pelo navegador ou pelas extenções.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Esta proiedade não é afetada pelos elementos {{HTMLElement("meta")}}.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>contentType</var> = <var>document</var>.contentType;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p><code>contentType</code> é uma propriedade somente de leitura.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-contenttype', 'Document.contentType')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados.Se voce quiser contribuir com os dados, confira em  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<div>{{Compat("api.Document.contentType")}}</div>
diff --git a/files/pt-br/web/api/document/createelement/index.html b/files/pt-br/web/api/document/createelement/index.html
new file mode 100644
index 0000000000..3cb88ecb37
--- /dev/null
+++ b/files/pt-br/web/api/document/createelement/index.html
@@ -0,0 +1,82 @@
+---
+title: Document.createElement()
+slug: Web/API/Document/createElement
+tags:
+  - Documento
+  - Referencia
+  - Referência(2)
+  - metodo
+translation_of: Web/API/Document/createElement
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div> </div>
+
+<p>Em um documento <a href="/en-US/docs/Web/HTML">HTML</a>, o método <strong><code>Document.createElement()</code></strong> cria o elemento HTML especificado ou um {{domxref("HTMLUnknownElement")}} se o nome do elemento dado não for conhecido.</p>
+
+<p>Em um documento <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a>, o elemento XUL especificado é criado.</p>
+
+<p>Em outros documentos, ele cria um elemento com um <em>namespace</em> URI <code>null</code>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>var <em>elemento</em></var> = <var>document</var>.createElement(nomeDaTag);
+</pre>
+
+<ul>
+ <li><code>elemento</code> é o objeto {{domxref("Element")}} criado.</li>
+ <li><code>nomeDaTag</code> é uma <em>string</em> que especifica o tipo do elemento a ser criado. O {{domxref("Node.nodeName", "nodeName")}} do elemento criado é inicializado com o valor da <code>nomeDaTag</code>. Não use nomes qualificados (como "html:a") com este método.</li>
+</ul>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Este código cria uma nova <code>&lt;div&gt;</code> e a insere antes do elemento com ID "<code>div1</code>".</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;||Trabalhando com elementos||&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;div id="div1"&gt;O texto acima foi criado dinamicamente.&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="JavaScript"><span style="line-height: normal;">JavaScript</span></h3>
+
+<pre class="brush:js">document.body.onload = adcElemento;
+
+function adcElemento () {
+  // cria um novo elemento div
+  // e dá à ele conteúdo
+  var divNova = document.createElement("div");
+  var conteudoNovo = document.createTextNode("Olá, cumprimentos!");
+  divNova.appendChild(conteudoNovo); //adiciona o nó de texto à nova div criada
+
+  // adiciona o novo elemento criado e seu conteúdo ao DOM
+  var divAtual = document.getElementById("div1");
+  document.body.insertBefore(divNova, divAtual);
+}</pre>
+
+<p>{{EmbedLiveSample("Exemplo", 500, 50)}}</p>
+
+<h2 id="Notas">Notas</h2>
+
+<ul>
+ <li>Quando chamada em um objeto de documento marcado como um documento HTML, <code>createElement()</code> torna seu argumento caixa-baixa antes de criá-lo.</li>
+ <li>Para criar um elemento com um nome qualificado e <em>namespace URI</em>, use {{ domxref("document.createElementNS()") }}.</li>
+ <li>Antes do Gecko 2.0 {{ geckoRelease("2.0") }} você podia incluir os símbolos de menor que e maior que em volta da <code>tagName</code> no modo <em>quirks</em>; a partir do Gecko 2.0, a função comporta-se da mesma forma em ambos os modos <em>quirks</em> e estrito.</li>
+ <li>A partir do Gecko 19.0 {{geckoRelease("19.0")}}, <code>createElement(null)</code> funciona como <code>createElement("null")</code>. Note que o Opera torna <code>null</code> uma <em>string</em>, mas ambos Chrome e Internet Explorer lançarão erros.</li>
+ <li>A partir do Gecko 22.0 {{geckoRelease("22.0")}} <code>createElement()</code> não mais usa a interface {{domxref("HTMLSpanElement")}} quando o argumento é  "bgsounds", "multicol", or "image".  Ao invés disso, <code>HTMLUnknownElement</code> é usado para "bgsound", "multicol" e {{domxref("HTMLElement")}} <code>HTMLElement</code> é usado para "image".</li>
+ <li>A implementação Gecko de <code>createElement</code> não se conforma à especificação DOM para documentos XUL e XHTML: <code>localName</code> e <code>namespaceURI</code> não estão definidos para <code>null</code> no elemento criado. Veja {{ Bug(280692) }} para detalhes.</li>
+</ul>
+
+<h2 id="Especificações">Especificações</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-2141741547">DOM 2 Core: createElement</a></li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML5: APIs in HTML documents</a></li>
+</ul>
diff --git a/files/pt-br/web/api/document/createelementns/index.html b/files/pt-br/web/api/document/createelementns/index.html
new file mode 100644
index 0000000000..ece55f592e
--- /dev/null
+++ b/files/pt-br/web/api/document/createelementns/index.html
@@ -0,0 +1,90 @@
+---
+title: Document.createElementNS()
+slug: Web/API/Document/createElementNS
+tags:
+  - API
+  - DOM
+  - Referencia
+  - metodo
+translation_of: Web/API/Document/createElementNS
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Creates an element with the specified namespace URI and qualified name.</p>
+
+<p>Cria um elemento com Namespace URI e nome qualificado, como especificado.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>element</var> = <var>document</var>.createElementNS(<var>namespaceURI</var>, <var>qualifiedName</var>);
+</pre>
+
+<ul>
+ <li><code>element</code> é o <a href="/en-US/docs/DOM/element" title="DOM/element">element</a> criado.</li>
+ <li><code>namespaceURI</code> é uma string que especifica o <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI">namespace URI</a> para associar com o elemento. A propriedade <a href="/en-US/docs/DOM/element.namespaceURI">namespaceURI</a> do elemento criado é inicializada com os valores de <code>namespaceURI</code>. (Consulte seção abaixo para "Namespace URI's válidos")</li>
+ <li><code>qualifiedName</code> é uma string que especifica o tipo de elemento a ser criado. A propriedade <a href="/en-US/docs/DOM/element.nodeName">nodeName</a> do elemento criado é inicializada com o valor de <code>qualifiedName</code></li>
+</ul>
+
+<h2 id="Example" name="Example">Namespace URI's válidos</h2>
+
+<ul>
+ <li>HTML - Use <code>http://www.w3.org/1999/xhtml</code></li>
+ <li>SVG - Use <code>http://www.w3.org/2000/svg</code></li>
+ <li>XBL - Use <code>http://www.mozilla.org/xbl</code></li>
+ <li>XUL - Use <code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code></li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<p>Isso cria um novo elemento &lt;div&gt; no namespace <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> e anexa ele ao elemento vbox. Embora isso não seja um documento <a href="/en-US/docs/XUL" title="XUL">XUL</a> extremamente útil, pode demonstrar o uso de elementos de dois namespaces diferentes em apenas um documento:</p>
+
+<pre class="brush:xml">&lt;?xml version="1.0"?&gt;
+&lt;page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+      xmlns:html="http://www.w3.org/1999/xhtml"
+      title="||Working with elements||"
+      onload="init()"&gt;
+
+&lt;script type="text/javascript"&gt;&lt;![CDATA[
+ var container;
+ var newdiv;
+ var txtnode;
+
+ function init(){
+   container = document.getElementById("ContainerBox");
+   newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div");
+   txtnode = document.createTextNode("Este é o texto construído dinâmicamente com createElementNS e createTextNode então é inserido no documento usando appendChild.");
+   newdiv.appendChild(txtnode);
+   container.appendChild(newdiv);
+ }
+
+]]&gt;&lt;/script&gt;
+
+ &lt;vbox id='ContainerBox' flex='1'&gt;
+  &lt;html:div&gt;
+   O script desta página irá colocar conteúdo dinâmico abaixo:
+  &lt;/html:div&gt;
+ &lt;/vbox&gt;
+
+&lt;/page&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>O exemplo dado anteriormente usa script inline que não é recomendado em documentos XHTML. Este exemplo particular é atualmente um documento  XUL com XHTML incorporado, contudo, a recomendação ainda se aplica. scripts Inline  não causam nenhum problema neste pequeno exemplo, contudo, para qualquer trabalho sério você precisa ler sobre <a href="/en-US/docs/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents" title="Properly_Using_CSS_and_JavaScript_in_XHTML_Documents">Uso correto de CSS e JavaScript en documentos XHTML</a>.</p>
+
+<p>Para criar um elemento sem especificar seu namespace URI, use o método <a href="createElement" title="createElement">createElement</a>.</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrElNS">DOM 2 Core: createElementNS</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/1999/REC-xml-names-19990114">Namespaces em XML</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li><a href="createElement">document.createElement</a></li>
+ <li><a href="createTextNode">document.createTextNode</a></li>
+ <li><a href="../Node/namespaceURI">Node.namespaceURI</a></li>
+</ul>
diff --git a/files/pt-br/web/api/document/currentscript/index.html b/files/pt-br/web/api/document/currentscript/index.html
new file mode 100644
index 0000000000..179c950916
--- /dev/null
+++ b/files/pt-br/web/api/document/currentscript/index.html
@@ -0,0 +1,99 @@
+---
+title: Document.currentScript
+slug: Web/API/Document/currentScript
+translation_of: Web/API/Document/currentScript
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<p>Retorna o elemento que está sendo processado atualmente.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var curScriptElement = document.currentScript;
+</pre>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<p>O exemplo abaixo verifica se o script está sendo executado de forma assíncrona:</p>
+
+<pre class="brush:js">if (document.currentScript.async) {
+  console.log("Execução assíncrona");
+} else {
+  console.log("Execução síncrona");
+}</pre>
+
+<p><a href="/samples/html/currentScript.html">View Live Examples</a></p>
+
+<h2 id="Nota">Nota</h2>
+
+<p>Se o código estiver sendo chamado como um callback ou manipulador de eventos, ele não irá referenciar o  elemento; a referência ao elemento só acontece quando ele está sendo processado inicialmente.</p>
+
+<h2 id="Compatibilidade_nos_navegadores">Compatibilidade nos navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>29</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatNo() }} (as of IE11)</td>
+   <td>16</td>
+   <td>
+    <p>8 </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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>Suporte Básico</td>
+   <td>4.4</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatVersionUnknown}}</span></td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatVersionUnknown}}</span></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>iOS 8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Especificações</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-currentscript" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-currentscript">HTML5</a></li>
+</ul>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{HTMLElement("script")}}</li>
+ <li>{{domxref("element.onafterscriptexecute")}}</li>
+ <li>{{domxref("element.onbeforescriptexecute")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/document/defaultview/index.html b/files/pt-br/web/api/document/defaultview/index.html
new file mode 100644
index 0000000000..77ed7a4c72
--- /dev/null
+++ b/files/pt-br/web/api/document/defaultview/index.html
@@ -0,0 +1,28 @@
+---
+title: Document.defaultView
+slug: Web/API/Document/defaultView
+translation_of: Web/API/Document/defaultView
+---
+<div>{{ ApiRef() }}</div>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>Em navegadores, retorna o objeto <a href="/en-US/docs/DOM/window" title="DOM/window">window</a> associado ao documento ou <code>null</code> se não houver.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var win = document.defaultView;</pre>
+
+<p>Esta propriedade é de somente-leitura.</p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>De acordo com o <a class="external" href="http://www.quirksmode.org/dom/w3c_html.html">quirksmode</a>, <code>defaultView</code> não é suportado no IE até o IE 9.</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a href="/en-US/docs/HTML/HTML5" title="HTML/HTML5">HTML5: defaultView</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-DocumentView-defaultView">DOM Level 2 Views: defaultView</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Views/" title="http://www.w3.org/TR/DOM-Level-3-Views/">DOM Level 3 Views</a> (Apenas desenvolvido para o Working Group Note e não implementado)</li>
+</ul>
diff --git a/files/pt-br/web/api/document/designmode/index.html b/files/pt-br/web/api/document/designmode/index.html
new file mode 100644
index 0000000000..b2c070008b
--- /dev/null
+++ b/files/pt-br/web/api/document/designmode/index.html
@@ -0,0 +1,104 @@
+---
+title: Document.designMode
+slug: Web/API/Document/designMode
+translation_of: Web/API/Document/designMode
+---
+<div>{{ ApiRef() }}</div>
+
+<div> </div>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p><code>document.designMode</code> controla se o documento todo é editável. Valores validos são <code>"on"</code> e <code>"off"</code>. De acordo com a especificação, esta propriedade é por padrão <code>"off"</code>. Firefox segue este padrão. Nas versões anteriores do Chrome e IE o padrão é <code>"inherit"</code>. No IE6-10, o valor é capitalizado.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush: js">var mode = document.designMode;
+document.designMode = "on";
+document.designMode = "off";</pre>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<p>Cria um documento {{HTMLElement("iframe")}} editável:</p>
+
+<pre>iframe_node.contentDocument.designMode = "on";
+</pre>
+
+<h2 id="Especificação">Especificação</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', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_nos_Browsers" style="font-size: 2.14285714285714rem;">Compatibilidade nos Browsers</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Feature</th>
+   <th style="line-height: 16px;">Chrome</th>
+   <th style="line-height: 16px;">Firefox (Gecko)</th>
+   <th style="line-height: 16px;">Internet Explorer</th>
+   <th style="line-height: 16px;">Opera</th>
+   <th style="line-height: 16px;">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 style="line-height: 16px;">Feature</th>
+   <th style="line-height: 16px;">Android</th>
+   <th style="line-height: 16px;">Chrome for Android</th>
+   <th style="line-height: 16px;">Firefox Mobile (Gecko)</th>
+   <th style="line-height: 16px;">IE Mobile</th>
+   <th style="line-height: 16px;">Opera Mobile</th>
+   <th style="line-height: 16px;">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="See_also" name="See_also"> </h2>
+
+<h2 id="See_also" name="See_also">Veja também:</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms533720(v=vs.85).aspx">designMode property</a> on MSDN</li>
+</ul>
diff --git a/files/pt-br/web/api/document/doctype/index.html b/files/pt-br/web/api/document/doctype/index.html
new file mode 100644
index 0000000000..72a731c314
--- /dev/null
+++ b/files/pt-br/web/api/document/doctype/index.html
@@ -0,0 +1,59 @@
+---
+title: Document.doctype
+slug: Web/API/Document/doctype
+translation_of: Web/API/Document/doctype
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Retorna a declaração do tipo de documento(Document Type Declaration (DTD)) associado ao documento atual. O objeto retornado implementa a interface {{domxref("DocumentType")}}. Use {{domxref("DOMImplementation.createDocumentType()")}} para criar um <code>DocumentType</code>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>doctype</var> = <var>document</var>.doctype;
+</pre>
+
+<ul>
+ <li><code>doctype</code> é uma proriedade somente de leitura.</li>
+</ul>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush:js">var doctypeObj = document.doctype;
+
+console.log(
+  "doctypeObj.name: "           + doctypeObj.name            + "\n" +
+  "doctypeObj.internalSubset: " + doctypeObj.internalSubset  + "\n" +
+  "doctypeObj.publicId: "       + doctypeObj.publicId        + "\n" +
+  "doctypeObj.systemId: "       + doctypeObj.systemId
+);</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>A propriedade retornará <code>null</code> se não houvernehum  DTD associado ao documento atual.</p>
+
+<p>O nível 2 do DOM não suporta a edição da declaração do tipo de documento.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-doctype', 'Document: doctype')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_os_navegadores"> Compatibilidade com os navegadores</h2>
+
+<div class="hidden">A tabela de compatibilide nesta página é gerada a partir de dados estruturados. se voce quiser contribuir com os dados, confira em <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("api.Document.doctype")}}</p>
diff --git a/files/pt-br/web/api/document/document/index.html b/files/pt-br/web/api/document/document/index.html
new file mode 100644
index 0000000000..3152137704
--- /dev/null
+++ b/files/pt-br/web/api/document/document/index.html
@@ -0,0 +1,87 @@
+---
+title: Document()
+slug: Web/API/Document/Document
+translation_of: Web/API/Document/Document
+---
+<p>{{APIRef}}{{Non-standard_header}}</p>
+
+<p>O construtor <strong><code>Document</code></strong> cria um novo objeto {{domxref("Document")}},  o qual trata de uma página carregada no navegador servindo como porta de entrada para o conteúdo da página.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>document</em> = new Document()</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<p>Nenhum.</p>
+
+<p><span style='background-color: #333333; color: #ffffff; font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 1.5rem;'>Especificações</span></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_Navegadores">Compatibilidade com Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navegador</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navegador</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>Suporte</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/pt-br/web/api/document/documentelement/index.html b/files/pt-br/web/api/document/documentelement/index.html
new file mode 100644
index 0000000000..869cd7a75d
--- /dev/null
+++ b/files/pt-br/web/api/document/documentelement/index.html
@@ -0,0 +1,43 @@
+---
+title: Document.documentElement
+slug: Web/API/Document/documentElement
+tags:
+  - Propriedade
+  - Referencia
+  - raiz
+translation_of: Web/API/Document/documentElement
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>O  <strong>document.documentElement</strong>  retorna o <code><a href="/pt-BR/docs/Web/API/Element">Elemento</a></code> que é o elemento raiz do <code><a href="/pt-BR/docs/Web/API/Document">documento</a></code> (por exemplo, o elemento <code>&lt;html&gt;</code> para documentos HTML).</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>element</em> = document.documentElement;
+</pre>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:js">var rootElement = document.documentElement;
+var primeiroNivel = rootElement.childNodes;
+
+// primeiroNivel é a <code><a href="/pt-BR/docs/Web/API/NodeList">NodeList</a></code> do filho direto do elemento raíz
+for (var i = 0; i &lt; primeiroNivel.length; i++) {
+   // faça algo com cada filho direto do elemento raiz
+   // como primeiroNivel[i]
+
+}</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Esta propriedade é uma conveniência somente leitura para obter o elemento raiz associado com qualquer documento.</p>
+
+<p>Documentos HTML tipicamente contém somente um único nó filho, <code>&lt;html&gt;</code>, talvez com uma declaração DOCTYPE antes dele. Documentos XML, frequentemete contêm múltiplos nós filhos: o elemento de raiz, a declaração DOCTYPE, e as <a href="/pt-BR/docs/Web/API/ProcessingInstruction">instruções de processamento</a>.</p>
+
+<p>É por isso que você deve usar <code>document.documentElement</code> em vez de {{Domxref ("document.firstChild")}} para obter o elemento raiz.</p>
+
+<h2 id="Specification" name="Specification">Especificações</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-87CD092">Núcleo DOM Nível 2:   document.documentElement</a></li>
+</ul>
diff --git a/files/pt-br/web/api/document/documenturi/index.html b/files/pt-br/web/api/document/documenturi/index.html
new file mode 100644
index 0000000000..52609f2bd5
--- /dev/null
+++ b/files/pt-br/web/api/document/documenturi/index.html
@@ -0,0 +1,53 @@
+---
+title: Document.documentURI
+slug: Web/API/Document/documentURI
+translation_of: Web/API/Document/documentURI
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<div>A propiedade <code><strong>documentURI</strong></code> da interface {{domxref("Document")}} retorna uma string com a localização de um documento.</div>
+
+<div></div>
+
+<div>Na definição original DOM3 <code><strong>documentURI </strong></code>é um atributo de leitura/escrita.No padrão mais recente DOM4 é somente de leitura.</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <var>string</var> = document.documentURI;
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Os Documentos HTML tem uma propriedade {{domxref("document.URL")}} que retorna o mesmo valor (localização do documento).</p>
+
+<p>A diferençã é que <strong><code>document.URL </code></strong>só pode ser usado em documentos HTML, enquanto <code><strong>documentURI </strong></code>está disponivel para todos os documentos web.</p>
+
+<h2 id="Specificações">Specificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-documenturi','documentURI')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+
+
+<p>{{Compat("api.Document.documentURI")}}</p>
diff --git a/files/pt-br/web/api/document/elementfrompoint/index.html b/files/pt-br/web/api/document/elementfrompoint/index.html
new file mode 100644
index 0000000000..ce447f2830
--- /dev/null
+++ b/files/pt-br/web/api/document/elementfrompoint/index.html
@@ -0,0 +1,132 @@
+---
+title: Document.elementFromPoint()
+slug: Web/API/Document/elementFromPoint
+tags:
+  - API
+  - CSSOM View
+  - Method
+  - NeedsMarkupWork
+  - NeedsMobileBrowserCompatibility
+  - Reference
+translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>O método <code><strong>elementFromPoint()</strong></code> da interface {{domxref("Document")}} retorna o elemento de maior nível nas coordenadas especificadas.</p>
+
+<p>Se o elemento no ponto especificado pertencer à outro documento (por exemplo, um subdocumento em um iframe), será retornado o pai do subdocumento (o próprio iframe). Se o elemento em determinado ponto for anônimo ou for um conteudo gerado por XBL, como por exemplo barras de scroll de caixas de texto, então será retornado o primeiro elemento pai, não-anônimo (por exemplo, a própria caixa de texto).</p>
+
+<p>Se o ponto especificado estiver fora dos limites visíveis do documento ou tiver uma coordenada negativa, o resultado é <code>null</code>.</p>
+
+<p>Se você precisa encontrar uma posição específica dentro do elemento, use {{domxref("Document.caretPositionFromPoint()")}}.</p>
+
+<p>{{Note("Chamados por documentos XUL devem esperar até o evento <code>onload</code> ser acionado antes de chamar este método.")}}</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var element = document.elementFromPoint(x, y);</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt>x</dt>
+ <dd>Uma posição horizontal dentro do viewport atual.</dd>
+ <dt>y</dt>
+ <dd>Uma position vertical dentro do viewport atual.</dd>
+</dl>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p>O objeto de nível mais alto {{domxref("Element")}} dentro das coordenadas declaradas.</p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;exemplo de elementFromPoint&lt;/title&gt;
+
+&lt;script&gt;
+function changeColor(newColor) {
+  elem = document.elementFromPoint(2, 2);
+  elem.style.color = newColor;
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p id="para1"&gt;Algum texto aqui&lt;/p&gt;
+&lt;button onclick="changeColor('blue');"&gt;azul&lt;/button&gt;
+&lt;button onclick="changeColor('red');"&gt;vermelho&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-document-elementfrompoint', 'elementFromPoint')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Definição Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</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(4.0)}}</td>
+   <td>3</td>
+   <td>5.5</td>
+   <td>10.50</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Android</th>
+   <th>Chrome para 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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/pt-br/web/api/document/elementoregistrado/index.html b/files/pt-br/web/api/document/elementoregistrado/index.html
new file mode 100644
index 0000000000..bff318b3a9
--- /dev/null
+++ b/files/pt-br/web/api/document/elementoregistrado/index.html
@@ -0,0 +1,132 @@
+---
+title: Document.registerElement()
+slug: Web/API/Document/ElementoRegistrado
+tags:
+  - DOM
+  - Document.registerElement()
+  - ELEMENTO DOM
+  - Web Components
+  - registerElement
+translation_of: Web/API/Document/registerElement
+---
+<p>{{APIRef("DOM")}}</p>
+
+<div class="note">
+<p><strong>Note:</strong>document.registerElement() está depreciado em favor do customElements.define().</p>
+</div>
+
+<p>O método <code><strong>document.registerElement()</strong></code> registra um novo <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements">elemento personalizado</a> no browser e returna um construtor para o novo elemento.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Esta é uma tecnologia experimental. O browser você precisa usar suporte à componentes web. Veja <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Habilitando componentes web no Firefox.</a></p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>constructor</em> = document.registerElement(<em>tag-name</em>, <em>options</em>);</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><em>tag-name</em></dt>
+ <dd>O nome do elemento personalizado. O nome precisa conter um dash (-), por exemplo minha-tag.</dd>
+ <dt><em>Opções{{optional_inline}}</em></dt>
+ <dd>
+ <p>Um projeto com propriedades <strong>protótipo</strong> como base para o elememento personalizado, e <strong>extends</strong>, uma existente tag para estender. Ambos são opcionais.</p>
+ </dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Aqui é um exemplo muito simples:</p>
+
+<pre class="brush: js">var Mytag = document.registerElement('my-tag');
+</pre>
+
+<p>Agora as novas tags são registradas no browser.</p>
+
+<p>Uma variável Mytag tem um construtor que você pode usar para criar um elemento my-tag nos documentos como seguem:</p>
+
+<pre class="brush: js">document.body.appendChild(new Mytag());</pre>
+
+<p>Isto insere um elemento vazio my-tag que será visível se você usar o browser para desenvolvedores. Isto não será visível se você usar a ferramenta visão da capacidade do código fonte do browser. E isto não será visível no browser a menos que você adicione alguns conteúdos para a tag. Aqui está um caminho para adicionar conteúdo a nova tag:</p>
+
+<pre class="brush: js">var mytag = document.getElementsByTagName("my-tag")[0];
+mytag.textContent = "I am a my-tag element.";</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Custom Elements')}}</td>
+   <td>{{Spec2('Custom Elements')}}</td>
+   <td>
+    <p>definição inicial</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_Browser">Compatibilidade do Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>35</td>
+   <td>31<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>25</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 Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>4.4.4</td>
+   <td>31<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Esta API é implementada uma preferência</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Web_Components/Custom_Elements">Elementos customizados</a></li>
+</ul>
diff --git a/files/pt-br/web/api/document/execcommand/index.html b/files/pt-br/web/api/document/execcommand/index.html
new file mode 100644
index 0000000000..cc5e3d3da8
--- /dev/null
+++ b/files/pt-br/web/api/document/execcommand/index.html
@@ -0,0 +1,174 @@
+---
+title: Document.execCommand()
+slug: Web/API/Document/execCommand
+translation_of: Web/API/Document/execCommand
+---
+<div>{{ApiRef("DOM")}}{{Obsolete_header}}</div>
+
+<p><span class="seoSummary">Quando um documento HTML está em <code><a href="/en-US/docs/Web/API/Document/designMode">designMode</a></code>, seu objeto <code>document</code>  expõe um metodo <strong><code>execCommand</code></strong> para editar a região editável corrente, algo como elementos <a href="/en-US/docs/Web/HTML/Element/input">form inputs</a> ou <code><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contentEditable</a></code>.</span></p>
+
+<p>A maioria dos comandos afetam apaenas uma área selecionada [<a href="/en-US/docs/Web/API/Selection">seleção</a>] (negrito, itálico, etc.), enquantos outros adicionam novos elementos (adicionar um link por exemplo), ou afetam uma linha toda (identação). Quando usando <code>contentEditable</code>, o metódo <code>execCommand()</code> afeta o elemento editável ativo.</p>
+
+<h2 id="Síntaxe">Síntaxe</h2>
+
+<pre class="syntaxbox"><em>document</em>.execCommand(<em>aCommandName</em>, <em>aShowDefaultUI</em>, <em>aValueArgument</em>)
+</pre>
+
+<h3 id="Valor_de_Retorno">Valor de Retorno</h3>
+
+<p>Um {{jsxref('Boolean')}} que tem valor <code>false</code> se o comando não é válido ou está desabilitado.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Retorna <code>true</code> se for parte da interação do usuário. Não tente utilizar o retorno para verificar o suporte do browser antes de chamar o comando.</p>
+</div>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>aCommandName</code></dt>
+ <dd>Uma {{domxref("DOMString")}} especificando o nome do comando a ser executado. Veja {{anch("Comandos")}} para um lista dos possíveis comandos.</dd>
+ <dt><code>aShowDefaultUI</code></dt>
+ <dd>Um {{jsxref("Boolean")}} indicando se a interface padrão do usuário deve ser mostrada. Isso não é implementado no Mozilla.</dd>
+ <dt><code>aValueArgument</code></dt>
+ <dd>Para comandos que requerem um argumento de entrada. É uma {{domxref("DOMString")}} provendo a informação. Por exemplo, <code>insertImage</code> requer uma URL da imagem a ser inserida. Use <code>null</code> se nenhum argumento é necessário.</dd>
+</dl>
+
+<h3 id="Comandos">Comandos</h3>
+
+<dl>
+ <dt><code>backColor</code></dt>
+ <dd>Muda a cor de fundo do documento. No modo <code>styleWithCss</code>, ele afeta a cor de fundo do bloco que contém. Isso requer um valor de {{cssxref("&lt;color&gt;")}} passado como argumento. Observe que o Internet Explorer usa isso para definir a cor do plano de fundo do <strong>texto</strong>.</dd>
+ <dt><code>bold</code></dt>
+ <dd>Ativa / desativa negrito na seleção ou no ponto de inserção. O Internet Explorer usa a tag {{HTMLElement("strong")}} no lugar de {{HTMLElement("b")}}.</dd>
+ <dt><code>ClearAuthenticationCache</code></dt>
+ <dd>Limpa todas as credenciais de autenticação do cache.</dd>
+ <dt><code>contentReadOnly</code></dt>
+ <dd>Torna o documento de conteúdo somente leitura ou editável. Isso requer um valor booleano <code>true</code> / <code>false</code> como argumento. (Não é suportado pelo Internet Explorer.)</dd>
+ <dt><code>copy</code></dt>
+ <dd>Copia a seleção atual para a área de transferência. As condições para ativar esse comportamento variam de um navegador para outro e evoluíram com o tempo. Verifique a Tabela de {{anch("Compatibilidade entre Browsers")}} para determinar se você pode usar no seu caso.</dd>
+ <dt><code>createLink</code></dt>
+ <dd>Cria um hiperlink a partir da seleção, mas apenas se houver uma seleção. Requer uma string <a href="/en-US/docs/Archive/Mozilla/URIs_and_URLs">URI</a> como argumento para o <code>href</code> do link.  O URI deve conter pelo menos um único caractere, que pode ser um espaço em branco. (O Internet Explorer criará um link com um valor nulo.)</dd>
+ <dt><code>cut</code></dt>
+ <dd>Remove a seleção atual e a copia para a área de transferência. Quando esse comportamento é ativado, varia entre os navegadores e suas condições evoluíram com o tempo. Verifique a Tabela de {{anch("Compatibilidade entre Browsers")}} para mais detalhes.</dd>
+ <dt><code>decreaseFontSize</code></dt>
+ <dd>Adiciona a tag {{HTMLElement("small")}} ao redor da seleção ou no ponto de inserção. (Não é suportado pelo Internet Explorer.)</dd>
+ <dt><code>defaultParagraphSeparator</code></dt>
+ <dd>Altera o separador de parágrafos usado quando novos parágrafos são criados em regiões de texto editáveis. Veja <a href="/en-US/docs/Web/Guide/HTML/Editable_content#Differences_in_markup_generation">Diferenças na geração de marcação</a> para mais detalhes.</dd>
+ <dt><code>delete</code></dt>
+ <dd>Exclui o conteúdo da seleção atual.</dd>
+ <dt><code>enableAbsolutePositionEditor</code></dt>
+ <dd>Habilita ou desabilita a garra que permite mover elementos absolutamente posicionados. Está desabilitado por padrão no Firefox 63 Beta / Dev Edition ({{bug(1449564)}})</dd>
+ <dt><code>enableInlineTableEditing</code></dt>
+ <dd>Ativa ou desativa os controles de inserção e exclusão de linhas / colunas da tabela. Está desabilitado por padrão no Firefox 63 Beta / Dev Edition ({{bug(1449564)}}).</dd>
+ <dt><code>enableObjectResizing</code></dt>
+ <dd>Ativa ou desativa as alças de redimensionamento em imagens, tabelas e elementos absolutamente posicionados e outros objetos redimensionáveis. Está desabilitado por padrão no Firefox 63 Beta / Dev Edition ({{bug(1449564)}}).</dd>
+ <dt><code>fontName</code></dt>
+ <dd>Altera o nome da fonte para a seleção ou no ponto de inserção. Isso requer uma string com o nome da fonte (como <code>"Arial"</code>) como argumento.</dd>
+ <dt><code>fontSize</code></dt>
+ <dd>Altera o tamanho da fonte para a seleção ou no ponto de inserção. Isso requer um número inteiro de <code>1</code>-<code>7</code> como argumento.</dd>
+ <dt><code>foreColor</code></dt>
+ <dd>Altera a cor da fonte para a seleção ou no ponto de inserção. Isso requer uma string de cor (hexadecimal) como argumento.</dd>
+ <dt><code>formatBlock</code></dt>
+ <dd>Adiciona um elemento de nível de bloco HTML ao redor da linha que contém a seleção atual, substituindo o elemento de bloco que contém a linha, se houver (no Firefox,  {{HTMLElement("blockquote")}} é a exceção - envolverá qualquer elemento de bloco que contenha). Requer uma sequência de nome de tag como argumento de valor. Praticamente todos os elementos em nível de bloco podem ser usados. (Internet Explorer e Edge suportam apenas tags de cabeçalho  <code>H1</code>–<code>H6</code>, <code>ADDRESS</code>, e <code>PRE</code>, que devem estar entre colchetes angulares, como <code>"&lt;H1&gt;"</code>.)</dd>
+ <dt><code>forwardDelete</code></dt>
+ <dd>Exclui o caractere depois da posição do <a href="http://en.wikipedia.org/wiki/Cursor_%28computers%29">cursor</a>, idêntico a pressionar a tecla Delete em um teclado do Windows.</dd>
+ <dt><code>heading</code></dt>
+ <dd>Adiciona um elemento de cabeçalho ao redor de uma linha de seleção ou ponto de inserção. Requer uma string com o nome da tag como argumento (ex. <code>"H1"</code>, <code>"H6"</code>). (Não suportado pelo Internet Explorer e Safari.)</dd>
+ <dt><code>hiliteColor</code></dt>
+ <dd>Altera a cor do plano de fundo para a seleção ou no ponto de inserção. Requer uma sequência de valores de cores como argumento. <code>useCSS</code> tem de ser <code>true</code> para essa função. (Não é suportado pelo Internet Explorer.)</dd>
+ <dt><code>increaseFontSize</code></dt>
+ <dd>Adiciona uma tag {{HTMLElement("big")}} ao redor da seleção ou no ponto de inserção. (Não é suportado pelo Internet Explorer.)</dd>
+ <dt><code>indent</code></dt>
+ <dd>Recua a linha que contém o ponto de seleção ou inserção. No Firefox, se a seleção abranger várias linhas em diferentes níveis de recuo, apenas as linhas menos recuadas na seleção serão recuadas.</dd>
+ <dt><code>insertBrOnReturn</code></dt>
+ <dd>Controla se a tecla Enter insere um elemento {{HTMLElement("br")}}, ou divide o elemento do bloco atual em dois. (Não é suportado pelo Internet Explorer.)</dd>
+ <dt><code>insertHorizontalRule</code></dt>
+ <dd>Insere um elemento {{HTMLElement("hr")}} no ponto de inserção ou substitui a seleção por ele.</dd>
+ <dt><code>insertHTML</code></dt>
+ <dd>Insere uma string HTML no ponto de inserção (exclui a seleção). Requer uma string HTML válida como argumento. (Não é suportado pelo Internet Explorer.)</dd>
+ <dt><code>insertImage</code></dt>
+ <dd>Insere uma imagem no ponto de inserção (exclui a seleção). Requer uma string de URL para o <code>src</code> da imagem como argumento. Os requisitos para essa string são os mesmos que <code>createLink</code>.</dd>
+ <dt><code>insertOrderedList</code></dt>
+ <dd>Cria uma <a href="/en-US/docs/Web/HTML/Element/ol">lista ordenada e numerada</a> para a seleção ou no ponto de inserção.</dd>
+ <dt><code>insertUnorderedList</code></dt>
+ <dd>Cria uma <a href="/en-US/docs/Web/HTML/Element/ul">lista não ordenada</a> para a seleção ou no ponto de inserção.</dd>
+ <dt><code>insertParagraph</code></dt>
+ <dd>Insere um <a href="/en-US/docs/Web/HTML/Element/p">parágrafo</a> ao redor da seleção ou da linha atual. (O Internet Explorer insere um parágrafo no ponto de inserção e exclui a seleção.)</dd>
+ <dt><code>insertText</code></dt>
+ <dd>Insere o texto fornecido no ponto de inserção (exclui a seleção).</dd>
+ <dt><code>italic</code></dt>
+ <dd>Ativa / desativa o itálico para a seleção ou no ponto de inserção. (O Internet Explorer usa o elemento {{HTMLElement("em")}} no lugar de {{HTMLElement("i")}}.)</dd>
+ <dt><code>justifyCenter</code></dt>
+ <dd>Centraliza o ponto de seleção ou inserção.</dd>
+ <dt><code>justifyFull</code></dt>
+ <dd>Justifica o ponto de seleção ou inserção.</dd>
+ <dt><code>justifyLeft</code></dt>
+ <dd>Justifica o ponto de seleção ou inserção à esquerda.</dd>
+ <dt><code>justifyRight</code></dt>
+ <dd>Justifica à direita a seleção ou o ponto de inserção.</dd>
+ <dt><code>outdent</code></dt>
+ <dd>Supera a linha que contém o ponto de seleção ou inserção.</dd>
+ <dt><code>paste</code></dt>
+ <dd>Cola o conteúdo da área de transferência no ponto de inserção (substitui a seleção atual). Desativado para conteúdo da web. Veja [1].</dd>
+ <dt><code>redo</code></dt>
+ <dd>Refaz o comando desfazer anterior.</dd>
+ <dt><code>removeFormat</code></dt>
+ <dd>Remove toda a formatação da seleção atual.</dd>
+ <dt><code>selectAll</code></dt>
+ <dd>Seleciona todo o conteúdo da região editável.</dd>
+ <dt><code>strikeThrough</code></dt>
+ <dd>Ativa / desativa o strikethrough(linha riscada) para a seleção ou no ponto de inserção.</dd>
+ <dt><code>subscript</code></dt>
+ <dd>Ativa / desativa o <a href="/en-US/docs/Web/HTML/Element/sub">subscrito</a> para a seleção ou no ponto de inserção.</dd>
+ <dt><code>superscript</code></dt>
+ <dd>Ativa / desativa o <a href="/en-US/docs/Web/HTML/Element/sup">superscript</a> para a seleção ou no ponto de inserção.</dd>
+ <dt><code>underline</code></dt>
+ <dd>Ativa / desativa o <a href="/en-US/docs/Web/HTML/Element/u">underline</a> para a seleção ou no ponto de inserção.</dd>
+ <dt><code>undo</code></dt>
+ <dd>Desfaz o último comando executado.</dd>
+ <dt><code>unlink</code></dt>
+ <dd>Remove o elemento <a href="/en-US/docs/Web/HTML/Element/a">âncora</a> de um hiperlink selecionado.</dd>
+ <dt><code>useCSS</code> {{Deprecated_inline}}</dt>
+ <dd>Alterna o uso de tags HTML ou CSS para a marcação gerada. Requer um booleano <code>true</code> / <code>false</code> como argumento.</dd>
+ <dd><br>
+ NOTA: Este argumento é logicamente reverso (ou seja, use <code>false</code> para usar CSS, <code>true</code> para usar HTML) e não é suportado pelo Internet Explorer. Isso foi preterido em favor do <code>styleWithCSS</code>.</dd>
+ <dt><code>styleWithCSS</code></dt>
+ <dd>Substitui o comando <code>useCSS</code>. <code>true</code> modifica / gera atributos de <code>style</code> na marcação, <code>false</code> gera elementos de apresentação(html).</dd>
+ <dd></dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Um exemplo de <a href="https://codepen.io/chrisdavidmills/full/gzYjag/">como usar a funcionalidade</a> no CodePen.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td><a href="https://w3c.github.io/editing/execCommand.html#execcommand()">execCommand</a></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_Browsers">Compatibilidade entre Browsers</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de recebimento.</div>
+
+<p>{{Compat("api.Document.execCommand")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li>{{domxref("document.designMode")}}</li>
+ <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Edição de Rich-Text com Mozilla</a></li>
+ <li><a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md">Scribe: documentação sobre inconsitencias entre browsers</a> com bugs relacionados a <code>document.execCommand</code>.</li>
+</ul>
diff --git a/files/pt-br/web/api/document/fullscreen/index.html b/files/pt-br/web/api/document/fullscreen/index.html
new file mode 100644
index 0000000000..6ad6fc604f
--- /dev/null
+++ b/files/pt-br/web/api/document/fullscreen/index.html
@@ -0,0 +1,83 @@
+---
+title: Document.fullscreen
+slug: Web/API/Document/fullscreen
+tags:
+  - API
+  - Documento
+  - Javascript tela cheia
+  - Propriedade
+  - Referencia
+  - Somente Leitura
+  - Tela
+  - Tela Cheia
+  - display
+translation_of: Web/API/Document/fullscreen
+---
+<div>{{APIRef("Fullscreen API")}}{{Deprecated_Header}}</div>
+
+<p><span class="seoSummary">A propriedade de somente leitura da interface <code><strong>fullscreen</strong></code> retorna se o documento correspondente está mostrando conteúdo em modo de tela cheia (full-screen). </span></p>
+
+<p>Apesar dessa propriedade ser de somente leitura, ela não será executa se for modificada (mesmo em modo estrito); o setter não é um operador e não será modificado.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Desde que esta propriedade foi descontinuada, você pode determinar se o modo full-screen está ativo no documento checando se {{DOMxRef("Document.fullscreenElement")}} não é <code>null</code>.</p>
+</div>
+
+<h2 id="Síntaxe">Síntaxe</h2>
+
+<pre class="eval">var <var>isFullScreen</var> = <var>document</var>.fullscreen;
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Um valor booleano é <code>true</code> se o documento está mostrando um elemento no modo full-screen; se não, o valor é <code>false</code>.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Esta simples função retorna se o modo full-sreen está ativo, usando a obsoleta propriedade <code><strong>fullscreen</strong></code>.</p>
+
+<pre class="brush: js">function isDocumentInFullScreenMode() {
+  return document.fullscreen;
+}
+</pre>
+
+<p>Neste próximo exemplo, de outra maneira, usa a propriedade atual <code>fullscreenElement</code> para determinar a mesma coisa:</p>
+
+<pre class="brush: js">function isDocumentInFullScreenMode() {
+  return document.fullscreenElement !== null;
+}</pre>
+
+<p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Se </span></font><code>fullscreenElement</code>  não é <code>null</code>, retorna <code>true</code>, indicando se modo full-screen está sendo usado.</p>
+
+<h2 id="Específicações">Específicações</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("Fullscreen", "#dom-document-fullscreen", "Document.fullscreen")}}</td>
+   <td>{{Spec2("Fullscreen")}}</td>
+   <td>Definição inicial (como uma proprieda obsoleta).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você gostaria de contribuir, por favor cheque <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma requisição pull.</div>
+
+<p>{{Compat("api.Document.fullscreen")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a></li>
+ <li><a href="/en-US/docs/Web/API/Fullscreen_API/Guide">Guide to the Fullscreen API</a></li>
+ <li>{{DOMxRef("Document.fullscreenEnabled")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/document/getelementbyid/index.html b/files/pt-br/web/api/document/getelementbyid/index.html
new file mode 100644
index 0000000000..c77a93fed9
--- /dev/null
+++ b/files/pt-br/web/api/document/getelementbyid/index.html
@@ -0,0 +1,133 @@
+---
+title: document.getElementById()
+slug: Web/API/Document/getElementById
+tags:
+  - API
+  - DOM
+  - Document
+  - Elements
+  - Method
+  - Reference
+  - Web
+  - getElementById
+  - id
+translation_of: Web/API/Document/getElementById
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>Retorna a referência do elemento através do seu ID.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="eval">var elemento = document.getElementById(id);
+</pre>
+
+<p>onde</p>
+
+<ul>
+ <li><code>elemento</code> é uma referência a um objeto {{domxref("Element")}}, ou null se um elemento com o ID especificado não estiver contido neste documento.</li>
+ <li><code>id</code> é uma string que diferência maiúsculas e minúsculas representando o ID único do elemento sendo procurado.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Exemplo getElementById&lt;/title&gt;
+  &lt;script&gt;
+  function mudarCor(novaCor) {
+    var elemento = document.getElementById("para1");
+    elemento.style.color = novaCor;
+  }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p id="para1"&gt;Algum texto de exemplo&lt;/p&gt;
+  &lt;button onclick="mudarCor('blue');"&gt;Azul&lt;/button&gt;
+  &lt;button onclick="mudarCor('red');"&gt;Vermelho&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Os novatos devem notar que a caixa de 'Id' no nome deste método <em>deve</em> estar correta para o código da função - 'getElementByID <em>não funciona</em>, por mais natural que possa parecer.</p>
+
+<p>Se não existe um elemento com o id fornecido, esta função retorna <code>null</code>. Note que o parâmetro ID diferência maiúsculas e minúsculas. Assim document.getElementById("Main") retornará <code>null</code> ao invés do elemento <code>&lt;div id="<strong>m</strong>ain"&gt;,</code> devido a "M" e "m" serem diferentes para o objetivo deste método.</p>
+
+<p><strong>Elementos que não estão no documento</strong> não são procurados por <code>getElementById</code>. Quando criar um elemento e atribuir um ID ao mesmo, você deve inserir o elemento na árvore do documento com <code><a href="/en-US/docs/DOM/Node.insertBefore" title="en-US/docs/DOM/Node.insertBefore">insertBefore</a></code> ou método similar antes que você possa acessá-lo com <code>getElementById</code>:</p>
+
+<pre class="brush: js">var elemento = document.createElement("div");
+elemento.id = 'testqq';
+var el = document.getElementById('testqq'); // el será null!
+</pre>
+
+<p><strong>Documentos não-HTML.</strong> A implementação do DOM deve ter informações que diz quais atributos são do tipo ID.  Atributos com o nome "id" não são do tipo ID a menos que assim sejam definidos nos documentos DTD. O atributo <code>id</code> é definido para ser um tipo ID em casos comuns de  <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 outros. Implementações que não reconhecem se os atributos são do tipo ID, ou não são esperados retornam <code>null</code>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade do Navegador</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>5.5</td>
+   <td>7.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile(1.0) }}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Especificações</h2>
+
+<p><code>getElementById</code> foi introduzido no DOM Level 1 para documentos HTML e movidos para todos documentos no DOM Level 2</p>
+
+<ul>
+ <li>Especificação núcleo DOM Level 2: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBId">getElementById</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li>referências de <a href="/en-US/docs/DOM/document" title="en-US/docs/DOM/document">document</a> para outros métodos e propriedades podem ser usados para obter referências para elementos no documento.</li>
+ <li><a href="/en-US/docs/xml/xml:id" title="en-US/docs/xml/id">xml:id</a> -  tem um método utilitário que permite que obtenha 'xml:id' em documentos XML</li>
+</ul>
diff --git a/files/pt-br/web/api/document/getelementsbyclassname/index.html b/files/pt-br/web/api/document/getelementsbyclassname/index.html
new file mode 100644
index 0000000000..44fa28f840
--- /dev/null
+++ b/files/pt-br/web/api/document/getelementsbyclassname/index.html
@@ -0,0 +1,104 @@
+---
+title: Document.getElementsByClassName()
+slug: Web/API/Document/getElementsByClassName
+tags:
+  - API
+  - DOM
+  - Gecko
+  - HTML5
+  - Métodos de Elementos DOM
+  - Referencia
+  - metodo
+translation_of: Web/API/Document/getElementsByClassName
+---
+<p id="Summary">{{APIRef("DOM")}}</p>
+
+<p>Retorna um vetor de objetos com todos os elementos filhos que possuem o nome da classe dada.  Quando invocado no objeto <em>document</em>, o documento é examinado por completo, incluindo o nó raiz. Você também pode invocar {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} em qualquer elemento; isso retornaria somente elementos que são descendentes do nó raiz especificado com o nome da classe.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>var elementos</var> = document.getElementsByClassName(<em>nomes</em>); // ou:
+<var>var elementos</var> = rootElement.getElementsByClassName(<em>nomes</em>);</pre>
+
+<ul>
+ <li><var>elementos</var> é uma lista viva do {{ domxref("HTMLCollection") }} de elementos encontrados.</li>
+ <li><var>nomes</var> é um texto que representa uma lista dos nomes das classes que são separados por espaço em branco.</li>
+ <li>getElementsByClassName pode ser invocado por qualquer elemento, não somente pelo nó raiz <em>document. </em>O elemento no qual ele é chamado será usado como a raiz para a busca<em>.</em></li>
+</ul>
+
+<h2 id="Examples" name="Examples">Exemplos</h2>
+
+<p>Retorna todos os elementos que possuem a classe 'teste'</p>
+
+<pre class="brush: js">document.getElementsByClassName('teste');</pre>
+
+<p>Retorna todos os elementos que possuem as classes 'vermelho' e 'teste'</p>
+
+<pre class="brush: js">document.getElementsByClassName('vermelho teste');</pre>
+
+<p>Retorna todos os elementos que possuem a classe 'teste' dentro do elemento que possui o ID 'principal'</p>
+
+<pre class="brush: js">document.getElementById('principal').getElementsByClassName('teste');</pre>
+
+<p>Nós podemos também usar os métodos do Array.prototype em qualquer dos elementos {{ domxref("HTMLCollection") }} passando o <var>HTMLCollection</var> como valor deste método. Aqui podemos encontrar todos os elementos do tipo <em>div</em> que possuem a classe 'teste':</p>
+
+<pre class="brush: js">var elementosTeste = document.getElementsByClassName('teste');
+var divsTeste = Array.prototype.filter.call(elementosTeste, function(elementoTeste) {
+    return elementoTeste.nodeName === 'DIV';
+});</pre>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>3.0</td>
+   <td>9.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Especificação</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/pt-br/web/api/document/getelementsbyname/index.html b/files/pt-br/web/api/document/getelementsbyname/index.html
new file mode 100644
index 0000000000..8793259751
--- /dev/null
+++ b/files/pt-br/web/api/document/getelementsbyname/index.html
@@ -0,0 +1,90 @@
+---
+title: Document.getElementsByName()
+slug: Web/API/Document/getElementsByName
+translation_of: Web/API/Document/getElementsByName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">O método<strong><code>getElementsByName()</code></strong> do objeto {{domxref("Document")}} retorna uma coleção de elementos {{domxref("NodeList")}} com um dado {{domxref("element.name","name")}} no documento.</span></p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <var>elementos</var> = document.getElementsByName(<var>nome</var>);
+</pre>
+
+<ul>
+ <li><var>elementos</var> é uma coleção ativa de {{domxref("NodeList")}}, significando que ele atualiza automaticamente com os novos elementos com o mesmo <code>nome</code> que são adicionados/removidos do documento.</li>
+ <li><var>nome</var> é um valor do atributo <code>nome</code> dos elemento(s).</li>
+</ul>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;title&gt;Exemplo: usando document.getElementsByName&lt;/title&gt;
+
+&lt;input type="hidden" name="up"&gt;
+&lt;input type="hidden" name="down"&gt;
+
+&lt;script&gt;
+  var up_nomes = document.getElementsByName("up");
+  console.log(up_nomes[0].tagName); // exibindo o campo "INPUT"
+&lt;/script&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>O atributo {{domxref("element.name","name")}} pode somente ser aplicado nos documentos (X)HTML.</p>
+
+<p>A coleção retornada {{domxref("NodeList")}} contém <em>todos</em> os elementos com o respectivo <code>nome</code>, tal como {{htmlelement("meta")}}, {{htmlelement("object")}}, e até os elementos o qual não suporta o atributo <code>nome</code> para todos.</p>
+
+<div class="warning">
+<p>O método <strong>getElementsByName</strong> trabalha diferentemente em IE10 e anteriores. Além de que, <code>getElementsByName()</code> também retorna elementos que tem um <a href="/en-US/docs/Web/HTML/Global_attributes/id">atributo</a> <code><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></code> com o valor especificado. Seja cuidadoso para não usar a mesma string como ambos <code>nome</code> e <code>id</code>.</p>
+</div>
+
+<div class="warning">
+<p>O método <strong>getElementsByName</strong> trabalha diferentemente no IE. Portanto, <code>getElementsByName()</code> não retorna todos os elementos no qual não pode ter um atributo <code>nome</code> (tal como <code>&lt;span&gt;</code>).</p>
+</div>
+
+<div class="warning">
+<p>Ambos IE e Edge retorna um {{domxref("HTMLCollection")}}, e não um {{domxref("NodeList")}}</p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Epecificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</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>Definição Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_Nagevagores">Compatibilidade com Nagevagores</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada de dado estruturado. Se você gostaria de contribuir para os dados, por favor confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação.</div>
+
+<p>{{Compat("api.Document.getElementsByName")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("document.getElementById()")}} para retornar uma referência para um elemento por um único <code>id</code></li>
+ <li>{{domxref("document.getElementsByTagName()")}} para retornar referências para elementos com o mesmo <a href="/en-US/docs/Web/API/Element/tagName">nome</a> <a href="/en-US/docs/Web/API/Element/tagName">tag </a></li>
+ <li>{{domxref("document.querySelector()")}} para retornar referências para elementos via seletores CSS como <code>'div.myclass'</code></li>
+</ul>
diff --git a/files/pt-br/web/api/document/getelementsbytagname/index.html b/files/pt-br/web/api/document/getelementsbytagname/index.html
new file mode 100644
index 0000000000..3e786ed2f6
--- /dev/null
+++ b/files/pt-br/web/api/document/getelementsbytagname/index.html
@@ -0,0 +1,113 @@
+---
+title: Document.getElementsByTagName()
+slug: Web/API/Document/getElementsByTagName
+translation_of: Web/API/Document/getElementsByTagName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>O método getElementsByTagName da interface Document retorna um HTMLCollection de elementos com o nome da tag fornecido. O documento completo é pesquisado, incluindo o nó raiz. A HTMLCollection retornada é ao vivo, o que significa que ela se atualiza automaticamente para permanecer em sincronia com a árvore DOM sem ter que chamar document.getElementsByTagName () novamente.</p>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">O método </span></font><strong>getElementsByTagName</strong></code> da {{domxref("Document")}} interface <span class="seoSummary">returns an {{domxref("HTMLCollection")}} of elements with the given tag name.</span> The complete document is searched, including the root node. The returned <code>HTMLCollection</code> is live, meaning that it updates itself automatically to stay in sync with the DOM tree without having to call <code>document.getElementsByTagName()</code> again.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>elements</var> = document.getElementsByTagName(<var>name</var>);</pre>
+
+<ul>
+ <li><var>elements</var> is a live {{domxref("HTMLCollection")}} (but see the note below) of found elements in the order they appear in the tree.</li>
+ <li><var>name</var> is a string representing the name of the elements. The special string "*" represents all elements.</li>
+</ul>
+
+<div class="note"><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">The latest W3C specification</a> says <var>elements</var> is an <code>HTMLCollection</code>; however, this method returns a {{domxref("NodeList")}} in WebKit browsers. See {{bug(14869)}} for details.</div>
+
+<h2 id="Example">Example</h2>
+
+<p>In the following example, <code>getElementsByTagName()</code> starts from a particular parent element and searches top-down recursively through the DOM from that parent element, building a collection of all descendant elements which match the tag <code>name</code> parameter. This demonstrates both <code>document.getElementsByTagName()</code> and the functionally identical {{domxref("Element.getElementsByTagName()")}}, which starts the search at a specific element within the DOM tree.</p>
+
+<p>Clicking the buttons uses <code>getElementsByTagName()</code> to count the descendant paragraph elements of a particular parent (either the document itself or one of two nested {{HTMLElement("div")}} elements).</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;getElementsByTagName example&lt;/title&gt;
+  &lt;script&gt;
+    function getAllParaElems() {
+      var allParas = document.getElementsByTagName('p');
+      var num = allParas.length;
+      alert('There are ' + num + ' paragraph in this document');
+    }
+
+    function div1ParaElems() {
+      var div1 = document.getElementById('div1');
+      var div1Paras = div1.getElementsByTagName('p');
+      var num = div1Paras.length;
+      alert('There are ' + num + ' paragraph in #div1');
+    }
+
+    function div2ParaElems() {
+      var div2 = document.getElementById('div2');
+      var div2Paras = div2.getElementsByTagName('p');
+      var num = div2Paras.length;
+      alert('There are ' + num + ' paragraph in #div2');
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body style="border: solid green 3px"&gt;
+  &lt;p&gt;Some outer text&lt;/p&gt;
+  &lt;p&gt;Some outer text&lt;/p&gt;
+
+  &lt;div id="div1" style="border: solid blue 3px"&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+
+    &lt;div id="div2" style="border: solid red 3px"&gt;
+      &lt;p&gt;Some div2 text&lt;/p&gt;
+      &lt;p&gt;Some div2 text&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;p&gt;Some outer text&lt;/p&gt;
+  &lt;p&gt;Some outer text&lt;/p&gt;
+
+  &lt;button onclick="getAllParaElems();"&gt;
+    show all p elements in document&lt;/button&gt;&lt;br /&gt;
+
+  &lt;button onclick="div1ParaElems();"&gt;
+    show all p elements in div1 element&lt;/button&gt;&lt;br /&gt;
+
+  &lt;button onclick="div2ParaElems();"&gt;
+    show all p elements in div2 element&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>When called on an HTML document, <code>getElementsByTagName()</code> lower-cases its argument before proceeding. This is undesirable when trying to match camelCase SVG elements in a subtree in an HTML document. {{Domxref("document.getElementsByTagNameNS()")}} is useful in that case. See also {{Bug(499656)}}.</p>
+
+<p><code>document.getElementsByTagName()</code> is similar to {{domxref("Element.getElementsByTagName()")}}, except that its search encompasses the whole document.</p>
+
+<h2 id="Specifications">Specifications</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="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Document.getElementsByTagName")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Element.getElementsByTagName()")}}</li>
+ <li>{{domxref("document.getElementById()")}} to return a reference to an element by its <code>id</code></li>
+ <li>{{domxref("document.getElementsByName()")}} to return a reference to an element by its <code>name</code></li>
+ <li>{{domxref("document.querySelector()")}} for powerful selectors via queries like <code>'div.myclass'</code></li>
+</ul>
diff --git a/files/pt-br/web/api/document/getselection/index.html b/files/pt-br/web/api/document/getselection/index.html
new file mode 100644
index 0000000000..9a2aab76d5
--- /dev/null
+++ b/files/pt-br/web/api/document/getselection/index.html
@@ -0,0 +1,8 @@
+---
+title: Document.getSelection()
+slug: Web/API/Document/getSelection
+translation_of: Web/API/DocumentOrShadowRoot/getSelection
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Esse método funciona de forma idêntica ao método {{domxref("Window.getSelection()")}};  Ele retorna um objeto {{domxref("Selection")}} representando o texto atualmente selecionado no documento.</p>
diff --git a/files/pt-br/web/api/document/hasfocus/index.html b/files/pt-br/web/api/document/hasfocus/index.html
new file mode 100644
index 0000000000..0d238ec062
--- /dev/null
+++ b/files/pt-br/web/api/document/hasfocus/index.html
@@ -0,0 +1,146 @@
+---
+title: Document.hasFocus()
+slug: Web/API/Document/hasFocus
+tags:
+  - API
+  - Compatibilidade
+  - DOM
+  - Focus
+  - Referencia
+  - metodo
+translation_of: Web/API/Document/hasFocus
+---
+<div>{{APIRef}}</div>
+
+<div>O método <code><strong>Document.hasFocus()</strong></code> retorna um valor {{jsxref("Boolean")}} que indica se o documento ou qualquer elemento dentro do documento está com o foco ativo. Este método pode ser usado para determinar se o elemento ativo em um documento tem foco.</div>
+
+<div class="note">
+<p>Quando se está visualizando um documento, um elemento com focus é sempre o ativo no mesmo, mas um elemento ativo não necessariamente tem o foco. Por exemplo, um elemento ativo com uma janela (popup) que não é a principal não tem foco.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">focused = document.hasFocus();</pre>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p><code>false</code> se o elemento ativo no documento não tem foco; <code>true</code> se o elemento ativo no documento tem foco.</p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:html;highlight:[17]">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;TEST&lt;/title&gt;
+&lt;style&gt;
+#message { font-weight: bold; }
+&lt;/style&gt;
+&lt;script&gt;
+setInterval( checkPageFocus, 200 );
+
+function checkPageFocus() {
+  var info = document.getElementById("message");
+
+  if ( document.hasFocus() ) {
+    info.innerHTML = "O documento tem o foco.";
+  } else {
+    info.innerHTML = "O documento não tem o foco.";
+  }
+}
+
+function openWindow() {
+  window.open (
+    "http://developer.mozilla.org/",
+    "mozdev",
+    "width=640,
+    height=300,
+    left=150,
+    top=260"
+  );
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Exemplo do JavaScript hasFocus&lt;/h1&gt;
+  &lt;div id="message"&gt;Esperando por ação do usuário&lt;/div&gt;
+  &lt;div&gt;&lt;button onclick="openWindow()"&gt;Abre uma nova janela&lt;/button&gt;&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>30</td>
+   <td>{{ CompatGeckoDesktop("1.9") }}</td>
+   <td>6.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1.9") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API">Usando a API de Page Visibility</a></li>
+</ul>
diff --git a/files/pt-br/web/api/document/head/index.html b/files/pt-br/web/api/document/head/index.html
new file mode 100644
index 0000000000..af0331459f
--- /dev/null
+++ b/files/pt-br/web/api/document/head/index.html
@@ -0,0 +1,102 @@
+---
+title: Document.head
+slug: Web/API/Document/head
+translation_of: Web/API/Document/head
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Retorna o elemento {{HTMLElement("head")}} do documento atual. Se existir mais de um elemento <code>&lt;head&gt;</code>, apenas o primeiro será devolvido.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>var objRef</em> = document.head;
+</pre>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush: js">// No HTML: &lt;head id="my-document-head"&gt;
+var aHead = document.head;
+
+alert(aHead.id); // "my-document-head";
+
+alert( document.head === document.querySelector("head") ); // true
+</pre>
+
+<h2 id="Example" name="Example">Notas</h2>
+
+<p><code>document.head</code> suporta apenas leitura. Qualquer tentativa de atribuir um valor a essa propriedade irá falhar silenciosamente ou irá, usando o modo <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">ECMAScript Strict</a> de um browser Gecko, disparar um <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError"><code>TypeError</code></a>.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "dom.html#dom-tree-accessors", "document.head")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_Browsers">Compatibilidade entre Browsers</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>4.0</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Veja_Também">Veja Também</h2>
+
+<ul>
+ <li>{{domxref("document.body")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/document/height/index.html b/files/pt-br/web/api/document/height/index.html
new file mode 100644
index 0000000000..5dedba8f99
--- /dev/null
+++ b/files/pt-br/web/api/document/height/index.html
@@ -0,0 +1,44 @@
+---
+title: Document.height
+slug: Web/API/Document/height
+translation_of: Web/API/Document/height
+---
+<div>{{APIRef("DOM")}} {{Obsolete_header}}</div>
+
+<div class="note">
+<p><strong>Nota:</strong> A partir do {{Gecko("6.0")}},<code> document.height </code> não é mais suportado. Em seu lugar use <code>document.body.clientHeight</code>. Veja {{domxref("element.clientHeight")}}.</p>
+</div>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>Retorna a altura do objeto {{domxref("document")}}. Em muitos casos, isto é igual à do elemento {{HTMLElement("body")}} do documento atual.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>height_value</em> = document.height
+</pre>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">// alert document height
+alert(document.height);
+</pre>
+
+<h2 id="Alternativas">Alternativas</h2>
+
+<pre class="syntaxbox">document.body.clientHeight
+document.documentElement.clientHeight
+document.documentElement.scrollHeight
+</pre>
+
+<h2 id="Especificação">Especificação</h2>
+
+<p>HTML5</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("document.width")}}</li>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("Element.scrollHeight")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/document/images/index.html b/files/pt-br/web/api/document/images/index.html
new file mode 100644
index 0000000000..f5021122a9
--- /dev/null
+++ b/files/pt-br/web/api/document/images/index.html
@@ -0,0 +1,38 @@
+---
+title: Document.images
+slug: Web/API/Document/images
+translation_of: Web/API/Document/images
+---
+<div>
+<div>{{ ApiRef("DOM") }}</div>
+</div>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p><code>document.images</code> retorna uma coleção de <a href="/en-US/docs/DOM/Image" title="DOM/Image">imagens</a> do documento HTML.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>var htmlCollection</em> = document.images;</pre>
+
+<h2 id="Example" name="Example">Exemplo</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">Notas</h2>
+
+<p><code>document.images.length</code> – propriedade, retorna o número de imagens na página.</p>
+
+<p><code>document.images</code> é parte do DOM HTML, e só trabalho com documentos HTML.</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117">DOM Level 2 HTML: HTMLDocument.images</a></li>
+</ul>
diff --git a/files/pt-br/web/api/document/implementation/index.html b/files/pt-br/web/api/document/implementation/index.html
new file mode 100644
index 0000000000..2f7b5ca992
--- /dev/null
+++ b/files/pt-br/web/api/document/implementation/index.html
@@ -0,0 +1,52 @@
+---
+title: Document.implementation
+slug: Web/API/Document/implementation
+tags:
+  - API
+  - DOM
+  - Propriedade
+  - Referencia
+translation_of: Web/API/Document/implementation
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>Retorna um objeto {{domxref("DOMImplementation")}} associado ao documento atual.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>DOMImpObj</var> = document.implementation;
+</pre>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">var modName = "HTML";
+var modVer = "2.0";
+var conformTest = document.implementation.hasFeature( modName, modVer );
+
+alert( "DOM " + modName + " " + modVer + " supported?: " + conformTest );
+
+// alerts with: "DOM HTML 2.0 supported?: true" if DOM Level 2 HTML module is supported.
+</pre>
+
+<p>Uma lista dos nomes de módulos (ex., Core, HTML, XML, etc) está disponível na DOM Level 2 <a href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance-h2">Conformance Section</a></p>
+
+<h2 id="Notas">Notas</h2>
+
+<p>A Recomendação do W3C DOM Level 1 apenas especifica o método <code>hasFeature</code>, que é o único meio de verificar se o módulo DOM é suportado pelo navegador (veja exemplo acima e <a href="http://www.w3.org/2003/02/06-dom-support.html">What does your user agent claim to support?</a>). Quando disponível, outros métodos <code>DOMImplementation</code> proverão serviços para controlar coisas fora deste único documento. Por exemplo, a interface <code>DOMImplementation</code> inclui um método <code>createDocumentType</code> com o qual DTD's podem ser criados para um ou mais documentos gerenciados pela implementação.</p>
+
+<h2 id="Especificação">Especificação</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-102161490">DOM Level 2 Core: implementation</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-102161490">DOM Level 3 Core: implementation</a></li>
+</ul>
+
+<h2 id="Notas_específicas_para_o_Gecko">Notas específicas para o Gecko</h2>
+
+<ul>
+ <li>À partir do Gecko 19.0 {{geckoRelease("19.0")}} o método {{domxref("DOMImplementation.hasFeature","hasFeature")}} irá sempre retornar <em>true</em>.</li>
+</ul>
diff --git a/files/pt-br/web/api/document/importnode/index.html b/files/pt-br/web/api/document/importnode/index.html
new file mode 100644
index 0000000000..831879f58f
--- /dev/null
+++ b/files/pt-br/web/api/document/importnode/index.html
@@ -0,0 +1,84 @@
+---
+title: Document.importNode()
+slug: Web/API/Document/importNode
+translation_of: Web/API/Document/importNode
+---
+<p id="Summary">{{APIRef("DOM")}}</p>
+
+<p>Cria uma cópia de um nó a partir de um documento externo para ser inserido no document atual.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>node</em> = <em>document</em>.importNode(<em>externalNode</em>, <em>deep</em>);
+</pre>
+
+<dl>
+ <dt><code>node</code></dt>
+ <dd><code>O novo nó que será importado no documento. A propriedade <a href="/en-US/docs/DOM/Node.parentNode" title="DOM/Node.parentNode">parentNode</a> do novo nó é null, desde que ele não foi inserido na árvores do documento.</code></dd>
+ <dt><code>externalNode</code></dt>
+ <dd><code>O nó de outro documento para ser importado.</code></dd>
+ <dt><code>deep</code></dt>
+ <dd><code>Um boolean, indicando se os nós filhos, do nó a ser importado, devem ser importados também.</code></dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> In the DOM4 specification (as implemented in Gecko 13.0 {{geckoRelease(13)}}), <code>deep</code> is an optional argument. If omitted, the method acts as if the value of <code>deep</code> was <strong><code>true</code></strong>, defaulting to using deep cloning as the default behavior. To create a shallow clone, <code>deep</code> must be set to <code>false</code>.</p>
+
+<p>This behavior has been changed in the latest spec, and if omitted, the method will act as if the value of <code>deep</code> was <strong><code>false</code></strong>. Though It's still optional, you should always provide the <code>deep</code> argument both for backward and forward compatibility. With Gecko 28.0 {{geckoRelease(28)}}, the console warned developers not to omit the argument. Starting with Gecko 29.0 {{geckoRelease(29)}}), a shallow clone is defaulted instead of a deep clone.</p>
+</div>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush: js">var iframe = document.getElementsByTagName("iframe")[0];
+var oldNode = iframe.contentWindow.document.getElementById("myNode");
+var newNode = document.importNode(oldNode, true);
+document.getElementById("container").appendChild(newNode);
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>O nó original não é removido do documento de origem. O nó importado é um clone do original.</p>
+
+<p> </p>
+
+<p>Nodes from external documents should be cloned using <a href="/pt-BR/docs/Web/API/Document/importNode" title="Cria uma cópia de um nó a partir de um documento externo para ser inserido no document atual."><code>document.importNode()</code></a> (or adopted using <a class="new" href="/pt-BR/docs/Web/API/Document/adoptNode" rel="nofollow" title="A documentação sobre isto ainda não foi escrita; por favor considere contribuir!"><code>document.adoptNode()</code></a>) before they can be inserted into the current document. For more on the <a class="new" href="/pt-BR/docs/Web/API/Node/ownerDocument" rel="nofollow" title="A documentação sobre isto ainda não foi escrita; por favor considere contribuir!"><code>Node.ownerDocument</code></a> issues, see the <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p>
+
+<p>Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for improved future compatibility.</p>
+
+<p> </p>
+
+<h2 id="Especificação">Especificação</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", "#dom-document-importnode", "document.importNode()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade nos Browsers</h2>
+
+<div>
+
+
+<p>{{Compat("api.Document.importNode")}}</p>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("document.adoptNode()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/document/index.html b/files/pt-br/web/api/document/index.html
new file mode 100644
index 0000000000..1fc11a79ba
--- /dev/null
+++ b/files/pt-br/web/api/document/index.html
@@ -0,0 +1,402 @@
+---
+title: Document
+slug: Web/API/Document
+translation_of: Web/API/Document
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div></div>
+
+<p>Para cada página carregada no browser, existe um objeto <code><strong>Document</strong></code>. A interface <code>Document</code> serve como um ponto de entrada para o conteúdo da Página ( a árvore DOM, incluindo elementos como {{HTMLElement("body")}} e {{HTMLElement("table")}}) e provê funcionalidades globais ao documento (como obter a URL da página e criar novos elementos no documento).</p>
+
+<p>{{inheritanceDiagram}}</p>
+
+<p>Um objeto document pode ser obtido por meio de várias APIs:</p>
+
+<ul>
+ <li>A mais comum; você trabalha com o script do documento que está rodando o script com o objeto document. (O mesmo document também pode ser referenciado como {{domxref("window.document")}}.)</li>
+ <li>O documento de um iframe através da propriedade <code><a href="/en-US/docs/Web/API/HTMLIFrameElement#Properties" title="DOM/HTMLIFrameElement#Properties">contentDocument</a>.</code></li>
+ <li>O <a href="/en-US/docs/Web/API/XMLHttpRequest#responseXML" title="XMLHttpRequest#responseXML"><code>responseXML</code> de um objeto <code>XMLHttpRequest</code></a>.</li>
+ <li>O documento ao qual um determinado node ou elemento pertence pode ser recuperado usando a propriedade do node {{domxref("Node.ownerDocument","ownerDocument")}}</li>
+</ul>
+
+<p>Dependendo do tipo do documento (e.g. <a href="/en-US/docs/HTML" title="HTML">HTML</a> ou <a href="/en-US/docs/XML" title="XML">XML</a>), diferentes APIs estarão disponívels no objeto <code><strong>Document</strong></code>.</p>
+
+<p>Todo objeto <strong><code>Document</code></strong> implementa a interface <code><a href="http://dom.spec.whatwg.org/#interface-document">Document</a> (e consequentemente as interfaces </code>{{domxref("Node")}} e {{domxref("EventTarget")}}<code>). Portanto, as principais propriedades e métodos documentados nesta página estarão disponíveis para todos os tipos de documents.</code></p>
+
+<ul>
+ <li>Em navegadores mais atuais, alguns documentos (ex: aqueles que são servidos com o Content-Type <code>text/html</code>) também implementam a interface {{domxref("HTMLDocument")}}.</li>
+ <li>Em navegadores mais atuais, documentos SVG implementam a interface {{domxref("SVGDocument")}}.</li>
+</ul>
+
+<p>No futuro, todas essas interfaces irão ser divididas na interface <code>Document</code>.</p>
+
+<h2 id="Properties" name="Properties">Propriedades</h2>
+
+<div class="note">
+<p><strong>Nota:</strong> A interface <code>Document</code> também herda das interfaces {{domxref("Node")}} e {{domxref("EventTarget")}}.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt>
+ <dd>Da acesso a todos os elementos do documento.È uma interface legada não padrão, voce deve usar o método {{domxref("Document.getElementById()")}} como alternativa.</dd>
+ <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt>
+ <dd>Usado como {{domxref("document.load")}} que indica uma requisição asyncroma.</dd>
+ <dt>{{domxref("Document.characterSet")}} {{experimental_inline}}</dt>
+ <dd>Retorna a codificação de caracteres que está sendo usado pelo documento.</dd>
+ <dt>{{domxref("Document.compatMode")}} {{experimental_inline}}</dt>
+ <dd>indica se o documento é renderizado no modo Quirks ou Strict.</dd>
+ <dt>{{domxref("Document.contentType")}} {{experimental_inline}}</dt>
+ <dd>Retorna o tipo de conteúdo do cabeçalho MIME do documento atual.</dd>
+ <dt>{{domxref("Document.doctype")}}</dt>
+ <dd>Retorna o nome do tipo de conteudo do documento HTML.</dd>
+ <dt>{{domxref("Document.documentElement")}}</dt>
+ <dd>Returns the Element that is a direct child of the document. For HTML documents, this is normally the HTML element.</dd>
+ <dt>{{domxref("Document.documentURI")}}</dt>
+ <dd>Returns the document URL.</dd>
+ <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt>
+ <dd>Should return a {{domxref("DOMConfiguration")}} object.</dd>
+ <dt>{{domxref("Document.implementation")}}</dt>
+ <dd>Returns the DOM implementation associated with the current document.</dd>
+ <dt>{{domxref("Document.inputEncoding")}} {{Deprecated_inline}}</dt>
+ <dd>Returns the encoding used when the document was parsed.</dd>
+ <dt>{{domxref("Document.lastStyleSheetSet")}}</dt>
+ <dd>Returns the name of the style sheet set that was last enabled. Has the value <code>null</code> until the style sheet is changed by setting the value of {{domxref("Document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd>
+ <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt>
+ <dd><code>true</code> if this document is synthetic, such as a standalone image, video, audio file, or the like.</dd>
+ <dt>{{domxref("Document.mozFullScreen")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd><code>true</code> when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.</dd>
+ <dt>{{domxref("Document.mozFullScreenElement")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd>The element that's currently in full screen mode for this document.</dd>
+ <dt>{{domxref("Document.mozFullScreenEnabled")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd><code>true</code> if calling {{domxref("element.mozRequestFullscreen()")}} would succeed in the curent document.</dd>
+ <dt>{{domxref("Document.pointerLockElement")}} {{experimental_inline}}</dt>
+ <dd>Returns the element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another document.</dd>
+ <dt>{{domxref("Document.preferredStyleSheetSet")}}</dt>
+ <dd>Returns the preferred style sheet set as specified by the page author.</dd>
+ <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt>
+ <dd>Returns which style sheet set is currently in use.</dd>
+ <dt>{{domxref("Document.styleSheets")}}</dt>
+ <dd>Returns a list of the style sheet objects on the current document.</dd>
+ <dt>{{domxref("Document.styleSheetSets")}}</dt>
+ <dd>Returns a list of the style sheet sets available on the document.</dd>
+ <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt>
+ <dd>Returns the encoding as determined by the XML declaration.</dd>
+ <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>Returns <code>true</code> if the XML declaration specifies the document to be standalone (<em>e.g.,</em> An external part of the DTD affects the document's content), else <code>false</code>.</dd>
+ <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>Returns the version number as specified in the XML declaration or <code>"1.0"</code> if the declaration is absent.</dd>
+</dl>
+
+<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p>
+
+<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p>
+
+<h3 id="Extension_for_HTML_documents">Extension for HTML documents</h3>
+
+<p>The <code>Document</code> interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5,  is extended for such documents:</p>
+
+<dl>
+ <dt>{{domxref("Document.activeElement")}}</dt>
+ <dd>Returns the currently focused element.</dd>
+ <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Returns or sets the color of active links in the document body.</dd>
+ <dt>{{domxref("Document.anchors")}}</dt>
+ <dd>Returns a list of all of the anchors in the document.</dd>
+ <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt>
+ <dd>Returns an ordered list of the applets within a document.</dd>
+ <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the background color of the current document.</dd>
+ <dt>{{domxref("Document.body")}}</dt>
+ <dd>Returns the {{HTMLElement("body")}} element of the current document.</dd>
+ <dt>{{domxref("Document.cookie")}}</dt>
+ <dd>Returns a semicolon-separated list of the cookies for that document or sets a single cookie.</dd>
+ <dt>{{domxref("Document.defaultView")}}</dt>
+ <dd>Returns a reference to the window object.</dd>
+ <dt>{{domxref("Document.designMode")}}</dt>
+ <dd>Gets/sets the ability to edit the whole document.</dd>
+ <dt>{{domxref("Document.dir")}}</dt>
+ <dd>Gets/sets directionality (rtl/ltr) of the document.</dd>
+ <dt>{{domxref("Document.domain")}}</dt>
+ <dd>Returns the domain of the current document.</dd>
+ <dt>{{domxref("Document.embeds")}}</dt>
+ <dd>Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.</dd>
+ <dt>{{domxref("Document.fgColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the foreground color, or text color, of the current document.</dd>
+ <dt>{{domxref("Document.forms")}}</dt>
+ <dd>Returns a list of the {{HTMLElement("form")}} elements within the current document.</dd>
+ <dt>{{domxref("Document.head")}}</dt>
+ <dd>Returns the {{HTMLElement("head")}} element of the current document.</dd>
+ <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Gets/sets the height of the current document.</dd>
+ <dt>{{domxref("Document.images")}}</dt>
+ <dd>Returns a list of the images in the current document.</dd>
+ <dt>{{domxref("Document.lastModified")}}</dt>
+ <dd>Returns the date on which the document was last modified.</dd>
+ <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the color of hyperlinks in the document.</dd>
+ <dt>{{domxref("Document.links")}}</dt>
+ <dd>Returns a list of all the hyperlinks in the document.</dd>
+ <dt>{{domxref("Document.location")}}</dt>
+ <dd>Returns the URI of the current document.</dd>
+ <dt>{{domxref("Document.plugins")}}</dt>
+ <dd>Returns a list of the available plugins.</dd>
+ <dt>{{domxref("Document.readyState")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns loading status of the document.</dd>
+ <dt>{{domxref("Document.referrer")}}</dt>
+ <dd>Returns the URI of the page that linked to this page.</dd>
+ <dt>{{domxref("Document.scripts")}}</dt>
+ <dd>Returns all the {{HTMLElement("script")}} elements on the document.</dd>
+ <dt>{{domxref("Document.title")}}</dt>
+ <dd>Returns the title of the current document.</dd>
+ <dt>{{domxref("Document.URL")}}</dt>
+ <dd>Returns a string containing the URL of the current document.</dd>
+ <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Gets/sets the color of visited hyperlinks.</dd>
+ <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns the width of the current document.</dd>
+</dl>
+
+<h3 id="Event_handlers" name="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("pointerlockchange")}} event.</dd>
+ <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("pointerlockerror")}} event.</dd>
+ <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns the event handling code for the <code>readystatechange</code> event.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<div class="note">
+<p><strong>Note:</strong> The <code>Document</code> interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("Document.adoptNode","Document.adoptNode(Node node)")}}</dt>
+ <dd>Adopt node from an external document.</dd>
+ <dt>{{domxref("Document.captureEvents","Document.captureEvents(String eventName)")}} {{Deprecated_inline}}</dt>
+ <dd>See {{domxref("window.captureEvents")}}.</dd>
+ <dt>{{domxref("Document.caretPositionFromPoint","Document.caretPositionFromPoint(Number x, Number y)")}}</dt>
+ <dd>Gets a {{domxref("CaretPosition")}} based on two coordinates.</dd>
+ <dt>{{domxref("Document.createAttribute","Document.createAttribute(String name)")}}</dt>
+ <dd>Creates a new {{domxref("Attr")}} object and returns it.</dd>
+ <dt>{{domxref("Document.createAttributeNS","Document.createAttributeNS(String namespace, String name)")}}</dt>
+ <dd>Creates a new attribute node in a given namespace and returns it.</dd>
+ <dt>{{domxref("Document.createCDATASection","Document.createCDATASection(String data)")}}</dt>
+ <dd>Creates a new CDATA node and returns it.</dd>
+ <dt>{{domxref("Document.createComment","Document.createComment(String comment)")}}</dt>
+ <dd>Creates a new comment node and returns it.</dd>
+ <dt>{{domxref("Document.createDocumentFragment()")}}</dt>
+ <dd>Creates a new document fragment.</dd>
+ <dt>{{domxref("Document.createElement","Document.createElement(String name)")}}</dt>
+ <dd>Creates a new element with the given tag name.</dd>
+ <dt>{{domxref("Document.createElementNS","Document.createElementNS(String namespace, String name)")}}</dt>
+ <dd>Creates a new element with the given tag name and namespace URI.</dd>
+ <dt>{{domxref("Document.createEntityReference","Document.createEntityReference(String name)")}} {{obsolete_inline}}</dt>
+ <dd>Creates a new entity reference object and returns it.</dd>
+ <dt>{{domxref("Document.createEvent","Document.createEvent(String interface)")}}</dt>
+ <dd>Creates an event object.</dd>
+ <dt>{{domxref("Document.createNodeIterator","Document.createNodeIterator(Node root[, Number whatToShow[, NodeFilter filter]])")}}</dt>
+ <dd>Creates a {{domxref("NodeIterator")}} object.</dd>
+ <dt>{{domxref("Document.createProcessingInstruction","Document.createProcessingInstruction(String target, String data)")}}</dt>
+ <dd>Creates a new {{domxref("ProcessingInstruction")}} object.</dd>
+ <dt>{{domxref("Document.createRange()")}}</dt>
+ <dd>Creates a {{domxref("Range")}} object.</dd>
+ <dt>{{domxref("Document.createTextNode","Document.createTextNode(String text)")}}</dt>
+ <dd>Creates a text node.</dd>
+ <dt>{{domxref("Document.createTreeWalker","Document.createTreeWalker(Node root[, Number whatToShow[, NodeFilter filter]])")}}</dt>
+ <dd>Creates a {{domxref("TreeWalker")}} object.</dd>
+ <dt>{{domxref("Document.elementFromPoint","Document.elementFromPoint(Number x, Number y)")}}</dt>
+ <dd>Returns the element visible at the specified coordinates.</dd>
+ <dt>{{domxref("Document.enableStyleSheetsForSet","Document.enableStyleSheetsForSet(String name)")}}</dt>
+ <dd>Enables the style sheets for the specified style sheet set.</dd>
+ <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>Release the pointer lock.</dd>
+ <dt>{{domxref("Document.getElementsByClassName","Document.getElementsByClassName(String className)")}}</dt>
+ <dd>Returns a list of elements with the given class name.</dd>
+ <dt>{{domxref("Document.getElementsByTagName","Document.getElementsByTagName(String tagName)")}}</dt>
+ <dd>Returns a list of elements with the given tag name.</dd>
+ <dt>{{domxref("Document.getElementsByTagNameNS","Document.getElementsByTagNameNS(String namespace, String tagName)")}}</dt>
+ <dd>Returns a list of elements with the given tag name and namespace.</dd>
+ <dt>{{domxref("Document.importNode","Document.importNode(Node node, Boolean deep)")}}</dt>
+ <dd>Returns a clone of a node from an external document.</dd>
+ <dt>{{domxref("document.mozSetImageElement")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Allows you to change the element being used as the background image for a specified element ID.</dd>
+ <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt>
+ <dd>Replaces entities, normalizes text nodes, etc.</dd>
+ <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Releases the current mouse capture if it's on an element in this document.</dd>
+ <dt>{{domxref("Document.releaseEvents")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>See {{domxref("window.releaseEvents")}}.</dd>
+ <dt>{{domxref("document.routeEvent")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt>
+ <dd>See {{domxref("window.routeEvent")}}.</dd>
+</dl>
+
+<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p>
+
+<dl>
+ <dt>{{domxref("Document.getElementById","Document.getElementById(String id)")}}</dt>
+ <dd>Returns an object reference to the identified element.</dd>
+ <dt>{{domxref("Document.querySelector","Document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Returns the first Element node within the document, in document order, that matches the specified selectors.</dd>
+ <dt>{{domxref("Document.querySelectorAll","Document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Returns a list of all the Element nodes within the document that match the specified selectors.</dd>
+</dl>
+
+<p>The <code>Document</code> interface is extended with the {{domxref("XPathEvaluator")}} interface:</p>
+
+<dl>
+ <dt>{{domxref("Document.createExpression","Document.createExpression(String expression, XPathNSResolver resolver)")}}</dt>
+ <dd>Compiles an <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> which can then be used for (repeated) evaluations.</dd>
+ <dt>{{domxref("Document.createNSResolver","Document.createNSResolver(Node resolver)")}}</dt>
+ <dd>Creates an {{domxref("XPathNSResolver")}} object.</dd>
+ <dt>{{domxref("Document.evaluate","Document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt>
+ <dd>Evaluates an XPath expression.</dd>
+</dl>
+
+<h3 id="Extension_for_HTML_documents_2">Extension for HTML documents</h3>
+
+<p>The <code>Document</code> interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5,  is extended for such documents:</p>
+
+<dl>
+ <dt>{{domxref("Document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd>
+ <dt>{{domxref("Document.close()")}}</dt>
+ <dd>Closes a document stream for writing.</dd>
+ <dt>{{domxref("Document.execCommand","Document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt>
+ <dd>On an editable document, executes a formating command.</dd>
+ <dt>{{domxref("Document.getElementsByName","Document.getElementsByName(String name)")}}</dt>
+ <dd>Returns a list of elements with the given name.</dd>
+ <dt>{{domxref("Document.getSelection()")}}</dt>
+ <dd>Returns a {{domxref("Selection")}} object related to text selected in the document.</dd>
+ <dt>{{domxref("Document.hasFocus()")}}</dt>
+ <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd>
+ <dt>{{domxref("Document.open()")}}</dt>
+ <dd>Opens a document stream for writing.</dd>
+ <dt>{{domxref("Document.queryCommandEnabled","Document.queryCommandEnabled(String command)")}}</dt>
+ <dd>Returns true if the formating command can be executed on the current range.</dd>
+ <dt>{{domxref("Document.queryCommandIndeterm","Document.queryCommandIndeterm(String command)")}}</dt>
+ <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd>
+ <dt>{{domxref("Document.queryCommandState","Document.queryCommandState(String command)")}}</dt>
+ <dd>Returns true if the formating command has been executed on the current range.</dd>
+ <dt>{{domxref("Document.queryCommandSupported","Document.queryCommandSupported(String command)")}}</dt>
+ <dd>Returns true if the formating command is supported on the current range.</dd>
+ <dt>{{domxref("Document.queryCommandValue","Document.queryCommandValue(String command)")}}</dt>
+ <dd>Returns the current value of the current range for a formatting command.</dd>
+ <dt>{{domxref("Document.registerElement","Document.registerElement(String tagname[, Object options])")}}</dt>
+ <dd>Registers a new custom element in the browser and returns a constructor for the new element.</dd>
+ <dt>{{domxref("Document.write","Document.write(String text)")}}</dt>
+ <dd>Writes text in a document.</dd>
+ <dt>{{domxref("Document.writeln","Document.writeln(String text)")}}</dt>
+ <dd>Writes a line of text in a document.</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('DOM1','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition for the interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Supersede DOM 1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Supersede DOM 2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Intend to supersede DOM 3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Turn the {{domxref("HTMLDocument")}} interface into a <code>Document</code> extension.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td>
+   <td>{{Spec2('DOM3 XPath')}}</td>
+   <td>Define the {{domxref("XPathEvaluator")}} interface which extend <code>Document</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Extend the <code>Document</code> interface</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<h3 id="Firefox_notes">Firefox notes</h3>
+
+<p>Mozilla defines a set of non-standard properties made only for XUL content:</p>
+
+<dl>
+ <dt>{{domxref("document.currentScript")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Returns the {{HTMLElement("script")}} element that is currently executing.</dd>
+ <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>(<strong>Mozilla add-ons only!</strong>) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd>
+ <dt>{{domxref("document.popupNode")}}</dt>
+ <dd>Returns the node upon which a popup was invoked.</dd>
+ <dt>{{domxref("document.tooltipNode")}}</dt>
+ <dd>Returns the node which is the target of the current tooltip.</dd>
+</dl>
+
+<p>Mozilla also define some non-standard methods:</p>
+
+<dl>
+ <dt>{{domxref("Document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt>
+ <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd>
+ <dt>{{domxref("Document.getBoxObjectFor")}} {{obsolete_inline}}</dt>
+ <dd>Use the {{domxref("Element.getBoundingClientRect()")}} method instead.</dd>
+ <dt>{{domxref("Document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}</dt>
+ <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd>
+ <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt>
+ <dd>This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd>
+</dl>
+
+<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3>
+
+<p>Microsoft defines some non-standard properties:</p>
+
+<dl>
+ <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd>
+ <dt><span style="font-weight: normal; line-height: 1.5;">Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</span></dt>
+</dl>
+
+<dl>
+ <dt>{{domxref("document.contains")}}</dt>
+ <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd>
+</dl>
diff --git a/files/pt-br/web/api/document/keydown_event/index.html b/files/pt-br/web/api/document/keydown_event/index.html
new file mode 100644
index 0000000000..4abd69eab7
--- /dev/null
+++ b/files/pt-br/web/api/document/keydown_event/index.html
@@ -0,0 +1,178 @@
+---
+title: keydown
+slug: Web/API/Document/keydown_event
+translation_of: Web/API/Document/keydown_event
+---
+<p>O evento <code>keydown</code> é disparado quando uma tecla é pressionada. Diferente do evento <code><a href="/en-US/docs/Web/Events/keypress">keypress</a></code>, o <code>keydown</code> é disparado para teclas que produzem e que não produzem um caractere.</p>
+
+<h2 id="Informações_gerais">Informações gerais</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Especificação</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;"><a href="/en-US/docs/DOM/KeyboardEvent" title="/en-US/docs/DOM/KeyboardEvent">KeyboardEvent</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Burbulha</dt>
+ <dd style="margin: 0 0 0 120px;">Sim</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt>
+ <dd style="margin: 0 0 0 120px;">Sim</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Alvo</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Ação Padrão</dt>
+ <dd style="margin: 0 0 0 120px;">Variações: evento <code>keypress</code>; carrega sistema de composição de texto; eventos <code>blur</code> e <code>focus</code>; evento <code>DOMActivate</code>; outro evento</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriedade</th>
+   <th scope="col">Tipo</th>
+   <th scope="col">Descrição</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>O alvo do evento (o alvo de nível mais alto na árvore DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>DOMString</td>
+   <td>O tipo do evento.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Se o evento normalmente burbulha ou não</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Se o evento é cancelável ou não</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>WindowProxy</td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> do documento)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget (elemento DOM)</td>
+   <td>Elemento focado processando o evento, elemento raiz se nenhum elemento input adequado está focado.</td>
+  </tr>
+  <tr>
+   <td><code>char</code> {{readonlyInline}}</td>
+   <td>DOMString (string)</td>
+   <td>O caractere correspondente à tecla. Se a tecla corresponde a um caractere imprimível, este valor é uma string Unicode não vazia, contendo o caractere. Se a tecla não tem uma representação imprimível, o valor é uma string vazia. Veja <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> para detalhes.
+    <div class="note"><strong>Nota:</strong> Se a tecla for usada como uma macro que insere múltiplos caracteres, o valor deste atributo é toda a string, não apenas o primeiro caractere.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>key</code> {{readonlyInline}}</td>
+   <td>DOMString (string)</td>
+   <td>O valor da tecla pressionada. Se a tecla tem uma representação imprimível, o valor deste atributo é o mesmo do atributo <code>char</code>. Caso contrário, é uma das strings key especificadas em <a href="/en-US/docs/Web/API/KeyboardEvent/key/Key_Values">Key Values</a>. Se a tecla não pode ser identificada, o valor do atributo é a string "Unidentified". Veja <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> para detalhes. Somente Leitura.</td>
+  </tr>
+  <tr>
+   <td><code>code</code> {{readonlyInline}}</td>
+   <td>DOMString (string)</td>
+   <td>Mantém uma string que identifica a tecla física sendo pressionada. O valor não é afetado pelo layout atual do teclado ou estado de modificador, portando uma tecla particular sempre retornará o mesmo valor. </td>
+  </tr>
+  <tr>
+   <td><code>charCode</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>O número de referência Unicode da tecla; este atributo é usado somente pelo evento <a href="/en-US/docs/Mozilla_event_reference/keypress"><code>keypress</code></a>. Para teclas cujo atributo <code>char</code> contém múltiplos caracteres, este é o valor Unicode do primeiro caractere daquele atributo.
+    <div class="warning"><strong>Aviso:</strong> Este atributo está obsoleto; você deve usar <code>char</code> no lugar, se disponível.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>keyCode</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>Um código numérico, dependente do sistema e da implementação, identificando o valor não modificado da tecla pressionada. Este é usualmente o código decimal ASCII ({{ RFC(20) }}) ou código Windows 1252 correspondente à tecla; veja {{ anch("Virtual key codes") }} para uma lista de valores comuns. Se a tecla não pode ser identificada, este valor é 0.
+    <div class="warning"><strong>Aviso:</strong> Este atributo está obsoleto; você deve usar <code>key</code> no lugar, se disponível.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>which</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>Um código numérico, dependente do sistema e da implementação, identificando o valor não modificado da tecla pressionada; este é usualmente o mesmo que <code>keyCode</code>.
+    <div class="warning"><strong>Aviso:</strong> Este atributo está obsoleto; você deve usar <code>key</code> no lugar, se disponível.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>location</code> {{readonlyInline}}</td>
+   <td>long (float)</td>
+   <td>A localização da tecla no dispositivo.</td>
+  </tr>
+  <tr>
+   <td><code>repeat</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> se a tecla foi pressionada tempo suficiente para disparar repetição de tecla, <code>false</code> caso contrário.</td>
+  </tr>
+  <tr>
+   <td><code>locale</code> {{readonlyInline}}</td>
+   <td>string</td>
+   <td>O código do idioma para o evento, se disponível; uma string vazia caso contrário.</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> se a tecla control estava pressionada quando o evento foi disparado. <code>false</code> caso contrário.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> se a tecla shift estava pressionada quando o evento foi disparado. <code>false</code> caso contrário.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> se a tecla alt estava pressionada quando o evento foi disparado. <code>false</code> caso contrário.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> se a tecla meta estava pressionada quando o evento foi disparado. <code>false</code> caso contrário.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="preventDefault()_do_evento_keydown"><code>preventDefault()</code> do evento <code>keydown</code></h2>
+
+<p>Iniciando com o Gecko 25, uma chamada para o método <code>preventDefault()</code> do evento <code>keydown</code> evita dispachar o evento <code>keypress</code> seguinte. Este é um comportamento válido para a especificação D3E e os principais navegadores web se comportam desta forma. Por outro lado, o Gecko 24 e anteriores dispachavam o evento <code>keypress</code> mesmo que o método <code>preventDefault()</code> do evento <code>keydown</code> anterior fosse chamado, embora o atributo  <code>defaultPrevented</code> do evento <code>keypress</code> fosse <code>true</code> neste caso.</p>
+
+<h2 id="Eventos_Relacionados">Eventos Relacionados</h2>
+
+<ul>
+ <li>{{event("keydown")}}</li>
+ <li>{{event("keyup")}}</li>
+ <li>{{event("keypress")}}</li>
+ <li>{{event("input")}}</li>
+</ul>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script&gt;
+
+'use strict';
+
+document.addEventListener('keydown', (event) =&gt; {
+  const keyName = event.key;
+  alert('keydown event\n\n' + 'key: ' + keyName);
+});
+
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
diff --git a/files/pt-br/web/api/document/keypress_event/index.html b/files/pt-br/web/api/document/keypress_event/index.html
new file mode 100644
index 0000000000..e22242028b
--- /dev/null
+++ b/files/pt-br/web/api/document/keypress_event/index.html
@@ -0,0 +1,170 @@
+---
+title: keypress
+slug: Web/API/Document/keypress_event
+translation_of: Web/API/Document/keypress_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">O evento <strong><code>keypress</code></strong> é disparado quando uma tecla que produz um valor do tipo caractere é pressionada. </span>Exemplos de chaves que produzem um valor de caractere são chaves alfabéticas, numéricas e de pontuação. Exemplos de chaves que não produzem um valor de caractere são as teclas modificadoras, como <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd>, ou <kbd>Meta</kbd>.</p>
+
+<h2 id="Informações_gerais">Informações gerais</h2>
+
+<dl>
+ <dt>Especificação</dt>
+ <dd><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress">DOM L3</a> {{deprecated_inline ()}}</dd>
+ <dt>Interface</dt>
+ <dd><a href="/en-US/docs/DOM/KeyboardEvent">KeyboardEvent</a></dd>
+ <dt>Bolhas</dt>
+ <dd>sim</dd>
+ <dt>Cancelável</dt>
+ <dd>sim</dd>
+ <dt>Alvo</dt>
+ <dd>Documento, Elemento</dd>
+ <dt>Ação padrão</dt>
+ <dd>Varia: <code>keypress</code>evento; lançar sistema de composição de texto; <code>blur</code>e <code>focus</code>eventos; <code>DOMActivate</code>evento; outro evento</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriedade</th>
+   <th scope="col">Tipo</th>
+   <th scope="col">Descrição</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>O destino do evento (o destino mais alto na árvore do DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>DOMString</td>
+   <td>O tipo de evento.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>boleano</td>
+   <td>Se o evento normalmente borbulha ou não</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>boleano</td>
+   <td>Se o evento é cancelável ou não</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>WindowProxy</td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a>( <code>window</code>do documento)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code>( <code>float</code>)</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget (elemento DOM)</td>
+   <td>Elemento focalizado processando o evento chave, elemento raiz se nenhum elemento de entrada adequado estiver focalizado.</td>
+  </tr>
+  <tr>
+   <td><code>char</code> {{readonlyInline}}</td>
+   <td>DOMString (string)</td>
+   <td>O valor do caractere da chave. Se a chave corresponder a um caractere imprimível, esse valor será uma string Unicode não vazia contendo esse caractere. Se a chave não tiver uma representação imprimível, esta é uma string vazia. Veja <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">nomes de chaves e valores de caracteres</a> para os detalhes.
+    <div class="note"><strong>Nota:</strong> Se a chave for usada como uma macro que insere vários caracteres, o valor desse atributo é a cadeia inteira, não apenas o primeiro caractere.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>key</code> {{readonlyInline}}</td>
+   <td>DOMString (string)</td>
+   <td>
+    <p>O valor-chave da chave representada pelo evento. Se o valor tiver uma representação impressa, o valor desse atributo será o mesmo da <code>char</code>propriedade. Caso contrário, é uma das cadeias de <a href="/en-US/docs/Web/API/KeyboardEvent/key/Key_Values">valores de chave</a> especificadas nos <a href="/en-US/docs/Web/API/KeyboardEvent/key/Key_Values">valores de chave</a> . Se a chave não puder ser identificada, seu valor será a string "Unidentified". Veja <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">os nomes das chaves e os valores de caracteres</a> para mais detalhes. Somente leitura.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>code</code> {{readonlyInline}}</td>
+   <td>DOMString (string)</td>
+   <td>Contém uma string que identifica a tecla física sendo pressionada. O valor não é afetado pelo layout do teclado atual ou pelo estado do modificador, portanto, uma chave específica sempre retornará o mesmo valor.</td>
+  </tr>
+  <tr>
+   <td><code>charCode</code> {{readonlyInline}}</td>
+   <td>Longo não assinado (int)</td>
+   <td>O número de referência Unicode da chave; esse atributo é usado apenas pelo <a href="/en-US/docs/Mozilla_event_reference/keypress"><code>keypress</code></a>evento. Para chaves cujo <code>char</code>atributo contém vários caracteres, esse é o valor Unicode do primeiro caractere nesse atributo.
+    <div class="warning"><strong>Aviso:</strong> este atributo está obsoleto; você deve usar em <code>char</code>vez disso, se disponível.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>keyCode</code> {{readonlyInline}}</td>
+   <td>Longo não assinado (int)</td>
+   <td>Um código numérico dependente do sistema e da implementação que identifica o valor não modificado da tecla pressionada. Este é geralmente o código ASCII decimal ({{RFC (20)}}) ou Windows 1252 correspondente à chave; veja {{anch ("Códigos de teclas virtuais")}} para uma lista de valores comuns. Se a chave não puder ser identificada, esse valor será 0.
+    <div class="warning"><strong>Aviso:</strong> este atributo está obsoleto; você deve usar em <code>key</code>vez disso, se disponível.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>which</code> {{readonlyInline}}</td>
+   <td>Longo não assinado (int)</td>
+   <td>Um código numérico dependente do sistema e da implementação identificando o valor não modificado da tecla pressionada; isso geralmente é o mesmo que <code>keyCode</code>.
+    <div class="warning"><strong>Aviso:</strong> este atributo está obsoleto; você deve usar em <code>key</code>vez disso, se disponível.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>location</code> {{readonlyInline}}</td>
+   <td>longo (flutuar)</td>
+   <td>A localização da chave no dispositivo.</td>
+  </tr>
+  <tr>
+   <td><code>repeat</code> {{readonlyInline}}</td>
+   <td>boleano</td>
+   <td><code>true</code>se uma tecla foi pressionada o tempo suficiente para disparar a repetição da tecla, caso contrário <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><code>locale</code> {{readonlyInline}}</td>
+   <td>corda</td>
+   <td>O código do idioma para o evento principal, se disponível; caso contrário, a cadeia vazia.</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boleano</td>
+   <td><code>true</code>se a chave de controle estava inativa quando o evento foi disparado. <code>false</code>de outra forma.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boleano</td>
+   <td><code>true</code>se a tecla shift estava inativa quando o evento foi disparado. <code>false</code>de outra forma.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boleano</td>
+   <td><code>true</code>se a tecla ALT estava desativada quando o evento foi disparado. <code>false</code>de outra forma.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boleano</td>
+   <td><code>true</code>se a meta key estava desativada quando o evento foi disparado. <code>false</code>de outra forma.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">document.addEventListener ('keypress', (event) =&gt; {
+  const keyName = event.key;
+  alert ('keypress event \ n \ n' + 'chave:' + nome da chave);
+});
+</pre>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
+
+<p>O Chrome não dispara o <code>keypress</code>evento para atalhos de teclado conhecidos ( <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=13891#c50">referência</a> ). Quais atalhos de teclado são conhecidos depende do sistema do usuário. Use o <code>keydown</code>evento para implementar atalhos de teclado.</p>
+
+<h2 id="Eventos_Relacionados">Eventos Relacionados</h2>
+
+<ul>
+ <li>{{event ("keydown")}}</li>
+ <li>{{event ("keyup")}}</li>
+ <li>{{event ("keypress")}}</li>
+ <li>{{event ("input")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/document/keyup_event/index.html b/files/pt-br/web/api/document/keyup_event/index.html
new file mode 100644
index 0000000000..6423993b63
--- /dev/null
+++ b/files/pt-br/web/api/document/keyup_event/index.html
@@ -0,0 +1,151 @@
+---
+title: keyup
+slug: Web/API/Document/keyup_event
+tags:
+  - Evento de teclado
+translation_of: Web/API/Document/keyup_event
+---
+<p>O evento keyup é acionado quando uma tecla é liberada.</p>
+
+<h2 id="Informações_gerais">Informações gerais</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Especificação</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;"><a href="http://developer.mozilla.org/en-US/docs/DOM/KeyboardEvent" title="http://en-US/docs/DOM/KeyboardEvent">KeyboardEvent</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Método Bolha</dt>
+ <dd style="margin: 0 0 0 120px;">Sim</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt>
+ <dd style="margin: 0 0 0 120px;">Sim</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Alvo</dt>
+ <dd style="margin: 0 0 0 120px;">Documento, Elemento</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Ação Padrão</dt>
+ <dd style="margin: 0 0 0 120px;">Nenhuma</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</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>EventTarget</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>DOMString</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>WindowProxy</td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget (DOM element)</td>
+   <td>Focused element processing the key event, root element if no suitable input element focused.</td>
+  </tr>
+  <tr>
+   <td><code>char</code> {{readonlyInline}}</td>
+   <td>DOMString (string)</td>
+   <td>The character value of the key. If the key corresponds to a printable character, this value is a non-empty Unicode string containing that character. If the key doesn't have a printable representation, this is an empty string. See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail.
+    <div class="note"><strong>Note:</strong> If the key is used as a macro that inserts multiple characters, this attribute's value is the entire string, not just the first character.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>key</code> {{readonlyInline}}</td>
+   <td>DOMString (string)</td>
+   <td>The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the <code>char</code> attribute. Otherwise, it's one of the key value strings specified in {{ anch("Key values") }}. If the key can't be identified, this is the string "Unidentified". See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail. Read Only.</td>
+  </tr>
+  <tr>
+   <td><code>charCode</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>The Unicode reference number of the key; this attribute is used only by the <a href="/en-US/docs/Mozilla_event_reference/keypress"><code>keypress</code></a> event. For keys whose <code>char</code> attribute contains multiple characters, this is the Unicode value of the first character in that attribute.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>char</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>keyCode</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>which</code> {{readonlyInline}}</td>
+   <td>Unsigned long (int)</td>
+   <td>A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as <code>keyCode</code>.
+    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>location</code> {{readonlyInline}}</td>
+   <td>long (float)</td>
+   <td>The location of the key on the device.</td>
+  </tr>
+  <tr>
+   <td><code>repeat</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if a key has been depressed long enough to trigger key repetition, otherwise <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><code>locale</code> {{readonlyInline}}</td>
+   <td>string</td>
+   <td>The language code for the key event, if available; otherwise, the empty string.</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Eventos_Relacionados">Eventos Relacionados</h2>
+
+<ul>
+ <li>{{event("keydown")}}</li>
+ <li>{{event("keyup")}}</li>
+ <li>{{event("keypress")}}</li>
+ <li>{{event("input")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/document/location/index.html b/files/pt-br/web/api/document/location/index.html
new file mode 100644
index 0000000000..ebf1f2aa27
--- /dev/null
+++ b/files/pt-br/web/api/document/location/index.html
@@ -0,0 +1,108 @@
+---
+title: Document.location
+slug: Web/API/Document/location
+translation_of: Web/API/Document/location
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>A propriedade, de apenas leitura, <strong><code>Document.location</code></strong> retorna um objeto {{domxref("Location")}}, que contém informações sobre a URL do documento e provém métodos para mudar a URL e carregar outra URL.</p>
+
+<p>Embora <code>Document.location</code> seja um objeto <code>Location de apenas leitura</code>,  você pode atribuir um {{domxref("DOMString")}} para ele. Isso significa que você pode trabalhar com document.location, na maioria dos casos, como se fosse uma string: <code>document.location = 'http://www.example.com'</code> é um sinônimo de <code>document.location.href = 'http://www.example.com'</code>.</p>
+
+<p>Para recuperar somente a URL como uma string, a propriedade de apenas leitura {{domxref("document.URL")}} pode ser utilizada.</p>
+
+<p>Se o documento atual não estiver no contexto de navegação, o valor retornado será <code>null</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>locationObj</em> = document.location
+document.location = 'http://www.mozilla.org' // Equivalente a document.location.href = 'http://www.mozilla.org'
+</pre>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush: js">dump(document.location);
+// Imprime uma string como
+// "http://www.example.com/juicybits.html" to the console
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Document.location")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Nenhuma mudança de {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</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>Características</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>O valor da interface de retorno, {{domxref("Location")}}.</li>
+ <li>Uma informação similar, mas anexada ao {{Glossary("browsing context")}}, {{domxref("Window.location")}}.</li>
+</ul>
+
+<p> </p>
diff --git a/files/pt-br/web/api/document/origin/index.html b/files/pt-br/web/api/document/origin/index.html
new file mode 100644
index 0000000000..b31decf05f
--- /dev/null
+++ b/files/pt-br/web/api/document/origin/index.html
@@ -0,0 +1,60 @@
+---
+title: Document.origin
+slug: Web/API/Document/origin
+translation_of: Web/API/Document/origin
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>A propriedade read-only <strong><code>Document.origin</code></strong> retorna a origem do documento. Na maioria dos casos, essa propriedade é equivalente a <code>document.defaultView.location.origin</code>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <var>origin</var> = <var>document</var>.origin;</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<pre class="brush: js">var origin = document.origin;
+// Nesta página, retorna:'https://developer.mozilla.org'
+
+var origin = document.origin;
+// Em "about:blank", retorna:'null'
+
+var origin = document.origin;
+// Em "data:text/html,&lt;b&gt;foo&lt;/b&gt;", retorna:'null'
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-origin', 'Document.origin')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#concept-origin', 'origin for various objects (including Document objects)')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>
+
+
+
+<div>{{Compat("api.Document.origin")}}</div>
+
+<h2 id="Veja_também">Veja também </h2>
+
+<ul>
+ <li>A propriedade {{domxref("URLUtils.origin")}}.</li>
+</ul>
diff --git a/files/pt-br/web/api/document/queryselector/index.html b/files/pt-br/web/api/document/queryselector/index.html
new file mode 100644
index 0000000000..4489a2e823
--- /dev/null
+++ b/files/pt-br/web/api/document/queryselector/index.html
@@ -0,0 +1,107 @@
+---
+title: Document.querySelector()
+slug: Web/API/Document/querySelector
+translation_of: Web/API/Document/querySelector
+---
+<div>
+<div>{{ ApiRef("DOM") }}</div>
+</div>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>Retorna o primeiro elemento dentro do documento (usando ordenação em profundidade, pré-ordenada e transversal dos nós do documento) que corresponde ao grupo especificado de seletores.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe<span class="st"> </span></h2>
+
+<pre><em>element</em> = document.querySelector(<em>selectors</em>);</pre>
+
+<p>Onde:</p>
+
+<ul>
+ <li><code>element</code> é um objeto {{ jsxref("Element")}}.</li>
+ <li><code>selectors</code> é uma string que contém um ou mais seletores CSS separados por vírgulas.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<p>Neste exemplo, o primeiro elemento no documento com a classe "<code>myclass</code>" é retornado:</p>
+
+<pre class="brush: js">var el = document.querySelector(".myclass");
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Retorna <code>null</code> se nenhum resultado for encontrado; caso contrário, retorna o primeiro elemento correspondente.</p>
+
+<p>Se o seletor utilizado for um <code>ID</code> e este <code>ID</code> foi erroneamente utilizado várias vezes no documento, ele retorna somente o primeiro elemento correspondente.</p>
+
+<p>Gera uma exceção <code>SYNTAX_ERR</code> se o grupo de seletores utilizado for inválido.</p>
+
+<p><code>querySelector()</code> foi introduzido com a API de seletores.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade dos navegadores</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</td>
+   <td>3.5 (1.9.1)<br>
+    {{bug(416317)}}</td>
+   <td>8</td>
+   <td>10</td>
+   <td>3.2 (525.3)<br>
+    {{Webkitbug("16587")}}</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>yes</td>
+   <td>9</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Especificação</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>
+</ul>
+
+<h2 id="See_also" name="See_also">Veja também:</h2>
+
+<ul>
+ <li>{{domxref("document.querySelectorAll()")}}</li>
+ <li>{{domxref("element.querySelector()")}}</li>
+ <li>{{domxref("element.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/pt-br/web/api/document/queryselectorall/index.html b/files/pt-br/web/api/document/queryselectorall/index.html
new file mode 100644
index 0000000000..0a05a06180
--- /dev/null
+++ b/files/pt-br/web/api/document/queryselectorall/index.html
@@ -0,0 +1,110 @@
+---
+title: Document.querySelectorAll()
+slug: Web/API/Document/querySelectorAll
+tags:
+  - CSS
+  - JavaScript
+  - querySelector
+translation_of: Web/API/Document/querySelectorAll
+---
+<p id="Summary">{{ ApiRef("DOM") }}</p>
+
+<h2 id="Summary" name="Summary">Introdução</h2>
+
+<p>Retorna uma lista de elementos presentes no documento (usando ordenação em profundidade, pré-ordenada e transversal dos nós do documento) que coincidam com o grupo de seletores especificado. O objeto retornado é uma {{ domxref("NodeList") }}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="eval"><em>elementList</em> = document.querySelectorAll(selectors);
+</pre>
+
+<p>onde</p>
+
+<ul>
+ <li><code>elementList</code> é uma {{ domxref("NodeList") }} não-viva (alterações no DOM não refletem na lista) de objetos {{ domxref("Element") }}.</li>
+ <li><code>selectors</code> é uma <em>string</em> contendo um ou mais seletores CSS separados por vírgulas.</li>
+</ul>
+
+<p>A NodeList retornada irá conter todos os elementos do documento que coincidam com os seletores especificados. Se a string <code><em>selectors</em></code> conter um CSS {{ cssxref("PseudoElements") }}, o retorno será uma NodeList vazia.</p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<p>Esse exemplo retorna uma lista de todos os elementos <code>div</code> presentes no <code>document</code> que contenham as classes "<code>note</code>" ou "<code>alert</code>":</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert");
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Retorna uma {{ jsxref("NodeList") }} não-viva (alterações no DOM não refletem na lista) de todos os elementos que coincidam com os seletores informados.</p>
+
+<p>Lança uma exceção <code>SYNTAX_ERR</code> se o grupo especificado de seletores for inválido.</p>
+
+<p><code>querySelectorAll()</code> foi introduzida na WebApps API.</p>
+
+<p>Navegadores baseados em <em>WebKit</em> têm um <em>bug</em>: quando a string <code><em>seletores</em></code> contém um <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elemento CSS</a>, a {{ jsxref("NodeList") }} retornada não esta vazia, neste caso ela contém o elemento {{ HTMLElement("html") }}.</p>
+
+<h2 id="Compatibilidade_nos_navegadores">Compatibilidade nos navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Possui</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>1</td>
+   <td>3.5 (1.9.1)</td>
+   <td>8</td>
+   <td>10</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Possui</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>2.1</td>
+   <td>sim</td>
+   <td>9</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">API Selectors</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li>{{ domxref("Element.querySelectorAll") }}</li>
+ <li>{{ domxref("Document.querySelector") }}</li>
+ <li>{{ domxref("Element.querySelector") }}</li>
+ <li><code><a href="/pt-BR/docs/Code_snippets/QuerySelector" title="en-US/docs/Code_snippets/QuerySelector">Exemplos de código com querySelector</a></code></li>
+</ul>
diff --git a/files/pt-br/web/api/document/readystate/index.html b/files/pt-br/web/api/document/readystate/index.html
new file mode 100644
index 0000000000..d5d2cea5cd
--- /dev/null
+++ b/files/pt-br/web/api/document/readystate/index.html
@@ -0,0 +1,102 @@
+---
+title: Document.readyState
+slug: Web/API/Document/readyState
+tags:
+  - API
+  - HTML DOM
+  - Propriedade
+  - Referencia
+  - eventos
+translation_of: Web/API/Document/readyState
+---
+<div>{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}</div>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>Retorna "<em>loading</em>" enquanto {{ domxref("document") }} está carregando, "<em>interactive</em>" quando foi carregado porém seus sub-recursos (como imagens, por exemplo) ainda não, e "<em>complete</em>" quando foi totalmente carregado.</p>
+
+<div>O evento <code>readystatechange</code> é acionado no objeto {{ domxref("document") }} quando esse valor é alterado.</div>
+
+<h2 id="Sintaxe"><span>Sintaxe</span></h2>
+
+<pre class="syntaxbox"><em>var string</em> = document.readyState;
+</pre>
+
+
+
+<h3 id="Valores">Valores</h3>
+
+<p>O <code>readyState</code> de um documento pode ser um dos seguintes:</p>
+
+<dl>
+ <dt><code>loading</code></dt>
+ <dd>O {{domxref("document")}} ainda está carregando.</dd>
+ <dt><code>interactive</code></dt>
+ <dd>O documento terminou de ser carregado e o documento foi analisado, mas sub-recursos, como imagens, folhas de estilo e quadros, ainda estão sendo carregados.</dd>
+ <dt><code>complete</code></dt>
+ <dd>O documento e todos os sub-recursos terminaram de carregar. O estado indica que o {{event("load")}} evento está prestes a disparar.</dd>
+</dl>
+
+
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Diferentes_estados_de_readyState">Diferentes estados de readyState</h3>
+
+<pre><code>switch (document.readyState) {
+  case "loading":
+    // O documento esta carregando
+    break;
+  case "interactive":
+    // O documento acabou de carregar. Nós podemos acessar os elementos do DOM.
+    // </code>mas sub-recursos, como imagens, folhas de estilo e quadros, ainda estão sendo carregados.<code>
+    var span = document.createElement("span");
+    span.textContent = "A &lt;span&gt; element.";
+    document.body.appendChild(span);
+    break;
+  case "complete":
+    // A pagina carregou por completo.
+    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
+    break;
+}</code></pre>
+
+<h3 id="readystatechange_como_uma_alternativa_para_DOMContentLoaded_evento">readystatechange como uma alternativa para DOMContentLoaded evento</h3>
+
+<pre><code>// </code>alternativa para DOMContentLoaded evento<code>
+document.onreadystatechange = function () {
+  if (document.readyState === 'interactive') {
+    initApplication();
+  }
+}</code></pre>
+
+<h3 id="readystatechange_como_uma_alternativa_para_load_evento">readystatechange como uma alternativa para load evento</h3>
+
+<pre><code>// </code>ternativa para load evento<code>
+document.onreadystatechange = function () {
+  if (document.readyState === 'complete') {
+    initApplication();
+  }
+}</code></pre>
+
+<h3 id="readystatechange_como_ouvinte_de_evento_para_inserir_ou_modificar_o_DOM_antes_de_DOMContentLoaded">readystatechange como ouvinte de evento para inserir ou modificar o DOM antes de DOMContentLoaded</h3>
+
+<pre><code>document.addEventListener('readystatechange', event =&gt; {
+  if (event.target.readyState === 'interactive') {
+    initLoader();
+  }
+  else if (event.target.readyState === 'complete') {
+    initApp();
+  }
+});</code></pre>
+
+<h2 id="Especificação">Especificação</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#current-document-readiness" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#current-document-readiness">http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#current-document-readiness</a></li>
+</ul>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/pt-BR/docs/Web/Events/readystatechange">document.onreadystatechange</a></li>
+</ul>
diff --git a/files/pt-br/web/api/document/referrer/index.html b/files/pt-br/web/api/document/referrer/index.html
new file mode 100644
index 0000000000..cbf8da950d
--- /dev/null
+++ b/files/pt-br/web/api/document/referrer/index.html
@@ -0,0 +1,33 @@
+---
+title: Document.referrer
+slug: Web/API/Document/referrer
+tags:
+  - API
+  - Anterior
+  - HTML DOM
+  - NeedsCompatTable
+  - NeedsMarkupWork
+  - NeedsSpecTable
+  - Propriedade
+  - Página(2)
+  - Referência(2)
+translation_of: Web/API/Document/referrer
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Retorna o <a href="http://www.w3.org/Addressing/#background">URI</a> da página que continha o <em>link</em> para a página atual.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>string</var> = document.referrer;
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>O valor retornado será uma <em>string</em> vazia se o usuário tiver chegado na página diretamente (digitando o endereço no navegador ou como um item "Favorito"). Como essa propriedade retorna apenas uma <em>string</em>, ela não dá acesso DOM à página que fez a referência.</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95229140">DOM Level 2: referrer</a></li>
+</ul>
diff --git a/files/pt-br/web/api/document/scripts/index.html b/files/pt-br/web/api/document/scripts/index.html
new file mode 100644
index 0000000000..f896f837e8
--- /dev/null
+++ b/files/pt-br/web/api/document/scripts/index.html
@@ -0,0 +1,84 @@
+---
+title: Document.scripts
+slug: Web/API/Document/scripts
+translation_of: Web/API/Document/scripts
+---
+<div>
+<div>{{ ApiRef("DOM") }}</div>
+</div>
+
+<p>Retorna uma lista dos elementos {{HTMLElement("script")}} no documento. O objeto retornado é um {{domxref("HTMLCollection")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><code>var <em>scriptList</em></code> = document.scripts;
+</pre>
+
+<p>O <code>scriptList retornado é um</code> {{domxref("HTMLCollection")}}. Você pode usar isso apenas como um array para obter todos os elementos da lista.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Este exemplo é para ver se a página contém elementos {{HTMLElement("script")}}.</p>
+
+<pre class="brush:js">var scripts = document.scripts;
+
+if (scripts.length) {
+  alert("This page has scripts!");
+}
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade do navegador</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("9.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("9.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li>{{spec("http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-scripts", "DOM: document scripts")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/document/url/index.html b/files/pt-br/web/api/document/url/index.html
new file mode 100644
index 0000000000..e4a1d2eab7
--- /dev/null
+++ b/files/pt-br/web/api/document/url/index.html
@@ -0,0 +1,19 @@
+---
+title: Document.URL
+slug: Web/API/Document/URL
+translation_of: Web/API/Document/URL
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>A propriedade <code><strong>URL </strong></code>(usada apenas para leitura) da Interface {{domxref("Document")}} retorna a URL atual do navegador como um texto (string).</p>
+
+<h2 id="Syntax" name="Syntax">Síntaxe</h2>
+
+<pre class="brush: js">var <em>url_atual</em> = document.URL
+</pre>
+
+<h2 id="Specification" name="Specification">Documentação</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-46183437">DOM - Nível 2 - HTML: URL</a></li>
+</ul>
diff --git a/files/pt-br/web/api/document/write/index.html b/files/pt-br/web/api/document/write/index.html
new file mode 100644
index 0000000000..4218430e88
--- /dev/null
+++ b/files/pt-br/web/api/document/write/index.html
@@ -0,0 +1,108 @@
+---
+title: Document.write()
+slug: Web/API/Document/write
+tags:
+  - API
+  - DOM
+  - Method
+  - Reference
+translation_of: Web/API/Document/write
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>O método <strong><code>Document.write()</code></strong> grava uma sequência de caracteres em um documento aberto por {{domxref("document.open()")}}.</p>
+
+<div class="note"><strong>Nota</strong>: à medida que <code>document.write</code> grava no <strong>fluxo</strong> de documentos, chamando <code>document.write</code> em um documento fechado (carregado) invoca automaticamente <code>document.open</code>, <a href="/en-US/docs/Web/API/document.open#Notes">que limpará o documento</a>.</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush: js notranslate"><var>document</var>.write(<var>markup</var>);
+</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><var>markup</var></dt>
+ <dd>Uma string contendo o texto a ser gravado no documento.</dd>
+</dl>
+
+<h3 id="Exemplo">Exemplo</h3>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+
+&lt;head&gt;
+  &lt;title&gt;Escreva exemplo&lt;/title&gt;
+
+  &lt;script&gt;
+    function newContent() {
+      document.open();
+      document.write("&lt;h1&gt;Sair com o velho - entrar com o novo!&lt;/h1&gt;");
+      document.close();
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="newContent();"&gt;
+  &lt;p&gt;Algum conteúdo do documento original.&lt;/p&gt;
+&lt;/body&gt;
+
+&lt;/html&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Syntax")}}</p>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Escrevendo em um documento que já foi carregado sem chamar {{domxref("document.open()")}} automaticamente vai chamar <code>document.open</code>. Ao términno da escrita, é recomendável chamar {{domxref("document.close()")}} para dizer ao navegador para encerrar o carregamento da página. O texto que você escreve é analisado no modelo de estrutura do documento. No exemplo acima, o elemento <code>h1</code> se torna um nó (node) no documento.</p>
+
+<p>Se chamar <code>document.write()</code> incorporada em uma tag HTML <code>&lt;script&gt;</code> embutida, então <code>document.open()</code> não será chamada. Por exemplo:</p>
+
+<pre class="brush: html notranslate">&lt;script&gt;
+  document.write("&lt;h1&gt;Título principal&lt;/h1&gt;")
+&lt;/script&gt;
+</pre>
+
+<div class="note"><strong>Nota</strong>: <code>document.write</code> e {{domxref("document.writeln")}} <a href="/en-US/docs/Archive/Web/Writing_JavaScript_for_HTML">não funcionam em documentos XHTML</a> (você receberá o erro "Operation is not supported" [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] no console de erros). Isso acontece ao abrir um arquivo local com a extensão .xhtml ou em qualquer documento exibido com um MIME type <code>application/xhtml+xml</code> {{Glossary("MIME type")}}. Mais informações disponíveis em <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div>
+
+<div class="note"><strong>Nota</strong>: <code>document.write</code> em <a href="/en-US/docs/Web/HTML/Element/script#attr-defer">deferred</a> ou <a href="/en-US/docs/Web/HTML/Element/script#attr-async">asynchronous</a> scripts será ignorado, e você receberá uma mensagem como "A call to <code>document.write()</code> from an asynchronously-loaded external script was ignored" no console de erros.</div>
+
+<div class="note"><strong>Nota</strong>: Somente no Edge, chamando <code>document.write</code> mais de uma vez em {{HTMLElement("iframe")}} causa o erro "SCRIPT70: Permission denied".</div>
+
+<div class="note"><strong>Nota</strong>: A partir de 55, Chrome não executará elementos <code>&lt;script&gt;</code> injetados via <code>document.write()</code> caso haja falta de cache HTTP para usuários em uma conexão 2G. Há <a href="https://developers.google.com/web/updates/2016/08/removing-document-write">uma lista de condições </a>que precisam ser atendidas para que isso seja verdade.</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dom-document-write", "document.write(...)")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-75233634", "document.write(...)")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> envie-nos uma pull request.</div>
+
+<div>{{Compat("api.Document.write")}}</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("element.innerHTML")}}</li>
+ <li>{{domxref("document.createElement()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/document/writeln/index.html b/files/pt-br/web/api/document/writeln/index.html
new file mode 100644
index 0000000000..ed2efb2b85
--- /dev/null
+++ b/files/pt-br/web/api/document/writeln/index.html
@@ -0,0 +1,43 @@
+---
+title: Document.writeln()
+slug: Web/API/Document/writeln
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Referencia
+  - metodo
+translation_of: Web/API/Document/writeln
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p><span id="result_box" lang="pt"><span class="hps">Grava uma seqüência</span> <span class="hps">de</span> <span class="hps">texto</span><span>, seguido</span> <span class="hps">por um</span> <span class="hps">caractere de nova linha</span> <span class="hps">a um documento.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Sintaxes</h2>
+
+<pre class="eval">document.writeln(<em>line</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parâmetros</h3>
+
+<ul>
+ <li><code>line</code>
+
+  <div dir="ltr" style="zoom: 1;"><span class="short_text" id="result_box" lang="pt"><span class="hps">é uma string</span> <span class="hps">contendo</span> <span class="hps">uma linha de texto</span><span>.</span></span></div>
+ </li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre>document.writeln("&lt;p&gt;enter password:&lt;/p&gt;");
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p><strong>document.writeln</strong> <span class="short_text" id="result_box" lang="pt"><span class="hps">é</span> <span class="hps">o mesmo que</span></span> <a href="/en/DOM/document.write" title="en/DOM/document.write">document.write</a> <span class="short_text" id="result_box" lang="pt"><span class="hps">mas acrescenta</span> <span class="hps">uma nova linha.</span></span></p>
+
+<div class="note"><strong>Note:</strong> <strong>document.writeln</strong> (like <strong>document.write</strong>) does not work in XHTML documents (you'll get a "Operation is not supported" (<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>) error on the error console). This is the case if opening a local file with a .xhtml file extension or for any document served with an application/xhtml+xml MIME type. More information is available in the <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">Especificação</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/pt-br/web/api/documentfragment/index.html b/files/pt-br/web/api/documentfragment/index.html
new file mode 100644
index 0000000000..5744ea8afe
--- /dev/null
+++ b/files/pt-br/web/api/documentfragment/index.html
@@ -0,0 +1,234 @@
+---
+title: DocumentFragment
+slug: Web/API/DocumentFragment
+translation_of: Web/API/DocumentFragment
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>A interface do <strong>DocumentFragment </strong>representa um objeto de documento mínimo que não possui pai. Ela é utilizada como uma versão leve de {{domxref("Document")}} para armazenar fragmentos bem formados ou fragments potencialmente mal formados de XML.</p>
+
+<p>Vários outros métodos podem usar um document fragment como argumento (ex. qualquer interface de {{domxref("Node")}} como {{domxref("Node.appendChild")}} e {{domxref("Node.insertBefore")}}) em casos em que os filhos do fragment são acrescentados ou inseridos, e não o próprio fragment.</p>
+
+<p>Essa interface também é excelente para ser usada com Web components: elementos {{HTMLElement("template")}}  contém um <code>DocumentFragment</code> na propriedade {{domxref("HTMLTemplateElement.content")}} deles.</p>
+
+<p>Um DocumentFragment pode ser criado usando o método {{domxref("document.createDocumentFragment")}} ou o construtor.</p>
+
+<h2 id="Specification" name="Specification">Propriedades</h2>
+
+<p><em>Essa interface não tem uma propriedade específica, mas herda de seu pai, </em><em>{{domxref("Node")}}, e implementa aquelas da interface {{domxref("ParentNode")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a live {{domxref("HTMLCollection")}} containing all objects of type {{domxref("Node")}} that are children of the <code>DocumentFragment</code> object.</dd>
+ <dt>{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns the {{domxref("Element")}} that is the first child of the <code>DocumentFragment</code> object, or <code>null</code> if there is none.</dd>
+ <dt>{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns the {{domxref("Element")}} that is the last child of the <code>DocumentFragment</code> object, or <code>null</code> if there is none.</dd>
+ <dt>{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns an <code>unsigned long</code> giving the amount of children that the <code>DocumentFragment</code> has.</dd>
+</dl>
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt>{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}</dt>
+ <dd>Retorna um objeto <span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">DocumentFragment </span><span style="line-height: 1.5;">vazio.</span></dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>This interface inherits the methods of its parent, {{domxref("Node")}}<em>, and implements those of the {{domxref("ParentNode")}} interface</em></em><em>.</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentFragment.find()")}} {{experimental_inline}}</dt>
+ <dd>Returns the first matching {{domxref("Element")}} in the tree of the <code>DocumentFragment</code>.</dd>
+ <dt>{{domxref("DocumentFragment.findAll()")}} {{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("NodeList")}} of matching {{domxref("Element")}} in the tree of the <code>DocumentFragment</code>.</dd>
+ <dt>{{domxref("DocumentFragment.querySelector()")}}</dt>
+ <dd>Returns the first {{domxref("Element")}} node within the <code>DocumentFragment</code>, in document order, that matches the specified selectors.</dd>
+ <dt>{{domxref("DocumentFragment.querySelectorAll()")}}</dt>
+ <dd>Returns a {{domxref("NodeList")}} of all the {{domxref("Element")}} nodes within the <code>DocumentFragment</code> that match the specified selectors.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("DocumentFragment.getElementById()")}}</dt>
+ <dd>Returns the first {{domxref("Element")}} node within the <code style="font-size: 14px;">DocumentFragment</code>, in document order, that matches the specified ID.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Especificações</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', '#documentfragment', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Added the constructor and the implementation of {{domxref("ParentNode")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2', '#the-apis', 'DocumentFragment')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td>Added the <code>find()</code> and <code>findAll()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Added the <code>querySelector()</code> and <code>querySelectorAll()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>No change from {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM1')}}</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>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>querySelector()</code> and <code>querySelectorAll()</code></td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8.0</td>
+   <td>10.0</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>findAll()</code> and <code>find() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>DocumentFragment()</code> constructor {{experimental_inline}}</td>
+   <td>28.0</td>
+   <td>{{CompatGeckoDesktop("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ParentNode</code> properties {{experimental_inline}}</td>
+   <td>28.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ParentNode</code> methods {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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 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>
+  <tr>
+   <td><code>querySelector()</code> and <code>querySelectorAll()</code></td>
+   <td>2.1</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8.0</td>
+   <td>10.0</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>findAll()</code> and <code>find() </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>DocumentFragment()</code> constructor {{experimental_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ParentNode</code> properties {{experimental_inline}}</td>
+   <td>28.0</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>5.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ParentNode</code> methods {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index.</a></li>
+</ul>
diff --git a/files/pt-br/web/api/domexception/index.html b/files/pt-br/web/api/domexception/index.html
new file mode 100644
index 0000000000..743ef8602e
--- /dev/null
+++ b/files/pt-br/web/api/domexception/index.html
@@ -0,0 +1,150 @@
+---
+title: DOMException
+slug: Web/API/DOMException
+translation_of: Web/API/DOMException
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>A interface <strong>DOMException </strong>representa um evento anormal (denominado de<strong> exceção</strong>) durante a chamada ou a espera de um resultado do metodo ou uma solicitação a uma web API. Basicamente, falando, é o tratamento dos erros e condições, dos mesmos, nos processos web.</p>
+
+<p>Cada exceção tem um <strong>nome</strong>, que é uma pequena string de estilo "CamelCase" que identifica o erro ou condição anormal.</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("DOMException.DOMException()", "DOMException()")}} {{experimental_inline}}</dt>
+ <dd>Returns a <code>DOMException</code> object with a specified message and name.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("DOMException.code")}} {{deprecated_inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a <code>short</code> that contains one of the {{anch("Error codes", "error code constants")}}, or <code>0</code> if none match. This field is used for historical reasons. New DOM exceptions don't use this anymore: they put this info in the {{domxref("DOMException.name")}} attribute.</dd>
+ <dt>{{domxref("DOMException.message")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{ domxref("DOMString") }} representing a message or description associated with the given <a href="/en-US/docs/Web/API/DOMException#Error_names">error name</a>.</dd>
+ <dt>{{domxref("DOMException.name")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} that contains one of the strings associated with an <a href="#Error_names">error name</a>.</dd>
+</dl>
+
+<h2 id="Error_names">Error names</h2>
+
+<p>Common error names are listed here. Some APIs define their own sets of names, so this is not necessarily a complete list.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Because historically the errors were identified by a numeric value which corresponded with a named variable defined to have that value, some of the entries below indicate the legacy code value and constant name that were used in the past.</p>
+</div>
+
+<dl>
+ <dt><a id="exception-IndexSizeError"><code>IndexSizeError</code></a></dt>
+ <dd>The index is not in the allowed range. For example, this can be thrown by the {{ domxref("Range") }} object. (Legacy code value: <code>1</code> and legacy constant name: <code>INDEX_SIZE_ERR</code>)</dd>
+ <dt><code><a id="exception-HierarchyRequestError">HierarchyRequestError</a></code></dt>
+ <dd>The node tree hierarchy is not correct. (Legacy code value: <code>3</code> and legacy constant name: <code>HIERARCHY_REQUEST_ERR</code>)</dd>
+ <dt><a id="exception-WrongDocumentError"><code>WrongDocumentError</code></a></dt>
+ <dd>The object is in the wrong {{ domxref("Document") }}. (Legacy code value: <code>4</code> and legacy constant name: <code>WRONG_DOCUMENT_ERR</code>)</dd>
+ <dt><a id="exception-InvalidCharacterError"><code>InvalidCharacterError</code></a></dt>
+ <dd>The string contains invalid characters. (Legacy code value: <code>5</code> and legacy constant name: <code>INVALID_CHARACTER_ERR</code>)</dd>
+ <dt><a id="exception-NoModificationAllowedError"><code>NoModificationAllowedError</code></a></dt>
+ <dd>The object cannot be modified. (Legacy code value: <code>7</code> and legacy constant name: <code>NO_MODIFICATION_ALLOWED_ERR</code>)</dd>
+ <dt><a id="exception-NotFoundError"><code>NotFoundError</code></a></dt>
+ <dd>The object cannot be found here. (Legacy code value: <code>8</code> and legacy constant name: <code>NOT_FOUND_ERR</code>)</dd>
+ <dt><a id="exception-NotFoundError"><code>NotSupportedError</code></a></dt>
+ <dd>The operation is not supported. (Legacy code value: <code>9</code> and legacy constant name: <code>NOT_SUPPORTED_ERR</code>)</dd>
+ <dt><a id="exception-InvalidStateError"><code>InvalidStateError</code></a></dt>
+ <dd>The object is in an invalid state. (Legacy code value: <code>11</code> and legacy constant name: <code>INVALID_STATE_ERR</code>)</dd>
+ <dt><a id="exception-SyntaxError"><code>SyntaxError</code></a></dt>
+ <dd>The string did not match the expected pattern. (Legacy code value: <code>12</code> and legacy constant name: <code>SYNTAX_ERR</code>)</dd>
+ <dt><a id="exception-InvalidModificationError"><code>InvalidModificationError</code></a></dt>
+ <dd>The object cannot be modified in this way. (Legacy code value: <code>13</code> and legacy constant name: <code>INVALID_MODIFICATION_ERR</code>)</dd>
+ <dt><a id="exception-NamespaceError"><code>NamespaceError</code></a></dt>
+ <dd>The operation is not allowed by Namespaces in XML. (Legacy code value: <code>14</code> and legacy constant name: <code>NAMESPACE_ERR</code>)</dd>
+ <dt><a id="exception-InvalidAccessError"><code>InvalidAccessError</code></a></dt>
+ <dd>The object does not support the operation or argument. (Legacy code value: <code>15</code> and legacy constant name: <code>INVALID_ACCESS_ERR</code>)</dd>
+ <dt><a id="exception-TypeMismatchError"><code>TypeMismatchError</code></a> {{deprecated_inline}}</dt>
+ <dd>The type of the object does not match the expected type. (Legacy code value: <code>17</code> and legacy constant name: <code>TYPE_MISMATCH_ERR</code>) This value is deprecated; the JavaScript {{jsxref("TypeError")}} exception is now raised instead of a <code>DOMException</code> with this value.</dd>
+ <dt><a id="exception-SecurityError"><code>SecurityError</code></a></dt>
+ <dd>The operation is insecure. (Legacy code value: <code>18</code> and legacy constant name: <code>SECURITY_ERR</code>)</dd>
+ <dt><a id="exception-NetworkError"><code>NetworkError</code></a> {{experimental_inline}}</dt>
+ <dd>A network error occurred. (Legacy code value: <code>19</code> and legacy constant name: <code>NETWORK_ERR</code>)</dd>
+ <dt><a id="exception-AbortError"><code>AbortError</code></a> {{experimental_inline}}</dt>
+ <dd>The operation was aborted. (Legacy code value: <code>20</code> and legacy constant name: <code>ABORT_ERR</code>)</dd>
+ <dt><a id="exception-URLMismatchError"><code>URLMismatchError</code></a> {{experimental_inline}}</dt>
+ <dd>The given URL does not match another URL. (Legacy code value: <code>21</code> and legacy constant name: <code>URL_MISMATCH_ERR</code>)</dd>
+ <dt><a id="exception-QuotaExceededError"><code>QuotaExceededError</code></a> {{experimental_inline}}</dt>
+ <dd>The quota has been exceeded. (Legacy code value: <code>22</code> and legacy constant name: <code>QUOTA_EXCEEDED_ERR</code>)</dd>
+ <dt><a id="exception-TimeoutError"><code>TimeoutError</code></a></dt>
+ <dd>The operation timed out. (Legacy code value: <code>23</code> and legacy constant name: <code>TIMEOUT_ERR</code>)</dd>
+ <dt><a id="exception-InvalidNodeTypeError"><code>InvalidNodeTypeError</code></a> {{experimental_inline}}</dt>
+ <dd>The node is incorrect or has an incorrect ancestor for this operation. (Legacy code value: <code>24</code> and legacy constant name: <code>INVALID_NODE_TYPE_ERR</code>)</dd>
+ <dt><a id="exception-DataCloneError"><code>DataCloneError</code></a> {{experimental_inline}}</dt>
+ <dd>The object can not be cloned. (Legacy code value: <code>25</code> and legacy constant name: <code>DATA_CLONE_ERR</code>)</dd>
+ <dt><a id="exception-EncodingError"><code>EncodingError</code></a> {{experimental_inline}}</dt>
+ <dd>The encoding or decoding operation failed (No legacy code value and constant name).</dd>
+ <dt><a id="exception-NotReadableError"><code>NotReadableError</code></a> {{experimental_inline}}</dt>
+ <dd>The input/output read operation failed (No legacy code value and constant name).</dd>
+ <dt><a id="exception-UnknownError"><code>UnknownError</code></a> {{experimental_inline}}</dt>
+ <dd>The operation failed for an unknown transient reason (e.g. out of memory) (No legacy code value and constant name).</dd>
+ <dt><a id="exception-ConstraintError"><code>ConstraintError</code></a> {{experimental_inline}}</dt>
+ <dd>A mutation operation in a transaction failed because a constraint was not satisfied (No legacy code value and constant name).</dd>
+ <dt><a id="exception-DataError"><code>DataError</code></a> {{experimental_inline}}</dt>
+ <dd>Provided data is inadequate (No legacy code value and constant name).</dd>
+ <dt><a id="exception-TransactionInactiveError"><code>TransactionInactiveError</code></a> {{experimental_inline}}</dt>
+ <dd>A request was placed against a transaction which is currently not active, or which is finished (No legacy code value and constant name).</dd>
+ <dt><a id="exception-ReadOnlyError"><code>ReadOnlyError</code></a> {{experimental_inline}}</dt>
+ <dd>The mutating operation was attempted in a "readonly" transaction (No legacy code value and constant name).</dd>
+ <dt><a id="exception-VersionError"><code>VersionError</code></a> {{experimental_inline}}</dt>
+ <dd>An attempt was made to open a database using a lower version than the existing version (No legacy code value and constant name).</dd>
+ <dt><a id="exception-OperationError"><code>OperationError</code></a> {{experimental_inline}}</dt>
+ <dd>The operation failed for an operation-specific reason (No legacy code value and constant name).</dd>
+ <dt><a id="exception-NotAllowedError"><code>NotAllowedError</code></a></dt>
+ <dd>The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission (No legacy code value and constant name).</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('WebIDL', '#idl-DOMException', 'constructor')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td>Adds the constructor for the <code>DOMException</code> class. Adds the <code>NotReadableError</code>, <code>UnknownError</code>, <code>ConstraintError</code>, <code>DataError</code>, <code>TransactionInactiveError</code>, <code>ReadOnlyError</code>, <code>VersionError</code>, <code>OperationError</code>, and <code>NotAllowedError</code> values.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#exception-domexception', 'DOMException')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Added <code>SECURITY_ERR</code>, <code>NETWORK_ERR</code>, <code>ABORT_ERR</code>, <code>URL_MISMATCH_ERR</code>, <code>QUOTA_EXCEEDED_ERR</code>, <code>TIMEOUT_ERR</code>, <code>INVALID_NODE_TYPE_ERR</code>, and <code>DATA_CLONE_ERR</code>. The property <code>code</code> has been deprecated for exception values. The <code>EncodingError</code> value added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-17189187', 'DOMException')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Added of <code>VALIDATION_ERR</code> and <code>TYPE_MISMATCH_ERR</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-17189187', 'DOMException')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Added of <code>INVALID_STATE_ERR</code>, <code>SYNTAX_ERR</code>, <code>INVALID_MODIFICATION_ERR</code>, <code>NAMESPACE_ERR</code>, and <code>INVALID_ACCESS_ERR</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-17189187', 'DOMException')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.DOMException")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ domxref("DOMError") }}</li>
+</ul>
diff --git a/files/pt-br/web/api/domimplementation/createdocument/index.html b/files/pt-br/web/api/domimplementation/createdocument/index.html
new file mode 100644
index 0000000000..61c90cd7b8
--- /dev/null
+++ b/files/pt-br/web/api/domimplementation/createdocument/index.html
@@ -0,0 +1,83 @@
+---
+title: DOMImplementation.createDocument()
+slug: Web/API/DOMImplementation/createDocument
+translation_of: Web/API/DOMImplementation/createDocument
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>O método <strong><code>DOMImplementation.createDocument()</code></strong> cria e retorna um {{domxref("XMLDocument")}}.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>doc</em> = document.implementation.createDocument(<em>namespaceURI</em>, <em>qualifiedNameStr</em>, <em>documentType</em>);</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><em>namespaceURI</em></dt>
+ <dd>É um {{domxref("DOMString")}} contendo a URI do namespace do documento que será criado, ou <code>null</code> se o documento não pertencer a nenhum.</dd>
+</dl>
+
+<dl>
+ <dt><em>qualifiedNameStr </em></dt>
+ <dd>Is a {{domxref("DOMString")}} containing the qualified name, that is an optional prefix and colon plus the local root element name, of the document to be created.</dd>
+</dl>
+
+<dl>
+ <dt><em>documentType </em>{{optional_inline}}</dt>
+ <dd>
+ <p>Is the {{domxref("DocumentType")}} of the document to be created. It defaults to <code>null</code>.</p>
+ </dd>
+</dl>
+
+<ul>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var doc = document.implementation.createDocument ('http://www.w3.org/1999/xhtml', 'html', null);
+var body = document.createElementNS('http://www.w3.org/1999/xhtml', 'body');
+body.setAttribute('id', 'abc');
+doc.documentElement.appendChild(body);
+alert(doc.getElementById('abc')); // [object HTMLBodyElement]
+</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('DOM WHATWG', '#dom-domimplementation-createdocument', 'DOMImplementation.createDocument')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Modified the return type of <code>createDocument()</code> from {{domxref("Document")}} to {{domxref("XMLDocument")}}.<br>
+    The third argument of <code>createDocument()</code>, <em>doctype</em>, is now optional and default to <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#Level-2-Core-DOM-createDocument', 'DOMImplementation.createDocument')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>No change from {{SpecName("DOM2 Core")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#Level-2-Core-DOM-createDocument', 'DOMImplementation.createDocument')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.DOMImplementation.createDocument")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("DOMImplementation")}} interface it belongs to.</li>
+</ul>
diff --git a/files/pt-br/web/api/domimplementation/index.html b/files/pt-br/web/api/domimplementation/index.html
new file mode 100644
index 0000000000..e49ceda64a
--- /dev/null
+++ b/files/pt-br/web/api/domimplementation/index.html
@@ -0,0 +1,81 @@
+---
+title: DOMImplementation
+slug: Web/API/DOMImplementation
+tags:
+  - API
+  - DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - TopicStub
+translation_of: Web/API/DOMImplementation
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>The <code><strong>DOMImplementation</strong></code> interface represent an object providing methods which are not dependent on any particular document. Such an object is returned by the {{domxref("Document.implementation")}} property.</p>
+
+<h2 id="Property">Property</h2>
+
+<p><em>This interface has no specific property and doesn't inherit any.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>No inherited method.</em></p>
+
+<dl>
+	<dt>{{domxref("DOMImplementation.createDocument()")}}</dt>
+	<dd>Creates and returns an {{domxref("XMLDocument")}}.</dd>
+	<dt>{{domxref("DOMImplementation.createDocumentType()")}}</dt>
+	<dd>Creates and returns a {{domxref("DocumentType")}}.</dd>
+	<dt>{{domxref("DOMImplementation.createHTMLDocument()")}}</dt>
+	<dd>Creates and returns an HTML {{domxref("Document")}}.</dd>
+	<dt>{{domxref("DOMImplementation.hasFeature()")}}</dt>
+	<dd>Returns a {{domxref("Boolean")}} indicating if a given feature is supported or not. This function is unreliable and kept for compatibility purpose alone: except for SVG-related queries, it always returns <code>true</code>. Old browsers are very inconsistent in their behavior.</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('DOM WHATWG', '#domimplementation', 'DOMImplementation')}}</td>
+			<td>{{Spec2('DOM WHATWG')}}</td>
+			<td>Removed the <code>getFeature()</code> method.<br>
+			Added the <code>createHTMLDocument()</code> method.<br>
+			Modified the return type of <code>createDocument()</code> from {{domxref("Document")}} to {{domxref("XMLDocument")}}.</td>
+		</tr>
+		<tr>
+			<td>{{SpecName('DOM3 Core', 'core.html#ID-102161490', 'DOMImplementation')}}</td>
+			<td>{{Spec2('DOM3 Core')}}</td>
+			<td>Added the <code>getFeature()</code> method (never implemented by any user agent).</td>
+		</tr>
+		<tr>
+			<td>{{SpecName('DOM2 Core', 'core.html#ID-102161490', 'DOMImplementation')}}</td>
+			<td>{{Spec2('DOM2 Core')}}</td>
+			<td>Added the <code>createDocument()</code> and <code>createDocumentType()</code> methods.</td>
+		</tr>
+		<tr>
+			<td>{{SpecName('DOM1', 'level-one-core.html#ID-102161490', 'DOMImplementation')}}</td>
+			<td>{{Spec2('DOM1')}}</td>
+			<td>Initial definition.</td>
+		</tr>
+	</tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.DOMImplementation")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+	<li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index.</a></li>
+</ul>
diff --git a/files/pt-br/web/api/domstring/index.html b/files/pt-br/web/api/domstring/index.html
new file mode 100644
index 0000000000..578e449d94
--- /dev/null
+++ b/files/pt-br/web/api/domstring/index.html
@@ -0,0 +1,52 @@
+---
+title: DOMString
+slug: Web/API/DOMString
+translation_of: Web/API/DOMString
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>DOMString</code></strong> é uma String UTF-16. Como o JavaScript já usa tais strings, uma <code>DOMString</code> é mapeada diretamente a uma {{jsxref("String")}}.</p>
+
+<p>Passando <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code> para um método ou parâmetro que aceite uma <code>DOMString</code>, tal valor é convertido para a string <code>"null"</code>.</p>
+
+<h2 id="Specification" name="Specification">Especificações</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('WebIDL', '#idl-DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td>Reformulação da definição para remover alguns casos estranhos.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Nenhuma mudança da {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Nenhuma mudança da {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/Web/API/DOMString">String</a></li>
+ <li>{{domxref("USVString")}}</li>
+ <li>{{domxref("CSSOMString")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/String_view" title="/en-US/docs/Web/JavaScript/Typed_arrays/String_view"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li>
+ <li><a href="/pt-BR/docs/Web/API/DOMString/Binary">Binary strings</a></li>
+</ul>
diff --git a/files/pt-br/web/api/domstringlist/index.html b/files/pt-br/web/api/domstringlist/index.html
new file mode 100644
index 0000000000..48547f3d67
--- /dev/null
+++ b/files/pt-br/web/api/domstringlist/index.html
@@ -0,0 +1,43 @@
+---
+title: DOMStringList
+slug: Web/API/DOMStringList
+translation_of: Web/API/DOMStringList
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Um tipo retornado por algumas APIs, que contém uma lista de <a class="internal" href="/En/DOM/DOMString" title="En/DOM/DOMString">DOMString</a> (strings).</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("DOMStringList.length")}} {{ReadOnlyInline}}</dt>
+ <dd>Retorna o número de itens da lista</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("DOMStringList.item()")}}</dt>
+ <dd>Retorna uma {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("DOMStringList.contains()")}}</dt>
+ <dd>Retorna {{jsxref("Boolean")}} indicando se a string em questão está na lista</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "common-dom-interfaces.html#the-domstringlist-interface", "DOMStringList")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Especificação Inicial</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/pt-br/web/api/domstringmap/index.html b/files/pt-br/web/api/domstringmap/index.html
new file mode 100644
index 0000000000..df9d74a7bd
--- /dev/null
+++ b/files/pt-br/web/api/domstringmap/index.html
@@ -0,0 +1,141 @@
+---
+title: DOMStringMap
+slug: Web/API/DOMStringMap
+translation_of: Web/API/DOMStringMap
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p>Usado pelo atributo HTML {{ htmlattrxref("dataset") }} para representar atributos próprios adicionados ao elemento.</p>
+
+<h2 id="Method_overview" name="Method_overview">Visão Geral do Método</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>DOMString <a href="#getDataAttr()">getDataAttr</a>(in DOMString prop);</code></td>
+  </tr>
+  <tr>
+   <td><code>boolean <a href="#hasDataAttr()">hasDataAttr</a>(in DOMString prop);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#removeDataAttr()">removeDataAttr</a>(in DOMString prop);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#removeProp()">removeProp</a>(in nsIAtom attr);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#setDataAttr()">setDataAttr</a>(in DOMString prop, in DOMString value);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Métodos</h2>
+
+<h3 id="hasDataAttr()">hasDataAttr()</h3>
+
+<pre class="eval">boolean hasDataAttr(
+  in DOMString prop
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parâmetros</h6>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Nome da propriedade a qual a existência deve ser verificada.</dd>
+</dl>
+
+<h6 id="Return_value" name="Return_value">Retorno</h6>
+
+<p><code>true</code> se a propriedade existir ou <code>false</code> se não existir.</p>
+
+<h3 id="removeDataAttr()">removeDataAttr()</h3>
+
+<pre class="eval">void removeDataAttr(
+  in DOMString prop
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parâmetros</h6>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Propriedade a ser removida do data set.</dd>
+</dl>
+
+<h3 id="removeProp()">removeProp()</h3>
+
+<p>Remove a propriedade do dataset do objeto. Usada para atualizar o objeto de dataset do objeto quando o atributo data-* houver sido removido do elemento.</p>
+
+<pre class="eval">void removeProp(
+  in nsIAtom attr
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parâmetros</h6>
+
+<dl>
+ <dt><code>attr</code></dt>
+ <dd>A propriedade a ser removida do dataset.</dd>
+</dl>
+
+<h2 id="Compatibilidade">Compatibilidade</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>Suporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("6.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>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{ domxref("HTMLElement.dataset") }}</li>
+ <li>{{ htmlattrxref("dataset") }}</li>
+</ul>
diff --git a/files/pt-br/web/api/element/accesskey/index.html b/files/pt-br/web/api/element/accesskey/index.html
new file mode 100644
index 0000000000..b05fb5e2b3
--- /dev/null
+++ b/files/pt-br/web/api/element/accesskey/index.html
@@ -0,0 +1,18 @@
+---
+title: Element.accessKey
+slug: Web/API/Element/accessKey
+translation_of: Web/API/HTMLElement/accessKey
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div> </div>
+
+<p>A propriedade <font face="Consolas, Monaco, Andale Mono, monospace"><strong>Element.accessKey</strong></font> define a tecla pelo qual o usuário pode pressionar para saltar para este elemento.</p>
+
+<div class="note">
+<p>Nota: <em>A propriedade <strong>Element.accessKey </strong>é<strong> </strong>raramente usada por causa dos conflitos múltiplos com os atalhos pré-definidos nos navegadores. Para contornar isto, os navegadores implementam o comportamento da tecla de acesso se as teclas são pressionadas com outras teclas "qualificadas" (como Alt + tecla de acesso).</em></p>
+</div>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/pt-br/web/api/element/addeventlistener/index.html b/files/pt-br/web/api/element/addeventlistener/index.html
new file mode 100644
index 0000000000..fea1e67e7b
--- /dev/null
+++ b/files/pt-br/web/api/element/addeventlistener/index.html
@@ -0,0 +1,322 @@
+---
+title: Element.addEventListener()
+slug: Web/API/Element/addEventListener
+translation_of: Web/API/EventTarget/addEventListener
+---
+<p>{{apiref("DOM Events")}}</p>
+
+<p><code>addEventListener()</code> registra uma única espera de evento em um único alvo. O <a href="/pt-BR/docs/DOM/EventTarget" title="DOM/EventTarget">alvo do evento</a> pode ser um único <a href="/pt-BR/docs/DOM/element" title="DOM/element">elemento</a> em um documento, o <code><a href="/pt-BR/docs/DOM/document" title="DOM/document">documento</a></code> em si, uma <code><a href="/pt-BR/docs/DOM/window" title="DOM/window">janela</a></code>, ou um <code><a href="/pt-BR/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code>.</p>
+
+<p>Para registrar mais de uma espera de evento como alvo, chame <code>addEventListener()</code> para o mesmo alvo mas com diferentes tipos de evento ou captura de parâmetros.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><code><em>alvo</em>.addEventListener(<em>type</em>,<em>listener</em>[, <em>options</em>]);
+<em>alvo</em>.addEventListener(<em>type</em>,<em>listener</em>[, <em>useCapture</em>, <em>wantUntrusted </em>{{ Non-standard_inline() }}]); // Gecko/Mozilla only</code></pre>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Uma linha de texto que representa o <a class="internal" href="/pt-BR/docs/DOM/event.type" title="DOM/Event.type">tipo de evento</a> a ser esperado.</dd>
+ <dt>listener</dt>
+ <dd>O objeto que recebe uma notificação quando um evento do tipo especificado ocorre. Esse objeto precisa implementar a interface do <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener"><code>EventListener</code></a>, ou simplesmente executar uma <a href="/pt-BR/docs/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">função</a> JavaScript.</dd>
+ <dt><code>useCapture</code> {{ optional_inline() }}</dt>
+ <dd>Se <code>true</code>, <code>useCapture</code> indica que o usuário deseja iniciar uma captura. Depois de iniciada a captura, todos os eventos do tipo especificado serão enviados à <code>listener</code> registrada antes de serem enviados à qualquer <code>EventTarget</code> abaixo dela na hierarquia de DOMs. Eventos que borbulharem para cima na hierarquia não acionarão a escuta designada  a usar a captura. Veja <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">Eventos DOM Nível 3</a> para uma explicação detalhada. Perceba que esse parâmetro não é opcional em todos os navegadores. Se não for especificado, <code>useCapture</code> é <code>false</code>.</dd>
+ <dt><code>wantsUntrusted</code> {{ Non-standard_inline() }}</dt>
+ <dd>Se <code>true</code>, o evento pode ser acionado por conteúdo não-confiável. Veja <a href="/pt-BR/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="Code snippets/Interaction between privileged and non-privileged pages">Interação entre páginas com e sem privilégios</a>.</dd>
+</dl>
+
+<div class="note"><strong>Nota:</strong> <code>useCapture</code> tornou-se opcional somente nas versões mais recentes dos principais navegadores; não era opcional antes do Firefox 6, por exemplo. Você deve especificar esse parâmetro para obter uma maior compatibilidade.</div>
+
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Exemplo de Evento DOM&lt;/title&gt;
+
+&lt;style&gt;
+#t { border: 1px solid red }
+#t1 { background-color: pink; }
+&lt;/style&gt;
+
+&lt;script&gt;
+// Função para mudar o conteúdo de t2
+function modifyText() {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = "three";
+}
+
+// Função para adicionar uma espera de evento em t
+function load() {
+  var el = document.getElementById("t");
+  el.addEventListener("click", modifyText, false);
+}
+
+document.addEventListener("DOMContentLoaded", load, false);
+&lt;/script&gt;
+
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;table id="t"&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;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><a href="https://jsfiddle.net/madBYK/UumUP">View on JSFiddle</a></p>
+
+<p>No exemplo acima, <code>modifyText()</code> é uma escuta para eventos de <code>click</code> registrados usando <code>addEventListener()</code>. Um clique em qualquer lugar da tabela irá borbulhar para cima até o manipulador e executar <code>modifyText()</code>.</p>
+
+<p>Se você deseja passar parâmetros para a função de escuta, você deve usar uma função anônima.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Exemplo de Evento DOM&lt;/title&gt;
+
+&lt;style&gt;
+#t { border: 1px solid red }
+#t1 { background-color: pink; }
+&lt;/style&gt;
+
+&lt;script&gt;
+
+// Função para mudar o conteúdo de t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Função para adicionar uma espera de evento em t
+function load() {
+  var el = document.getElementById("t");
+  el.addEventListener("click", function(){modifyText("four")}, false);
+}
+&lt;/script&gt;
+
+&lt;/head&gt;
+&lt;body onload="load();"&gt;
+
+&lt;table id="t"&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;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<h3 id="Por_que_usar_addEventListener">Por que usar <code>addEventListener</code>?</h3>
+
+<p><code>addEventListener</code> é a maneira de registrar uma espera de evento como especificada no W3C DOM. Seus benefícios são os seguintes:</p>
+
+<ul>
+ <li>Permite mais de um manipulador por evento. Isso é particularmente útil em bibliotecas <a href="/pt-BR/docs/DHTML" style="line-height: normal;" title="DHTML">DHTML</a> ou em <a href="/pt-BR/docs/Extensions" style="line-height: normal;" title="Extensions">extensões Mozilla</a> que precisam trabalhar bem mesmo com outras bibliotecas/extensões sendo usadas.</li>
+ <li>Te dá um pente-fino do estágio em que a espera de evento é ativada (captura ou borbulha).</li>
+ <li>Funciona em qualquer elemento DOM, não só para elementos HTML.</li>
+</ul>
+
+<p>Existe outra alternativa, <a href="#Older_way_to_register_event_listeners">uma maneira ultrapassada de registrar esperas de evento</a>.</p>
+
+<h3 id="Adicionando_uma_espera_de_evento_durante_um_disparo_de_evento"><strong>Adicionando uma espera de evento durante um disparo de evento</strong></h3>
+
+<p>Se um EventListener for somado a um EventTarget enquanto está processando um evento, ele não será ativado pelas ações atuais, mas poderá ser ativado em um período posterior no fluxo de eventos, como na fase de borbulha.</p>
+
+<h3 id="Múltiplas_esperas_de_evento_idênticas"><strong>Múltiplas esperas de evento idênticas</strong></h3>
+
+<p>Se múltiplas esperas de evento idênticas forem registradas no mesmo EventTarget com os mesmos parâmetros, as versões duplicadas serão descartadas. Elas não fazem o EventListener ser disparado mais de uma vez, e, como as duplicatas são descartadas, elas não precisam ser removidas manualmente com o método <a href="https://developer.mozilla.org/pt-BR/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">removeEventListener</a>.</p>
+
+<h3 id="O_valor_de_this_no_manipulador"><strong>O valor de </strong><strong>this</strong><strong> no manipulador</strong></h3>
+
+<p>É preferível referenciar o elemento do qual a espera de evento foi disparada, como quando é usado um manipulador genérico para uma série de elementos similares. Quando anexar uma função usando addEventListener(), o valor de this é mudado — perceba que o valor de this é passado para uma função a partir do disparador.</p>
+
+<p>Nos exemplos acima, o valor de this em modifyText(), quando disparado pelo evento de clique, é uma referência à tabela 't'. Isso é um contraste do comportamento que acontece se o manipulador é adicionado ao HTML fonte:</p>
+
+<pre class="brush: html">&lt;table id="t" onclick="modifyText();"&gt;
+  . . .</pre>
+
+<p>O valor de this em modifyText(), quando disparado pelo evento de clique no HTML, será uma referência ao objeto global (no caso, a janela).</p>
+
+<div class="note"><strong>Nota:</strong> JavaScript 1.8.5 introduz o método <code><a href="/pt-BR/docs/JavaScript/Reference/Global_Objects/Function/bind" title="JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind()</a></code>, que permite especificar o valor que deve ser usado como <code>this</code> para todas as chamadas à uma determinada função. Isso evita problemas quando não é claro o que <code>this</code> será, dependendo do contexto do qual a sua função for chamada. Perceba, entretanto, que é preciso manter uma referência da escuta à mão, para que depois você possa removê-la.</div>
+
+<p>Este é um exemplo com e sem <code>bind</code>:</p>
+
+<pre class="brush: js">var Algo = function(elemento)
+{
+  this.nome = 'Algo bom';
+  this.onclick1 = function(evento) {
+    console.log(this.nome); // indefinido, porque this é a função de escuta do clique
+  };
+  this.onclick2 = function(evento) {
+    console.log(this.nome); // 'Algo bom', porque this está como objeto Algo através do bind
+  };
+  elemento.addEventListener('click', this.onclick1, false);
+  elemento.addEventListener('click', this.onclick2.bind(this), false); // Truque de bind
+}
+</pre>
+
+<p>Outra solução é usar uma função especial chamada <code>handleEvent</code> para capturar quaisquer eventos:</p>
+
+<pre class="brush: js">var Algo = function(elemento)
+{
+  this.nome = 'Algo bom';
+  this.handleEvent = function(evento) {
+    console.log(this.nome); // 'Algo bom', porque this é o objeto Algo
+    switch(evento.type) {
+      case 'click':
+        // seu codigo aqui...
+        break;
+      case 'dblclick':
+        // seu codigo aqui...
+        break;
+    }
+  };
+  elemento.addEventListener('click', this, false); // Não this.handleEvent, só this
+  elemento.addEventListener('dblclick', this, false); // Não this.handleEvent, só this
+}
+</pre>
+
+<h3 id="Internet_Explorer_antigos_e_attachEvent">Internet Explorer antigos e attachEvent</h3>
+
+<p>Em versões do Internet Explorer anteriores ao IE9, você precisa usar <code><a class="external" href="http://msdn.microsoft.com/pt-BR/library/ms536343(VS.85).aspx">attachEvent</a></code> em vez do padrão <code>addEventListener</code>. Para dar suporte ao IE, o exemplo acima pode ser modificado para:</p>
+
+<pre class="brush: js">if (el.addEventListener) {
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent)  {
+  el.attachEvent('onclick', modifyText);
+}
+</pre>
+
+<p>Existe um porém com <code>attachEvent:</code> o valor de <code>this</code> será a referência ao objeto <code>window</code> em vez do elemento do qual foi disparado.</p>
+
+<h3 id="Uma_maneira_ultrapassada_de_registrar_esperas_de_evento">Uma maneira ultrapassada de registrar esperas de evento</h3>
+
+<p><code>addEventListener()</code> foi introduzido com as especificações de <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events">Eventos</a> DOM 2. Antes disso, esperas de evento eram registradas assim:</p>
+
+<pre class="brush: js">// Passe uma função de referência — não adicione '()' depois dela, o que chamaria a função!
+el.onclick = modifyText;
+
+// Usando uma expressão de função
+element.onclick = function() {
+    // ... lógica da função ...
+};
+</pre>
+
+<p>Esse método substitui as esperar de evento de <code>click</code> no elemento, se houve alguma. Igualmente para outros outros eventos e manipuladores de evento associados, como <code>blur</code> (<code>onblur</code>), <code>keypress</code> (<code>onkeypress</code>), e assim por diante.</p>
+
+<p>Porque era essencialmente uma parte do DOM 0, esse método era largamente suportado e não necessitava de códigos entre-navegadores especiais; logo é normalmente usado para registrar esperas de evento dinâmicamente, a menos que atributos extras do <code>addEventListener()</code> sejam necessários.</p>
+
+<h3 id="Problemas_de_memória">Problemas de memória</h3>
+
+<pre class="brush: js">var i;
+var els = document.getElementsByTagName('*');
+
+// Caso 1
+for(i=0 ; i&lt;els.length ; i++){
+  els[i].addEventListener("click", function(e){/*fazer algo*/}, false});
+}
+
+// Caso 2
+function processarEvento(e){
+  /*fazer algo*/
+}
+
+for(i=0 ; i&lt;els.length ; i++){
+  els[i].addEventListener("click", processarEvento, false});
+}
+
+</pre>
+
+<p>No primeiro caso, uma nova função (anônima) é criada em cada turno do loop. No segundo caso, a mesma função previamente declarada é usada como um manipulador de evento. Isso resulta em um consumo menor de memória. Além do mais, no primeiro caso, já que nenhuma referência à função anônima é mantida, não é possível chamar <code><a href="/pt-BR/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">element.removeEventListener</a></code> porque não há uma referência ao manipulador, enquanto no segundo caso é possível fazer <code>myElement.removeEventListener("click", processEvent, false)</code>.</p>
+
+<h2 id="Compatiblidade_de_navegadores">Compatiblidade de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop(1.0) }}</td>
+   <td>9.0</td>
+   <td>7</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>useCapture</code> é opcional</td>
+   <td>1.0</td>
+   <td>6.0</td>
+   <td>9.0</td>
+   <td>11.60</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile(1.0) }}</td>
+   <td>9.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h4 id="Notas_Gecko">Notas Gecko</h4>
+
+<ul>
+ <li>Antes do Firefox 6, o navegador daria um erro se o parâmetro <code>useCapture</code> não fosse especificado <code>false</code>. Antes do Gecko 9.0 {{ geckoRelease("9.0") }}, <code>addEventListener()</code> daria um erro se o parâmetro <code>escuta</code> fosse <code>null</code>; agora o método retorna sem erros, mas também sem fazer nada.</li>
+</ul>
+
+<h4 id="Notas_Webkit">Notas Webkit</h4>
+
+<ul>
+ <li>Apesar do WebKit ter explicitamente adicionado <code>[optional]</code> ao parâmetro <code>useCapture </code><a class="external" href="http://trac.webkit.org/changeset/89781">como recentemente anunciado em Junho de 2011</a>, já funcionava antes do anúncio da mudança. Ela foi anunciada no Safari 5.1 e no Chrome 13.</li>
+</ul>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/DOM/element.removeEventListener" title="DOM/element.removeEventListener">elemento.removeEventListener()</a></li>
+ <li><a href="/pt-BR/docs/DOM/Creating_and_triggering_events" title="DOM/Creating_and_triggering_custom_events">Criando e disparando eventos customizáveis</a></li>
+ <li><a class="external" href="http://www.quirksmode.org/js/this.html" title="http://www.quirksmode.org/js/this.html">Mais detalhes no uso de <code>this</code> nos manipuladores de eventos</a></li>
+</ul>
+
+<h2 id="Especificação">Especificação</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener">Eventos DOM Nível 2: EventTarget.addEventListener</a></li>
+ <li><a class="external" href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#events-EventTarget-addEventListener" title="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#events-EventTarget-addEventListener">Eventos DOM Nível 3: EventTarget.addEventListener</a></li>
+</ul>
diff --git a/files/pt-br/web/api/element/animate/index.html b/files/pt-br/web/api/element/animate/index.html
new file mode 100644
index 0000000000..8c8d5e58c5
--- /dev/null
+++ b/files/pt-br/web/api/element/animate/index.html
@@ -0,0 +1,202 @@
+---
+title: Element.animate()
+slug: Web/API/Element/animate
+translation_of: Web/API/Element/animate
+---
+<div>{{APIRef('Web Animations')}} {{SeeCompatTable}}</div>
+
+<p>Um {{domxref("Element")}} de interface do método <strong><code>animate()</code></strong> é um método de atalho o qual cria uma nova {{domxref("Animation")}}, e a aplica ao elemento, então executa a animação. Retorna a instância do objeto {{domxref("Animation")}} criado.</p>
+
+<div class="note">
+<p>Elementos podem ter múltiplas animações aplicadas a eles. Você pode obter uma lista de animações que afetam um elemento chamando {{domxref("Element.getAnimations()")}}.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>animation</em> = element.animate(<em>keyframes</em>, <em>options</em>); </pre>
+
+<h3 id="Paramêtros">Paramêtros</h3>
+
+<dl>
+ <dt><code>keyframes</code></dt>
+ <dd>
+ <p>An <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Object formatted to represent a set of keyframes</a>.</p>
+ </dd>
+ <dt><code>opções</code></dt>
+ <dd><code>Ou um inteiro representando a duração da animação (em milisegundos), ou um objeto contendo uma ou mais propriedades de tempo:</code></dd>
+ <dd><code>id {{optional_inline}}</code></dd>
+ <dd>
+ <dl>
+  <dd>Um propriedade única á animate(): uma <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String.">DOMString</a> com a qual a animação é referenciada.</code> </dd>
+ </dl>
+ {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}</dd>
+</dl>
+
+<h4 id="Opções_Futuras">Opções Futuras</h4>
+
+<p>As seguintes opções atualmente não são embarcadas em nenhum lugar, porém serão adicionadas num futuro próximo.</p>
+
+<dl>
+ <dt><code>composite {{optional_inline}}</code></dt>
+ <dd>Determina como os valores são combinados entre animações diferentes, separa animações que não especificam suas próprias operações de composição. Padrão para subtitituir.
+ <ul>
+  <li>Adiciona efeito de imposição e aditivação, onde cada iteração sucessiva é executada sobre a última. Por exemplo, com transform translateX(-200px) não sobreescreveria um valor anterior de rotate(20deg) mas resultaria em <code>translateX(-200px) rotate(20deg)</code>.</li>
+  <li>accumulate é similar porém um pouco mais inteligente: blur(2) e blur(5) se tornam blur(7), não blur(2) blur(5).</li>
+  <li>replace sobreescreve o valor anterior com um novo. </li>
+ </ul>
+ </dd>
+ <dt><code>iterationComposite {{optional_inline}}</code></dt>
+ <dd>Determines how values build from iteration to iteration in this animation. Can be set to <code>accumulate</code> or <code>replace</code> (see above). Defaults to <code>replace</code>.</dd>
+ <dt><code>spacing {{optional_inline}}</code></dt>
+ <dd>Determina como quadros-chaves sem deslocamento temporal devem ser distribuidos durante a duração da animação. Padrão para distribute.
+ <ul>
+  <li>distribuir quadro-chaves de posição de forma que a diferença de deslocamento entre quadros-chaves subsequentes seja igual, distribuirá igualmente os quadros-chaves no decorrer do tempo de execução.</li>
+  <li><code>paced</code> positions keyframes so that the distance between subsequent values of a specified paced property are equal, that is to say, keyframes are spaced further apart the greater the difference in their property values.</li>
+ </ul>
+
+ <p><img alt="" src="https://w3c.github.io/web-animations/img/spacing-distribute.svg" style="height: 210px; width: 200px;"> <img alt=" " src="https://w3c.github.io/web-animations/img/spacing-paced.svg" style="height: 210px; width: 200px;"></p>
+ </dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Retorna uma {{domxref("Animation")}}.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Na demonstração <a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (with the Web Animation API)</a>, nós usamos o método conveniente animate() para imediamente criar e executar uma animação no elemento #tunnel para faze-lo fluir em direção superior, infinitamente.<br>
+ Note o array de quadros-chave passado e também o bloco de opções de temporização.</p>
+
+<pre class="brush: js">document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translateY(0px)' },
+  { transform: 'translateY(-300px)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+});
+</pre>
+
+<h2 id="Especificações">Especificações</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 Animations', '#the-animatable-interface', 'animate()' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibildade_entre_Navegadores">Compatibildade entre Navegadores</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("36")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("48.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>23</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>id</code> option</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("48.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>37</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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>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>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{ CompatGeckoMobile("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>id</code> option</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{ CompatGeckoMobile("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td>
+   <td>{{CompatNo}}</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>
+
+<h2 id="Veja_Também">Veja Também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Element.getAnimations()")}}</li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/element/attributes/index.html b/files/pt-br/web/api/element/attributes/index.html
new file mode 100644
index 0000000000..b5888e0f04
--- /dev/null
+++ b/files/pt-br/web/api/element/attributes/index.html
@@ -0,0 +1,166 @@
+---
+title: Element.attributes
+slug: Web/API/Element/attributes
+tags:
+  - API
+  - DOM
+  - Element
+  - Elemento
+  - Property
+  - Propriedade
+  - Reference
+  - Referencia
+translation_of: Web/API/Element/attributes
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>A propriedade <strong><code>Element.attributes</code></strong> retorna uma coleção de todos os atributos registrados para um nó especificado. É um {{domxref("NamedNodeMap")}}, e não um <code>Array</code>, então não há os métodos de um {{jsxref("Array")}} e os nós indexados {{domxref("Attr")}} podem ser diferentes entre os navegadores. Para ser mais específico, <code>attributes</code> é um par de chave/valor de strings que representa qualquer informação relacionada ao atributo.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes;
+</pre>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<h3 id="Exemplos_básicos">Exemplos básicos</h3>
+
+<pre class="brush: js">// Obtem o primeiro elemento &lt;p&gt; no documento
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;</pre>
+
+<h3 id="Notes" name="Notes">Listando os atributos dos elementos</h3>
+
+<p>Indexadores numéricos são úteis para percorrer através de todos os atributos de um elemento.<br>
+ O exemplo a seguir percorre através dos nós dos atributos do elemento no documento que tenha o id de "p1", e imprime o valor de cada atributo.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+
+ &lt;head&gt;
+  &lt;title&gt;Exemplo com atributos&lt;/title&gt;
+  &lt;script type="text/javascript"&gt;
+   function listAttributes() {
+     var paragraph = document.getElementById("paragraph");
+     var result = document.getElementById("result");
+
+     // Antes, vamos verificar se o paragrafo tem algum atributo
+     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 = "Nenhum atributo para mostrar";
+     }
+   }
+  &lt;/script&gt;
+ &lt;/head&gt;
+
+&lt;body&gt;
+ &lt;p id="paragraph" style="color: green;"&gt;Paragrafo de exemplo&lt;/p&gt;
+ &lt;form action=""&gt;
+  &lt;p&gt;
+    &lt;input type="button" value="Mostra o nome e o valor do atributo"
+      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="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Da {{SpecName('DOM3 Core')}}, movido de {{domxref("Node")}} para {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Nenhuma alteração a partir da {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Nenhuma alteração a partir da {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_os_navegadores">Compatibilidade entre os navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>6.0 [2]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Antes do Firefox 22, este atributo foi implementado na interface {{domxref("Node")}} (herdada por {{domxref("Element")}}). foi movido para esta interface para obedecer a especificação e o uso em outros navegadores.</p>
+
+<p>[2] Internet Explorer 5.5 retorna um map contendo os valores ao invés dos objetos do atributo.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("NamedNodeMap")}}, a interface do objeto retornado</li>
+ <li>Considerações sobre a compatibilidade entre os navegadores: em <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/pt-br/web/api/element/classlist/index.html b/files/pt-br/web/api/element/classlist/index.html
new file mode 100644
index 0000000000..03b79e63d5
--- /dev/null
+++ b/files/pt-br/web/api/element/classlist/index.html
@@ -0,0 +1,171 @@
+---
+title: Element.classList
+slug: Web/API/Element/classList
+translation_of: Web/API/Element/classList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>O <strong>E</strong><strong>lement.classList</strong> é uma propriedade somente leitura que retorna uma coleção {{domxref ("DOMTokenList")}} ativa dos atributos de classe do elemento.</p>
+
+<p>Usar <strong>classList</strong> é uma alternativa conveniente para acessar a lista de classes de um elemento como uma seqüência delimitada por espaço através de {{domxref ("element.className")}}.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">const <var>elementClasses</var> = elementNodeReference.classList;
+</pre>
+
+<p><strong><em>elementClasses</em></strong> é um DOMTokenList que representa o atributo de classe de <strong><em>elementNodeReference</em></strong>. Se o atributo de classe não foi definido ou está vazio <strong><em>elementClasses.length</em></strong> retorna 0. <strong>element.classList </strong>propriamente dito é somente leitura, embora você possa modificá-lo usando os métodos<em> <strong>add ()</strong></em><strong> </strong>e <em><strong>remove ()</strong></em>.</p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>add( String [, String] )</dt>
+ <dd>Adicione valores de classe especificados. Se essas classes já existem no atributo do elemento, elas são ignoradas.</dd>
+ <dt>remove( String [,String] )</dt>
+ <dd>Remover valores de classe específicos.</dd>
+ <dt><strong>item</strong> ( Number )</dt>
+ <dd>Retorna o valor da classe por índice na coleção.</dd>
+ <dt><strong>toggle</strong> ( String [, force] )</dt>
+ <dd>Quando apenas um argumento está presente: Toggle class value; Ou seja, se a classe existir, em seguida, removê-lo e retornar false, se não, então adicioná-lo e retornar true.<br>
+ Quando um segundo argumento está presente: Se o segundo argumento é avaliado como true, adicione o valor especificado da classe e, se ele for avaliado como false, remova-o.</dd>
+ <dt>contains( String )</dt>
+ <dd>Verifica se o valor da classe especificado existe no atributo de classe do elemento.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<pre class="brush: js" dir="rtl">// div é uma referência de objeto para um elemento &lt;div&gt; com class = "foo bar"
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// Se estiver visível, remova-o, caso contrário, adicione-o
+div.classList.toggle("visible");
+
+// adicionar/remover, dependendo do teste condicional, i menos de 10
+div.classList.toggle("visible", i &lt; 10 );
+
+alert(div.classList.contains("foo"));
+
+// adicionar ou remover várias classes
+div.classList.add("foo","bar");
+div.classList.remove("foo", "bar");</pre>
+
+<div class="note">
+<p>As versões do Firefox antes de 26 não implementam o uso de vários argumentos nos métodos add / remove / toggle. Veja <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Observe dentro da especificação HTML relacionada ao {{htmlattrxref("class")}} attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Definição inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</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>8.0</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>10<sup>[1][3]</sup></td>
+   <td>11.50</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>toggle method's second argument</td>
+   <td>24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("24")}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>15</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>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>3.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>10</td>
+   <td>11.10</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>toggle method's second argument</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("24")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Não suportado para elementos SVG. Veja <a href="https://connect.microsoft.com/IE/feedback/details/1046039/classlist-not-working-on-svg-elements">a report at Microsoft about that</a>.<br>
+ [2] O Internet Explorer nunca implementou isso. Veja <a href="https://connect.microsoft.com/IE/feedback/details/878564/element-classlist-toggle-does-not-support-second-parameter">a report at Microsoft about that</a>.<br>
+ [3] Internet Explorer usa apenas o primeiro parâmetro em "add" e "remove".</p>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("element.className")}}</li>
+ <li>{{domxref("DOMTokenList")}};</li>
+</ul>
diff --git a/files/pt-br/web/api/element/classname/index.html b/files/pt-br/web/api/element/classname/index.html
new file mode 100644
index 0000000000..1db2b4f71e
--- /dev/null
+++ b/files/pt-br/web/api/element/classname/index.html
@@ -0,0 +1,123 @@
+---
+title: Element.className
+slug: Web/API/Element/className
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Property
+  - Reference
+translation_of: Web/API/Element/className
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p><strong>className</strong> retorna e define o valor do atributo <code>class</code> do elemento especificado.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className;
+<var>elementNodeReference</var>.className = <var>cName</var>;</pre>
+
+<ul>
+ <li><var>cName</var> sendo uma variável de texto (string) que represente uma única classe, ou múltiplas classes (separadas por um espaço) do elemento selecionado.</li>
+</ul>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">var element = document.getElementById("div1");
+
+if (element.className === "fixed") {
+  // verifica a partir de uma classe específica do elemento
+  goNextElement();
+}</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p><code>O nome className</code> é utilizado para esta propriedade ao invés de <code>class</code> por conta de conflitos com a palavra-chave "class" em variáveis linguagens que são utilizadas para manipulação do <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>.</p>
+
+<h2 id="Especificações">Especificações</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", "#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>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</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>Recurso</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>Suporte Básico</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="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("element.classList")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/element/click_event/index.html b/files/pt-br/web/api/element/click_event/index.html
new file mode 100644
index 0000000000..1044c53281
--- /dev/null
+++ b/files/pt-br/web/api/element/click_event/index.html
@@ -0,0 +1,276 @@
+---
+title: click
+slug: Web/API/Element/click_event
+translation_of: Web/API/Element/click_event
+---
+<p>O evento <code>click</code> event é disparado quando o botão de um dispositivo apontador (normalmente o botão de um mouse) é pressionado e solto logo em seguida em um mesmo elemento.</p>
+
+<h2 id="Informações_gerais">Informações gerais</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Especificação</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("MouseEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Sim</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt>
+ <dd style="margin: 0 0 0 120px;">Sim</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Ação padrão</dt>
+ <dd style="margin: 0 0 0 120px;">Variável</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</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><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>O alvo do evento (o mais alto na arvore de DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><code><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String.">DOMString</a></code></td>
+   <td>Tipo do evento.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Se o evento "bubbles" naturalmente ou não.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Se o evento é cancelável ou não</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> do documento)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>
+    <p>Um contador de cliques consecutivos que ocorrem em um curto espaço de tempo, incrementado em 1.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>O node que contem o eventListener.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>Para eventos <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> e <code>mouseleave</code>: o alvo do evento complementar (o <code>mouseleave</code> no caso de um evento <code>mouseenter</code> ). <code>null</code> , se falso.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>A coordenada X do ponteiro do mouse na tela.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>A coordenada Y do ponteiro do mouse na tela.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>A coordenada X do ponteiro do mouse no DOM atual.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>A coordenada Y do ponteiro do mouse no DOM atual.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">&lt;div id="test"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+  document.getElementById("test").addEventListener("click", function( event ) {
+    // mostra o contador de cliques dentro da div clicada
+    event.target.innerHTML = "Total de cliques: " + event.detail;
+  }, false);
+&lt;/script&gt;
+</pre>
+
+<h2 id="Compatibilidade_nos_Browsers">Compatibilidade nos Browsers</h2>
+
+<h3 id="Internet_Explorer">Internet Explorer</h3>
+
+<p>O Internet Explorer 8 e 9 apresentam um bug onde o elemento com a propriedade {{cssxref("background-color")}} é definida como <a href="/en-US/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a> that are overlaid on top of other element(s) won't receive <code>click</code> events. Todos os eventos <code>click</code> serão disparados no elemento underlying instead. Veja uma demonstração <a href="http://jsfiddle.net/YUKma/show/">neste exemplo</a>.</p>
+
+<p>Soluções de contorno para este bug:</p>
+
+<ul>
+ <li>Somente para o IE9:
+  <ul>
+   <li>Defina o <code>{{cssxref("background-color")}} como: <a href="/en-US/docs/Web/CSS/color_value#rgba()">rgba</a>(0,0,0,0)</code></li>
+   <li>Defina  a <code>{{cssxref("opacity")}} como: 0</code> e defina explicitamente {{cssxref("background-color")}} com outro valor diferente de <a href="/en-US/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li>
+  </ul>
+ </li>
+ <li>Para IE8 e IE9: Defina a propriedade <code><a href="http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx">filter</a> como: alpha(opacity=0);</code> e o {{cssxref("background-color")}} com outro valor diferente de <a href="/en-US/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li>
+</ul>
+
+<h3 id="Safari_Mobile">Safari Mobile</h3>
+
+<p>Safari Mobile 7.0+ (and likely earlier versions too) <a href="https://bugs.webkit.org/show_bug.cgi?id=153887">suffers from a bug</a> where <code>click</code> events aren't fired on elements that aren't typically interactive (e.g. {{HTMLElement("div")}}) and which also don't have event listeners directly attached to the elements themselves (i.e. <a href="http://davidwalsh.name/event-delegate">event delegation</a> is being used). See <a href="http://jsfiddle.net/cvrhulu/k9t0sdnf/show/">this live example</a> for a demonstration. See also <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6">Safari's docs on making elements clickable</a> and the <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7">definition of "clickable element"</a>.</p>
+
+<p>Known workarounds for this bug:</p>
+
+<ul>
+ <li>Set {{cssxref("cursor")}}<code>: pointer;</code> on the element or any of its ancestors.</li>
+ <li>Add a dummy <code>onclick="void(0)"</code> attribute to the element or any of its ancestors up to but not including {{HTMLElement("body")}}.</li>
+ <li>Use a typically interactive element (e.g. {{HTMLElement("a")}}) instead of one that isn't typically interactive (e.g. {{HTMLElement("div")}}).</li>
+ <li>Stop using <code>click</code> <a href="http://davidwalsh.name/event-delegate">event delegation</a>.</li>
+</ul>
+
+<p>Safari Mobile considers the following elements to be typically interactive (and thus they aren't affected by this bug):</p>
+
+<ul>
+ <li>{{HTMLElement("a")}} (but it must have an <code>href</code>)</li>
+ <li>{{HTMLElement("area")}} (but it must have an <code>href</code>)</li>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("img")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("label")}} (but it must be associated with a form control)</li>
+ <li>{{HTMLElement("textarea")}}</li>
+ <li><em>This list is incomplete; you can help MDN by doing further testing/research and expanding it.</em></li>
+</ul>
+
+<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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>On disabled form elements</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></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>
+  <tr>
+   <td>On disabled form elements</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Only works for {{HTMLElement("textarea")}} elements and some {{HTMLElement("input")}} element types.</p>
+
+<p>[2] Internet Explorer only triggers the <code>click</code> event on {{HTMLElement("input")}} elements of type <code>checkbox</code> or <code>radio</code> when the element is double-clicked.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{event("mousedown")}}</li>
+ <li>{{event("mouseup")}}</li>
+ <li>{{event("mousemove")}}</li>
+ <li>{{event("click")}}</li>
+ <li>{{event("dblclick")}}</li>
+ <li>{{event("mouseover")}}</li>
+ <li>{{event("mouseout")}}</li>
+ <li>{{event("mouseenter")}}</li>
+ <li>{{event("mouseleave")}}</li>
+ <li>{{event("contextmenu")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/element/closest/index.html b/files/pt-br/web/api/element/closest/index.html
new file mode 100644
index 0000000000..cfae3b2c98
--- /dev/null
+++ b/files/pt-br/web/api/element/closest/index.html
@@ -0,0 +1,127 @@
+---
+title: Element.closest()
+slug: Web/API/Element/closest
+translation_of: Web/API/Element/closest
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>O método <code><strong>Element.closest()</strong></code> retorna o ancestral mais próximo, em relação ao elemento atual, que possui o seletor fornecido como parâmetro. No caso de o elemento atual possuir o seletor, o mesmo é retornado.  Caso não exista um ancestral o método retorna <code>null</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>elt =</em><em> element</em>.closest(<em>selectors</em>);
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<ul>
+ <li><em>selectors</em> é um {{domxref("DOMString")}} contendo uma lista de seletores, por exemplo <code>"p:hover, .toto + q"</code></li>
+ <li><em>element</em> é um {{domxref("Element")}} posicionado no início da árvore de elementos a ser percorrida.</li>
+</ul>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<ul>
+ <li><em>elt</em> é um {{domxref("Element")}} selecionado como ancestral mais próximo  do elemento pelo qual se iniciou a pesquisa. O valor retornado pode ser <code>null</code>.</li>
+</ul>
+
+<h3 id="Exceções">Exceções</h3>
+
+<ul>
+ <li>{{exception("SyntaxError")}} é lançada caso o parâmetro <code>selectors</code> não seja uma string válida contendo uma lista de seletores.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;div id="div-01"&gt;Esta é a div-01
+    &lt;div id="div-02"&gt;Esta é a div-02
+      &lt;div id="div-03"&gt;Esta é a div-03&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/article&gt;</pre>
+
+<pre class="brush: js">var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// retorna o elemento com id=div-02
+
+var r2 = el.closest("div div");
+// retorna o ancestral mais próximo que é uma div dentro de uma div, nesse caso div-03 é retornada
+
+var r3 = el.closest("article &gt; div");
+// retorna o ancestral mais próximo que é uma div e tem um article como elemento pai, nesse caso div-01 é retornada
+
+var r4 = el.closest(":not(div)");
+// retorna o ancestral mais próximo que não é uma div, neste caso article é retornado
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
+
+<p>Para navegadores que não suportam <code>Element.closest()</code>, mas possuem suporte para <code>element.matches()</code> (ou um prefixo equivalente, ou seja IE9+), o seguinte polyfill pode ser usado: </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;
+        if (!document.documentElement.contains(el)) return null;
+        do {
+            if (el.matches(s)) return el;
+            el = el.parentElement;
+        } while (el !== null);
+        return null;
+    };
+</pre>
+
+<p>Contudo, se você de fato precisa dar suporte ao IE 8, você pode usar o polyfill abaixo, o qual é lento mas eficaz. Além disso, ele só garante suporte a seletores CSS 2.1 no IE 8 e ainda pode causar picos de lentidão em websites em produção.</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="Specification" name="Specification">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade em navegadores</h2>
+
+<div>{{Compat("api.Element.closest")}}</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A interface {{domxref("Element")}}.</li>
+ <li>
+  <div class="syntaxbox">A sintaxe em Seletores</div>
+ </li>
+ <li>
+  <div class="syntaxbox">Outros métodos que aceitam seletores: {{domxref("element.querySelector()")}} e {{domxref("element.matches()")}}.</div>
+ </li>
+</ul>
diff --git a/files/pt-br/web/api/element/getattribute/index.html b/files/pt-br/web/api/element/getattribute/index.html
new file mode 100644
index 0000000000..c5d1a9475b
--- /dev/null
+++ b/files/pt-br/web/api/element/getattribute/index.html
@@ -0,0 +1,76 @@
+---
+title: Element.getAttribute()
+slug: Web/API/Element/getAttribute
+tags:
+  - API
+  - DOM
+  - Referencia
+  - metodo
+translation_of: Web/API/Element/getAttribute
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Summary" name="Summary">Resumo</h2>
+
+<p><span class="seoSummary"><code>getAttribute()</code> retorna o valor de um argumento específico do elemento.</span> Se o atributo não existir, o valor retornado será <code>null</code> ou <code>""</code> (string vazia). Veja {{Anch("Notas")}} para mais detalhes.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>var atributo</em> = element.getAttribute(<em>nomeDoAtributo</em>);
+</pre>
+
+<p>onde</p>
+
+<ul>
+ <li><code><em>atributo</em></code> é uma string contendo o valor do <code><em>nomeDoAtributo</em></code>.</li>
+ <li><code><em>nomeDoAtributo</em></code> é o nome do atributo cujo deseja se obter o valor.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:js">var div1 = document.getElementById("div1");
+var align = div1.getAttribute("align");
+
+alert(align); // mostra o valor do atributo "align" do elemento com id="div1"</pre>
+
+<h2 id="Notas" name="Notas">Notas</h2>
+
+<p>Quando for utilizado para um elemento HTML num DOM sinalizado como documento HTML,  <code>getAttribute()</code> troca de caixa alta para caixa baixa (maiúscula para minúscula) seu argumento antes de prosseguir.</p>
+
+<p>Essencialmente todos navegadores (Firefox, Internet Explorer, versões recentes do Opera, Safari, Konqueror, e iCab, por exemplo) retornam <code>null</code> quando o atributo especificado não existe no elemento em questão, seguindo que <a href="http://dom.spec.whatwg.org/#dom-element-getattribute" title="http://dom.spec.whatwg.org/#dom-element-getattribute">o esboço atual de especificações DOM</a> diz. A velha especificação do DOM 3 Core, por sua vez, diz que correto é retornar uma <em>string vazia</em> e algumas implementações de DOM se comportam dessa forma. Por exemplo, a implementação do getAttribute no XUL (Gecko) segue as especificações do DOM 3 Core e retorna uma string vazia. Consequentemente, deve-se usar {{domxref("Element.hasAttribute()")}} para checar a existência do atributo antes de utilizar o <code>getAttribute()</code>caso exista a possibilidade do argumento inexistir.</p>
+
+<div>
+<h2 id="Compatibilidade_entre_browsers">Compatibilidade entre browsers</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>Suporte Básico</td>
+   <td>29</td>
+   <td>23</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{DOMAttributeMethods}}</p>
+</div>
+
+<h2 id="Specification" name="Specification">Especificação</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> (introduzido em <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 nos documentos HTML</a></li>
+</ul>
diff --git a/files/pt-br/web/api/element/getboundingclientrect/index.html b/files/pt-br/web/api/element/getboundingclientrect/index.html
new file mode 100644
index 0000000000..5f32a3512a
--- /dev/null
+++ b/files/pt-br/web/api/element/getboundingclientrect/index.html
@@ -0,0 +1,84 @@
+---
+title: Element.getBoundingClientRect()
+slug: Web/API/Element/getBoundingClientRect
+tags:
+  - API
+  - CSSOM View
+  - Método(2)
+  - Referência(2)
+translation_of: Web/API/Element/getBoundingClientRect
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>O método <code><strong>Element.getBoundingClientRect() </strong>retorna o tamanho de um elemento e sua posição relativa ao <em>viewport</em>.</code></p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>rectObject</var> = <var>object</var>.getBoundingClientRect();
+</pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>O valor de retorno é o objeto <a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMClientRect">DOMRect</a> que é a uniāo dos retângulos retornados por <a href="/en-US/docs/DOM/element.getClientRects"><code>getClientRects()</code></a> para o elemento, ou seja, os atributos border-boxes do CSS associados ao elemento.</p>
+
+<p>O valor retornado é um objeto <code>DOMRect</code>, que contém as propriedades apenas-leitura <code>left</code>, <code>top</code>, <code>right</code> e <code>bottom</code> que descrevem o border-box em pixels. <code>top</code> e <code>left</code> são relativos às propriedades top-left do <em>viewport</em>.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> {{Gecko("1.9.1")}} adiciona as propriedades <code>width</code> e <code>height</code> ao objeto <code>DOMRect</code>.</p>
+</div>
+
+<p>Border-boxes vazias são completamente ignoradas. Se todos os border-boxes do elemento são vazias, então é retornado o retângulo com width e height como zero, e no lugar de <code>top</code> e <code>left</code> determina-se o top-left do border-box relacionado ao primeiro box CSS (determinado pela ordem do conteúdo) em relaçāo ao elemento.</p>
+
+<p>A quantidade de scrolling que foi feita na área do viewport (ou qualquer outra área de qualquer outro elemento <em>scrollable</em>) é tomada com medida ao computar o delimitador do retângulo. Isso significa que as propriedades <code>top</code> e <code>left</code> mudam seus valores tão logo a posiçāo do scroll for alterada (assim seus valores sāo relativos ao viewport e não são absolutos). Se esse não for o comportamento esperado basta adicionar a posição atual do scroll para as propriedades <code>top</code> e <code>left</code> (via <code>window.scrollX</code> e <code>window.scrollY</code>) para pegar os valores constantes independentemente da posiçāo atual do scroll.</p>
+
+<p>Scripts que requerem uma alta compatibilidade cross-browser podem usar <code>window.pageXOffset</code> e <code>window.pageYOffset</code> ao invés de <code>window.scrollX</code> e <code>window.scrollY.</code> Scripts sem acesso ao <code>window.pageXOffset</code>, <code>window.pageYOffset</code>, <code>window.scrollX</code> e <code>window.scrollY</code> podem usar:</p>
+
+<pre class="brush:js">// Para o scrollX
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft
+// Para o scrollY
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop
+</pre>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush:js">// rect é um objeto DOMRect com seis propriedades: left, top, right, bottom, width, height
+var rect = obj.getBoundingClientRect();
+</pre>
+
+<h2 id="Especificaçōes">Especificaçōes</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Definiçāo Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notas">Notas</h3>
+
+<p><code>getBoundingClientRect()</code> foi primeiramente introduzida no modelo de objeto MS IE DHTML.</p>
+
+<p>O valor de retorno de <code>getBoundingClientRect()</code> é <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze">frozen</a>.</p>
+
+<h2 id="Compatibilidade">Compatibilidade</h2>
+
+<div>{{Compat("api.Element.getBoundingClientRect")}}</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li>
+ <li><a href="/en-US/docs/DOM/element.getClientRects"><code>getClientRects()</code></a></li>
+</ul>
diff --git a/files/pt-br/web/api/element/getelementsbyclassname/index.html b/files/pt-br/web/api/element/getelementsbyclassname/index.html
new file mode 100644
index 0000000000..2660d0009b
--- /dev/null
+++ b/files/pt-br/web/api/element/getelementsbyclassname/index.html
@@ -0,0 +1,108 @@
+---
+title: Element.getElementsByClassName()
+slug: Web/API/Element/getElementsByClassName
+translation_of: Web/API/Element/getElementsByClassName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">O método <code><strong>getElementsByClassName()</strong></code> da interface {{domxref("Element")}} retorna um {{domxref("HTMLCollection")}} atualizado simultaneamente que contém todos os elementos descendentes da classe ou das classes especificadas.</span></p>
+
+<p>O método {{domxref("Document.getElementsByClassName", "getElementsByClassName()")}} da interface {{domxref("Document")}} funciona da mesma forma, exceto que atua em todo o documento, começando da raíz.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>names</code></dt>
+ <dd>Uma {{domxref("DOMString")}} contendo um ou mais nomes de classes separados por espaço em branco.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Um {{domxref("HTMLCollection")}} que contém uma lista de elementos atualizada em tempo real com todos os elementos que são membros das classes especificadas em <code>names</code>.</p>
+
+<h2 id="Notas_de_uso">Notas de uso</h2>
+
+<p>Habitualmente, o conjunto de elementos retornado será atualizado simultaneamente com as mudanças feitas, refletindo no estado atual da árvore DOM, no elemento em que a função foi chamada. Assim que novos elementos que satisfazem as classes contidas em <code>names</code> são adicionados na subárvore, eles imediatamente aparecem no conjunto de elementos. Em um exemplo similar, se um elemento existente que não satisfaz nenhuma classe contida em <code>names</code> tem as suas classes ajustadas para que satisfaça, ele irá instantaneamente ser adicionado ao conjunto de elementos.</p>
+
+<p>O oposto disso também acontece; os elementos que não satisfazerem mais as classes contidas em <code>name</code> serão removidos instantaneamente do conjunto.</p>
+
+<div class="note">
+<p>No modo <a href="/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">quirks</a>, o nome das classes são comparadas da forma case-insensitive. Caso contrário, considere case sensitive.</p>
+</div>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_uma_única_classe">Usando uma única classe</h3>
+
+<p>Para procurarmos elementos que incluem uma classe específica, nós apenas informamos o nome da classe ao chamar <code>getElementsByClassName()</code>:</p>
+
+<pre class="brush: js">element.getElementsByClassName('test');</pre>
+
+<p>Esse exemplo retorna todos os elementos que possuem a classe <code>test</code>, e que também são filhos do elemento que possui o <code>id</code> com valor <code>main</code>:</p>
+
+<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre>
+
+<h3 id="Usando_várias_classes">Usando várias classes</h3>
+
+<p>Para retornar elementos que incluem as classes <code>red</code> and <code>test</code>:</p>
+
+<pre class="brush: js">element.getElementsByClassName('red test');</pre>
+
+<h3 id="Examinando_os_resultados">Examinando os resultados</h3>
+
+<p>You can use either the {{domxref("HTMLCollection.item", "item()")}} method on the returned <code>HTMLCollection</code> or standard array syntax to examine individual elements in the collection. However<u><strong> the following code will not work</strong></u> as one might expect because <code>"matches" </code>will change as soon as any <code>"colorbox"</code> class is removed.</p>
+
+<pre class="brush: js">var matches = element.getElementsByClassName('colorbox');
+
+for (var i=0; i&lt;matches.length; i++) {
+  matches[i].classList.remove('colorbox');
+  matches.item(i).classList.add('hueframe');
+}
+</pre>
+
+<p>Instead, use another method, such as:</p>
+
+<pre class="brush: js">var matches = element.getElementsByClassName('colorbox');
+
+while (matches.length &gt; 0) {
+  matches.item(0).classList.add('hueframe');
+  matches[0].classList.remove('colorbox');
+}</pre>
+
+<p>This code finds descendant elements with the <code>"colorbox"</code> class, adds the class <code>"hueframe"</code>, by calling <code>item(0), </code>then removes <code>"colorbox" </code>(using array notation). Another element (if any are left) will then become <code>item(0)</code>.</p>
+
+<h3 id="Filtering_the_results_using_array_methods">Filtering the results using array methods</h3>
+
+<p>We can also use methods of {{jsxref("Array.prototype")}} on any {{ domxref("HTMLCollection") }} by passing the {{domxref("HTMLCollection")}} as the method's <code>this</code> value. Here we'll find all {{HTMLElement("div")}} elements that have a class of <code>test</code>:</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="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('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Element.getElementsByClassName")}}</p>
diff --git a/files/pt-br/web/api/element/id/index.html b/files/pt-br/web/api/element/id/index.html
new file mode 100644
index 0000000000..864b1fe8b3
--- /dev/null
+++ b/files/pt-br/web/api/element/id/index.html
@@ -0,0 +1,119 @@
+---
+title: Element.id
+slug: Web/API/Element/id
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Property
+  - Reference
+translation_of: Web/API/Element/id
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<div> </div>
+
+<p>A propriedade <strong><code>Element.id</code></strong> representa o identificador do elemento, refletindo no atributo global <strong><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></strong>.</p>
+
+<p>O ID precisa ser único no documento, e geralmente é utilizado para obter o elemento usando {{domxref("document.getElementById", "getElementById")}}.. Outro uso comum de <code>id</code> é utilizar o <a href="/en-US/docs/Web/CSS/ID_selectors" title="Web/CSS/ID_selectors">ID como um seletor</a> ao estilizar o documento com CSS.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: IDs são case-sensitive, mas você não deve criar IDs cuja única diferença nos nomes sejam letras maiúsculas/minúsculas (veja <a href="/en-US/docs/Case_Sensitivity_in_class_and_id_Names" title="Case_Sensitivity_in_class_and_id_Names">Case sensitivity in class and id names</a>).</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>var idStr</em> = <em>element</em>.id; // Retorna o id.
+<em>element</em>.id = <em>idStr; // Insere o id</em>
+</pre>
+
+<ul>
+ <li><code>idStr</code> é o identificador do elemento.</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-id', 'id')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Sem alteração desde {{SpecName('DOM2 HTML')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Sem alteração desde {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_os_browsers">Compatibilidade com os browsers</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>Suporte básico</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 para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</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="Veja_também">Veja também</h2>
+
+<ul>
+ <li>O atributo global <a href="/en-US/docs/Web/HTML/Global_attributes/id"><strong>id</strong></a>.</li>
+</ul>
diff --git a/files/pt-br/web/api/element/index.html b/files/pt-br/web/api/element/index.html
new file mode 100644
index 0000000000..b3779720d9
--- /dev/null
+++ b/files/pt-br/web/api/element/index.html
@@ -0,0 +1,529 @@
+---
+title: Element
+slug: Web/API/Element
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - Element
+  - Interface
+  - Reference
+  - Web API
+translation_of: Web/API/Element
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><span class="seoSummary"><font face="Open Sans, Arial, sans-serif">A interface </font><code><strong>Element</strong></code> é a classe base mais geral da qual todos os objetos em um {{domxref("Document")}} herda. Ela somente tem métodos e propriedades comuns para todos os tipos de elementos. Mais classes específicas herdam de <code>Element</code>. Por exemplo, a interface {{domxref("HTMLElement")}} é a interface base para elementos HTML, enquanto a interface {{domxref("SVGElement")}} é a base para todos os elementos SVG. A maioria das funcionalidades é especificada mais abaixo da hierarquia de classes. </span></p>
+
+<p>Linguagens fora do domínio da plataforma da Web, como XUL através da interface <code>XULElement</code>, também implementa <code>Element</code>.</p>
+
+<h2 id="Properties" name="Properties">Propriedades</h2>
+
+<p><em>Herda propriedades de seus parentes {{domxref("Node")}}, e seu próprio parente, {{domxref("EventTarget")}}, e implementa aqueles de {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, e </em>{{domxref("Animatable")}}.</p>
+
+<dl>
+ <dt>{{ domxref("Element.attributes") }}  {{readOnlyInline}}</dt>
+ <dd>Retorna um {{ domxref("NamedNodeMap") }} que lista todos os atributos associados ao elemento.</dd>
+ <dt>{{ domxref("ParentNode.childElementCount") }}</dt>
+ <dd>É um {{jsxref("Number")}} representando o número de nós filhos que são elementos.</dd>
+ <dt>{{ domxref("ParentNode.children") }}</dt>
+ <dd>É um {{ domxref("HTMLCollection") }} ao vivo contendo todos os elementos filhos do elemento, como uma coleção.</dd>
+ <dt>{{ domxref("Element.classList") }} {{readOnlyInline}}</dt>
+ <dd>Retorna um {{ domxref("DOMTokenList") }} contendo a lista de atributos de classe.</dd>
+ <dt>{{ domxref("Element.className") }}</dt>
+ <dd>É um {{domxref("DOMString")}} representando a classe do elemento.</dd>
+ <dt>{{ domxref("Element.clientHeight") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Retorna um {{jsxref("Number")}} representando a altura interna do elemento.</dd>
+ <dt>{{ domxref("Element.clientLeft") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Retorna um {{jsxref("Number")}} representando a largura da borda do elemento..</dd>
+ <dt>{{ domxref("Element.clientTop") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Retorna um {{jsxref("Number")}} representando a largura da borda do topo do elemento.</dd>
+ <dt>{{ domxref("Element.clientWidth") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Retorna um {{jsxref("Number")}} representando a largura interna do elemento.</dd>
+ <dt>{{ domxref("ParentNode.firstElementChild") }}</dt>
+ <dd>
+ <p>É um {{ domxref("Element") }}, o primeiro elemento filho direto de um elemento, ou <code>null</code> se o elemento não tem elementos filho.</p>
+ </dd>
+ <dt>{{ domxref("Element.id") }}</dt>
+ <dd>É um {{domxref("DOMString")}} representando o id do elemento.</dd>
+ <dt>{{ domxref("Element.innerHTML") }} {{experimental_inline}}</dt>
+ <dd>É um {{domxref("DOMString")}} representando a marcação do conteúdo do elemento.</dd>
+ <dt>{{ domxref("ParentNode.lastElementChild") }}</dt>
+ <dd>É um {{ domxref("Element") }}, o último elemento filho direto de um elemento, ou <code>null</code> se o elemento não tem elementos filho.</dd>
+ <dt>{{ domxref("NonDocumentTypeChildNode.nextElementSibling") }}</dt>
+ <dd>É um {{ domxref("Element") }}, o elemento seguido imediatamente do dito na árvore, ou <code>null</code> se não há nó irmão.</dd>
+ <dt>{{ domxref("Element.outerHTML") }} {{experimental_inline}}</dt>
+ <dd>É um {{domxref("DOMString")}} representando a marcação do elemento incluindo seu conteúdo. Quando usado como um <a href="/pt-BR/docs/Web/JavaScript/Reference/Functions/set">setter</a>, substitui o elemento com nós analisados a partir de uma determinada <a href="/pt-BR/docs/Glossario/String">string</a>.</dd>
+ <dt>{{ domxref("NonDocumentTypeChildNode.previousElementSibling") }}</dt>
+ <dd>É um {{ domxref("Element") }}, o elemento precedido imediatamente do dito na árvore, ou <code>nulo</code> se não há elemento irmão.</dd>
+ <dt>{{ domxref("Element.scrollHeight") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Retorna um {{jsxref("Number")}} representando a altura da vista de rolagem de um elemento.</dd>
+ <dt>{{ domxref("Element.scrollLeft") }} {{experimental_inline}}</dt>
+ <dd>É um {{jsxref("Number")}} representando o deslocamento de rolagem esquerdo do elemento.</dd>
+ <dt>{{ domxref("Element.scrollLeftMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>Retorna um {{jsxref("Number")}} representando o deslocamento de rolagem esquerdo máximo possível para o elemento.</dd>
+ <dt>{{ domxref("Element.scrollTop") }} {{experimental_inline}}</dt>
+ <dd>É um {{jsxref("Number")}} representando o deslocamento de rolagem superior de um elemento.</dd>
+ <dt>{{ domxref("Element.scrollTopMax") }} {{non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>Retorna um {{jsxref("Number")}} representando o deslocamento de rolagem máximo superior possível para o elemento.</dd>
+ <dt>{{ domxref("Element.scrollWidth") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Retorna um {{jsxref("Number")}} representando a largura de exibição de rolagem do elemento.</dd>
+ <dt>{{domxref("Element.shadowRoot") }} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>...</dd>
+ <dt>{{ domxref("Element.tagName") }} {{readOnlyInline}}</dt>
+ <dd>Retorna um {{domxref("String")}} com o nome da tag para o elemento em questão.</dd>
+ <dt>{{ domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Retorna o {{domxref("UndoManager")}} associado com o elemento.</dd>
+ <dt>{{ domxref("Element.undoScope")}} {{experimental_inline}}</dt>
+ <dd>É a {{jsxref("Boolean")}} indicando se o elemento é um anular hospedagem de escopo, ou não.</dd>
+</dl>
+
+<h3 id="Handlers" name="Handlers">Manipuladores de Eventos</h3>
+
+<dl>
+ <dt>{{ domxref("Element.ongotpointercapture") }}</dt>
+ <dd>…</dd>
+ <dt>{{ domxref("Element.onlostpointercapture") }}</dt>
+ <dd>…</dd>
+ <dt>{{ domxref("Element.onwheel") }} {{ non-standard_inline() }}</dt>
+ <dd>Retorna o código de manipulação de evento para o evento <code>wheel</code>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Métodos</h2>
+
+<p><em>Herda métodos de seus parentes {{domxref("Node")}}, e seu proprío parente, {{domxref("EventTarget")}}<em>, e implementa aqueles de  {{domxref("ParentNode")}}, {{domxref("ChildNode")}}<em>, {{domxref("NonDocumentTypeChildNode")}}, e</em></em> {{domxref("Animatable")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("EventTarget.addEventListener()") }}</dt>
+ <dd>Registra um manipulador de evento para um tipo específico de evento no elemento.</dd>
+ <dt>{{ domxref("Element.closest()")}} {{experimental_inline}}</dt>
+ <dd>Retorna o {{domxref("Element")}}, descendente deste elemento(ou este elemento em si), que é o ancestral mais próximo dos elementos selecionados pelos seletores dados no parâmetro.</dd>
+ <dt>{{ domxref("Element.createShadowRoot()")}} {{experimental_inline}}</dt>
+ <dd>…</dd>
+ <dt>{{ domxref("EventTarget.dispatchEvent()") }}</dt>
+ <dd>Despacha um evento para este nó no DOM e retorna um {{jsxref("Boolean")}} que indica que pelo menos um manipulador não o cancelou.</dd>
+ <dt>{{domxref("Element.find()")}}{{experimental_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Element.findAll()")}}{{experimental_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Animatable.getAnimationPlayers()")}} {{experimental_inline}}</dt>
+ <dd>…</dd>
+ <dt>{{ domxref("Element.getAttribute()") }}</dt>
+ <dd>Recupera o valor do atributo nomeado do nó atual e o retorna como um {{jsxref("Object")}}.</dd>
+ <dt>{{ domxref("Element.getAttributeNS()") }}</dt>
+ <dd>Recupera o valor do atributo com o nome especificado e <a href="/pt-BR/docs/Mozilla/Tech/XUL/Namespaces">namespace</a>, do nó atual e o retorna como um {{jsxref("Object")}}.</dd>
+ <dt>{{ domxref("Element.getAttributeNode()") }} {{obsolete_inline}}</dt>
+ <dd>Recupera a representação do nó de um atributo nomeado do nó atual e o retorna como um {{ domxref("Attr") }}.</dd>
+ <dt>{{ domxref("Element.getAttributeNodeNS()") }} {{obsolete_inline}}</dt>
+ <dd>Recupera a representação de nó do atributo com o nome especificado e <a href="/pt-BR/docs/Mozilla/Tech/XUL/Namespaces">namespace</a>, do nó atual e o retorna como um {{ domxref("Attr") }}.</dd>
+ <dt>{{ domxref("Element.getBoundingClientRect()") }}<code> </code>{{experimental_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{ domxref("Element.getClientRects()") }} {{experimental_inline}} TYPE of returnvalue????</dt>
+ <dd>Retorna uma coleção de retângulos que indicam os retângulos delimitadores para cada linha de texto em um cliente.</dd>
+ <dt>{{domxref("Element.getDestinationInsertionPoints()")}} {{experimental_inline}}</dt>
+ <dd>…</dd>
+ <dt>{{ domxref("Element.getElementsByClassName()") }}</dt>
+ <dd>Retorna um {{ domxref("HTMLCollection") }} vivo que contêm todos os descendentes do elemento atual que possui a lista de classes dadas no parâmetro.</dd>
+ <dt>{{ domxref("Element.getElementsByTagName()") }}</dt>
+ <dd>Retorna um {{ domxref("HTMLCollection") }} vivo contendo todos os elementos descendentes, de uma etiqueta de nome particular, do elemento atual.</dd>
+ <dt>{{ domxref("Element.getElementsByTagNameNS()") }}</dt>
+ <dd>Retorna um {{ domxref("HTMLCollection") }} vivo contendo todos os elementos descendentes, de uma etiqueta de nome particular e <a href="/pt-BR/docs/Mozilla/Tech/XUL/Namespaces">namespace</a>, do elemento atual.</dd>
+ <dt>{{ domxref("Element.hasAttribute()") }}</dt>
+ <dd>Retorna um {{jsxref("Boolean")}} indicando se o elemento tem o atributo especificado ou não.</dd>
+ <dt>{{ domxref("Element.hasAttributeNS()") }}</dt>
+ <dd>Retorna um {{jsxref("Boolean")}} indicando se o elemento tem um atributo especificado, no <a href="/pt-BR/docs/Mozilla/Tech/XUL/Namespaces">namespace</a> especificado, ou não.</dd>
+ <dt>{{ domxref("Element.insertAdjacentHTML") }} {{experimental_inline}}</dt>
+ <dd>Analisa o texto como HTML ou XML e insere os nós resultantes na árvore em dada posição.</dd>
+ <dt>{{ domxref("Element.matches()") }}<code> </code>{{experimental_inline}}</dt>
+ <dd>Retorna um {{jsxref("Boolean")}} indicando se o elemento seria ou não selecionado pelo seletor de string specificada.</dd>
+ <dt>{{ domxref("Element.querySelector()") }}</dt>
+ <dd>Retorna {{ domxref("Node") }}...</dd>
+ <dt>{{ domxref("Element.querySelectorAll") }}</dt>
+ <dd>Retorna um {{ domxref("NodeList") }}...</dd>
+ <dt>{{ domxref("Element.releasePointerCapture")}} {{experimental_inline}}</dt>
+ <dd>…</dd>
+ <dt>{{domxref("ChildNode.remove()")}}</dt>
+ <dd>Remove o elemento da lista de filhos de seu parente.</dd>
+ <dt>{{ domxref("Element.removeAttribute()") }}</dt>
+ <dd>Remove um atributo nomeado do nó atual.</dd>
+ <dt>{{ domxref("Element.removeAttributeNS()") }}</dt>
+ <dd>Remove o atributo com o nome especificado ou <a href="/pt-BR/docs/Mozilla/Tech/XUL/Namespaces">namespace</a>, do nó atual.</dd>
+ <dt>{{ domxref("Element.removeAttributeNode()") }} {{obsolete_inline}}</dt>
+ <dd>Remove a representação do nó do atributo nomeado do nó atual.</dd>
+ <dt>{{ domxref("EventTarget.removeEventListener()") }}</dt>
+ <dd>Remove um ouvinte de eventos do elemento.</dd>
+ <dt>{{ domxref("Element.requestFullscreen()") }} {{experimental_inline}}</dt>
+ <dd>Assíncronamente pede o navegador para fazer o elemento tela cheia.</dd>
+ <dt>{{ domxref("Element.requestPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>Permite assíncronamente pedir pelo apontador para ser bloqueado em um dado elemento.</dd>
+</dl>
+
+<dl>
+ <dt>{{ domxref("Element.scrollIntoView()") }} {{experimental_inline}}</dt>
+ <dd>Rola a página até que o elemento apareça na visão.</dd>
+ <dt>{{ domxref("Element.setAttribute()") }}</dt>
+ <dd>Define o valor de um atributo nomeado do nó atual.</dd>
+ <dt>{{ domxref("Element.setAttributeNS()") }}</dt>
+ <dd>Define o valor do atributo com o nome especificado e <a href="/pt-BR/docs/Mozilla/Tech/XUL/Namespaces">namespace</a>, do nó atual.</dd>
+ <dt>{{ domxref("Element.setAttributeNode()") }} {{obsolete_inline}}</dt>
+ <dd>Define a representação do nó de um atributo nomeado do nó atual.</dd>
+ <dt>{{ domxref("Element.setAttributeNodeNS()") }} {{obsolete_inline}}</dt>
+ <dd>Define a representação do nó do atributo com o nome especificado e <a href="/pt-BR/docs/Mozilla/Tech/XUL/Namespaces">namespace</a>, do nó atual.</dd>
+ <dt>{{ domxref("Element.setCapture()") }} {{non-standard_inline}}</dt>
+ <dd>Define a captura de evento do mouse, redirecionando todos os eventos de mouse para este elemento.</dd>
+ <dt>{{domxref("Element.setPointerCapture()")}}</dt>
+ <dd>…</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</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 Animations", '', '')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Adicionado o método <code>getAnimationPlayers()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Undo Manager', '', 'Element')}}</td>
+   <td>{{Spec2('Undo Manager')}}</td>
+   <td>Adicionadas as propriedades <code>undoScope</code> e <code>undoManager</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Adicionados os seguintes manipuladores de evento: <code>ongotpointercapture</code> e <code>onlostpointercapture</code>.<br>
+    Adicionados os seguintes métodos: <code>setPointerCapture()</code> e <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td>Adicionados os seguintes métodos:<code> matches()</code> (implementado como <code>mozMatchesSelector()</code>), <code>find()</code>, <code>findAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Adicionados os seguintes métodos: <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>Adicionado o método <code>requestPointerLock()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Adicionado o método <code>requestFullscreen()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Adicionadas as seguintes propriedades: <code>innerHTML</code>, e <code>outerHTML</code>.<br>
+    Adicionado o seguinte método: <code>insertAdjacentHTML()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Adicionadas as seguintes propriedades: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, e <code>clientHeight</code>.<br>
+    Adicionados os seguintes métodos: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, e <code>scrollIntoView()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Adicionada herança da interface {{domxref("ElementTraversal")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Removidos os seguintes métodos: <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, e <code>setIdAttributeNode()</code>.<br>
+    Removida a propriedade <code>schemaTypeInfo</code>.<br>
+    Modificado o valor de retorno de <code>getElementsByTag()</code> e <code>getElementsByTagNS()</code>.<br>
+    Movida <code>hasAttributes()</code> da interface <code>Node</code> para esta.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Adicionados os seguintes métodos: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, e <code>setIdAttributeNode()</code>. Estes métodos nunca foram implementados e foram removidos em especificações posteriores.<br>
+    Adicionada a propriedade <code>schemaTypeInfo</code>. Esta propriedade nunca foi implementada e foi removida em especificações posteriores.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>O método <code>normalize()</code> foi movido para {{domxref("Node")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Navegador">Compatibilidade de Navegador</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>children</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>7.0 com um bug significativo[1]<br>
+    9.0 de acordo com as especificações</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>childElementCount</code>, <code>nextElementSibling</code>, <code>previousElementSibling</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>firstElementChild</code>, <code>lastElementChild</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>classList</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td> </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>outerHTML</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("11")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>clientLeft</code>, <code>clientTop</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getBoundingClientRect()</code>, <code>getClientRects()</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>querySelector()</code>, <code>querySelectorAll()</code></td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8.0</td>
+   <td>10.0</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>insertAdjacentHTML()</code> {{experimental_inline}}</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("8")}}</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>4.0 (527)</td>
+  </tr>
+  <tr>
+   <td><code>setCapture() </code>{{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>oncopy</code>, <code>oncut</code>, <code>onpaste</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td> </td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onwheel</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("17")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code>, <code>setPointerCapture()</code>, e <code>releasePointerCapture()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0 {{property_prefix("MS")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>matches()</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}} com o nome não padrão <code>webkitMatchesSelector</code></td>
+   <td>{{CompatGeckoDesktop("1.9.2")}} com o nome não padrão <code>mozMatchesSelector</code><br>
+    {{CompatGeckoDesktop("34")}} com o nome padrão</td>
+   <td>9.0 com o nome não padrão <code>msMatchesSelector</code></td>
+   <td>11.5 com o nome não padrão <code>oMatchesSelector</code><br>
+    15.0 com o nome não padrão <code>webkitMatchesSelector</code></td>
+   <td>5.0 com o nome não padrão <code>webkitMatchesSelector</code></td>
+  </tr>
+  <tr>
+   <td><code>find()</code> e <code>findAll()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>requestPointerLock()</code></td>
+   <td>16.0  {{property_prefix("webkit")}}, atrás de um about:flags<br>
+    22.0 {{property_prefix("webkit")}} (com casos especiais, levantados progressivamente, veja [2])</td>
+   <td>{{CompatGeckoDesktop("14")}}{{property_prefix("moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>requestFullscreen()</code></td>
+   <td>14.0 {{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}</td>
+   <td>11.0 {{property_prefix("ms")}}</td>
+   <td>12.10<br>
+    15.0 {{property_prefix("webkit")}}</td>
+   <td>5.1 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>undoManager</code> e <code>undoScope</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}} (atrás do pref <code>dom.undo_manager.enabled</code>)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("22")}}<br>
+    Antes era disponível via interface {{domxref("Node")}} que qualquer <code>element</code> herda.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>scrollTopMax()</code> e <code>scrollLeftMax()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("16")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>closest()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>hasAttributes()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}} (na interface {{domxref("Node")}})<br>
+    {{CompatGeckoDesktop("35")}} (nesta interface)</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>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>scrollTopMax()</code> and <code>scrollLeftMax()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("16")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>closest()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("35")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>hasAttributes()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}} (na interface {{domxref("Node")}})<br>
+    {{CompatGeckoMobile("35")}} (nesta interface)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 7 e 8 incorretamente retorna os comentários como parte do filho de um Element. Isto está fixado no Internet Explorer 9 e posterior.</p>
+
+<p>[2] Chrome 16 permitiu <code>webkitRequestPointerLock()</code> somente em tela cheia; Chrome 21 para website confiável(com permissão do usuário);  Chrome 22 permitiu por padrão para todos documentos de mesma origem; Chrome 23 permitiu em testes em ambientes locais {{HTMLElement("iframe")}} se o valor não padrão <code>webkit-allow-pointer-lock</code> é definido para o atributo {{htmlattrxref("sandbox", "iframe")}}.</p>
diff --git a/files/pt-br/web/api/element/innerhtml/index.html b/files/pt-br/web/api/element/innerhtml/index.html
new file mode 100644
index 0000000000..f9ba30f9cf
--- /dev/null
+++ b/files/pt-br/web/api/element/innerhtml/index.html
@@ -0,0 +1,148 @@
+---
+title: Element.innerHTML
+slug: Web/API/Element/innerHTML
+tags:
+  - API
+  - DOM
+  - Gecko
+  - NeedsBrowserCompatibility
+  - Propriedade
+  - Referência(2)
+translation_of: Web/API/Element/innerHTML
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>A propriedade <strong><code>Element.innerHTML</code></strong> define ou obtém a sintaxe HTML ou XML descrevendo os elementos descendentes.</p>
+
+<div class="note"><strong>Nota: </strong>Se um nó {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} tem um nó filho que inclui os caracteres (&amp;), (&lt;), ou (&gt;), o innerHTML retornará esses caracteres como &amp;amp, &amp;lt e &amp;gt respectivamente. Utilize {{domxref("Node.textContent")}} para recuperar uma cópia correta do conteúdo desses nós de texto.</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>var content</em> = <em>element</em>.innerHTML;</pre>
+
+<p>No retorno, <code>content</code> contém o código HTML serializado descrevendo todos os descendentes dos elementos.</p>
+
+<pre class="syntaxbox notranslate"><em> element</em>.innerHTML = content;</pre>
+
+<p>Remove todos os elementos filhos, analisa o conteúdo da string e atribui os nós resultantes como filhos do elemento.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><strong><code>SyntaxError</code></strong></dt>
+ <dd>Foi feita uma tentativa de definir o valor de um <code>innerHTML</code> usando uma string que não é HTML.</dd>
+ <dt><code>NoModificationAllowedError</code></dt>
+ <dd>Foi feita uma tentativa de inserir HTML dentro de um nó no qual o pai é um {{domxref("Document")}}.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+&lt;head&gt;&lt;/head&gt;
+&lt;body&gt;
+
+&lt;div id="txt"&gt;
+  &lt;script     id="txt0"&gt; x=0 &lt;/script&gt;
+    &lt;noembed    id="txt1"&gt; 1   &lt;/noembed&gt;
+    &lt;noframes   id="txt2"&gt; 2   &lt;/noframes&gt;
+    &lt;noscript   id="txt3"&gt; 3   &lt;/noscript&gt;
+    &lt;div        id="txt4"&gt; 4   &lt;/div&gt;
+    &lt;div&gt;
+      &lt;noscript id="txt5"&gt; 5   &lt;/noscript&gt;
+    &lt;/div&gt;
+    &lt;span       id="txt6"&gt; 6   &lt;/span&gt;
+  &lt;/div&gt;
+
+  &lt;div id="innerHTMLtxt"&gt;&lt;/div&gt;
+&lt;div id="textContenttxt"&gt;&lt;div&gt;
+
+&lt;script&gt;
+for (i = 0; i &lt; 7; i++) {
+    x = "txt" + i;
+    document.getElementById(x).firstChild.nodeValue = '&amp;&lt;&gt;';
+}
+
+document.getElementById("innerHTMLtxt").textContent = document.getElementById("txt").innerHTML
+document.getElementById("textContenttxt").textContent = document.getElementById("txt").textContent
+&lt;/script&gt;
+
+&lt;body&gt;
+&lt;/html&gt;</pre>
+
+<pre class="brush: js notranslate">// HTML:
+// &lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;
+// &lt;p&gt;Further Elaborated&lt;/p&gt;
+// &lt;/div&gt;
+
+const d = document.getElementById("d");
+dump(d.innerHTML);
+
+//  a string "&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;"
+// é exibida na janela do console
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Essa propriedade fornece uma forma simples de trocar completamente o conteúdo de um elemento. Por exemplo, o conteúdo inteiro do elemento body pode ser excluído ao fazer:</p>
+
+<pre class="brush: js notranslate">// Troca o conteúdo de body por uma string vazia.
+document.body.innerHTML = "";  </pre>
+
+<p>A propriedade <code>innerHTML</code> de vários tipos de elementos — incluindo {{HTMLElement("body")}} ou {{HTMLElement("html")}} — pode ser retornada ou trocada. Essa também pode ser usada para ver o código fonte de uma página que foi modificada dinamicamente:</p>
+
+<pre class="brush: js notranslate">// Copie e cole este código, em uma única linha, na barra de endereços
+javascript:"&lt;pre&gt;"+document.documentElement.innerHTML.replace(/&lt;/g,"&amp;lt;") + "&lt;/pre&gt;";
+</pre>
+
+<p>Essa propriedade foi implementada inicialmente pelos navegadores web, e então especificada pela WHATWG e W3C no HTML5. Implementações antigas talvez não tenham implementado-a exatamente da mesma forma. Por exemplo, quando um texto é inserido em uma caixa de texto, o Internet Explorer muda o valor do atributo innerHTML dessa entrada, mas os navegadores Gecko não.</p>
+
+<h3 id="Considerações_de_segurança">Considerações de segurança</h3>
+
+<p>Não é incomum ver a propriedade innerHTML usada para inserir texto em uma página web. Isso vem com um risco de segurança.</p>
+
+<pre class="brush: js notranslate">var name = "John";
+
+// presumindo que el é um elemento DOM HTML
+el.innerHTML = name; // inofensivo, nesse caso
+
+// ...
+
+name = "&lt;script&gt;alert('I am John in an annoying alert!')&lt;/script&gt;";
+el.innerHTML = name; // inofensivo, nesse caso</pre>
+
+<p>Embora isso talvez se pareça como um ataque  {{interwiki("wikipedia", "cross-site scripting")}}, o resultado é inofensivo. O HTML5 especifica que uma tag {{HTMLElement("script")}}, inserida via <code>innerHTML</code>, <a href="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0" title="http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">não deve ser executada</a>.</p>
+
+<p>No entanto, há formas de se executar JavaScript sem usar elementos {{HTMLElement("script")}}, por isso ainda há um risco de segurança sempre que você usa <code>innerHTML</code> para definir uma string sobre a qual você não tem controle. Por exemplo:</p>
+
+<pre class="brush: js notranslate" style="font-size: 14px;">const name = "&lt;img src='x' onerror='alert(1)'&gt;";
+el.innerHTML = name; // exibe uma caixa de alerta</pre>
+
+<p>Por essa razão, recomenda-se que você não use o <code>innerHTML</code> quando estiver inserindo texto puro; como alternativa, utilize {{domxref("node.textContent")}}. Isso não interpreta o conteúdo passado como HTML, mas em vez disso, insere-o como texto puro.</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr style="background-color: rgb(255, 204, 255);">
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#widl-Element-innerHTML', 'Element.innerHTML')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li><a class="external" href="http://innerdom.sourceforge.net/"><code>innerDOM</code></a> - Para aqueles que desejam aderir aos padrões, aqui oferece um conjunto de funções JavaScript para serializar ou analisar XML, de modo a configurar o conteúdo do elemento definido como uma string(s) através do DOM ou recuperando o conteúdo do elemento obtido a partir do DOM como uma string.</li>
+ <li><a href="/en-US/docs/DOM/Element.insertAdjacentHTML" title="/en-US/docs/DOM/Element.insertAdjacentHTML">insertAdjacentHTML</a> - Uma alternativa para o innerHTML, permitindo você anexar um novo HTML, ao invés de trocá-la.</li>
+ <li><a class="external" href="http://code.google.com/p/jssaxparser/" title="http://code.google.com/p/jssaxparser/">jssaxparser</a> - Uma solução mais robusta (embora mais pesada) do innerDOM (suporta análise com namespaces, atributos com aspas simples, seções CDATA, etc.), esse é o analisador SAX2 quando usado com seu manipulador de conteúdo DOM. (Oferece String para DOM; DOM para String é <a class="external" href="http://code.assembla.com/brettz9/subversion/nodes/DOMToString" title="http://code.assembla.com/brettz9/subversion/nodes/DOMToString">significantemente mais fácil</a>)</li>
+ <li>Considerações de eficiência: Em <a class="external" href="http://www.quirksmode.org/dom/innerhtml.html" title="http://www.quirksmode.org/dom/innerhtml.html">quirksmode</a></li>
+</ul>
diff --git a/files/pt-br/web/api/element/insertadjacenthtml/index.html b/files/pt-br/web/api/element/insertadjacenthtml/index.html
new file mode 100644
index 0000000000..89a0bbdfcc
--- /dev/null
+++ b/files/pt-br/web/api/element/insertadjacenthtml/index.html
@@ -0,0 +1,138 @@
+---
+title: Element.insertAdjacentHTML()
+slug: Web/API/Element/insertAdjacentHTML
+translation_of: Web/API/Element/insertAdjacentHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Summary" name="Summary">Resumo</h2>
+
+<p><code>insertAdjacentHTML </code>analisa o texto especificado como HTML ou XML e insere os nós que resultam na árvore DOM em uma posição especificada. Não reanalisa o elemento que está a ser utilizado e, portanto, não corrompe os elementos existentes dentro do elemento. Esta, e evitando a etapa extra de serialização, torna-o muito mais rápido do que a manipulação direta innerHTML.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre><em>element</em>.insertAdjacentHTML(<em>posição</em>, <em>texto</em>);</pre>
+
+<p><strong><code>Posição</code></strong> é a posição em relação ao elemento, e deve ser um dos seguintes tipos:</p>
+
+<dl>
+ <dt><code>'beforebegin'</code></dt>
+ <dd>Antes do elemento.</dd>
+ <dt><code>'afterbegin'</code></dt>
+ <dd>Dentro do elemento, antes de seu primeiro filho (childNode).</dd>
+ <dt><code>'beforeend'</code></dt>
+ <dd>Dentro do elemento, após seu último filho (childNode) .</dd>
+ <dt><code>'afterend'</code></dt>
+ <dd>Após o elemento.</dd>
+</dl>
+
+<p><code><strong>texto</strong> </code>é a string a ser analisada como HTML ou XML e inserido na árvore.</p>
+
+<h3 id="Visualização_da_posição_de_nomes">Visualização da posição de nomes</h3>
+
+<pre class="brush: html">&lt;!-- beforebegin --&gt;
+&lt;p&gt;
+&lt;!-- afterbegin --&gt;
+foo
+&lt;!-- beforeend --&gt;
+&lt;/p&gt;
+&lt;!-- afterend --&gt;</pre>
+
+<div class="note"><strong>Nota:</strong>  As posições beforeBegin e afterEnd funcionam apenas se o nó está em uma árvore DOM e tem um elemento pai.</div>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush: js">// Estrutura inicial:
+// &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;');
+
+// Neste ponto, a nova estrutura é:
+// &lt;div id="one"&gt;one&lt;/div&gt;
+// &lt;div id="two"&gt;two&lt;/div&gt;</pre>
+
+<h2 id="Specification" name="Specification">Especificação</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 Parsing', '#insertadjacenthtml()', 'Element.insertAdjacentHTML()')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade de Navegadores</h2>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{ CompatibilityTable() }}</span></h2>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("8.0") }}</td>
+   <td>4.0*</td>
+   <td>7.0</td>
+   <td>4.0 (527)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th> Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("8.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h3 id="Questão_no_IE">Questão no IE:</h3>
+
+<ul>
+ <li>No IE8, as mudanças no dom são feitas somente depois do JS ter terminado de carregar, então se você precisa acessar os nós gerados,  terá que fazê-lo de uma forma assíncrona.</li>
+</ul>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("Node.appendChild()")}} (mesmo efeito de <code>beforeend</code>)</li>
+ <li><a class="external" href="http://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external"> por Henri Sivonen incluem benchmarks que demonstram que insertAdjacentHTML pode ser bem rápido em alguns casos.</span></li>
+</ul>
diff --git a/files/pt-br/web/api/element/matches/index.html b/files/pt-br/web/api/element/matches/index.html
new file mode 100644
index 0000000000..06ce8b5c31
--- /dev/null
+++ b/files/pt-br/web/api/element/matches/index.html
@@ -0,0 +1,165 @@
+---
+title: Element.matches()
+slug: Web/API/Element/matches
+translation_of: Web/API/Element/matches
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>O método <strong><code>Element.matches()</code></strong> retorna verdadeiro se o elemento puder ser selecionado pela sequência de caracteres específica; caso contrário retorna falso.</p>
+
+<div class="warning">
+<p>Diversos navegadores implementam isto, prefixado, sob nome não padronizado <code>matchesSelector()</code>.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>var result</em> = <em>element</em>.matches(selectorString);
+</pre>
+
+<ul>
+ <li><code>result contém o valor de retorno true ou false.</code></li>
+ <li><code>selectorString</code> é uma string representando o seletor para teste.</li>
+</ul>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: html">&lt;ul id="birds"&gt;
+  &lt;li&gt;Orange-winged parrot&lt;/li&gt;
+  &lt;li class="endangered"&gt;Philippine eagle&lt;/li&gt;
+  &lt;li&gt;Great white pelican&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script type="text/javascript"&gt;
+  var birds = document.getElementsByTagName('li');
+
+  for (var i = 0; i &lt; birds.length; i++) {
+    if (birds[i].matches('.endangered')) {
+      console.log('The ' + birds[i].textContent + ' is endangered!');
+    }
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Isto irá logar "The Philippine eagle is endangered!" para o console, desde que o elemento tenha de fato um atributo de classe com o valor <code>endangered</code>.</p>
+
+<h2 id="Exceções">Exceções</h2>
+
+<dl>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>O seletor de string específico é inválido.</dd>
+</dl>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Para navegadores que não suportam <code>Element.matches()</code> ou <code>Element.matchesSelector()</code>,  mass possuem suporte para <code>document.querySelectorAll()</code>, existe um polyfill:</p>
+
+<pre>if (!Element.prototype.matches) {
+    Element.prototype.matches =
+        Element.prototype.matchesSelector ||
+        Element.prototype.mozMatchesSelector ||
+        Element.prototype.msMatchesSelector ||
+        Element.prototype.oMatchesSelector ||
+        Element.prototype.webkitMatchesSelector ||
+        function(s) {
+            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+                i = matches.length;
+            while (--i &gt;= 0 &amp;&amp; matches.item(i) !== this) {}
+            return i &gt; -1;
+        };
+}</pre>
+
+<h2 id="Especificação">Especificação</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</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>Original support with a non-standard name</td>
+   <td>
+    <p>{{CompatVersionUnknown}}<sup>[1]</sup></p>
+   </td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[2]</sup></td>
+   <td>9.0<sup>[3]</sup></td>
+   <td>11.5<sup>[4]</sup><br>
+    15.0<sup>[1]</sup></td>
+   <td>5.0<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Specified version</td>
+   <td>{{CompatChrome("34")}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>21.0</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Original support with a non-standard name</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Specified version</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("34")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Esta feature foi implementada com o nome não padronizado <code>webkitMatchesSelector</code>.</p>
+
+<p>[2] Esta feature foi implementada com o nome não padronizado <code>mozMatchesSelector</code>. Anteriormente para o Gecko 2.0, seletores de string inválido faziam com que retornasse false ao invés de empurrar uma exceção.</p>
+
+<p>[3] Esta feature foi implementada com o nome não padronizado <code>msMatchesSelector</code>.</p>
+
+<p>[4] Esta feature foi implementada com o nome não padronizado <code>oMatchesSelector</code>.</p>
diff --git a/files/pt-br/web/api/element/mousedown_event/index.html b/files/pt-br/web/api/element/mousedown_event/index.html
new file mode 100644
index 0000000000..bbddbff605
--- /dev/null
+++ b/files/pt-br/web/api/element/mousedown_event/index.html
@@ -0,0 +1,235 @@
+---
+title: mousedown
+slug: Web/API/Element/mousedown_event
+tags:
+  - API
+  - DOM
+  - Interface
+  - NeedsSpecTable
+  - Reference
+  - events
+translation_of: Web/API/Element/mousedown_event
+---
+<div>{{APIRef}}</div>
+
+<p>O evento <code>mousedown</code> é ativado quando um botão de um dispositivo apontador é pressionado sobre um elemento.</p>
+
+<h2 id="Informação_geral">Informação geral</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Especificação</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("MouseEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Sim</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt>
+ <dd style="margin: 0 0 0 120px;">Sim</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Alvo</dt>
+ <dd style="margin: 0 0 0 120px;">Elemento</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Ação Padrão</dt>
+ <dd style="margin: 0 0 0 120px;">Varia: Inicia um operação de arrastar/soltar; inicia a seleção de texto; inicia a interação de rolagem/arrastar (junto do botão do meio do mouse, se suportado)</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</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>
+    <p>O alvo do evento (o alvo mais alto na árvore do DOM).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>O tipo de evento</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><code>Boolean</code></td>
+   <td>O evento é cancelável ou não?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>{{domxref("WindowProxy")}}</td>
+   <td>{{domxref("document.defaultView")}} (<code>window</code> do documento)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>
+    <p>Um número de cliques consecutivos que aconteceu num pequeno espaço de tempo, acrescido em um.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>O nó que teve o listener do evento anexado.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Para os eventos <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> e <code>mouseleave</code>: o alvo do evento complementar (o alvo do <code>mouseleave</code> no caso de um evento <code>mouseenter</code>). Caso contrário, <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>A coordenada X do mouse baseada nas coordenadas globais (tela).</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>A coordenada Y do mouse baseada nas coordenadas globais (tela).</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>A coordenada X do ponteiro do mouse baseada nas coordenadas locais (conteúdo do DOM).</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>A coordenada Y do ponteiro do mouse baseada nas coordenadas locais (conteúdo do DOM).</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>O número do botão que foi pressionado quando o evento mouse foi ativado: Botão esquerdo = 0, botão do meio = 1 (se presente), botão direito = 2. Para os mouses configurados para uso por canhotos onde as ações do mouse são invertidas, os valores são lidos da direita para a esquerda.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>
+    <p>Os botões pressionados que foram pressionados quando o evento do mouse foi ativado: Botão esquerdo = 1, botão direito = 2, botão do meio (roda) = 4, 4º botão (geralmente, o "botão de voltar") = 8, 5º botão (geralmente, o "botão de avançar") = 16. Se dois ou mais botões são pressionados, retorna a soma lógica dos valores. Exemplo: se o Botão esquerdo e o Botão direito são pressionados, retorna 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">Mais informações</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>A quantidade de pressão aplicada a um dispositivo touch ou tablet quando o evento estava sendo gerado; este valor varia entre 0.0 (pressão mínima) e 1.0 (pressão máxima).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> se a tecla control estava pressionada quando o evento foi ativado. Caso contrário, <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> se a tecla shift estava pressionada quando o evento foi ativado. Caso contrário, <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> se a tecla alt estava pressionada quando o evento foi ativado. Caso contrário, <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> se a tecla meta estava pressionada quando o evento foi ativado. Caso contrário, <code>false</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Em elementos desativados</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</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>Suporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Em elementos desativados</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Só funciona em elementos {{HTMLElement("textarea")}} e alguns tipos do elemento {{HTMLElement("input")}}.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{Event("mouseup")}}</li>
+ <li>{{Event("mousemove")}}</li>
+ <li>{{Event("click")}}</li>
+ <li>{{Event("dblclick")}}</li>
+ <li>{{Event("mouseover")}}</li>
+ <li>{{Event("mouseout")}}</li>
+ <li>{{Event("mouseenter")}}</li>
+ <li>{{Event("mouseleave")}}</li>
+ <li>{{Event("contextmenu")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/element/mouseenter_event/index.html b/files/pt-br/web/api/element/mouseenter_event/index.html
new file mode 100644
index 0000000000..881958914b
--- /dev/null
+++ b/files/pt-br/web/api/element/mouseenter_event/index.html
@@ -0,0 +1,314 @@
+---
+title: mouseenter
+slug: Web/API/Element/mouseenter_event
+translation_of: Web/API/Element/mouseenter_event
+---
+<div>{{APIRef}}</div>
+
+<p>O evento <code>mouseenter</code> é disparado quando um dispositivo de apontamento (geralmente um mouse) se move sobre um elemento (para dentro do mesmo).</p>
+
+<p>Similar ao {{event('mouseover')}}, ele se diferencia no fato de que não ocorre a fase <a href="/en-US/docs/Web/API/Event/bubbles">bubble</a> e não é disparado quando o cursor / apontador mover-se do espaço físico de um de seus descendentes para o seu próprio espaço físico.</p>
+
+<div style="-moz-column-width: 455px; -webkit-column-width: 455px; column-width: 455px; border: solid 1px; padding: 5px; margin-bottom: 10px;">
+<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5908/=mouseenter.png"></div>
+Um evento <code>mouseenter</code> é enviado para cada elemento da hierarquia ao entrar neles. Aqui 4 eventos são enviados aos quatro elementos da hierarquia quando o cursor / apontador chega no Text.
+
+<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5909/=mouseover.png"></div>
+Um único evento <code>mouseover</code> é enviado ao elemento de maior profundidade na árvore DOM, a partir do qual ocorre a fase bubble e o mesmo percorre subindo na hierarquia dos elementos  até que seja cancelado por um <em>handler</em> ou alcance a raíz da árvore.</div>
+
+<p>De acordo com a profundidade da hierarquia, a quantidade de eventos <code>mouseenter</code> disparados pode se tornar muito grande e causar problemas de performance significativos. Nestes casos é melhor escutar por eventos mouseover.</p>
+
+<p>Combinado ao comportamento do seu evento simétrico, <code>mouseleave</code>, o evento DOM <code>mouseenter</code> age de modo bastante similar à pseudo-classe CSS {{cssxref(':hover')}}.</p>
+
+<h2 id="Informações_Gerais">Informações Gerais</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Especificação</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref('MouseEvent')}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Sincronismo</dt>
+ <dd style="margin: 0 0 0 120px;">Síncrono</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Fase Bubble</dt>
+ <dd style="margin: 0 0 0 120px;">Não</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt>
+ <dd style="margin: 0 0 0 120px;">Não</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Ação Padrão</dt>
+ <dd style="margin: 0 0 0 120px;">Nenhuma</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</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>Boolean</td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><code>Boolean</code></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>{{domxref("WindowProxy")}}</td>
+   <td>{{domxref("document.defaultView")}} (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The <a href="/en-US/docs/Web/Events/mouseover#Example"><code>mouseover</code> </a>documentation has an example illustrating the difference between <code>mouseover</code> and <code>mouseenter</code>.</p>
+
+<p>The following example illustrates how to use <code>mouseover</code> to simulate the principle of event delegation for the mouseenter event.</p>
+
+<pre class="brush: html">&lt;ul id="test"&gt;
+  &lt;li&gt;
+    &lt;ul class="enter-sensitive"&gt;
+      &lt;li&gt;item 1-1&lt;/li&gt;
+      &lt;li&gt;item 1-2&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;ul class="enter-sensitive"&gt;
+      &lt;li&gt;item 2-1&lt;/li&gt;
+      &lt;li&gt;item 2-2&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+  var delegationSelector = ".enter-sensitive";
+
+  document.getElementById("test").addEventListener("mouseover", function( event ) {
+    var target = event.target,
+        related = event.relatedTarget,
+        match;
+
+    // search for a parent node matching the delegation selector
+    while ( target &amp;&amp; target != document &amp;&amp; !( match = matches( target, delegationSelector ) ) ) {
+        target = target.parentNode;
+    }
+
+    // exit if no matching node has been found
+    if ( !match ) { return; }
+
+    // loop through the parent of the related target to make sure that it's not a child of the target
+    while ( related &amp;&amp; related != target &amp;&amp; related != document ) {
+        related = related.parentNode;
+    }
+
+    // exit if this is the case
+    if ( related == target ) { return; }
+
+    // the "delegated mouseenter" handler can now be executed
+    // change the color of the text
+    target.style.color = "orange";
+    // reset the color after a small amount of time
+    setTimeout(function() {
+        target.style.color = "";
+    }, 500);
+
+
+  }, false);
+
+
+  // function used to check if a DOM element matches a given selector
+  // the following code can be replaced by this IE8 compatible function: https://gist.github.com/2851541
+  function matches( elem, selector ){
+    // the matchesSelector is prefixed in most (if not all) browsers
+    return elem.matchesSelector( selector );
+  };
+&lt;/script&gt;</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>30<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10<sup>[2]</sup></td>
+   <td>5.5</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatNo}} 15.0<br>
+    17.0</td>
+   <td>7<sup>[3]</sup></td>
+  </tr>
+  <tr>
+   <td>On disabled form elements</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("44.0")}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</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</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}}</td>
+  </tr>
+  <tr>
+   <td>On disabled form elements</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implemented in <a href="https://crbug.com/236215">bug 236215</a>.</p>
+
+<p>[2] Implemented in {{bug("432698")}}.</p>
+
+<p>[3] Safari 7 fires the event in many situations where it's not allowed to, making the whole event useless. See <a href="https://crbug.com/470258">bug 470258</a> for the description of the bug (it existed in old Chrome versions as well). Safari 8 has correct behavior</p>
+
+<p>[4] Implemented in {{bug("218093")}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{Event("mousedown")}}</li>
+ <li>{{Event("mouseup")}}</li>
+ <li>{{Event("mousemove")}}</li>
+ <li>{{Event("click")}}</li>
+ <li>{{Event("dblclick")}}</li>
+ <li>{{Event("mouseover")}}</li>
+ <li>{{Event("mouseout")}}</li>
+ <li>{{Event("mouseenter")}}</li>
+ <li>{{Event("mouseleave")}}</li>
+ <li>{{Event("contextmenu")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/element/mouseover_event/index.html b/files/pt-br/web/api/element/mouseover_event/index.html
new file mode 100644
index 0000000000..f4a5c56a9e
--- /dev/null
+++ b/files/pt-br/web/api/element/mouseover_event/index.html
@@ -0,0 +1,262 @@
+---
+title: mouseover
+slug: Web/API/Element/mouseover_event
+translation_of: Web/API/Element/mouseover_event
+---
+<p>O evento <code>mouseover</code> é acionado quando um dispositivo ponteiro é movido para o elemento que esteja escutando ou para um de seus filhos.</p>
+
+<h2 id="Informações_Gerais">Informações Gerais</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Especificação</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseover" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseover">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("MouseEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Sim</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Sim</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Alvo</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Ação Padrão</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</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>O evento alvo(o mais alto alvo na arvore do DOM).</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>Boolean</td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><code>Boolean</code></td>
+   <td>Whether the event is cancellable or not</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>{{domxref("WindowProxy")}}</td>
+   <td>{{domxref("document.defaultView")}} (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>This is always 0 as no button presses trigger this event (mouse movement does).</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons depressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are depressed, returns the logical sum of the values. E.g., if Left button and Right button are depressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<p>The following example illustrates the difference between <code>mouseover</code> and <a href="/en-US/docs/Web/Events/mouseenter" title="/en/Mozilla_event_reference/mouseenter"><code>mouseenter</code></a> events.</p>
+
+<pre class="brush: html">&lt;ul id="test"&gt;
+  &lt;li&gt;item 1&lt;/li&gt;
+  &lt;li&gt;item 2&lt;/li&gt;
+  &lt;li&gt;item 3&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+  var test = document.getElementById("test");
+
+
+  // this handler will be executed only once when the cursor moves over the unordered list
+  test.addEventListener("mouseenter", function( event ) {
+    // highlight the mouseenter target
+    event.target.style.color = "purple";
+
+    // reset the color after a short delay
+    setTimeout(function() {
+      event.target.style.color = "";
+    }, 500);
+  }, false);
+
+
+  // this handler will be executed every time the cursor is moved over a different list item
+  test.addEventListener("mouseover", function( event ) {
+    // highlight the mouseover target
+    event.target.style.color = "orange";
+
+    // reset the color after a short delay
+    setTimeout(function() {
+      event.target.style.color = "";
+    }, 500);
+  }, false);
+&lt;/script&gt;
+</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>Edge</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>
+  <tr>
+   <td>On disabled form elements</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("44.0")}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></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>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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>On disabled form elements</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Only works for {{HTMLElement("textarea")}} elements and some {{HTMLElement("input")}} element types.</p>
+
+<p>[2] Implemented in {{bug("218093")}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{Event("mousedown")}}</li>
+ <li>{{Event("mouseup")}}</li>
+ <li>{{Event("mousemove")}}</li>
+ <li>{{Event("click")}}</li>
+ <li>{{Event("dblclick")}}</li>
+ <li>{{Event("mouseover")}}</li>
+ <li>{{Event("mouseout")}}</li>
+ <li>{{Event("mouseenter")}}</li>
+ <li>{{Event("mouseleave")}}</li>
+ <li>{{Event("contextmenu")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/element/name/index.html b/files/pt-br/web/api/element/name/index.html
new file mode 100644
index 0000000000..d91ce0aa28
--- /dev/null
+++ b/files/pt-br/web/api/element/name/index.html
@@ -0,0 +1,79 @@
+---
+title: Element.name
+slug: Web/API/Element/name
+tags:
+  - API
+  - DOM
+  - Element
+  - NeedsBrowserCompatibility
+  - NeedsUpdate
+  - Property
+  - Reference
+  - Web
+translation_of: Web/API
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p><code><strong>name</strong></code> recebe ou ajusta uma propriedade name de um objeto do DOM; ele se aplica somente aos seguintes elementos: {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }} e {{ HTMLelement("textarea") }}.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> A propriedade <code>name</code> não existe para outros elementos; diferente de <a href="/en/DOM/Element.tagName" title="en/DOM/element.tagName"><code>tagName</code></a> e <a href="/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName"><code>nodeName</code></a>, ela não é uma propriedade das interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.</p>
+</div>
+
+<p><code>name</code> pode ser usada no método {{ domxref("document.getElementsByName()") }}, em um <a href="/en/DOM/HTMLFormElement" title="en/DOM/form">form</a> ou com uma coleção de elementos de formulário. Ela pode retornar um único elemento ou uma coleção quando usada com um formulário ou elementos de coleção.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>;
+var elName = <em>HTMLElement</em>.name;
+
+var fControl = <em>HTMLFormElement</em>.<em>elementName</em>;
+var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>;
+</pre>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="eval">&lt;form action="" name="formA"&gt;
+  &lt;input type="text" value="foo"&gt;
+&lt;/form&gt;
+
+&lt;script type="text/javascript"&gt;
+
+  // Recebe uma referência ao primeiro elemento no formulário
+  var formElement = document.forms['formA'].elements[0];
+
+  // Fornece um name a ele
+  formElement.name = 'inputA';
+
+  // Exibe o valor do input
+  alert(document.forms['formA'].elements['inputA'].value);
+
+&lt;/script&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>No Internet Explorer (IE), não é possível ajustar ou modificar a propriedade <code>name</code> de objetos do DOM criados com {{ domxref("document.createElement()") }}.</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<p>Especificação W3C DOM 2 HTML:</p>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34812697">Button</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li>
+</ul>
diff --git a/files/pt-br/web/api/element/outerhtml/index.html b/files/pt-br/web/api/element/outerhtml/index.html
new file mode 100644
index 0000000000..1cdfa0826d
--- /dev/null
+++ b/files/pt-br/web/api/element/outerhtml/index.html
@@ -0,0 +1,144 @@
+---
+title: Element.outerHTML
+slug: Web/API/Element/outerHTML
+translation_of: Web/API/Element/outerHTML
+---
+<p>{{APIRef("DOM")}}</p>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>O atributo <code>outerHTML</code> da estrutura DOM(Document object model) obtem  um fragmento serializado de código HTML descrevendo o elemento incluindo seus descendentes. É possível substituir o elemento em questão com nós obtidos através da análise de uma string.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<p><em>var conteudo</em> = <em>elemento</em>.outerHTML;</p>
+
+<p>Na atribuição, <em>conteudo</em> armazena o fragmento de código HTML que descreve o elemento e seus descentes.</p>
+
+<pre class="eval"><em>elemento</em>.outerHTML = conteudo;
+</pre>
+
+<p><code>Atribui a <em>elemento</em></code>  os nós obtidos pela análise da  string <code>conteudo</code>, tendo nó pai de elemento como nó de contexto o para o algoritmo de análise do fragmento de código HTML.</p>
+
+<h2 id="Examples" name="Examples">Exemplos</h2>
+
+<p>Obtendo o valor da propriedade outerHtml de um elemento :</p>
+
+<pre class="brush: js">// HTML:
+// &lt;div id="d"&gt;&lt;p&gt;Conteúdo&lt;/p&gt;&lt;p&gt;Parágrafo&lt;/p&gt;&lt;/div&gt;
+
+d = document.getElementById("d");
+dump(d.outerHTML);
+
+// A string '&lt;div id="d"&gt;&lt;p&gt;Conteúdo&lt;/p&gt;&lt;p&gt;Parágrafo&lt;/p&gt;&lt;/div&gt;'
+// é mostrada na janela do console.
+</pre>
+
+<p>Substituindo um nó atribuindo- lhe a propriedade outerHTML</p>
+
+<pre class="brush: js">// HTML:
+// &lt;div id="container"&gt;&lt;div id="d"&gt;Isto é uma div.&lt;/div&gt;&lt;/div&gt;
+
+container = document.getElementById("container");
+d = document.getElementById("d");
+console.log(container.firstChild.nodeName); // mostra "DIV"
+
+d.outerHTML = "&lt;p&gt;Este parágrafo substitui a div original&lt;/p&gt;";
+console.log(container.firstChild.nodeName); // mostra "P"
+
+// A div #d não faz mais parte da estrutura do documento,
+// O novo parágrafo a substituiu.
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Se o elemento não tiver um nó pai, ou seja se o nó é a raiz do documento, tentar alterar sua propriedade outerHTML irá lançar um  <code><a href="/en/DOM/DOMException" title="DOMException">DOMException</a></code> com o código de erro <code>NO_MODIFICATION_ALLOWED_ERR</code>. Por exemplo:</p>
+
+<pre class="brush: js">document.documentElement.outerHTML = "test";  // Irá lançar uma DOMException
+</pre>
+
+<p>inclusive, quando o elemento for substituído na estrutura do documento, a variável a qual a propriedade <code>outerHTML</code> foi atribuída ainda irá conter uma referência para o elemento original.</p>
+
+<pre class="brush: js">var p = document.getElementsByTagName("p")[0];
+console.log(p.nodeName); // mostra: "P"
+p.outerHTML = "&lt;div&gt;Esta div substituiu o parágrafo.&lt;/div&gt;";
+console.log(p.nodeName); // ainda contém "P";
+</pre>
+
+<h2 id="Specification" name="Specification">Especificação</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 Parsing', '#outerhtml', 'Element.outerHTML')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</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>Suporte básico</td>
+   <td>{{ CompatGeckoDesktop("11") }}</td>
+   <td>0.2</td>
+   <td>4.0</td>
+   <td>7</td>
+   <td>1.3</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>
+    <p>Suporte básico</p>
+   </td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("11") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+ <li>MSDN: <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534310%28v=vs.85%29.aspx">outerHTML Property</a> </li>
+</ul>
diff --git a/files/pt-br/web/api/element/queryselector/index.html b/files/pt-br/web/api/element/queryselector/index.html
new file mode 100644
index 0000000000..cbd41e09ff
--- /dev/null
+++ b/files/pt-br/web/api/element/queryselector/index.html
@@ -0,0 +1,94 @@
+---
+title: Element.querySelector()
+slug: Web/API/Element/querySelector
+tags:
+  - API
+  - DOM
+  - Elemento
+  - Referencia
+translation_of: Web/API/Element/querySelector
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Retorna o primeiro elemento descendente do elemento em que a função foi invocada e que corresponde aos seletores especificado. </p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>elemento</var> = elementoBase.querySelector(seletores);
+</pre>
+
+<ul>
+ <li><code>elemento</code> e<code> elementoBase</code> são objetos {{domxref("element")}}.</li>
+ <li><code>selectores</code> é um grupo de  <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectores</a>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<p>Neste exemplo é retornado o primeiro elemento <code>style</code> que, ou não tem nenhum atributo type, ou tem o atributo type igual a  <code>text/css</code>:</p>
+
+<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Retorna <code>null </code>se nenhum elemento for encontrado; caso contrário retorna o primeiro elemento; </p>
+
+<p>Lança uma exceção <code>SYNTAX_ERR</code> se o grupo de seletores é inválido.</p>
+
+<p><span style="font-family: courier new;"><span>querySelector()</span></span> foi introduzido em WebApps API.</p>
+
+<p>O argumento de string do <code>querySelector</code> deve seguir a sintaxe CSS. Veja exemplos concretos em {{domxref("document.querySelector")}}</p>
+
+<h2 id="Compatibilidade_de_Browsers">Compatibilidade de Browsers</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Browser</th>
+   <th>Suporte</th>
+   <th>Notas</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>8</td>
+   <td>(IE8) apenas selectores CSS 2.1</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>3.5</strong> (1.9.1)</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>10</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Chrome</td>
+   <td>1</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Safari (webkit)</td>
+   <td>3.2 (525.3)</td>
+   <td><a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=16587">webk.it/16587</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li>{{spec("http://www.w3.org/TR/selectors-api/","Selectors API Level 1","rec")}}</li>
+ <li>{{spec("http://www.w3.org/TR/selectors-api2/","Selectors API Level 2","wd")}}</li>
+ <li>{{spec("http://dev.w3.org/2006/webapi/selectors-api2/","Selectors API Level 2","ed")}}</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Veja Também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Element.querySelectorAll"><code>element.querySelectorAll</code></a></li>
+ <li><a href="/en-US/docs/DOM/Document.querySelector"><code>document.querySelector</code></a></li>
+ <li><a href="/en-US/docs/DOM/Document.querySelectorAll"><code>document.querySelectorAll</code></a></li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li>
+</ul>
diff --git a/files/pt-br/web/api/element/queryselectorall/index.html b/files/pt-br/web/api/element/queryselectorall/index.html
new file mode 100644
index 0000000000..92f6e93506
--- /dev/null
+++ b/files/pt-br/web/api/element/queryselectorall/index.html
@@ -0,0 +1,118 @@
+---
+title: Element.querySelectorAll()
+slug: Web/API/Element/querySelectorAll
+translation_of: Web/API/Element/querySelectorAll
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>Retorna uma <span style="line-height: 1.5;"> </span><a href="/en-US/docs/DOM/NodeList" style="line-height: 1.5;" title="DOM/NodeList"><code>NodeList</code></a><span style="line-height: 1.5;"> de todos os elementos descendentes do elemento que foi invocado que sejam compatíveis com o grupo de seletores CSS especificados.</span></p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>);
+</pre>
+
+<p>Onde</p>
+
+<ul>
+ <li><code>elementList</code> é uma lista não-viva de objetos <a href="/en-US/docs/DOM/element" title="DOM/Element">element</a>.</li>
+ <li><code>baseElement</code> é um objeto <a href="/en-US/docs/DOM/element" title="DOM/element">elemento</a>.</li>
+ <li><code>selectors</code> é um grupo de <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">seletores</a> que serão procurados.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplos</h2>
+
+<p>Este exemplo retorna uma lista de todos os elementos <code>p</code> no corpo do HTML:</p>
+
+<pre class="brush: js">var matches = document.body.querySelectorAll('p');
+</pre>
+
+<p><span style="line-height: 1.5;">Este exemplo retorna uma lista de elementos </span><code style="font-style: normal; line-height: 1.5;">p</code><span style="line-height: 1.5;"> que estejam contidos em outro elemento, o qual é uma </span><code style="font-style: normal; line-height: 1.5;">div</code><span style="line-height: 1.5;"> que tem a classe 'highlighted':</span></p>
+
+<p> </p>
+
+<pre class="brush:js">var el = document.querySelector('#test');
+var matches = el.querySelectorAll('div.highlighted &gt; p'); </pre>
+
+<p>Este exemplo retorna uma lista de elementos <code>iframe</code> que contenham um atributo <strong>data</strong> 'src':</p>
+
+<pre class="brush: js">var matches = el.querySelectorAll('iframe[data-src]');
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Joga uma excessão <code>SYNTAX_ERR</code> se o grupo especificado de seletores for inválido.</p>
+
+<p><code>querySelectorAll()</code> foi introduzida na WebApps API.</p>
+
+<p>A <em>string</em> passada como argumento para <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">querySelectorAll<code> </code></span>deve seguir a sintaxe do CSS. veja {{domxref("document.querySelector")}} para um exemplo concreto.</p>
+
+<p>Lembre-se que o valor retornado é uma NodeList, então não é recomendado o uso de recursões for...in, nem de nenhum método de <em>array</em>. Se realmente houver a necessidade de usar métodos de uma <em>array,</em> então o NodeList deve ser convertido em uma <em>array </em>antes de ser usado.</p>
+
+<h2 id="Compatibilidade_com_Browsers">Compatibilidade com Browsers</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>1</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8</td>
+   <td>10</td>
+   <td>3.2 (525.3)</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>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification"> </h2>
+
+<h2 id="Specification" name="Specification">Especificações</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Document.querySelectorAll" title="DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li>
+ <li><a href="/en-US/docs/DOM/Document.querySelector" title="DOM/document.querySelector"><code>document.querySelector</code></a></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/pt-br/web/api/element/removeattribute/index.html b/files/pt-br/web/api/element/removeattribute/index.html
new file mode 100644
index 0000000000..c160dee957
--- /dev/null
+++ b/files/pt-br/web/api/element/removeattribute/index.html
@@ -0,0 +1,36 @@
+---
+title: Element.removeAttribute()
+slug: Web/API/Element/removeAttribute
+translation_of: Web/API/Element/removeAttribute
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>removeAttribute</code> remove um atributo de um elemento específico.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="eval"><em>element</em>.removeAttribute(<em>attrName</em>);
+</pre>
+
+<ul>
+ <li><code>attrName</code> é o nome, em formato de texto (<em>string</em>), do atributo a ser removido do <code>element</code><em>.</em></li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre>// &lt;div id="div1" align="left" width="200px"&gt;
+document.getElementById("div1").removeAttribute("align");
+// agora: &lt;div id="div1" width="200px"&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Observação</h2>
+
+<p>Você deve usar <code>removeAttribute</code> ao invés de atribuir <code>null</code> ao atributo usando <a href="/en/DOM/element.setAttribute" title="en/DOM/element.setAttribute">setAttribute</a>.</p>
+
+<p>Tentar remover um atributo que não existe no elemento não fará que uma exceção seja lançada.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Specification" name="Specification">Especificação</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> (introduzido no <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>
diff --git a/files/pt-br/web/api/element/scrollintoview/index.html b/files/pt-br/web/api/element/scrollintoview/index.html
new file mode 100644
index 0000000000..28714a4b1e
--- /dev/null
+++ b/files/pt-br/web/api/element/scrollintoview/index.html
@@ -0,0 +1,89 @@
+---
+title: Element.scrollIntoView()
+slug: Web/API/Element/scrollIntoView
+tags:
+  - API
+  - CSSOM Views
+  - DOM
+  - Elemento
+  - Experimental
+  - Referencia
+  - Rolagem
+  - View
+  - metodo
+  - scrollIntoView
+translation_of: Web/API/Element/scrollIntoView
+---
+<div>{{ APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>O método <code><strong>Element.scrollIntoView()</strong></code> move o elemento ao qual é aplicado para a área visível da janela do navegador.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox notranslate">element.scrollIntoView(); // Equivalente a element.scrollIntoView(true)
+element.scrollIntoView(<var>alignToTop</var>); // Argumentos booleanos
+element.scrollIntoView(<var>scrollIntoViewOptions</var>); // argumento Objeto
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>alignToTop</code> {{optional_inline}}</dt>
+ <dd>É um valor {{jsxref("Boolean")}}:
+ <ul>
+  <li>Se <code>true</code>, a parte superior do elemento ficará alinhada com o topo da área visível do elemento-pai. Correponde a <code>scrollIntoViewOptions: {block: "start", inline: "nearest"}</code>. Este é o valor default.</li>
+  <li><code><font face="Open Sans, Arial, sans-serif">Se </font>false</code>, a parte inferior do elemento ficará alinhada com o fundo da área visível do elemento-pai. Corresponde a <code>scrollIntoViewOptions: {block: "end", inline: "nearest"}</code></li>
+ </ul>
+ </dd>
+ <dt><code>scrollIntoViewOptions</code> {{optional_inline}}</dt>
+ <dd>Um booleano ou um objeto com as seguintes opções:</dd>
+ <dd>
+ <pre class="idl notranslate">{
+  behavior: <strong>"auto"</strong>  | "instant" | "smooth",
+  block:    <strong>"start"</strong> | "center" | "end" | "nearest",
+  inline:   "start" | "center" | "end" | "<strong>nearest</strong>"
+}</pre>
+ </dd>
+ <dd>Caso seja um valor booleano, true corresponde a <code>{block: "start"}</code> e false<font face="Consolas, Liberation Mono, Courier, monospace"> a</font> <code>{block: "end"}</code>.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js notranslate">var element = document.getElementById("box");
+
+element.scrollIntoView();
+element.scrollIntoView(false);
+element.scrollIntoView({block: "end"});
+element.scrollIntoView({block: "end", behavior: "smooth"});
+</pre>
+
+<h2 id="Observações">Observações</h2>
+
+<p>O elemento poderá não ser movido completamento ao topo ou ao fundo dependendo de sua composição com outros elementos.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificação</th>
+   <th>Status</th>
+   <th>Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>
+
+<p>{{Compat("api.Element.scrollIntoView")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Element.scrollIntoViewIfNeeded()")}}<a href="/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded"> </a>{{non-standard_inline}}</li>
+</ul>
diff --git a/files/pt-br/web/api/element/scrollleft/index.html b/files/pt-br/web/api/element/scrollleft/index.html
new file mode 100644
index 0000000000..30df424288
--- /dev/null
+++ b/files/pt-br/web/api/element/scrollleft/index.html
@@ -0,0 +1,83 @@
+---
+title: Element.scrollLeft
+slug: Web/API/Element/scrollLeft
+translation_of: Web/API/Element/scrollLeft
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>A propriedade <strong>Element.scrollLeft</strong> obtem, ou define o número de pixels do contéudo de um elemento que é rolado para a esquerda.</p>
+
+<p>Note que se os {{cssxref("direction")}} do elemento do elemento é rtl (direita-para-esquerda) então <code>scrollLeft</code> é <code>0</code> quando a barra de rolagem está na posição mais à direita (o início do conteúdo rolado) e então, fica cada vez mais negativa à medida que se desloca em direção ao fim do conteúdo.</p>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxe</h2>
+
+<pre class="eval">// Obtem o número de pixels rolado
+var <var>sLeft</var> = <var>element</var>.scrollLeft;
+</pre>
+
+<p><var>sLeft</var> é um inteiro representando o número de pixels do <em>elemento</em> que foi movido para a esquerda.</p>
+
+<pre class="eval">// Define o número de pixels rolado
+<var>element</var>.scrollLeft = 10;
+</pre>
+
+<p><code>scrollLeft</code> pode ser definido para qualquer valor inteiro, entretanto:</p>
+
+<ul>
+ <li>Se o elemento não pode ser rolado (ex.: ele é no overflow), <code>scrollLeft</code> é definido para 0.</li>
+ <li>Se definido um valor menor que 0 (maior que 0 para elementos direita-para-esquerda), <code>scrollLeft</code> é definido para 0.</li>
+ <li>Se o definido um valor maior que o máximo, que o conteúdo pode ser rolado, é<code>scrollLeft</code> é definido para o valor máximo.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;style&gt;
+        #container {
+            border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px;
+        }
+        #content {
+            background-color: #ccc; width: 250px;
+        }
+    &lt;/style&gt;
+    &lt;script&gt;
+        document.addEventListener('DOMContentLoaded', function () {
+            var button = document.getElementById('slide');
+            button.onclick = function () {
+                document.getElementById('container').scrollLeft += 20;
+            };
+        }, false);
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div id="container"&gt;
+        &lt;div id="content"&gt;Lorem ipsum dolor sit amet.&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;button id="slide" type="button"&gt;Slide&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="References" name="References">Referências</h2>
+
+<p>{{Compat("api.Element.scrollLeft")}}</p>
diff --git a/files/pt-br/web/api/element/scrolltop/index.html b/files/pt-br/web/api/element/scrolltop/index.html
new file mode 100644
index 0000000000..f8f7dc4cd6
--- /dev/null
+++ b/files/pt-br/web/api/element/scrolltop/index.html
@@ -0,0 +1,69 @@
+---
+title: Element.scrollTop
+slug: Web/API/Element/scrollTop
+translation_of: Web/API/Element/scrollTop
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>A propriedade Element.scrollTop obtém ou define o número de pixels quando o conteúdo de um elemento é rolado para baixo. O ScrollTop de um elemento é uma medida da distância do topo de um elemento para o seu conteúdo superior visível. Quando um conteúdo de elemento não gera uma barra de rolagem vertical, então o seu valor será padronizado scrollTop = 0.</p>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Sintaxe</h2>
+
+<pre class="eval">// Obtém o número de pixels rolados
+var<var> intElemScrollTop</var> = element.scrollTop;
+</pre>
+
+<p>Depois de executar este código, intElemScrollTop é um número inteiro correspondente ao número de pixels que o {{domxref ("elemento")}}  conteúdo foi rolado para cima.</p>
+
+<pre class="eval">// Define o número de pixels rolados
+<var>element</var>.scrollTop = <var>intValue</var>;
+</pre>
+
+<p><code>scrollTop pode ser definido como qualquer valor inteiro, com algumas ressalvas:</code></p>
+
+<ul>
+ <li>Se o elemento não pode ser rolada (por exemplo, se o elemento é não-rolagem), scrollTop = 0.</li>
+ <li>Se for definido como um valor menor do que 0, scrollTop é definido = 0.</li>
+ <li>Se for definido como um valor maior do que o máximo que o conteúdo pode ser rolada, scrollTop está definido para o máximo.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</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>
+
+<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>
+
+<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>
+
+<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>
+
+<p><img alt="Image:scrollTop.png" class="internal" src="/@api/deki/files/842/=ScrollTop.png"></p>
+
+<h2 id="Especificações">Especificações</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('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Referências">Referências</h2>
+
+<ul>
+ <li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop" title="http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop">W3C Draft CSSOM View Module</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx">MSDN's scrollTop definition</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="http://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx">MSDN's Measuring Element Dimension and Location</a></li>
+</ul>
diff --git a/files/pt-br/web/api/element/scrollwidth/index.html b/files/pt-br/web/api/element/scrollwidth/index.html
new file mode 100644
index 0000000000..9f0c3009b5
--- /dev/null
+++ b/files/pt-br/web/api/element/scrollwidth/index.html
@@ -0,0 +1,116 @@
+---
+title: Element.scrollWidth
+slug: Web/API/Element/scrollWidth
+translation_of: Web/API/Element/scrollWidth
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p>A propriedade de somente leitura <strong><code>Element.scrollWidth</code></strong> retorna a largura em pixels do conteúdo de um elemento ou a largura do elemento em si, o que for maior. Se o elemento for mais amplo do que a área de conteúdo (por exemplo, se houver barras de rolagem para percorrer o conteúdo), o <code>scrollWidth</code> é maior do que o <code>clientWidth</code>.</p>
+
+<div class="note">
+<p>Esta propriedade irá arredondar o valor para um número inteiro. Se você precisar de um valor fracionário, use {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth;</pre>
+
+<p><var>xScrollWidth</var> é a largura do conteúdo do <var>elemento</var> em pixels.</p>
+
+<h2 id="Example" name="Example">Examplo</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;Example&lt;/title&gt;
+    &lt;style&gt;
+        div {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        #aDiv {
+            width: 100px;
+        }
+
+        button {
+            margin-bottom: 2em;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+    &lt;div id="aDiv"&gt;
+        FooBar-FooBar-FooBar-FooBar
+    &lt;/div&gt;
+    &lt;button id="aButton"&gt;
+        Check for overflow
+    &lt;/button&gt;
+
+    &lt;div id="anotherDiv"&gt;
+        FooBar-FooBar-FooBar-FooBar
+    &lt;/div&gt;
+    &lt;button id="anotherButton"&gt;
+        Check for overflow
+    &lt;/button&gt;
+&lt;/body&gt;
+&lt;script&gt;
+    var buttonOne = document.getElementById('aButton'),
+    buttonTwo = document.getElementById('anotherButton'),
+    divOne = document.getElementById('aDiv'),
+    divTwo = document.getElementById('anotherDiv');
+
+    //check to determine if an overflow is happening
+    function isOverflowing(element) {
+        return (element.scrollWidth &gt; element.offsetWidth);
+    }
+
+    function alertOverflow(element) {
+        if (isOverflowing(element)) {
+            alert('Contents are overflowing the container.');
+        } else {
+            alert('No overflows!');
+        }
+    }
+
+    buttonOne.addEventListener('click', function() {
+        alertOverflow(divOne);
+    });
+
+    buttonTwo.addEventListener('click', function() {
+        alertOverflow(divTwo);
+    });
+&lt;/script&gt;
+&lt;/html&gt;
+
+</pre>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificação</th>
+   <th>Status</th>
+   <th>Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-scrollwidth", "Element.scrollWidth")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="References" name="References">Referências</h2>
+
+<p>{{Compat("api.Element.scrollWidth")}}</p>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Element.clientWidth")}}</li>
+ <li>{{domxref("HTMLElement.offsetWidth")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determinando as dimensões dos elementos</a></li>
+</ul>
diff --git a/files/pt-br/web/api/element/setattribute/index.html b/files/pt-br/web/api/element/setattribute/index.html
new file mode 100644
index 0000000000..0a3642be64
--- /dev/null
+++ b/files/pt-br/web/api/element/setattribute/index.html
@@ -0,0 +1,58 @@
+---
+title: Element.setAttribute()
+slug: Web/API/Element/setAttribute
+tags:
+  - Elemento
+  - IPA
+  - MOD
+  - Referencia
+  - metodo
+translation_of: Web/API/Element/setAttribute
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Adiciona um novo atributo ou modifica o valor de um atributo existente num elemento específico.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>element</em>.setAttribute(<em>name</em>, <em>value</em>);
+</pre>
+
+<ul>
+ <li><font face="Consolas, Liberation Mono, Courier, monospace"><code>name</code> é o nome do atributo como string.</font></li>
+ <li><code>value</code> é o novo valor desejado do atributo</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<p>No seguinte exemplo, <code>setAttribute()</code> é usado para definir o atributo {{htmlattrxref("disabled")}} em {{htmlelement("button")}}, desabilitado-o.</p>
+
+<pre class="brush: html">&lt;button&gt;Hello World&lt;/button&gt;</pre>
+
+<pre class="brush:js">var b = document.querySelector("button");
+
+b.setAttribute("disabled", "disabled");
+</pre>
+
+<p>{{ EmbedLiveSample('Example', '300', '50', '', 'Web/API/Element/setAttribute') }}</p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Quando chamado em um documento HTML, <code>setAttribute</code> lower-cases its attribute name argument.</p>
+
+<p>Se um atributo especificado já existe, então o valor do atributo é mudado para o valor passado para a função. Se não existe, então o atributo é criado.</p>
+
+<p>Apesar de <code><a href="/en-US/docs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute()</a></code> retornar <code>null</code> para atributos ausentes, você precisa usar <code><a href="/en-US/docs/DOM/element.removeAttribute" title="DOM/element.removeAttribute">removeAttribute()</a></code> ao invés de <code><em>elt</em>.setAttribute(<em>attr</em>, null)</code> para remover o atributo. Este último forçará o valor <code>null</code> para a string <code>"null"</code>, o que não é provavelmente o que você quer.</p>
+
+<p>Usar <code>setAttribute()</code> para modificar certos atributos, mais notavelmente valor em XUL, funciona inconsistentemente, como atributos específicos de valor padrão. Para acessar ou modificar os valores atuais, você deve usar as propriedades. Por exemplo, use <code><em>elt</em>.value</code> ao invés de <code><em>elt</em>.setAttribute('value', <em>val</em>)</code>.</p>
+
+<p>Para definir um atributo que não leva valor, assim como o atributo <code>autoplay</code> de um elemento {{HTMLElement("audio")}}, use <code>null</code> ou um valor vazio. Por exemplo: <code><em>elt</em>.setAttribute('autoplay', '')</code></p>
+
+<div>{{DOMAttributeMethods}}</div>
+
+<h2 id="Specification" name="Specification">Especificação</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> (introduzido em <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>
diff --git a/files/pt-br/web/api/element/setattributens/index.html b/files/pt-br/web/api/element/setattributens/index.html
new file mode 100644
index 0000000000..d4837965a7
--- /dev/null
+++ b/files/pt-br/web/api/element/setattributens/index.html
@@ -0,0 +1,33 @@
+---
+title: Element.setAttributeNS()
+slug: Web/API/Element/setAttributeNS
+translation_of: Web/API/Element/setAttributeNS
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>setAttributeNS</code> adiciona um novo atributo ou modifica o valor de um atributo com um namespace e um nome.</p>
+
+<p>Syntax</p>
+
+<pre class="eval"><em>element</em>.setAttributeNS(<em>namespace</em>,<em>name</em>,<em>value</em>)
+</pre>
+
+<ul>
+ <li><code>namespace</code> é uma string especificando o namespace do atributo.</li>
+ <li><code>name</code> é uma string identificando o atributo que sera definido.</li>
+ <li><code>value</code> é o novo valor desejado para o atributo.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="eval">var d = document.getElementById("d1");
+d.setAttributeNS("<span class="nowiki">http://www.mozilla.org/ns/specialspace</span>", "align", "center");
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">DOM Level 2 Core: setAttributeNS</a></p>
diff --git a/files/pt-br/web/api/element/tagname/index.html b/files/pt-br/web/api/element/tagname/index.html
new file mode 100644
index 0000000000..c0345f4763
--- /dev/null
+++ b/files/pt-br/web/api/element/tagname/index.html
@@ -0,0 +1,119 @@
+---
+title: Element.tagName
+slug: Web/API/Element/tagName
+tags:
+  - API
+  - DOM
+  - Gecko
+  - PrecisaCompatibilidadeBrowser
+  - Propriedade
+  - Referência DOM
+translation_of: Web/API/Element/tagName
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>Retorna o nome do elemento.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>nomeDoElemento</em> = element.tagName;
+</pre>
+
+<ul>
+ <li><code>nomeDoElemento</code> é a string contendo o nome do elemento atual.</li>
+</ul>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Em XML (e linguagens baseadas, como XHTML), <code>tagName </code>conserva o <em>case</em>  (caixa alta/baixa) da tag. Nos elementos HTML da árvore do DOM marcados como documentos HTML, <code>tagName </code>retorna o nome do elemento em <em>uppercase</em> (caixa alta). O valor de <code>tagName </code>é o mesmo que o <a href="/en-US/docs/Web/API/Node/nodeName">nodeName</a></p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<h3 id="conteúdo_HTML">conteúdo HTML</h3>
+
+<pre class="brush: html">&lt;span id="exemplo"&gt;Descrição do exemplo...&lt;/span&gt;
+</pre>
+
+<h3 id="conteúdo_JavaScript">conteúdo JavaScript</h3>
+
+<pre class="brush: js">var span = document.getElementById("exemplo");
+console.log(span.tagName);
+</pre>
+
+<p>Em XHTML (ou qualquer outro formato XML), "<code>span</code>" será a saída. Em HTML, "<code>SPAN</code>" será a saída.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificação</th>
+   <th>Status</th>
+   <th>Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-104682815", "Element.tagName")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-104682815", "Element.tagName")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_browser">Compatibilidade de 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</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</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>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/pt-br/web/api/element/touchstart_event/index.html b/files/pt-br/web/api/element/touchstart_event/index.html
new file mode 100644
index 0000000000..ae2649f49c
--- /dev/null
+++ b/files/pt-br/web/api/element/touchstart_event/index.html
@@ -0,0 +1,174 @@
+---
+title: touchstart
+slug: Web/API/Element/touchstart_event
+tags:
+  - Event
+  - Evento Toque
+  - Toque
+  - TouchEvent
+translation_of: Web/API/Element/touchstart_event
+---
+<p><code>O evento touchstart</code> é acionado quando o ponteiro de toque<em>(dedo ou caneta)</em> é aplicado sobre à superfície de toque da tela<em>(toque sobre a tela no elemento alvo)</em>.</p>
+
+<h2 id="Info_Geral">Info Geral</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Especificações</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://w3c.github.io/touch-events/#event-touchstart">Touch Events</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("TouchEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Sim</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt>
+ <dd style="margin: 0 0 0 120px;">Sim</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Alvo</dt>
+ <dd style="margin: 0 0 0 120px;">Documento, Elemento</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Ação Padrão</dt>
+ <dd style="margin: 0 0 0 120px;">undefined (indefinido)</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</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>EventTarget</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>DOMString</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>WindowProxy</td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td>long (float)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>touches</code> {{readonlyInline}}</td>
+   <td>TouchList</td>
+   <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact currently touching the surface.</td>
+  </tr>
+  <tr>
+   <td><code>targetTouches</code> {{readonlyInline}}</td>
+   <td>TouchList</td>
+   <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact that is touching the surface and started on the element that is the target of the current event.</td>
+  </tr>
+  <tr>
+   <td><code>changedTouches</code> {{readonlyInline}}</td>
+   <td>TouchList</td>
+   <td>A list of <a href="/en-US/docs/DOM/Touch"><code>Touch</code></a>es for every point of contact which contributed to the event.<br>
+    For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface.</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Os códigos de exemplos para este evento estão disponíveis nesta página dedicada: <a href="/en-US/DOM/Touch_events">Touch events</a>.</p>
+
+<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span class="short_text" id="result_box" lang="pt"><span>Característica</span></span></th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatChrome("22.0")}}</td>
+   <td>{{CompatGeckoDesktop("18.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><span class="short_text" id="result_box" lang="pt"><span>Característica</span></span></th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome para 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>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Eventos_Relacionados">Eventos Relacionados</h2>
+
+<ul>
+ <li>{{ domxref("GlobalEventHandlers.ontouchstart","ontouchstart")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/encoding_api/index.html b/files/pt-br/web/api/encoding_api/index.html
new file mode 100644
index 0000000000..543a842cdc
--- /dev/null
+++ b/files/pt-br/web/api/encoding_api/index.html
@@ -0,0 +1,55 @@
+---
+title: Encoding API
+slug: Web/API/Encoding_API
+translation_of: Web/API/Encoding_API
+---
+<p>{{DefaultAPISidebar("Encoding API")}}{{SeeCompatTable}}</p>
+
+<p>O <strong>Encoding API</strong> providência uma mecânismo para tratar textos em vários tipos de {{Glossary("character encoding", "encode de caracteres")}}, incluindo encodes legados non-{{Glossary("UTF-8")}}</p>
+
+<p>A API provém de quatro interfaces: {{domxref("TextDecoder")}}, {{domxref("TextEncoder")}}, {{domxref("TextDecoderStream")}} e {{domxref("TextEncoderStream")}}.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("TextDecoder")}}</li>
+ <li>{{DOMxRef("TextEncoder")}}</li>
+ <li>{{DOMxRef("TextDecoderStream")}}</li>
+ <li>{{DOMxRef("TextEncoderStream")}}</li>
+</ul>
+</div>
+
+<h2 id="Tutoriais_ferramentas">Tutoriais &amp; ferramentas</h2>
+
+<ul>
+ <li>O <a href="http://code.google.com/p/stringencoding/" title="http://code.google.com/p/stringencoding/">shim</a> permite usar essa interface em navegadores que não a suportam.</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> – Um C-like reperesentação de strings baseados em arrays tipados</li>
+</ul>
+
+<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("Encoding")}}</td>
+   <td>{{Spec2("Encoding")}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2>
+
+
+
+<h3 id="TextDecoder"><code>TextDecoder</code></h3>
+
+<p>{{Compat("api.TextDecoder")}}</p>
+
+<h3 id="TextEncoder"><code>TextEncoder</code></h3>
+
+<p>{{Compat("api.TextEncoder")}}</p>
diff --git a/files/pt-br/web/api/event/comparativo_entre_event_targets/index.html b/files/pt-br/web/api/event/comparativo_entre_event_targets/index.html
new file mode 100644
index 0000000000..e9b2004719
--- /dev/null
+++ b/files/pt-br/web/api/event/comparativo_entre_event_targets/index.html
@@ -0,0 +1,167 @@
+---
+title: Comparativo entre Event Targets
+slug: Web/API/Event/Comparativo_entre_Event_Targets
+tags:
+  - DOM
+  - Event
+  - event target
+translation_of: Web/API/Event/Comparison_of_Event_Targets
+---
+<div>{{ ApiRef() }}</div>
+
+<h3 id="Event_targets">Event targets</h3>
+
+<p>É facil se confundir sobre o tipo de alvo (<em>target</em>) que deseja-se examinar ao criar um manipulador de eventos (<em>event handler</em>). Este artigo se propõe a esclarecer o uso da propriedade <em>target</em>.</p>
+
+<p>Há 5 tipos de <em>targets</em> a se considerar:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Propriedade</th>
+   <th>Definido em</th>
+   <th>Objetivo</th>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td>
+   <td>
+    <p>O elemento do DOM à esquerda da chamada que disparou este evento, por exemplo:</p>
+
+    <pre class="eval">
+<em>element</em>.dispatchEvent(<em>event</em>)
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.currentTarget" title="en/DOM/event.currentTarget">event.currentTarget</a></td>
+   <td><a class="external" href="https://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td>
+   <td>O <a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventTarget"><code>EventTarget</code></a> do qual o <a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventListener"><code>EventListeners</code></a> está sendo atualmente processado. Logo que a captura e a subida do evento ocorre a mudança deste valor.</td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-MouseEvent">DOM MouseEvent Interface</a></td>
+   <td>Identifica um alvo secundário para o evento.</td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.explicitOriginalTarget" title="en/DOM/event.explicitOriginalTarget">event.explicitOriginalTarget</a></td>
+   <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td>
+   <td>{{ Non-standard_inline() }} Se o evento foi redirecionado por alguma outra razão senão o cruzamento de uma fronteira anônima, este evento será colocado no alvo antes que o redirecionamento ocorra. por exemplo, eventos do mouse são redirecionados à seus elementos pais quando acontecem sobre nós de texto ({{ Bug("185889") }}), e neste caso .target mostrará o nó pai e <code>.explicitOriginalTarget</code> mostrará o nó texto. Diferente de <code>.originalTarget</code>, <code>.explicitOriginalTarget</code> nunca irá conter um conteúdo anônimo.</td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.originalTarget" title="en/DOM/event.originalTarget">event.originalTarget</a></td>
+   <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td>
+   <td>{{ Non-standard_inline() }} O alvo original do evento, antes de qualquer redirecionamento. Veja <a href="/en-US/docs/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting" title="en/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> para mais detalhes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Uso_de_explicitOriginalTarget_e_originalTarget">Uso de <code>explicitOriginalTarget</code> e <code>originalTarget</code></h3>
+
+<p>TODO: Disponível apensas em navegadores Mozilla-based?</p>
+
+<p>TODO: Adequado apenas para desenvolvedores de extensões?</p>
+
+<h3 id="Exemplos">Exemplos</h3>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
+    &lt;title&gt;Comparison of Event Targets&lt;/title&gt;
+    &lt;style&gt;
+        table {
+            border-collapse: collapse;
+            height: 150px;
+            width: 100%;
+        }
+        td {
+            border: 1px solid #ccc;
+            font-weight: bold;
+            padding: 5px;
+            min-height: 30px;
+        }
+        .standard {
+            background-color: #99ff99;
+        }
+        .non-standard {
+            background-color: #902D37;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;table&gt;
+    &lt;thead&gt;
+        &lt;tr&gt;
+            &lt;td class="standard"&gt;Original target dispatching the event &lt;small&gt;event.target&lt;/small&gt;&lt;/td&gt;
+            &lt;td class="standard"&gt;Target who's event listener is being processed &lt;small&gt;event.currentTarget&lt;/small&gt;&lt;/td&gt;
+            &lt;td class="standard"&gt;Identify other element (if any) involved in the event &lt;small&gt;event.relatedTarget&lt;/small&gt;&lt;/td&gt;
+            &lt;td class="non-standard"&gt;If there was a retargetting of the event for some reason &lt;small&gt; event.explicitOriginalTarget&lt;/small&gt; contains the target before retargetting (never contains anonymous targets)&lt;/td&gt;
+            &lt;td class="non-standard"&gt;If there was a retargetting of the event for some reason &lt;small&gt; event.originalTarget&lt;/small&gt; contains the target before retargetting (may contain anonymous targets)&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tr&gt;
+        &lt;td id="target"&gt;&lt;/td&gt;
+        &lt;td id="currentTarget"&gt;&lt;/td&gt;
+        &lt;td id="relatedTarget"&gt;&lt;/td&gt;
+        &lt;td id="explicitOriginalTarget"&gt;&lt;/td&gt;
+        &lt;td id="originalTarget"&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+&lt;/table&gt;
+&lt;p&gt;Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target&lt;/p&gt;
+&lt;script&gt;
+    function handleClicks(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('currentTarget').innerHTML = e.currentTarget;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+        document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget;
+        document.getElementById('originalTarget').innerHTML = e.originalTarget;
+    }
+
+    function handleMouseover(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+    }
+
+    document.addEventListener('click', handleClicks, false);
+    document.addEventListener('mouseover', handleMouseover, false);
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Uso_de_target_e_relatedTarget">Uso de <code>target</code> e <code>relatedTarget</code></h3>
+
+<p>A propriedade <code>relatedTarget</code> do evento de <code>mouseover</code> mantém o nó de onde o mouse estava sobre anteriormente. Para o evento de <code>mouseout</code>, mantém o nó para onde o mouse se moveu.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Tipo de Evento</th>
+   <th><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></th>
+   <th><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></th>
+  </tr>
+  <tr>
+   <td><code>mouseover</code></td>
+   <td>O EventTarget do qual o dispositivo apontador entrou.</td>
+   <td>O EventTarget do qual o dispositivo apontador saiu.</td>
+  </tr>
+  <tr>
+   <td><code>mouseout</code></td>
+   <td>O EventTarget do qual o dispositivo apontador saiu.</td>
+   <td>O EventTarget do qual o dispositivo apontador entrou.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>TODO: Necessário descrição complemento sobre eventos de <code>dragenter</code> e <code>dragexit</code>.</p>
+
+<h4 id="Exemplo">Exemplo</h4>
+
+<pre class="eval">&lt;hbox id="outer"&gt;
+  &lt;hbox id="inner"
+        onmouseover="dump('mouseover ' + event.relatedTarget.id + ' &gt; ' + event.target.id + '\n');"
+        onmouseout="dump('mouseout  ' + event.target.id + ' &gt; ' + event.relatedTarget.id + '\n');"
+        style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" /&gt;
+&lt;/hbox&gt;
+</pre>
diff --git a/files/pt-br/web/api/event/currenttarget/index.html b/files/pt-br/web/api/event/currenttarget/index.html
new file mode 100644
index 0000000000..e74a58fb61
--- /dev/null
+++ b/files/pt-br/web/api/event/currenttarget/index.html
@@ -0,0 +1,129 @@
+---
+title: Event.currentTarget
+slug: Web/API/Event/currentTarget
+tags:
+  - API
+  - CompatibilidadeEntreNavegadores
+  - DOM
+  - Gecko
+  - Propriedade
+translation_of: Web/API/Event/currentTarget
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Identifica o alvo atual para o evento quando o event percorre o DOM. O currentTarget sempre se refere ao elemento associado ao event handler, ao invés do event.target que identifica o elemento ao qual o evento ocorreu.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p><code>event.currentTarget</code> é bom para ser usado quando nós queremos associar o mesmo event handler para vários elementos.</p>
+
+<pre class="brush: js">function hide(e){
+  e.currentTarget.style.visibility = "hidden";
+  console.log(e.currentTarget);
+  // Quando essa função é usada como um event
+  // handler: this === e.currentTarget
+}
+
+var ps = document.getElementsByTagName('p');
+
+for(var i = 0; i &lt; ps.length; i++){
+  // console: print the clicked &lt;p&gt; element
+  ps[i].addEventListener('click', hide, false);
+}
+// console: print &lt;body&gt;
+document.body.addEventListener('click', hide, false);
+
+// Clique e faça os parágrafos desaparecerem
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Especificação</th>
+   <th>Status</th>
+   <th>Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}}</td>
+   <td>{{Spec2("DOM3 Events")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Definição incial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_dos_navegadores">Compatibilidade  dos navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supote básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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>Supote básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Do Internet Explorer 6 até o 8, o modelo do event é diferente. Event listeners estão acoplados com o {{domxref("EventTarget.attachEvent")}} método não padronizado. Neste modelo não há um equivalente para <code>event.currentTarget</code> e <code>this</code> é um objeto global. Uma solução para simular o <code>event.currentTarget</code> é envolver seu handler em uma função e chamando-a usando o <code>Function.prototype.call</code> com o elemento sendo o primeiro argumento. Desta forma, <code>this</code> será o valor esperado.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<p><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparativo dos Event Targets</a></p>
diff --git a/files/pt-br/web/api/event/defaultprevented/index.html b/files/pt-br/web/api/event/defaultprevented/index.html
new file mode 100644
index 0000000000..d0407443c7
--- /dev/null
+++ b/files/pt-br/web/api/event/defaultprevented/index.html
@@ -0,0 +1,79 @@
+---
+title: Event.defaultPrevented
+slug: Web/API/Event/defaultPrevented
+translation_of: Web/API/Event/defaultPrevented
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id="Resumo">Resumo</h3>
+
+<p><span class="short_text" id="result_box" lang="pt"><span class="hps">Retorna um booleano</span> <span class="hps">que indica se</span> <span class="hps">ou não</span></span> {{ domxref("event.preventDefault()") }} foi chamado no evento.</p>
+
+<div class="note"><strong>Nota:</strong> <span id="result_box" lang="pt"><span class="hps">Você deve usar</span> <span class="hps">isso em vez de</span> <span class="hps">a</span> <span class="hps">não-padrão,</span> método <span class="hps">desatualizado</span></span><code> getPreventDefault()</code>  (ver {{ bug(691151) }}).</div>
+
+<h3 id="Sintaxe">Sintaxe</h3>
+
+<pre class="eval">bool = event.defaultPrevented </pre>
+
+<h3 id="Exemplo">Exemplo</h3>
+
+<pre> if (e.defaultPrevented) {
+   /* <span class="short_text" id="result_box" lang="pt"><span class="hps">o padrão</span> <span class="hps">foi impedido</span></span> */
+ }
+</pre>
+
+<h3 id="Compatibilidade_do_navegador"><span class="short_text" id="result_box" lang="pt"><span class="hps">Compatibilidade do navegador</span></span></h3>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatChrome(18) }}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>{{ CompatIE(9.0) }}</td>
+   <td>{{ CompatOpera(11.0) }}</td>
+   <td>{{ CompatSafari("5.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>Suporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatSafari(5.0) }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Especificação">Especificação</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2006/WD-DOM-Level-3-Events-20060413/events.html#Events-Event-defaultPrevented" title="http://www.w3.org/TR/2006/WD-DOM-Level-3-Events-20060413/events.html#Events-Event-defaultPrevented">Eventos DOM 3</a></li>
+</ul>
diff --git a/files/pt-br/web/api/event/event/index.html b/files/pt-br/web/api/event/event/index.html
new file mode 100644
index 0000000000..40bc836e77
--- /dev/null
+++ b/files/pt-br/web/api/event/event/index.html
@@ -0,0 +1,69 @@
+---
+title: Event()
+slug: Web/API/Event/Event
+translation_of: Web/API/Event/Event
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>O <code><strong>Event()</strong></code> cria uma nova {{domxref("Event")}}.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"> <em>event</em> = new Event(<em>typeArg</em>, <em>eventInit</em>);</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><em>typeArg</em></dt>
+ <dd>É uma {{domxref("DOMString")}} representa o nome do evento.</dd>
+ <dt><em>eventInit</em>{{optional_inline}}</dt>
+</dl>
+
+<dl>
+ <dd>É um dicionário <code>EventInit</code>, tendo os seguintes campos:
+
+ <ul>
+  <li><code>"bubbles"</code>, opcional e false por default, do tipo {{jsxref("Boolean")}}, indica se o evento é bubbles ou não.</li>
+  <li><code>"cancelable"</code>, opcional e false por default, do tipo {{jsxref("Boolean")}}, indica se o evento pode ser cancelado ou não.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">// criar um evento com bubbles true e que não pode ser cancelado
+
+var ev = new Event("look", {"bubbles":true, "cancelable":false});
+document.dispatchEvent(ev);
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-event','Event()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_browser">Compatibilidade de browser</h2>
+
+
+
+<p>{{Compat("api.Event.Event")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Event")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/event/index.html b/files/pt-br/web/api/event/index.html
new file mode 100644
index 0000000000..7fe5549c48
--- /dev/null
+++ b/files/pt-br/web/api/event/index.html
@@ -0,0 +1,146 @@
+---
+title: Event
+slug: Web/API/Event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - TopicStub
+translation_of: Web/API/Event
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>A interface de <strong>eventos</strong> representa qualquer evento de DOM. Ele contém propriedades comuns e métodos para qualquer evento.</p>
+
+<p>Um monte de outras interfaces herdam, diretamente ou não, a partir desta interface base:</p>
+
+<div class="index">
+<ul>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>{{domxref("AudioProcessingEvent")}}</li>
+ <li>{{domxref("BeforeInputEvent")}}</li>
+ <li>{{domxref("BeforeUnloadEvent")}}</li>
+ <li>{{domxref("BlobEvent")}}</li>
+ <li>{{domxref("ClipboardEvent")}}</li>
+ <li>{{domxref("CloseEvent")}}</li>
+ <li>{{domxref("CompositionEvent")}}</li>
+ <li>{{domxref("CSSFontFaceLoadEvent")}}</li>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li>{{domxref("DeviceLightEvent")}}</li>
+ <li>{{domxref("DeviceMotionEvent")}}</li>
+ <li>{{domxref("DeviceOrientationEvent")}}</li>
+ <li>{{domxref("DeviceProximityEvent")}}</li>
+ <li>{{domxref("DOMTransactionEvent")}}</li>
+ <li>{{domxref("DragEvent")}}</li>
+ <li>{{domxref("EditingBeforeInputEvent")}}</li>
+ <li>{{domxref("ErrorEvent")}}</li>
+ <li>{{domxref("FocusEvent")}}</li>
+ <li>{{domxref("GamepadEvent")}}</li>
+ <li>{{domxref("HashChangeEvent")}}</li>
+ <li>{{domxref("IDBVersionChangeEvent")}}</li>
+ <li>{{domxref("InputEvent")}}</li>
+ <li>{{domxref("KeyboardEvent")}}</li>
+ <li>{{domxref("MediaStreamEvent")}}</li>
+ <li>{{domxref("MessageEvent")}}</li>
+ <li>{{domxref("MouseEvent")}}</li>
+ <li>{{domxref("MutationEvent")}}</li>
+ <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
+ <li>{{domxref("PageTransitionEvent")}}</li>
+ <li>{{domxref("PointerEvent")}}</li>
+ <li>{{domxref("PopStateEvent")}}</li>
+ <li>{{domxref("ProgressEvent")}}</li>
+ <li>{{domxref("RelatedEvent")}}</li>
+ <li>{{domxref("RTCDataChannelEvent")}}</li>
+ <li>{{domxref("RTCIdentityErrorEvent")}}</li>
+ <li>{{domxref("RTCIdentityEvent")}}</li>
+ <li>{{domxref("RTCPeerConnectionIceEvent")}}</li>
+ <li>{{domxref("SensorEvent")}}</li>
+ <li>{{domxref("StorageEvent")}}</li>
+ <li>{{domxref("SVGEvent")}}</li>
+ <li>{{domxref("SVGZoomEvent")}}</li>
+ <li>{{domxref("TimeEvent")}}</li>
+ <li>{{domxref("TouchEvent")}}</li>
+ <li>{{domxref("TrackEvent")}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+ <li>{{domxref("UIEvent")}}</li>
+ <li>{{domxref("UserProximityEvent")}}</li>
+ <li>{{domxref("WheelEvent")}}</li>
+</ul>
+</div>
+
+<h2 id="Properties" name="Properties">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("Event.Event", "Event()")}}</dt>
+ <dd>Cria um objeto Event.</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">Propriedades</h2>
+
+<p><em>Esta interface não herda nenhuma propriedade.</em></p>
+
+<dl>
+ <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt>
+ <dd>Um booleano que indica se o evento surge em bolha pela DOM ou não.</dd>
+ <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt>
+ <dd>Um booleano que indica se o evento é cancelado.</dd>
+ <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt>
+ <dd>Uma referencia para o alvo registrado atualmente para o evento.</dd>
+ <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt>
+ <dd>Indica se ou não {{domxref("event.preventDefault()")}} foi chamado no evento..</dd>
+ <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt>
+ <dd>Indica que fase do fluxo de eventos está a ser processada.</dd>
+ <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>O objetivo original explícito do evento (Mozilla-specific).</dd>
+ <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>O objectivo inicial do evento, antes de qualquer redirecionamento (Mozilla-specific).</dd>
+ <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt>
+ <dd>A referência ao objectivo para o qual o evento foi originalmente despachado.</dd>
+ <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt>
+ <dd>O tempo em que o evento foi criado.</dd>
+ <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt>
+ <dd>O nome do evento (case-insensitive).</dd>
+ <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt>
+ <dd>Indica se ou não o evento foi iniciado pelo navegador (depois de um clique do usuário, por exemplo) ou por um script (usando um método de criação de evento, como <a href="/en-US/docs/DOM/event.initEvent">event.initEvent</a>)</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Metodos</h2>
+
+<p><em>Esta interface não herda nenhum método.</em></p>
+
+<dl>
+ <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt>
+ <dd>Inicializa o valor de um evento criado. Se o evento já está sendo despachado, este método não faz nada.</dd>
+ <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
+ <dd>Impede o evento de borbulhar. Obsoleto, use {{domxref ("event.stopPropagation")}} em vez disso.</dd>
+ <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
+ <dd>Obsoleto, use {{domxref("event.stopPropagation")}} ao invés.</dd>
+ <dt>{{domxref("Event.preventDefault()")}}</dt>
+ <dd>Cancela o evento (caso seja cancelável).</dd>
+ <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt>
+ <dd>Para este evento em particular, nenhum outro ouvinte será chamado. Ou aqueles ligados no mesmo elemento, nem aqueles associados em elementos que serão percorridos mais tarde<br>
+ (em fase de captura, por exemplo)​.</dd>
+ <dt>{{domxref("Event.stopPropagation()")}}</dt>
+ <dd>Para a propagação de eventos mais adiante no DOM.</dd>
+ <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt>
+ <dd>Obsoleto, use {{domxref("Event.defaultPrevented")}} ao invés.</dd>
+</dl>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li>Tipos de eventos disponíveis: <a href="/en-US/docs/Web/Reference/Events">Referência de eventos</a></li>
+ <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparitivo dos Alvos de Eventos</a> (target vs currentTarget vs relatedTarget vs originalTarget)</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Criação e gatilho de eventos customizados</a></li>
+ <li>Para desenvolvedores de extensões para o Firefox:
+  <ul>
+   <li><a href="/en-US/docs/Listening_to_events_in_Firefox_extensions">Escutando eventos em extensões do Firefox</a></li>
+   <li><a href="/en-US/docs/Listening_to_events_on_all_tabs">Escutando eventos em todas as abas</a></li>
+  </ul>
+ </li>
+ <li><a class="link-https" href="https://wiki.mozilla.org/Events">Eventos relacionados da Mozilla na vida real em wiki.mozilla.org</a></li>
+</ul>
diff --git a/files/pt-br/web/api/event/initevent/index.html b/files/pt-br/web/api/event/initevent/index.html
new file mode 100644
index 0000000000..6a26dcb3e8
--- /dev/null
+++ b/files/pt-br/web/api/event/initevent/index.html
@@ -0,0 +1,137 @@
+---
+title: Event.initEvent()
+slug: Web/API/Event/initEvent
+tags:
+  - API
+  - DOM
+  - Descontinuado
+  - Evento
+  - Referencia
+  - metodo
+translation_of: Web/API/Event/initEvent
+---
+<div>{{ ApiRef("DOM") }}{{deprecated_header}}</div>
+
+<p>O método <strong><code>Event.initEvent()</code></strong> é usado para inicializar o valor de um {{ domxref("event") }} criado usando {{ domxref("Document.createEvent()") }}.</p>
+
+<p>Eventos inicializados desta maneira precisam ter sido criados com o método {{ domxref("Document.createEvent()") }}. Este método precisar ser chamado para definir o evento antes de ser despachado, usando {{ domxref("EventTarget.dispatchEvent()") }}. Uma vez despachado, não faz mais nada.</p>
+
+<div class="note">
+<p><strong>Não use esse método mais, pois está depreciado.</strong></p>
+
+<p>Ao invés, use construtores de eventos específicos, como {{domxref("Event.Event", "Event()")}}. A página sobre <a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">Criando e disparando eventos</a> detalha mais informações sobre o uso desses eventos.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>event</em>.initEvent(<em>tipo</em>, <em>bubbles</em>, <em>cancelable</em>);</pre>
+
+<dl>
+ <dt><em><code>tipo</code></em></dt>
+ <dd>É um {{domxref("DOMString")}} definido o tipo do evento.</dd>
+ <dt><em><code>bolhas</code></em></dt>
+ <dd>É um {{jsxref("Boolean")}} decidindo se o evento precisa ser enviado para cima, na cadeia de eventos ou não. Uma vez definido, a propriedade read-only {{ domxref("Event.bubbles") }} irá informar o seu valor.</dd>
+ <dt><em><code>cancelable</code></em></dt>
+ <dd>É um {{jsxref("Boolean")}} definindo se o evento pode ser cancelado. Uma vez definido, a propriedade read-only {{ domxref("Event.cancelable") }} will irá informar o seu valor.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre><code>// Cria o evento.
+var event = document.createEvent('Event');
+</code>
+// Cria um evento de clique que borbulha e
+// não pode ser cancelado<code>
+event.initEvent('click', true, false);
+
+// Escuta este evento.
+elem.addEventListener('click', function (e) {
+  // e.target matches elem
+}, false);
+
+elem.dispatchEvent(event);</code>
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-initevent','Event.initEvent()')}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>From {{SpecName('DOM2 Events')}}, deprecated it, superseded by event constructors.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','##Events-Event-initEvent','Event.initEvent()')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com navegadores</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()}} [1]</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>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }} [1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Antes do Firefox 17, uma chamada a este método depois de despachar o evento gerava uma exceção ao invés de não fazer nada.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>O construtor para usar ao invés deste método descontinuado: {{domxref("Event.Event", "Event()")}}. Construtores mais específicos também podem ser usados.</li>
+</ul>
diff --git a/files/pt-br/web/api/event/istrusted/index.html b/files/pt-br/web/api/event/istrusted/index.html
new file mode 100644
index 0000000000..711fcae44b
--- /dev/null
+++ b/files/pt-br/web/api/event/istrusted/index.html
@@ -0,0 +1,57 @@
+---
+title: Event.isTrusted
+slug: Web/API/Event/isTrusted
+translation_of: Web/API/Event/isTrusted
+---
+<div>{{APIRef("DOM")}}<br>
+A propriedade  <strong><code>isTrusted</code></strong> da interface {{domxref("Event")}}, exclusiva para leitura, é uma booleana ({{domxref("Boolean")}}) de valor verdadeiro (<code>true</code>) se tal evento é disparado pela ação do usuário. Retorna falso (<code>false</code>) caso o acionamento do evento seja ocasionado pelo método {{domxref("EventTarget.dispatchEvent()")}} ou tenha sido criado ou modificado por um script.</div>
+
+<div> </div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>eventIsTrusted</em> = <em>event</em>.isTrusted;
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>{{domxref("Boolean")}}</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">if (e.isTrusted) {
+  /* The event is trusted */
+} else {
+  /* The event is not trusted */
+}
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especifiação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Amplia requisito para confiabilidade de um evento, embora isto não defina por si só a propriedade <code>isTrusted</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegadores_e_Compatibilidade">Navegadores e Compatibilidade</h2>
+
+<div>
+<div class="hidden">A tabela de compatibilidade é gerada a partir de dados estruturados. Caso queira contribuir-lhes, por favor, verifique <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e enviel-nos um pull request.</div>
+
+<p>{{Compat("api.Event.isTrusted")}}</p>
+</div>
diff --git a/files/pt-br/web/api/event/preventdefault/index.html b/files/pt-br/web/api/event/preventdefault/index.html
new file mode 100644
index 0000000000..cc39be846e
--- /dev/null
+++ b/files/pt-br/web/api/event/preventdefault/index.html
@@ -0,0 +1,113 @@
+---
+title: Event.preventDefault()
+slug: Web/API/Event/preventDefault
+translation_of: Web/API/Event/preventDefault
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<h2 id="Summary" name="Summary">Resumo</h2>
+
+<p>Cancela o evento se for cancelável, sem parar a propagação do mesmo.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>event</em>.preventDefault();</pre>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<p>Alternar é a ação padrão de clicar em uma caixa de seleção. Este exemplo demonstra como impedir que isso aconteça:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;preventDefault example&lt;/title&gt;
+
+&lt;script&gt;
+function stopDefAction(evt) {
+    evt.preventDefault();
+}
+
+document.getElementById('my-checkbox').addEventListener(
+    'click', stopDefAction, false
+);
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p&gt;Please click on the checkbox control.&lt;/p&gt;
+
+&lt;form&gt;
+    &lt;input type="checkbox" id="my-checkbox" /&gt;
+    &lt;label for="my-checkbox"&gt;Checkbox&lt;/label&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Você pode ver o <code>preventDefault</code> em ação <a class="internal" href="/samples/domref/dispatchEvent.html" title="samples/domref/dispatchEvent.html">aqui</a>.</p>
+
+<p>O exemplo a seguir demonstra como um input com texto inválido pode ser parado ao chegar ao campo de entrada com o preventDefault().</p>
+
+<div id="preventDefault_invalid_text">
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;preventDefault example&lt;/title&gt;
+
+&lt;script&gt;
+</pre>
+
+<pre class="brush: js">function Init () {
+    var myTextbox = document.getElementById('my-textbox');
+    myTextbox.addEventListener( 'keypress', checkName, false );
+}
+
+function checkName(evt) {
+    var charCode = evt.charCode;
+    if (charCode != 0) {
+        if (charCode &lt; 97 || charCode &gt; 122) {
+            evt.preventDefault();
+            alert(
+                "Please use lowercase letters only."
+                + "\n" + "charCode: " + charCode + "\n"
+            );
+        }
+    }
+}
+</pre>
+
+<pre class="brush: html">&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="Init ()"&gt;
+    &lt;p&gt;Please enter your name using lowercase letters only.&lt;/p&gt;
+    &lt;form&gt;
+        &lt;input type="text" id="my-textbox" /&gt;
+    &lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>Aqui está o resultado do código anterior:</p>
+
+<p>{{ EmbedLiveSample('preventDefault_invalid_text', '', '', '') }}</p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Chamar preventDefault durante qualquer fase do fluxo de eventos cancela o evento, o que significa que qualquer ação padrão normalmente feita pela aplicação como um resultado do evento não ocorrerá.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> A partir do {{Gecko("6.0")}}, chamar o <code>preventDefault()</code> faz com que o {{ domxref("event.defaultPrevented") }} se torne true.</p>
+</div>
+
+<p>Você pode usar o <a href="/en-US/docs/Web/API/event.cancelable" title="/en-US/docs/Web/API/event.cancelable">event.cancelable</a> para checar se o evento é cancelável. Chamar o <code>preventDefault</code> para um evento não cancelável não fará efeito.</p>
+
+<p><code>Se o preventDefault não parar a propagação do evento através do DOM. event.stopPropagation deve ser usada para isso.</code></p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-preventDefault">DOM Level 2 Events: preventDefault</a></li>
+</ul>
diff --git a/files/pt-br/web/api/event/srcelement/index.html b/files/pt-br/web/api/event/srcelement/index.html
new file mode 100644
index 0000000000..c66dc744d4
--- /dev/null
+++ b/files/pt-br/web/api/event/srcelement/index.html
@@ -0,0 +1,74 @@
+---
+title: Event.srcElement
+slug: Web/API/Event/srcElement
+translation_of: Web/API/Event/srcElement
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<p><strong><code>Event.srcElement</code></strong> é uma propriedade <em>alias</em> para a propriedade padrão {{domxref("Event.target")}}. É específica para versões antigas do Microsoft Internet Explorer.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<p>Não é parte de nenhuma especificação.</p>
+
+<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ff974945(v=vs.85).aspx">tem uma descrição na MSDN</a>.</p>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} [1]</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>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1]: {{bug(453968)}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Window.event")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/event/stopimmediatepropagation/index.html b/files/pt-br/web/api/event/stopimmediatepropagation/index.html
new file mode 100644
index 0000000000..a5de39c083
--- /dev/null
+++ b/files/pt-br/web/api/event/stopimmediatepropagation/index.html
@@ -0,0 +1,99 @@
+---
+title: Event.stopImmediatePropagation()
+slug: Web/API/Event/stopImmediatePropagation
+tags:
+  - API
+  - Method
+  - Referência(2)
+  - event.stopImmediatePropagation();
+  - events
+  - pt-br
+  - stopImmediatePropagation
+translation_of: Web/API/Event/stopImmediatePropagation
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Evita que outros <em>listeners</em> escutem o evento.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="eval"><em>event</em>.stopImmediatePropagation();
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>No caso de um evento onde vários <em>listeners </em>o estão escutando, os mesmos são disparados na ordem em que foram adicionados. Porém, se durante uma chamada (ou disparo), <code>event.stopImmediatePropagation()</code> for chamado, os demais <em>listeners</em> não serão disparados.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentários</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade">Compatibilidade</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>Suporte básico</td>
+   <td>{{CompatChrome("6.0")}}</td>
+   <td>{{CompatGeckoDesktop("10.0")}}</td>
+   <td>{{CompatIE(9.0)}}</td>
+   <td>{{CompatOpera("15.0")}}</td>
+   <td>{{CompatSafari("5.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>Suporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/pt-br/web/api/event/stoppropagation/index.html b/files/pt-br/web/api/event/stoppropagation/index.html
new file mode 100644
index 0000000000..54d0c9bd5f
--- /dev/null
+++ b/files/pt-br/web/api/event/stoppropagation/index.html
@@ -0,0 +1,93 @@
+---
+title: Event.stopPropagation()
+slug: Web/API/Event/stopPropagation
+tags:
+  - API
+  - Evento
+  - Referencia
+  - Referência(2)
+  - metodo
+  - stopPropagation
+translation_of: Web/API/Event/stopPropagation
+---
+<p id="Summary">{{APIRef("DOM")}}</p>
+
+<h2 id="Summary" name="Summary">Resumo</h2>
+
+<p>Impede a propagação do evento por seus respectivos listeners.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>event</em>.stopPropagation();</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<p>Nenhum</p>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<p>Veja o exemplo 5: <a href="https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation" title="Gecko_DOM_Reference/Examples#Example_5:_Event_Propagation">Event Propagation</a> no capítulo Eventos para um exemplo mais detalhado desse método e propagação de evento no DOM.</p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Veja <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">DOM specification</a> para a explicação do fluxo de eventos. (O <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events draft</a> possui uma ilustração.)</p>
+
+<p><a href="/en-US/docs/Web/API/event.preventDefault" title="/docs/Web/API/event.stopPropagation">preventDefault</a> é um método de complemento que pode ser usado para previnir a ação padrão do evento que estiver acontecendo.</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-event-type-stopPropagation">DOM Level 3 Events: stopPropagation</a></p>
+
+<h2 id="Compatibilidade_do_Browser">Compatibilidade do Browser</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</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>9</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</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>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/pt-br/web/api/event/target/index.html b/files/pt-br/web/api/event/target/index.html
new file mode 100644
index 0000000000..8a3ab35191
--- /dev/null
+++ b/files/pt-br/web/api/event/target/index.html
@@ -0,0 +1,69 @@
+---
+title: Event.target
+slug: Web/API/Event/target
+tags:
+  - PortuguêsBrasil
+  - pt-br
+translation_of: Web/API/Event/target
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Uma referência ao objeto que enviou o evento. É diferente de {{domxref ("event.currentTarget")}} quando o manipulador de eventos é chamado durante a fase de borbulhagem ou captura do evento.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox notranslate">theTarget = event.target</pre>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>A propriedade <strong><code>event.target</code></strong> pode ser usada para implementar a delegação de eventos.</p>
+
+<pre class="brush: js notranslate">// Assumindo que existe uma variável 'list' contendo uma instância de um elemento ul de HTML.
+function hide(e) {
+  // A menos que os itens da lista sejam separados por uma margem, <em>e.target</em> deve ser diferente de <em>e.currentTarget</em>
+  e.target.style.visibility = 'hidden';
+}
+
+list.addEventListener('click', hide, false);
+
+// Se algum elemento (elemento &lt;li&gt; ou um link dentro de um elemento &lt;li&gt; por exemplo) for clicado, ele desaparecerá.
+// Só requer um único listener para fazer isso.
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
+
+
+<p>{{Compat("api.Event.target")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a></li>
+</ul>
diff --git a/files/pt-br/web/api/event/type/index.html b/files/pt-br/web/api/event/type/index.html
new file mode 100644
index 0000000000..3ca34e79f3
--- /dev/null
+++ b/files/pt-br/web/api/event/type/index.html
@@ -0,0 +1,60 @@
+---
+title: Event.type
+slug: Web/API/Event/type
+translation_of: Web/API/Event/type
+---
+<p id="Summary">{{APIRef("DOM")}}</p>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>Retorna uma string contendo o tipo de evento.</p>
+
+<p>O argumento do evento {{ domxref("EventTarget.addEventListener()") }} e {{ domxref("EventTarget.removeEventListener()") }} é caso insensível(case insensitive).</p>
+
+<p>Veja <a href="/en-US/docs/Mozilla_event_reference" title="Mozilla event reference">Mozilla event reference</a> para obter a lista de tipos de evento disponíveis</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">event.type
+</pre>
+
+<h2 id="Example" name="Example">Exemplos</h2>
+
+<pre><code><em>var string</em> = event.type;</code>
+</pre>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="pt-br"&gt;
+&lt;head&gt;
+
+&lt;title&gt;exemplo de tipo&lt;/title&gt;
+
+&lt;script&gt;
+var currEvent = null;
+
+function getEvtType(evt) {
+  currEvent = evt.type;
+  document.getElementById("Etype").firstChild.nodeValue = currEvent;
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body
+  onkeydown="getEvtType(event)"
+  onkeyup="getEvtType(event)"
+  onmousedown="getEvtType(event)"
+  onmouseup="getEvtType(event)"&gt;
+
+&lt;p&gt;Pressione uma tecla ou clique com o mouse para obter o tipo de evento.&lt;/p&gt;
+&lt;p&gt;Tipo de evento: &lt;span id="Etype"&gt;-&lt;/span&gt;&lt;/p&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-type">type </a></li>
+</ul>
diff --git a/files/pt-br/web/api/eventlistener/index.html b/files/pt-br/web/api/eventlistener/index.html
new file mode 100644
index 0000000000..0e00e865a2
--- /dev/null
+++ b/files/pt-br/web/api/eventlistener/index.html
@@ -0,0 +1,48 @@
+---
+title: EventListener
+slug: Web/API/EventListener
+tags:
+  - API
+  - DOM
+  - Eventos DOM
+translation_of: Web/API/EventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<h2 id="Method_overview" name="Method_overview">Visão Geral</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#handleEvent()">handleEvent</a>(in Event event);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Métodos</h2>
+
+<h3 id="handleEvent()" name="handleEvent()">handleEvent()</h3>
+
+<p>Este método é chamado sempre que ocorrer o evento para qual a interface do  <code>EventListener for registrada</code>.</p>
+
+<pre class="eval">void handleEvent(
+  in Event event
+);
+</pre>
+
+<h5 id="Parameters" name="Parameters">Parâmetros</h5>
+
+<dl>
+ <dt><code>event</code></dt>
+ <dd>O {{ domxref("Evento") }} DOM que foi acionado.</dd>
+</dl>
+
+<h3 id="Remarks" name="Remarks">Observaçōes</h3>
+
+<p>Conforme a interface for marcada com a flag <code><span class="nowiki">[function]</span></code>, todos os objetos <a href="/en/JavaScript/Reference/Global_Objects/Function" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Function">Function</a> automaticamente implementtam essa interface. Chamar o método {{ manch("handleEvent") }} em uma dessas implementaçōes automaticamente invoca a função.</p>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li>{{ spec("http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener","Document Object Model Events: EventListener","REC") }}</li>
+</ul>
diff --git a/files/pt-br/web/api/eventsource/eventsource/index.html b/files/pt-br/web/api/eventsource/eventsource/index.html
new file mode 100644
index 0000000000..30db3e3761
--- /dev/null
+++ b/files/pt-br/web/api/eventsource/eventsource/index.html
@@ -0,0 +1,157 @@
+---
+title: EventSource()
+slug: Web/API/EventSource/EventSource
+tags:
+  - API
+  - Construtor
+  - EventSource
+  - Eventos enviados pelo servidor
+  - Referencia
+translation_of: Web/API/EventSource/EventSource
+---
+<div>{{APIRef('WebSockets API')}}</div>
+
+<p>O construtor <code><strong>EventSource</strong></code><strong><code>()</code></strong> retorna uma nova {{domxref("EventSource")}}, que representa um recurso remoto.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">eventSource = new EventSource(<em>url</em>, <em>configuration</em>);</pre>
+
+<h3 class="syntaxbox" id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>Uma {{domxref("USVString")}} que representa a localização de um recurso remoto servindo os eventos/mensagens.</dd>
+ <dt><code>configuration</code> {{optional_inline}}</dt>
+ <dd>Fornece opções para configurar a nova conexão. Os atributos possíveis são:
+ <ul>
+  <li><code>withCredentials</code>, valor padrão <code>false</code>, indicando se o CORS deve ser instruído a <code>incluir</code> credenciais.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<pre class="brush: js">var evtSource = new EventSource('sse.php');
+var eventList = document.querySelector('ul');
+
+evtSource.onmessage = function(e) {
+  var newElement = document.createElement("li");
+
+  newElement.textContent = "message: " + e.data;
+  eventList.appendChild(newElement);
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode encontrar um exemplo completo no GitHub — veja <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
+</div>
+
+<h2 id="Especificações">Especificações</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', "comms.html#dom-eventsource", "EventSource()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</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>Suporte básico</td>
+   <td>9</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Suporte a CORS (<code>withCredentials</code>)</td>
+   <td>26</td>
+   <td>{{ CompatGeckoDesktop("11.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponível em workers compartilhados e dedicados<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("53.0")}}</td>
+   <td>{{CompatUnknown}}</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>Suporte básico</td>
+   <td>{{ CompatAndroid("4.4") }}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Suporte a CORS (<code>withCredentials</code>)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("11.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponível em workers compartilhados e dedicados<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("53.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Masin <a href="https://github.com/w3c/ServiceWorker/issues/947">ainda não em service workers</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("EventSource")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/eventsource/index.html b/files/pt-br/web/api/eventsource/index.html
new file mode 100644
index 0000000000..9b9efaaf46
--- /dev/null
+++ b/files/pt-br/web/api/eventsource/index.html
@@ -0,0 +1,175 @@
+---
+title: EventSource
+slug: Web/API/EventSource
+tags:
+  - API
+  - Interface
+  - eventos
+translation_of: Web/API/EventSource
+---
+<p>{{APIRef("Websockets API")}}</p>
+
+<p>A interface <code>EventSource</code> é usada para receber eventos enviados pelo servidor (<span class="seoSummary"><a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events">server-sent events</a></span>). Ele se conecta via HTTP em um servidor e recebe eventos com o formato <code>text/event-stream</code>. A conexão permanece aberta até ser fechada chamando {{domxref("EventSource.close()")}}.</p>
+
+<p>Assim que a conexão estiver aberta, mensagens recebidas do servidor são entregues para o seu código na forma de eventos {{event("message")}}.</p>
+
+<p>Ao contrário dos <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API">WebSockets</a>, server-sent events são unidirecionais; ou seja, mensagens são entregues em uma direção, do servidor para o cliente (por exemplo, um navegador web). Isso torna-os uma excelente escolha quando não há necessidade de enviar mensagens do cliente para o servidor. Por exemplo, <code>EventSource</code> é uma abordagem útil para lidar com atualizações de status de mídias sociais, feeds de notícias, or entregar dados para um mecanismo de <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">armazenamento do lado cliente </a>como o <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> ou o <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API">web storage</a>.</p>
+
+<h2 id="Method_overview" name="Method_overview">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("EventSource.EventSource", "EventSource()")}}</dt>
+ <dd>Cria um novo <code>EventSource</code> para receber enventos enviados pelo servidor de uma URL específica, opcionalmente no modo de credenciais.</dd>
+</dl>
+
+<h2 id="Attributes" name="Attributes">Propriedades</h2>
+
+<p> </p>
+
+<p><em>Essa interface também herda propriedades do seu pai, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("EventSource.readyState")}} {{readonlyinline}}</dt>
+ <dd>Um número representando o estado da conexão. Valores possíveis são <code>CONNECTING</code> (<code>0</code>), <code>OPEN</code> (<code>1</code>), ou <code>CLOSED</code> (<code>2</code>).</dd>
+ <dt>{{domxref("EventSource.url")}} {{readonlyinline}}</dt>
+ <dd>Uma {{domxref("DOMString")}} representando a URL da origem.</dd>
+ <dt>{{domxref("EventSource.withCredentials")}} {{readonlyinline}}</dt>
+ <dd>Um {{domxref("Boolean")}} indicando se a <code>EventSource</code> foi instanciada com credenciais cross-origin (<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a>) definidas (<code>true</code>) ou não (<code>false</code>, o padrão).</dd>
+ <dt>
+ <h3 id="Eventos">Eventos</h3>
+ </dt>
+ <dt>{{domxref("EventSource.onerror")}}</dt>
+ <dd>É um {{domxref("EventHandler")}} chamado quando um erro ocorre e o evento {{event("error")}} é despachado para o objeto <code>EventSource</code>.</dd>
+ <dt>{{domxref("EventSource.onmessage")}}</dt>
+ <dd>É um {{domxref("EventHandler")}} chamado quando um evento {{event("message")}} é recebido, ou seja, quando uma mensagem está sendo recebida da origem.</dd>
+ <dt>{{domxref("EventSource.onopen")}}</dt>
+ <dd>É um {{domxref("EventHandler")}} chamado quando um evento {{event("open")}} é recebido, ou seja, logo após a abertura da conexão.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Métodos</h2>
+
+<p><em>Essa interface herda métodos de seu pai, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("EventSource.close()")}}</dt>
+ <dd>Fecha a conexão, se houver, e define o atributo <code>readyState</code> como <code>CLOSED</code>. Se a conexão já estiver fechada, esse método não faz nada.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Nesse exemplo básico, um <code>EventSource</code> é criado para receber eventos do servidor; a página com o nome <code>"sse.php"</code> é responsável por gerar os eventos.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> evtSource <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">EventSource</span><span class="punctuation token">(</span><span class="string token">'sse.php'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> eventList <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">'ul'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+evtSource<span class="punctuation token">.</span>onmessage <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">var</span> newElement <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">"li"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  newElement<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">"message: "</span> <span class="operator token">+</span> e<span class="punctuation token">.</span>data<span class="punctuation token">;</span>
+  eventList<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newElement<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Cada evento recebido faz com que o handler do evento <code>onmessage</code> no objeto <code>EventSource</code> seja executado. Ele, em contrapartida, cria um novo elemento {{HTMLElement("li")}} e escreve os dados da mensagem nele, e em seguida concatena o novo elemento na lista já presente no documento.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode encontrar um exemplo completo no GitHub — veja <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</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>Suporte a EventSource</td>
+   <td>6</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Disponível em workers compartilhados e dedicados<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("53.0")}}</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>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte a EventSource</td>
+   <td>4.4</td>
+   <td>45</td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>4.1</td>
+  </tr>
+  <tr>
+   <td>Disponível em workers compartilhados e dedicados<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Mas<a href="https://github.com/w3c/ServiceWorker/issues/947"> ainda não em service workers</a>.</p>
+
+<p> </p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events">Server-sent events</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events" title="en/Server-sent events/Using server-sent events">Usando server-sent events</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/pt-br/web/api/eventsource/onerror/index.html b/files/pt-br/web/api/eventsource/onerror/index.html
new file mode 100644
index 0000000000..09b996e967
--- /dev/null
+++ b/files/pt-br/web/api/eventsource/onerror/index.html
@@ -0,0 +1,121 @@
+---
+title: EventSource.onerror
+slug: Web/API/EventSource/onerror
+translation_of: Web/API/EventSource/onerror
+---
+<div>{{APIRef('WebSockets API')}}</div>
+
+<div> </div>
+
+<p>A propriedade <code><strong>onerror</strong></code> da interface {{domxref("EventSource")}} é um {{domxref("EventHandler")}} chamado quando um erro ocorre e um evento {{event("error")}} é despachado para o objeto <code>EventSource</code>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">eventSource.onerror = function</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<pre class="brush: js">evtSource.onerror = function() {
+  console.log("EventSource failed.");
+};</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode encontrar um exemplo completo no GitHub — veja <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onerror", "onerror")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</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>Suporte a EventSource</td>
+   <td>6</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Disponibilidade em workers compartilhados e dedicados<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("53.0")}}</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>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte a EventSource</td>
+   <td>4.4</td>
+   <td>45</td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>4.1</td>
+  </tr>
+  <tr>
+   <td>Disponibilidade em workers compartilhados e dedicados<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Mas <a href="https://github.com/w3c/ServiceWorker/issues/947">ainda não em service workers.</a></p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("EventSource")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/eventtarget/dispatchevent/index.html b/files/pt-br/web/api/eventtarget/dispatchevent/index.html
new file mode 100644
index 0000000000..75b633642b
--- /dev/null
+++ b/files/pt-br/web/api/eventtarget/dispatchevent/index.html
@@ -0,0 +1,43 @@
+---
+title: EventTarget.dispatchEvent()
+slug: Web/API/EventTarget/dispatchEvent
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Method
+  - events
+translation_of: Web/API/EventTarget/dispatchEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>Dispara um {{domxref("Event")}} para o {{domxref("EventTarget")}} especificado, invocando os {{domxref("EventListener")}}s especificados, em uma ordem apropriada. O processamento normal das regras (including the capturing and optional bubbling phase) aplica-se a eventos disparados manualmente com <code>dispatchEvent()</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>cancelled</em> = !<em>target</em>.dispatchEvent(<em>event</em>)
+</pre>
+
+<ul>
+ <li><code>event</code> é o objeto {{domxref("Event")}} a ser disparado.</li>
+ <li><code>target</code> é utilizado para inicializar o {{domxref("Event", "", "target")}} e determinar quais event listeners serão <span class="traducaoContextual">invocados.</span></li>
+ <li>O valor retornado é <code>false</code> se ao menos um dos event handlers o qual manipulou o evento chamou {{domxref("Event.preventDefault()")}}. De outro modo, isto retorna <code>true</code>.</li>
+</ul>
+
+<p>O método <code>dispatchEvent joga</code> <code>UNSPECIFIED_EVENT_TYPE_ERR</code> se o tipo do evento não foi especificado pela inicialização do evento antes do método ser chamado, ou se o tipo do evento for is <code>null</code> ou uma string vazia. Exceções jogadas por event handlers são reportadas  como exceções não-capturáveis; os event handlers são executados em uma callstack aninhada; eles bloqueiam o chamador até que a rotina tenha sido totalmente executada, mas as execeções não se propagam para o chamador.</p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p><code>dispatchEvent</code> é a última fase do processo create-init-dispatch, a qual é usada para disparar eventos na implementação do event model. O evento pode ser criado utilizando o método <a href="/en-US/docs/DOM/document.createEvent" title="DOM/document.createEvent">document.createEvent</a> e pode ser inicializado com <a href="/en-US/docs/DOM/event.initEvent" title="DOM/event.initEvent">initEvent</a> ou outro método de inicialização mais específico, como <a href="/en-US/docs/DOM/event.initMouseEvent" title="DOM/event.initMouseEvent">initMouseEvent</a> ou <a href="/en-US/docs/DOM/event.initUIEvent" title="DOM/event.initUIEvent">initUIEvent</a>.</p>
+
+<p>Veja também a <a href="/en-US/docs/DOM/event" title="DOM/event">referência Event object</a>.</p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<p>Veja <a href="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events" title="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Creating and triggering events</a>.</p>
+
+<h2 id="Specification" name="Specification">Especificações</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-dispatchEvent">DOM Level 2 Events: dispatchEvent</a></li>
+</ul>
diff --git a/files/pt-br/web/api/eventtarget/eventtarget/index.html b/files/pt-br/web/api/eventtarget/eventtarget/index.html
new file mode 100644
index 0000000000..0ce5aa4363
--- /dev/null
+++ b/files/pt-br/web/api/eventtarget/eventtarget/index.html
@@ -0,0 +1,70 @@
+---
+title: EventTarget()
+slug: Web/API/EventTarget/EventTarget
+translation_of: Web/API/EventTarget/EventTarget
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p>O construtor <code><strong>EventTarget()</strong></code> cria uma nova instância do objeto {{domxref("EventTarget")}}.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <var>myEventTarget</var> = new EventTarget();</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<p>Nenhum.</p>
+
+<h3 id="Retorno_de_valor">Retorno de valor</h3>
+
+<p>Uma instância do objeto {{domxref("EventTarget")}}.</p>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<pre class="brush: js" id="ct-20">class MyEventTarget extends EventTarget {
+  constructor(mySecret) {
+    super();
+    this._secret = mySecret;
+  }
+
+  get secret() { return this._secret; }
+};
+
+let myEventTarget = new MyEventTarget(5);
+let value = myEventTarget.secret;  // == 5
+myEventTarget.addEventListener("foo", function(e) {
+  this._secret = e.detail;
+});
+
+let event = new CustomEvent("foo", { detail: 7 });
+myEventTarget.dispatchEvent(event);
+let newValue = myEventTarget.secret; // == 7</pre>
+
+<h2 id="Specificações">Specificações</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', '#dom-eventtarget-eventtarget', 'EventTarget() constructor')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+
+
+<p>{{Compat("api.EventTarget.EventTarget")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("EventTarget")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/eventtarget/index.html b/files/pt-br/web/api/eventtarget/index.html
new file mode 100644
index 0000000000..c1eb84c9f0
--- /dev/null
+++ b/files/pt-br/web/api/eventtarget/index.html
@@ -0,0 +1,124 @@
+---
+title: EventTarget
+slug: Web/API/EventTarget
+tags:
+  - API
+  - DOM
+  - DOM Events
+  - Interface
+translation_of: Web/API/EventTarget
+---
+<p>{{ ApiRef("DOM Events") }}</p>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p><code>EventTarget</code> é uma interface DOM implementada por objetos que podem receber eventos DOM e tem que ouvir estes.</p>
+
+<p>{{domxref("Element")}}, {{domxref("document")}}, e {{domxref("window")}} são os mais comuns disparadores de eventos, mas outros objetos podem disparar eventos também, por exemplo {{domxref("XMLHttpRequest")}}, {{domxref("AudioNode")}}, {{domxref("AudioContext")}} e outros.</p>
+
+<p>Muitos disparadores de eventos (incluindo elements, documents,  e windows) também suportam definir <a href="/en-US/docs/Web/Guide/DOM/Events/Event_handlers" title="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">event handlers</a> através <code>on...</code> propriedades e atributos.</p>
+
+<h2 id="Methods" name="Methods">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Registra um tratamento para um tipo específico de evento sobre o <code>EventTarget</code>.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener()")}}</dt>
+ <dd>Remove um <em>event listener</em> do <code>EventTarget</code>.</dd>
+ <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt>
+ <dd>Dispatch an event to this <code>EventTarget</code>.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Sem mundanças.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Alguns parâmetros agora são opcionais (<code>listener</code>), ou aceitam o valor <code>null</code> (<code>useCapture</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade entre navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>9.0</td>
+   <td>7</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>9.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Additional_methods_for_Mozilla_chrome_code">Additional methods for Mozilla chrome code</h3>
+
+<p>Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also <a href="/en-US/docs/Mozilla/WebIDL_bindings" title="/en-US/docs/Mozilla/WebIDL_bindings">WebIDL bindings</a>.</p>
+
+<ul>
+ <li>void <strong>setEventHandler</strong>(DOMString type, EventHandler handler) {{ non-standard_inline() }}</li>
+ <li>EventHandler <strong>getEventHandler</strong>(DOMString type) {{ non-standard_inline() }}</li>
+</ul>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Web/Reference/Events" title="/en-US/docs/Web/Reference/Events">Referência de eventos</a> - os eventos disponíveis na plataforma.</li>
+ <li><a href="/pt-BR/docs/Web/Guide/DOM/Events" title="/en-US/docs/Web/Guide/DOM/Events">Guia do desenvolvedor sobre Eventos</a></li>
+ <li>Interface {{domxref("Event")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/eventtarget/removeeventlistener/index.html b/files/pt-br/web/api/eventtarget/removeeventlistener/index.html
new file mode 100644
index 0000000000..dc558d006f
--- /dev/null
+++ b/files/pt-br/web/api/eventtarget/removeeventlistener/index.html
@@ -0,0 +1,138 @@
+---
+title: EventTarget.removeEventListener()
+slug: Web/API/EventTarget/removeEventListener
+tags:
+  - API
+  - DOM
+  - Gecko
+  - JavaScript
+  - Method
+  - events
+translation_of: Web/API/EventTarget/removeEventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>Remove o event listener anteriormente registrado com {{domxref("EventTarget.addEventListener()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>])</pre>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Uma string indicando o tipo de evento a ser removido.</dd>
+ <dt><code>listener</code></dt>
+ <dd>A função {{ domxref("EventListener") }}  a ser removida do event target.</dd>
+ <dt><code>useCapture</code> {{ optional_inline() }}</dt>
+ <dd>Indica quando o {{ domxref("EventListener") }} a ser removido foi registrado ou não como <em>capturing listener</em>. Caso este parâmetro seja omitido, o valor <em>false</em> será assumido por padrão.</dd>
+ <dd>Se um listener foi registrado duas vezes, uma com o parâmetro <em>capture</em> especificado e outra sem, cada um deve ser removido separadamente. A remoção de um <em>capturing listener</em> não afeta a versão <em>non-capturing</em> do mesmo listener, e vice versa.</dd>
+</dl>
+
+<div class="note"><strong>Nota:</strong> <code>useCapture</code> era obrigatório em versões mais antigas dos navegadores. Para ampla compatibilidade, sempre informe o parâmetro <code>useCapture.</code></div>
+
+<h2 id="Compatibility" name="Compatibility">Notas</h2>
+
+<p>Se um {{ domxref("EventListener") }} é removido de um {{ domxref("EventTarget") }} enquanto <u><em>este</em></u> está processando um evento, esse não será disparado pelas <em>current actions</em>. Um {{ domxref("EventListener") }} não será invocado para o evento o qual foi registrado depois de ter sido removido, porém pode ser registrado novamente.</p>
+
+<p>Chamar <code>removeEventListener()</code> com argumentos que não identifiquem nenhum {{ domxref("EventListener") }} registrado no <code>EventTarget</code> não tem qualquer efeito.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Este é um exemplo de como associar e remover um event listener.</p>
+
+<pre class="brush: js">var div = document.getElementById('div');
+var listener = function (event) {
+  /* faça alguma coisa... */
+};
+div.addEventListener('click', listener, false);
+div.removeEventListener('click', listener, false);
+</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade entre navegadores</h2>
+
+<p>{{Compat("api.EventTarget.removeEventListener", 3)}}</p>
+
+
+
+<h3 id="Notas_para_Gecko">Notas para Gecko</h3>
+
+<ul>
+ <li>Antes do Firefox 6, o navegador poderia retornar um erro se o parâmetro  <code>useCapture não estive explicitamente cofigurado como</code> <font face="'Courier New', 'Andale Mono', monospace"><span style="line-height: normal;">false</span></font>. Antes do Gecko 9.0 {{ geckoRelease("9.0") }}, <code>addEventListener()</code> retornaria uma exception se o parâmetro do listener fosse <code>null</code>; agora o método retorna sem erros, mas sem fazer nada.</li>
+</ul>
+
+<h3 id="Notas_para_Opera">Notas para Opera</h3>
+
+<ul>
+ <li>Opera 12.00 fez com que o uso de <code>useCapture</code> seja opcional (<a class="external" href="http://my.opera.com/ODIN/blog/2011/09/29/what-s-new-in-opera-development-snapshots-28-september-2011-edition">source</a>).</li>
+</ul>
+
+<h3 id="Notas_para_WebKit">Notas para WebKit</h3>
+
+<ul>
+ <li>Embora o WebKit tenha adicionado explicitamente "<code>[optional]</code>" ao parâmetro <code>useCapture</code> para Safari 5.1 e Chrome 13, isto já funcionava antes da mudança.</li>
+</ul>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<p>{{ domxref("EventTarget.addEventListener()") }}.</p>
+
+<h3 id="Specification" name="Specification">Especificação</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-EventTarget-removeEventListener">removeEventListener </a></li>
+</ul>
+
+<h2 id="Polyfill_para_oferecer_suporte_aos_navegadores_antigos">Polyfill para oferecer suporte aos navegadores antigos</h2>
+
+<p><code>addEventListener()</code> e <code>removeEventListener()</code> não estão presentes em navegadores antigos. Isto pode ser contornado se você inserir o código abaixo no início dos seus scripts, permitindo o uso de <code>addEventListener()</code> e <code>removeEventListener()</code>  em implementações as quais não oferecem suporte nativo. Entretanto, este método não funciona para o Internet Explorer 7 ou versões anteriores, uma vez que não era possível extender o Element.prototype até o Internet Explorer 8.</p>
+
+<pre class="brush: js">if (!Element.prototype.addEventListener) {
+  var oListeners = {};
+  function runListeners(oEvent) {
+    if (!oEvent) { oEvent = window.event; }
+    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) {
+        for (iLstId; iLstId &lt; oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
+        break;
+      }
+    }
+  }
+  Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (oListeners.hasOwnProperty(sEventType)) {
+      var oEvtListeners = oListeners[sEventType];
+      for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+        if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+      }
+      if (nElIdx === -1) {
+        oEvtListeners.aEls.push(this);
+        oEvtListeners.aEvts.push([fListener]);
+        this["on" + sEventType] = runListeners;
+      } else {
+        var aElListeners = oEvtListeners.aEvts[nElIdx];
+        if (this["on" + sEventType] !== runListeners) {
+          aElListeners.splice(0);
+          this["on" + sEventType] = runListeners;
+        }
+        for (var iLstId = 0; iLstId &lt; aElListeners.length; iLstId++) {
+          if (aElListeners[iLstId] === fListener) { return; }
+        }
+        aElListeners.push(fListener);
+      }
+    } else {
+      oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
+      this["on" + sEventType] = runListeners;
+    }
+  };
+  Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (!oListeners.hasOwnProperty(sEventType)) { return; }
+    var oEvtListeners = oListeners[sEventType];
+    for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+    }
+    if (nElIdx === -1) { return; }
+    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId &lt; aElListeners.length; iLstId++) {
+      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
+    }
+  };
+}
+</pre>
diff --git a/files/pt-br/web/api/fetch_api/basic_concepts/index.html b/files/pt-br/web/api/fetch_api/basic_concepts/index.html
new file mode 100644
index 0000000000..c9845e75aa
--- /dev/null
+++ b/files/pt-br/web/api/fetch_api/basic_concepts/index.html
@@ -0,0 +1,66 @@
+---
+title: Conceitos básicos de Fetch
+slug: Web/API/Fetch_API/Basic_concepts
+translation_of: Web/API/Fetch_API/Basic_concepts
+---
+<p>{{DefaultAPISidebar("Fetch API")}}{{draft}}</p>
+
+<div class="summary">
+<p>A <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> fornece uma interface para buscar recursos (inclusive pela rede). Parecerá familiar para alguém que já tenha usado {{domxref("XMLHttpRequest")}}, mas ela fornece um conjunto de recursos mais poderoso e flexível . Este artigo expõe alguns conceitos básicos da API Fetch.</p>
+</div>
+
+<div class="note">
+<p>Este artigo será incrementado ao longo do tempo. Se você achar um conceito em Fetch que parece precisar de uma explicação melhor, informe alguém em <a href="https://discourse.mozilla-community.org/c/mdn">fórum de discussãMDN</a>, or <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> (#mdn room.)</p>
+</div>
+
+<h2 id="Em_poucas_palavras">Em poucas palavras</h2>
+
+<p>O coração do Fetch são as abstrações da Interface do HTTP {{domxref("Request")}}, {{domxref("Response")}}, {{domxref("Headers")}}, e {{domxref("Body")}} payloads, juntamente com {{domxref("GlobalFetch.fetch","global fetch")}} método para iniciar requisições de recursos assíncronos. Como os componentes principais do HTTP são abstraidos como objetos de JavaScript, torna-se fácil APIs fazer uso das funcionalidades.</p>
+
+<p><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a> é um exemplo de uma API que faz um grande uso de Fecth.</p>
+
+<p>Fetch leva a assincronicidade um passo além. A API é completamente baseada em {{jsxref("Promise")}}.</p>
+
+<h2 id="Guard">Guard</h2>
+
+<p>Guard é uma novidade de objetos {{domxref("Headers")}}, podendo assumir os valores de <code>immutable</code>, <code>request</code>, <code>request-no-cors</code>, <code>response</code>, ou <code>none</code>, dependendo de onde o cabeçalho é utilizado.</p>
+
+<p>Quando um novo objeto {{domxref("Headers")}} é criado usando o {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}}, seu guard é configurado como <code>none</code> (o padrão). Quando um objeto {{domxref("Request")}} ou {{domxref("Response")}} é criado, tem um objeto {{domxref("Headers")}}  associado cujo guard é resumido a seguir:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Novo tipo de objeto</th>
+   <th scope="col">Construtor criado</th>
+   <th scope="col">Configuração guard associada ao objeto {{domxref("Headers")}}</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td rowspan="2">{{domxref("Request")}}</td>
+   <td>{{domxref("Request.Request","Request()")}}</td>
+   <td><code>request</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Request.Request","Request()")}} com {{domxref("Request.mode","mode")}} de <code>no-cors</code></td>
+   <td><code>request-no-cors</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">{{domxref("Response")}}</td>
+   <td>{{domxref("Response.Response","Response()")}}</td>
+   <td><code>response</code></td>
+  </tr>
+  <tr>
+   <td>Métodos {{domxref("Response.error","error()")}} ou {{domxref("Response.redirect","redirect()")}}</td>
+   <td><code>immutable</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Um cabeçalho guard afeta os métodos {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, e {{domxref("Headers.append","append()")}} os quais mudam o conteúdo do cabeçalho. Um<code>TypeError</code> é lançado se você tentar modificar um objeto {{domxref("Headers")}} objeto cujo "guard" é <code>immutable</code>. De qualquer maneira, a operação vai funcionar se</p>
+
+<ul>
+ <li>guard for um <code title="">request</code> e o <var>name</var> de cabeçalho não for {{Glossary("forbidden header name")}} .</li>
+ <li>guard for <code title="">request-no-cors</code> e os <var>name</var>/<var>value</var> de cabeçalho for {{Glossary("simple header")}} .</li>
+ <li>guard for <code title="">response</code> e o <var>name</var> de cabeçalho não for {{Glossary("forbidden response header name")}} .</li>
+</ul>
diff --git a/files/pt-br/web/api/fetch_api/index.html b/files/pt-br/web/api/fetch_api/index.html
new file mode 100644
index 0000000000..6409994ae7
--- /dev/null
+++ b/files/pt-br/web/api/fetch_api/index.html
@@ -0,0 +1,85 @@
+---
+title: Fetch API
+slug: Web/API/Fetch_API
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Referência(2)
+  - XMLHttpRequest
+  - request
+translation_of: Web/API/Fetch_API
+---
+<p>{{DefaultAPISidebar("Fetch API")}}{{ SeeCompatTable() }}</p>
+
+<p><span id="result_box" lang="pt"><span>A Fetch API fornece uma interface para buscar recursos (por exemplo, em toda a rede). Parecerá familiar para qualquer pessoa que tenha usado XMLHttpRequest, porém a nova API oferece um conjunto de recursos mais poderoso e flexível.</span></span></p>
+
+<h2 id="Conceitos_e_uso">Conceitos e uso</h2>
+
+<p>O Fetch fornece uma definição genérica de objetos de {{domxref("Request")}} e {{domxref("Response")}}  (e outras coisas envolvidas com solicitações de rede). Isso permitirá que eles sejam usados onde quer que sejam necessários no futuro, seja para service workers, Cache API e outras coisas similares que manipulam ou modifiquem pedidos e respostas ou qualquer tipo de caso de uso que possa exigir que você gere suas próprias responses programaticamente.</p>
+
+<p>Ele também fornece uma definição para conceitos relacionados como CORS e a semântica de cabeçalho de origem HTTP, suplantando suas definições separadas em outro lugar.</p>
+
+<p>Para fazer uma solicitação e buscar um recurso, use o método {{domxref("GlobalFetch.fetch")}} . Ele é implementado em várias interfaces, especificamente {{domxref("Window")}} e {{domxref("WorkerGlobalScope")}}. Isso torna disponível em praticamente qualquer contexto em que você possa querer obter recursos.</p>
+
+<p>O método fetch () tem um argumento obrigatório, o caminho para o recurso que deseja obter. Ele retorna uma promessa que resolve a {{domxref("Response")}} para esta requisição, seja ele bem-sucedido ou não. Você também pode, opcionalmente, passar um objeto de opções de inicialização como o segundo argumento (consulte {{domxref("Request")}}).</p>
+
+<p>Uma vez que uma {{domxref("Response")}} é recuperada, há uma série de métodos disponíveis para definir o conteúdo do corpo e como ele deve ser tratado (veja {{domxref("Body")}}.)</p>
+
+<p><br>
+ Você pode criar um pedido e uma resposta diretamente usando os construtores {{domxref("Request.Request","Request()")}} e {{domxref("Response.Response","Response()")}}, mas é improvável que você faça isso diretamente. Em vez disso, é mais provável que sejam criados como resultados de outras ações da API (por exemplo,  {{domxref("FetchEvent.respondWith")}} de service workers).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Encontre mais informações sobre os recursos do Fetch API em <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a>,  e conceitos para estudos em <a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a>.</p>
+</div>
+
+<h2 id="Fetch_Interfaces">Fetch Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("GlobalFetch")}}</dt>
+ <dd>Contém o método <code>fetch()</code> usado para buscar um recurso.</dd>
+ <dt>{{domxref("Headers")}}</dt>
+ <dd>Representa cabeçalhos response/request, permitindo que você os consulte e faça diferentes ações dependendo dos resultados.</dd>
+ <dt>{{domxref("Request")}}</dt>
+ <dd>Representa um pedido de recursos.</dd>
+ <dt>{{domxref("Response")}}</dt>
+ <dd>Representa a resposta de uma requisição.</dd>
+</dl>
+
+<h2 id="Fetch_mixin">Fetch mixin</h2>
+
+<dl>
+ <dt>{{domxref("Body")}}</dt>
+ <dd>Providencia métodos relacionados ao corpo da resposta/requisição, permitindo que você declare qual seu tipo de conteúdo e como ele deve ser tratado.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentários</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegadores_Compatíveis">Navegadores Compatíveis</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <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>
+ <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a></li>
+</ul>
diff --git a/files/pt-br/web/api/fetch_api/using_fetch/index.html b/files/pt-br/web/api/fetch_api/using_fetch/index.html
new file mode 100644
index 0000000000..0b951f7461
--- /dev/null
+++ b/files/pt-br/web/api/fetch_api/using_fetch/index.html
@@ -0,0 +1,311 @@
+---
+title: Usando Fetch
+slug: Web/API/Fetch_API/Using_Fetch
+translation_of: Web/API/Fetch_API/Using_Fetch
+---
+<div class="summary">
+<p>A <a href="/pt-BR/docs/Web/API/Fetch_API">API Fetch</a> fornece uma interface JavaScript para acessar e manipular partes do pipeline HTTP, tais como os pedidos e respostas. Ela também fornece o método global {{domxref("GlobalFetch.fetch","fetch()")}} que fornece uma maneira fácil e lógica para buscar recursos de forma assíncrona através da rede.</p>
+</div>
+
+<p>Este tipo de funcionalidade era obtida anteriormente utilizando {{domxref("XMLHttpRequest")}}. Fetch fornece uma alternativa melhor que pode ser facilmente utilizada por outras tecnologias como {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch também provê um lugar lógico único para definir outros conceitos relacionados ao protocolo HTTP como CORS e extensões ao HTTP.</p>
+
+<p>Note que a especificação <code>fetch()</code> difere de <code>jQuery.ajax()</code>, principalmente, de três formas:</p>
+
+<ul>
+ <li><font><font>A Promise retornada do </font></font><code>fetch()</code> <strong><font><font>não rejeitará o status do erro HTTP,</font></font></strong><font><font> mesmo que a resposta seja um HTTP 404 ou 500. Em vez disso, ela irá resolver normalmente (com o status </font></font><code>ok</code><font><font> definido como falso), e só irá rejeitar se houver falha na rede ou se algo impedir a requisição de ser completada.</font></font></li>
+ <li><code>fetch()</code> <strong><font><font>não receberá cookies cross-site;</font></font></strong><font><font> você não pode estabelecer uma conexão cross-site usando fetch. Cabeçalhos <code><a href="/en-US/docs/Web/HTTP/Headers/Set-Cookie">Set-Cookie</a></code> de outros sites são ignorados silenciosamente</font><font>.</font></font></li>
+ <li><code>fetch()</code> <strong><font><font>não enviará cookies</font></font></strong><font><font>, a não ser que seja definida a opção <em>credentials</em> do </font><a href="https://developer.mozilla.org/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parâmetros"><font>parâmetro init</font></a><font>. (Desde </font></font><a href="https://github.com/whatwg/fetch/pull/585" rel="nofollow noopener">25 de agosto de 2017</a>.<font><font> A especificação alterou as políticas padrão de credenciais para </font></font> <code>same-origin</code>. O Firefox mudou desde 61.0b13.)</li>
+</ul>
+
+<h2 id="Situação_do_suporte_por_navegadores">Situação do suporte por navegadores</h2>
+
+<p>Os suportes para Fetch ainda estão em uma fase bastante precoce, mas começa a ter progresso. Se tornou um padrão no Firefox 39 e Chrome 42 até as versões mais atuais.</p>
+
+<p>Caso tenha interesse no uso da ferramenta, há também uma <a href="https://github.com/github/fetch">Fetch Polyfill</a> disponivel que recria as funcionalidade para outros navegadores que ainda não o suporta. Fique ciente que está em estado experimental e ainda não há uma versão completa.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: There have been some concerns raised that the <a href="https://fetch.spec.whatwg.org/">Fetch spec</a> is at odds with the <a href="https://streams.spec.whatwg.org/">Streams spec</a>; however, future plans show an intention to integrate Streams with Fetch: read <a href="https://github.com/yutakahirano/fetch-with-streams/">Fetch API integrated with Streams</a> for more information.</p>
+</div>
+
+<h2 id="Detecção_de_Recursos">Detecção de Recursos</h2>
+
+<p>Fetch API support pode ser detectada na existência do escopo {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} ou {{domxref("GlobalFetch.fetch","fetch()")}} no {{domxref("Window")}} ou {{domxref("Worker")}} . Por exemplo, faça o seguinte teste no seu código:</p>
+
+<pre class="brush: js notranslate">if(self.fetch) {
+    // execute minha solicitação do fetch aqui
+} else {
+    // faça alguma coisa com XMLHttpRequest?
+}</pre>
+
+<h2 id="Fazendo_as_requisições_Fetch">Fazendo as requisições Fetch</h2>
+
+<p>Uma requisição fetch é realizada para configuração. Temos um exemplo no seguinte código:</p>
+
+<pre class="brush: js notranslate">var myImage = document.querySelector('img');
+
+fetch('flowers.jpg')
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+
+</pre>
+
+<p>Aqui estamos procurando uma imagem e inserindo em um elemento {{htmlelement("img")}}. O uso mais básico do<code>fetch()</code> acarreta em um argumento — a pasta do recurso que você deseja buscar — e retorna uma promessa contendo a resposta (a {{domxref("Response")}} object).</p>
+
+<p>Esta é apenas uma resposta HTTP, não a imagem em sí. Para extrairmos a imagem da resposta, nós usamos o método {{domxref("Body.blob","blob()")}} (definido no mixin do {{domxref("Body")}}, que são implementados por ambos os objetos {{domxref("Request")}} e {{domxref("Response")}}.)</p>
+
+<div class="note">
+<p><strong>Nota</strong>: O Body mixin além disso possui métodos similares para extrair outros tipos de conteúdo do body; Veja a sessão {{anch("Body")}} para mais detalhes.</p>
+</div>
+
+<p>Um <code>objectURL</code> é criado na extração de {{domxref("Blob")}}, que então é inserido no {{domxref("img")}}.</p>
+
+<p>Requisições Fetch são controladas pela directiva <code>connect-src</code> do <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> ao invés da directiva do recurso retornado.</p>
+
+<h3 id="Fornecendo_opções_de_request">Fornecendo opções de request</h3>
+
+<p>O método <code>fetch()</code> pode receber um segundo parametro opcional, que consiste em um objeto <code>init</code> que permite setar várias configurações:</p>
+
+<pre class="brush: js notranslate">var myHeaders = new Headers();
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+fetch('flowers.jpg',myInit)
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+
+</pre>
+
+<p>See {{domxref("GlobalFetch.fetch","fetch()")}} for the full options available, and more descriptions.</p>
+
+<h3 id="Verificando_se_o_fetch_foi_bem_sucedido">Verificando se o fetch foi bem sucedido</h3>
+
+<p>Uma promise {{domxref("GlobalFetch.fetch","fetch()")}} será rejeitada com um {{jsxref("TypeError")}} quando um erro de rede é encontrado, embora isso geralmente signifique problemas de permissão ou similar — um 404 não constitui um erro de rede, por exemplo. Uma verificação precisa de um <code>fetch()</code>  bem-sucedido incluiria a verificação de que a promessa foi resolvida e, em seguida, a verificação de que a propriedade <span class="tlid-translation translation"><span title="">{{domxref("Response.ok")}} tem o valor de <code>true</code>. O código seria parecido com o abaixo:</span></span></p>
+
+<pre class="brush: js notranslate">fetch('flowers.jpg').then(function(response) {
+  if(response.ok) {
+    response.blob().then(function(myBlob) {
+      var objectURL = URL.createObjectURL(myBlob);
+      myImage.src = objectURL;
+    });
+  } else {
+    console.log('Network response was not ok.');
+  }
+})
+.catch(function(error) {
+  console.log('There has been a problem with your fetch operation: ' + error.message);
+});</pre>
+
+<h3 id="Fornecendo_seu_próprio_objeto_de_solicitação">Fornecendo seu próprio objeto de solicitação</h3>
+
+<p>Em vez de passar um caminho, para o recurso que você deseja solicitar, dentro da rquisição <code>fetch()</code>, você pode criar um objeto de solicitação usando o construtor {{domxref("Request.Request","Request()")}}, e então passar a solicitação como um argumento do método <code>fetch()</code> :</p>
+
+<pre class="brush: js notranslate">var myHeaders = new Headers();
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+
+fetch(myRequest)
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});</pre>
+
+<p><code>Request()</code> aceita exatamente os mesmos parâmetros do método <code>fetch()</code>. Você pode até mesmo passar um objeto de solicitação existente para criar uma cópia dele:​​​​​​</p>
+
+<pre class="brush: js notranslate">var anotherRequest = new Request(myRequest,myInit);</pre>
+
+<p>Isso é muito útil, pois os conteúdos de cada solicitação e resposta tem apenas um uso. Fazer uma cópia como essa permite que você use a solicitação / resposta novamente, variando as opções de inicialização, se desejar.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Também existe um método que cria uma cópia: {{domxref ("Request.clone", "clone ()")}}. Isso tem uma semântica ligeiramente diferente do outro método de cópia: o primeiro dirá se o conteúdo, da solicitação anterior, já tiver sido lido (ou copiado), enquanto o segundo, <code>clone()</code> não.</p>
+</div>
+
+<h2 id="Headers">Headers</h2>
+
+<p>A interface {{domxref("Headers")}} permite que você crie seus proprios objetos headers por meio do construtor {{domxref("Headers.Headers","Headers()")}}. Um objeto headers é um  mapa multidimensional simples de nomes para o valor? </p>
+
+<pre class="brush: js notranslate">var content = "Hello World";
+var myHeaders = new Headers();
+myHeaders.append("Content-Type", "text/plain");
+myHeaders.append("Content-Length", content.length.toString());
+myHeaders.append("X-Custom-Header", "ProcessThisImmediately");</pre>
+
+<p>O mesmo pode ser feito passando um array de arrays ou um objeto literal para o construtor:</p>
+
+<pre class="brush: js notranslate">myHeaders = new Headers({
+  "Content-Type": "text/plain",
+  "Content-Length": content.length.toString(),
+  "X-Custom-Header": "ProcessThisImmediately",
+});</pre>
+
+<p>O conteúdo pode ser consultado e recuperado:</p>
+
+<pre class="brush: js notranslate">console.log(myHeaders.has("Content-Type")); // true
+console.log(myHeaders.has("Set-Cookie")); // false
+myHeaders.set("Content-Type", "text/html");
+myHeaders.append("X-Custom-Header", "AnotherValue");
+
+console.log(myHeaders.get("Content-Length")); // 11
+console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
+
+myHeaders.delete("X-Custom-Header");
+console.log(myHeaders.getAll("X-Custom-Header")); // [ ]</pre>
+
+<p>Some of these operations are only useful in {{domxref("ServiceWorker_API","ServiceWorkers")}}, but they provide a much nicer API for manipulating headers.</p>
+
+<p>All of the Headers methods throw a TypeError if a header name is used that is not a valid HTTP Header name. The mutation operations will throw a TypeError if there is an immutable guard (see below). Otherwise they fail silently. For example:</p>
+
+<pre class="brush: js notranslate">var myResponse = Response.error();
+try {
+  myResponse.headers.set("Origin", "http://mybank.com");
+} catch(e) {
+  console.log("Cannot pretend to be a bank!");
+}</pre>
+
+<p>A good use case for headers is checking whether the content type is correct before you process it further. For example:</p>
+
+<pre class="brush: js notranslate">fetch(myRequest).then(function(response) {
+  var contentType = response.headers.get("content-type");
+  if(contentType &amp;&amp; contentType.indexOf("application/json") !== -1) {
+    return response.json().then(function(json) {
+      // process your JSON further
+    });
+  } else {
+    console.log("Oops, we haven't got JSON!");
+  }
+});</pre>
+
+<h3 id="Guard">Guard</h3>
+
+<p>Since headers can be sent in requests and received in responses, and have various limitations about what information can and should be mutable, headers objects have a guard property. This is not exposed to the Web, but it affects which mutation operations are allowed on the headers object.</p>
+
+<p>Possible guard values are:</p>
+
+<ul>
+ <li><code>none</code>: default.</li>
+ <li><code>request</code>: guard for a headers object obtained from a request ({{domxref("Request.headers")}}).</li>
+ <li><code>request-no-cors</code>: guard for a headers object obtained from a request created with {{domxref("Request.mode")}} <code>no-cors</code>.</li>
+ <li><code>response</code>: guard for a Headers obtained from a response ({{domxref("Response.headers")}}).</li>
+ <li><code>immutable</code>: Mostly used for ServiceWorkers; renders a headers object read-only.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You may not append or set a <code>request</code> guarded Headers’ <code>Content-Length</code> header. Similarly, inserting <code>Set-Cookie</code> into a response header is not allowed: ServiceWorkers are not allowed to set cookies via synthesized responses.</p>
+</div>
+
+<h2 id="Response_objects">Response objects</h2>
+
+<p>As you have seen above, {{domxref("Response")}} instances are returned when <code>fetch()</code> promises are resolved.</p>
+
+<p>They can also be created programmatically via JavaScript, but this is only really useful in {{domxref("ServiceWorker_API", "ServiceWorkers")}}, when you are providing a custom response to a received request using a {{domxref("FetchEvent.respondWith","respondWith()")}} method:</p>
+
+<pre class="brush: js notranslate">var myBody = new Blob();
+
+addEventListener('fetch', function(event) {
+  event.respondWith(
+    new Response(myBody, {
+      headers: { "Content-Type" : "text/plain" }
+    })
+  );
+});</pre>
+
+<p>The {{domxref("Response.Response","Response()")}} constructor takes two optional arguments — a body for the response, and an init object (similar to the one that {{domxref("Request.Request","Request()")}} accepts.)</p>
+
+<p>The most common response properties you'll use are:</p>
+
+<ul>
+ <li>{{domxref("Response.status")}} — An integer (default value 200) containing the response status code.</li>
+ <li>{{domxref("Response.statusText")}} — A string (default value "OK"),which corresponds to the HTTP status code message.</li>
+ <li>{{domxref("Response.ok")}} — seen in use above, this is a shorthand for checking that status is in the range 200-299 inclusive. This returns a {{domxref("Boolean")}}.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: The static method {{domxref("Response.error","error()")}} simply returns an error response. Similarly, {{domxref("Response.redirect","redirect()")}} returns a response resulting in<br>
+ a redirect to a specified URL. These are also only relevant to Service Workers.</p>
+</div>
+
+<h2 id="Body">Body</h2>
+
+<p>Both requests and responses may contain body data. A body is an instance of any of the following types.</p>
+
+<ul>
+ <li>{{domxref("ArrayBuffer")}}</li>
+ <li>{{domxref("ArrayBufferView")}} (Uint8Array and friends)</li>
+ <li>{{domxref("Blob")}}/File</li>
+ <li>string</li>
+ <li>{{domxref("URLSearchParams")}}</li>
+ <li>{{domxref("FormData")}}</li>
+</ul>
+
+<p>The {{domxref("Body")}} mixin defines the following methods to extract a body (implemented by both {{domxref("Request")}} and {{domxref("Response")}}). These all return a promise that is eventually resolved with the actual content.</p>
+
+<ul>
+ <li>{{domxref("Body.arrayBuffer","arrayBuffer()")}}</li>
+ <li>{{domxref("Body.blob","blob()")}}</li>
+ <li>{{domxref("Body.json","json()")}}</li>
+ <li>{{domxref("Body.text","text()")}}</li>
+ <li>{{domxref("Body.formData","formData()")}}</li>
+</ul>
+
+<p>This makes usage of non-textual data much easier than it was with XHR.</p>
+
+<p>Request bodies can be set by passing body parameters:</p>
+
+<pre class="brush: js notranslate">var form = new FormData(document.getElementById('login-form'));
+fetch("/login", {
+  method: "POST",
+  body: form
+});</pre>
+
+<p>Both request and response (and by extension the <code>fetch()</code> function), will try to intelligently determine the content type. A request will also automatically set a <code>Content-Type</code> header if none is set in the dictionary.</p>
+
+<h2 id="Especificações">Especificações</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')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_os_browsers">Compatibilidade com os browsers</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<div id="compat-mobile"></div>
+
+<ul>
+ <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>
+ <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li>
+ <li><a href="https://github.com/mdn/fetch-examples/">Fetch examples on Github</a></li>
+</ul>
diff --git a/files/pt-br/web/api/fetch_api/uso_de_busca_cross-global/index.html b/files/pt-br/web/api/fetch_api/uso_de_busca_cross-global/index.html
new file mode 100644
index 0000000000..c569966b5a
--- /dev/null
+++ b/files/pt-br/web/api/fetch_api/uso_de_busca_cross-global/index.html
@@ -0,0 +1,35 @@
+---
+title: Uso de busca Cross-global
+slug: Web/API/Fetch_API/Uso_de_busca_Cross-global
+translation_of: Web/API/Fetch_API/Cross-global_fetch_usage
+---
+<p class="summary"> </p>
+
+<p class="summary">Este artigo explica um "edge case" (um problema ou situação que ocorre apenas em um parâmetro operacional extremo) que ocorre ao utilizar fetch (e potencialmente outras APIs que exibem o mesmo tipo de comportamento de recuperação de recurso). Quando uma busca de cross-origin envolvendo uma URL relativa é iniciada a partir de um {{htmlelement ("iframe")}}, a URL relativa costumava ser resolvida na localização global atual, em vez da localização do iframe.</p>
+
+<h2 id="O_edge_case">O "edge case"</h2>
+
+<p>Muitos sites nunca se deparam com este caso extremo. Para que isso aconteça:</p>
+
+<ul>
+ <li>Você precisa de um iframe de mesma origem</li>
+ <li>Esse iframe de mesma origem precisa ter um local com um URL base diferente</li>
+ <li>Você tem que usar a função de busca global, por exemplo, frame.contentWindow.fetch ()</li>
+ <li>A URL passada precisa ser relativa</li>
+</ul>
+
+<h2 id="O_problema">O problema</h2>
+
+<p>No passado, resolveríamos o URL relativo contra o global atual, por exemplo:</p>
+
+<pre class="brush: js">let absolute = new URL(relative, window.location.href)</pre>
+
+<p>Isto não é um problema como tal. É que diferentes APIs que exibem esse tipo de comportamento estavam fazendo isso de maneira inconsistente com o comportamento definido na especificação, o que poderia levar a problemas mais adiante.</p>
+
+<h2 id="A_solução">A solução</h2>
+
+<p>No Firefox 60 em diante, o Mozilla resolve a URL relativa contra o global que possui a função <code>fetch()</code> que está sendo usada (veja {{bug (1432272)}}). Portanto, no caso descrito acima, ele é resolvido em relação à localização do iframe:</p>
+
+<pre class="brush: js">let absolute = new URL(relative, frame.contentWindow.location.href)</pre>
+
+<p>Há muita discussão em andamento sobre a obtenção de novas especificações para se alinhar a essa mudança de comportamento, a fim de mitigar possíveis problemas no futuro.</p>
diff --git a/files/pt-br/web/api/file/index.html b/files/pt-br/web/api/file/index.html
new file mode 100644
index 0000000000..471cf7bbda
--- /dev/null
+++ b/files/pt-br/web/api/file/index.html
@@ -0,0 +1,146 @@
+---
+title: File
+slug: Web/API/File
+tags:
+  - API
+  - Arquivos
+  - DOM
+  - Files
+  - Referencia
+translation_of: Web/API/File
+---
+<div>{{gecko_minversion_header("1.9")}}</div>
+
+<div>{{APIRef("File API")}}</div>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>A interface <code>File</code> provê informações sobre arquivos e permite ao JavaScript  a acessar seu conteúdo.</p>
+
+<p>São geralmente recuperados a partir de um objeto {{domxref("FileList")}} que é retornado como resultado da seleção, pelo usuário, de arquivos através do elemento <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">{{ HTMLElement("input") }}</span><span style="line-height: 1.5;">, a partir do objeto {{domxref("DataTransfer")}} </span><span style="line-height: 1.5;">utilizado em operações de arrastar e soltar</span><span style="line-height: 1.5;">,</span><span style="line-height: 1.5;"> ou a partir da API </span><code style="font-style: normal; line-height: 1.5;">mozGetAsFile()</code><span style="line-height: 1.5;"> em um {{ domxref("HTMLCanvasElement") }}. Em Gecko, códigos com privilégiios podem criar objetos File representando qualquer arquivo local sem a intereção do usuário </span>(veja {{anch("Implementation notes")}} para mais informações.)</p>
+
+<p>Um objeto File é um tipo específico de  {{domxref("Blob")}}, e podem ser utilizados em qualquer contexto que um Blob pode. Em particular, {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, e {{domxref("XMLHttpRequest", "", "send()")}} aceitam ambos, Blobs e Files.</p>
+
+<p>Veja <a href="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> (usando arquivos através de uma aplicação web) para mais informações e exemplos.</p>
+
+<p>A referência ao arquivo pode ser salva quando o formulário é submetido enquanto o usuário está offline, de forma que os dados possam ser recuperados e enviados quando a conexão com a internet for reestabelecida,</p>
+
+<p><strong style="font-size: 2.142857142857143rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Propriedades</strong></p>
+
+<dl>
+ <dt>{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}</dt>
+ <dd>A <font face="Consolas, Liberation Mono, Courier, monospace">Data</font> da última modificação do arquivo referenciado pelo objeto <code>File</code>.</dd>
+ <dt>{{domxref("File.name")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>O nome do arquivo referenciado pelo objeto <code>File</code>.</dd>
+ <dt>{{domxref("File.fileName")}} {{non-standard_inline}} {{readonlyinline}} {{obsolete_inline("7.0")}}</dt>
+ <dd>O nome do arquivo referenciado pelo objeto <code style="font-style: normal;">File</code>.</dd>
+ <dt>{{domxref("File.fileSize")}} {{non-standard_inline}} {{readonlyinline}} {{obsolete_inline("7.0")}}</dt>
+ <dd>O tamanho do arquivo referenciado, em bytes.</dd>
+</dl>
+
+<p>A interface <code>File</code> herda as propriedades da interface {{domxref("Blob")}}.</p>
+
+<p>{{page("/en-US/docs/Web/API/Blob","Properties")}}</p>
+
+<h2 id="Method_overview" name="Method_overview">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("File.getAsBinary()")}} {{non-standard_inline}} {{obsolete_inline("7.0")}}</dt>
+ <dd>Retorna uma string contendo os dados do arquivo em formato binário.</dd>
+ <dt>{{domxref("File.getAsDataURL()")}} {{non-standard_inline}} {{obsolete_inline("7.0")}}</dt>
+ <dd>Uma string contendo os dados do arquivo codificados como <code>data:</code> URL.</dd>
+ <dt>{{domxref("File.getAsText()","File.getAsText(string encoding)")}} {{non-standard_inline}} {{obsolete_inline("7.0")}}</dt>
+ <dd>Retorna o conteúdo do arquivo como uma string em que os dados do arquivo são interpretados como texto, usando a codificação passada por parâmetro.</dd>
+</dl>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentários</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Definição Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com os Navegadores</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>13</td>
+   <td>{{CompatGeckoDesktop("1.9")}} (non standard)<br>
+    {{CompatGeckoDesktop("7")}} (standard)</td>
+   <td>10.0</td>
+   <td>16.0</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+   <td>11.1</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Specification" name="Specification">Notas de Implementação</h3>
+
+<h4 id="Notas_no_Gecko">Notas no Gecko</h4>
+
+<ul>
+ <li>No Gecko, você pode utilizar esta API a partir de um código do chrome. Veja <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code" title="Usando a DOM File API no código do chrome">Using the DOM File API in chrome code</a> para mais detalhes.</li>
+ <li>A partir do Gecko 6.0 {{geckoRelease("6.0")}}, códigos com privilégios (como extensões) podem passar um objeto {{interface("nsIFile")}} para o construtor do DOM <code>File</code> para especificar a referência para o arquivo.</li>
+ <li>A partir do Gecko 8.0 {{geckoRelease("8.0")}}, você pode usar <code>new File<font face="Open Sans, sans-serif"> para criar objetos </font></code><code>File</code> de código de componentes XPCOM ao invés de precisar instanciaro objeto {{interface("nsIDOMFile")}} direamente. O construtor recebe, em contraste com o Blob,  o nome do arquivo como segundo argumento. O nome do arquivo pode ser qualquer string.
+  <pre class="syntaxbox">File File(
+  Array parts,
+  String nomedoarquivo,
+  BlobPropertyBag propriedades
+);</pre>
+ </li>
+</ul>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Using_files_from_web_applications" title="Using files from web applications">Using files from web applications</a></li>
+ <li><a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code" title="Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a></li>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/file/using_files_from_web_applications/index.html b/files/pt-br/web/api/file/using_files_from_web_applications/index.html
new file mode 100644
index 0000000000..cba8315001
--- /dev/null
+++ b/files/pt-br/web/api/file/using_files_from_web_applications/index.html
@@ -0,0 +1,351 @@
+---
+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
+---
+<p>Usando a File API adicionada ao DOM em HTML5, agora é possível para conteúdo web solicitar ao usuário para selecionar arquivos locais, e então ler o conteúdo desses arquivos. Essa seleção pode ser feita usando um elemento HTML {{HTMLElement("input") }} ou por arrastar e soltar.  </p>
+<p>Se você quiser usar a DOM File API através de extensões ou outro código chrome, você pode; Na verdade, há algumas funcionalidades adicionais para se estar ciente. Veja <a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Usando a DOM File API em código chrome</a> para detalhes.</p>
+<h2 id="Selecionando_arquivos_usando_HTML">Selecionando arquivos usando HTML</h2>
+<p>Selecionar um único arquivo para uso com a File API é simples:</p>
+<pre><code>&lt;input type="file" id="input" onchange="handleFiles(this.files)"&gt;</code></pre>
+<p>Quando um usuário seleciona um arquivo, a função <code>handleFiles()</code> é chamada com um objeto {{ domxref("FileList") }} contendo o objeto {{ domxref("File") }} representando o arquivo selecionado pelo usuário.</p>
+<p>If you want to let the user select multiple files, simply use the <code>multiple</code> attribute on the <code>input</code> element:</p>
+<pre><code>&lt;input type="file" id="input" <strong>multiple</strong> onchange="handleFiles(this.files)"&gt;</code></pre>
+<p>In this case, the file list passed to the <code>handleFiles()</code> function contains one {{ domxref("File") }} object for each file the user selected.</p>
+<h3 id="Using_hidden_file_input_elements_using_the_click()_method">Using hidden file input elements using the click() method</h3>
+<p>Starting in Gecko 2.0 {{ geckoRelease("2.0") }}, you can hide the admittedly ugly file {{ HTMLElement("input") }} element and present your own interface for opening the file picker and displaying which file or files the user has selected. You can do this by styling the input element with <code>display:none</code> and calling the {{ domxref("element.click","click()") }} method on the {{ HTMLElement("input") }} element.</p>
+<p>Consider this HTML:</p>
+<pre><code>&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;a href="#" id="fileSelect"&gt;Select some files&lt;/a&gt;</code></pre>
+<p>The code that handles the <code>click</code> event can look like this:</p>
+<pre class="brush: js">var fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+</pre>
+<p>Obviously you can style the new button for opening the file picker as you wish.</p>
+<h3 id="Dynamically_adding_a_change_listener">Dynamically adding a change listener</h3>
+<p>If your input field was created using a JavaScript library such as <a class="external" href="http://www.jquery.com/" title="http://www.jquery.com/">jQuery</a>, you'll need to use {{ domxref("element.addEventListener()") }} to add the <code>change</code> event listener, like this:</p>
+<pre class="brush: js">var inputElement = document.getElementById("inputField");
+inputElement.addEventListener("change", handleFiles, false);
+
+function handleFiles() {
+  var fileList = this.files;
+
+  /* now you can work with the file list */
+}
+</pre>
+<p>Note that in this case, the <code>handleFiles()</code> function looks up the file list instead of accepting a parameter, since event listeners added in this way can't accept an input parameter.</p>
+<h2 id="Using_object_URLs">Using object URLs</h2>
+<p>Gecko 2.0 {{ geckoRelease("2.0") }} introduces support for the DOM {{ domxref("window.URL.createObjectURL()") }} and {{ domxref("window.URL.revokeObjectURL()") }} methods. These 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><code>var objectURL = window.URL.createObjectURL(fileObj);</code></pre>
+<p>The object URL is a string identifying the {{ domxref("File") }} object. Each time you call {{ domxref("window.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("window.URL.revokeObjectURL()") }}:</p>
+<pre><code>window.URL.revokeObjectURL(objectURL);</code></pre>
+<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">var 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 <code>dragenter</code>, <code>dragover</code>, and <code>drop</code> 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">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">function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}
+</pre>
+<p>Here, we retrieve the <code>dataTransfer</code> field from the event, then pull the file list out of it, passing 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="Getting_information_about_selected_files">Getting information about selected files</h2>
+<p>The {{ domxref("FileList") }} object provided by the DOM lists all the files selected by the user, each specified as a {{ domxref("File") }} object. You can determine how many files the user selected by checking the value of the file list's <code>length</code> attribute:</p>
+<pre><code>var numFiles = files.length;</code></pre>
+<p>Individual {{ domxref("File") }} objects can be retrieved by simply accessing the list as an array:</p>
+<pre class="brush: js">for (var i = 0, numFiles = files.length; i &lt; numFiles; i++) {
+  var file = files[i];
+  ..
+}
+</pre>
+<p>This loop iterates over all the files in the file list.</p>
+<p>There are three attributes provided by the {{ domxref("File") }} object that contain useful information about the file.</p>
+<dl>
+  <dt>
+    <code>name</code></dt>
+  <dd>
+    The file's name as a read-only string. This is just the file name, and does not include any path information.</dd>
+  <dt>
+    <code>size</code></dt>
+  <dd>
+    The size of the file in bytes as a read-only 64-bit integer.</dd>
+  <dt>
+    <code>type</code></dt>
+  <dd>
+    The MIME type of the file as a read-only string, or <code>""</code> if the type couldn't be determined.</dd>
+</dl>
+<h3 id="Example_Showing_file(s)_size">Example: Showing file(s) size</h3>
+<p>The following example shows a possible use of the <code>size</code> property:</p>
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"&gt;
+&lt;title&gt;File(s) size&lt;/title&gt;
+&lt;script&gt;
+function updateSize() {
+  var nBytes = 0,
+      oFiles = document.getElementById("uploadInput").files,
+      nFiles = oFiles.length;
+  for (var nFileId = 0; nFileId &lt; nFiles; nFileId++) {
+    nBytes += oFiles[nFileId].size;
+  }
+  var sOutput = nBytes + " bytes";
+  // optional code for multiples approximation
+  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox &gt; 1; nApprox /= 1024, nMultiple++) {
+    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
+  }
+  // end of optional code
+  document.getElementById("fileNum").innerHTML = nFiles;
+  document.getElementById("fileSize").innerHTML = sOutput;
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="updateSize();"&gt;
+&lt;form name="uploadForm"&gt;
+&lt;p&gt;&lt;input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple&gt; selected files: &lt;span id="fileNum"&gt;0&lt;/span&gt;; total size: &lt;span id="fileSize"&gt;0&lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send file"&gt;&lt;/p&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<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 web site, and want to use HTML5 to display thumbnail previews of images before the user actually uploads them. Simply 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">function handleFiles(files) {
+  for (var i = 0; i &lt; files.length; i++) {
+    var file = files[i];
+    var imageType = /image.*/;
+
+    if (!file.type.match(imageType)) {
+      continue;
+    }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img);
+
+    var 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 it's an image file (by doing a regular expression match on 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, shadows, and to specify the size of the image, so that doesn't even need to be done here.</p>
+<p>Each image has the CSS class <code>obj</code> added to it, to make them 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 actually uploading later. Finally, we use {{ domxref("Node.appendChild()") }} to add the new thumbnail to the preview area of our document.</p>
+<p>Then we establish the {{ domxref("FileReader") }} to handle actually 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, 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 simply 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="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. You can <a href="/samples/domref/file-click-demo.html" title="https://developer.mozilla.org/samples/domref/file-click-demo.html">view the example live</a>.</p>
+<p>The HTML that presents the interface looks like this:</p>
+<pre class="brush: html">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&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 UI from being displayed. This is explained above 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">window.URL = window.URL || window.webkitURL;
+
+var 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);
+
+function handleFiles(files) {
+  if (!files.length) {
+    fileList.innerHTML = "&lt;p&gt;No files selected!&lt;/p&gt;";
+  } else {
+    var list = document.createElement("ul");
+    for (var i = 0; i &lt; files.length; i++) {
+      var li = document.createElement("li");
+      list.appendChild(li);
+
+      var img = document.createElement("img");
+      img.src = window.URL.createObjectURL(files[i]);
+      img.height = 60;
+      img.onload = function(e) {
+        window.URL.revokeObjectURL(this.src);
+      }
+      li.appendChild(img);
+
+      var info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+    fileList.appendChild(list);
+  }
+}
+</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 out file list, including thumbmails.</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("element.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("window.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("window.URL.revokeObjectURL()") }} method, 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>
+<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 builds 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 lets us very easily select all the images the user has chosen for uploading using {{ domxref("Document.querySelectorAll()") }}, like this:</p>
+<pre class="brush: js">function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i &lt; imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+</pre>
+<p>Line 2 creates an array, 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 the image thumbnails. Once we have that list, it's trivial to go through the list, creating 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">function FileUpload(img, file) {
+  var reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  var xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  var self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          var percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          var 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.sendAsBinary(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, 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 with 100% as the progress information (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>sendAsBinary()</code> is called to upload the file's content.</li>
+</ol>
+<h3 id="Handling_the_upload_process_for_a_file_asynchronously">Handling the upload process for a file, asynchronously</h3>
+<pre class="brush: js">&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="text/javascript"&gt;
+        function sendFile(file) {
+            var uri = "/index.php";
+            var xhr = new XMLHttpRequest();
+            var fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
+                    // Handle response.
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            var dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                var filesArray = event.dataTransfer.files;
+                for (var 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="See_also">See also</h2>
+<ul>
+  <li>{{ domxref("File") }}</li>
+  <li>{{ domxref("FileList") }}</li>
+  <li>{{ domxref("FileReader") }}</li>
+  <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+  <li><a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a></li>
+  <li>{{ domxref("XMLHttpRequest") }}</li>
+</ul>
+<p>{{ HTML5ArticleTOC() }}</p>
+<p>{{ languages( { "zh-cn": "zh-cn/Using_files_from_web_applications", "ja": "ja/Using_files_from_web_applications" } ) }}</p>
diff --git a/files/pt-br/web/api/filelist/index.html b/files/pt-br/web/api/filelist/index.html
new file mode 100644
index 0000000000..3c5e32b6cd
--- /dev/null
+++ b/files/pt-br/web/api/filelist/index.html
@@ -0,0 +1,134 @@
+---
+title: FileList
+slug: Web/API/FileList
+translation_of: Web/API/FileList
+---
+<div>{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}</div>
+
+<p>Um objeto desse tipo é retornado pela propriedade <code>files</code> do elemento HTML {{HTMLElement("input")}}; isso permite acessar a lista de arquivos selecionados com o elemento <code>&lt;input type="file"&gt;</code>. Também é usado para uma lista de arquivos soltos no conteúdo web usando a API drag and drop; consulte o objeto <a href="/en-US/docs/DragDrop/DataTransfer" title="DragDrop/DataTransfer"><code>DataTransfer</code></a> para detalhes de seu uso.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Antes do {{Gecko("1.9.2")}}, o elemento input suportava apenas um arquivo selecionado por vez, ou seja, o array FileList conteria apenas um arquivo. A partir do {{Gecko("1.9.2")}}, se o atributo multiple do elemento for definido, FileList pode conter múltiplos arquivos.</p>
+</div>
+
+<h2 id="Using_the_file_list" name="Using_the_file_list">Utilizando a lista de arquivos</h2>
+
+<p>Todo elemento <code>&lt;input&gt;</code> possui um array <code>files</code> que permite o acesso aos seus arquivos. Por exemplo, se o HTML inclui o seguinte elemento:</p>
+
+<pre>&lt;input id="fileItem" type="file"&gt;
+</pre>
+
+<p>O código a seguir acessa o primeiro elemento da lista de arquivos como um objeto <a href="/en-US/docs/DOM/File" title="DOM/File"><code>File</code></a>:</p>
+
+<pre class="brush: js">var file = document.getElementById('fileItem').files[0];
+</pre>
+
+<h2 id="Method_overview" name="Method_overview">Visão geral dos métodos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>File <a href="#item ()">item</a>(index);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Propriedades</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Atributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descrição</td>
+  </tr>
+  <tr>
+   <td><code>length</code></td>
+   <td><code>integer</code></td>
+   <td>Valor somente-leitura que indica o número de arquivos na lista.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Métodos</h2>
+
+<h3 id="item()" name="item()">item()</h3>
+
+<p>Retorna um objeto <a href="/en-US/docs/DOM/File" title="DOM/File"><code>File</code></a> representando o arquivo no índice especificado na lista.</p>
+
+<pre> File item(
+   index
+ );
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parâmetros</h6>
+
+<dl>
+ <dt><code>index</code></dt>
+ <dd>O índice (baseado em zero) do arquivo a ser recuperado da lista.</dd>
+</dl>
+
+<h6 id="Return_value" name="Return_value">Valor de retorno</h6>
+
+<p>O objeto <a href="/en-US/docs/DOM/File" title="DOM/File"><code>File</code></a> representando o arquivo requisitado.</p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<p>Este exemplo itera por todos os arquivos selecionados pelo usuário em um elemento <code>input</code>:</p>
+
+<pre class="brush:js">// fileInput é um elemento HTML input: &lt;input type="file" id="myfileinput" multiple&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files é um objeto FileList (similar ao NodeList)
+var files = fileInput.files;
+var file;
+
+// percorre os arquivos
+for (var i = 0; i &lt; files.length; i++) {
+
+    // obtém o item
+    file = files.item(i);
+    // ou
+    file = files[i];
+
+    alert(file.name);
+}
+</pre>
+
+<p>A seguir, um exemplo completo.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE HTML&gt;
+&lt;html&gt;
+
+&lt;head&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;!--multiple é definido para que múltiplos arquivos possam ser selecionados--&gt;
+
+&lt;input id="myfiles" multiple type="file"&gt;
+
+&lt;/body&gt;
+
+&lt;script&gt;
+var puxarArquivos = function() {
+    var fileInput = document.querySelector("#myfiles");
+    var files = fileInput.files;
+
+    for (var i = 0; i &lt; files.length; i++) {
+        var file = files[i];
+        alert(file.name);
+    }
+}
+
+// seta o 'onchange' do elemento input para chamar a função puxarArquivos
+document.querySelector("#myfiles").onchange = puxarArquivos;
+&lt;/script&gt;
+
+&lt;/html&gt;</pre>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected">File upload state</a> (inglês)</li>
+</ul>
diff --git a/files/pt-br/web/api/filereader/filereader/index.html b/files/pt-br/web/api/filereader/filereader/index.html
new file mode 100644
index 0000000000..49b3bd389e
--- /dev/null
+++ b/files/pt-br/web/api/filereader/filereader/index.html
@@ -0,0 +1,54 @@
+---
+title: FileReader()
+slug: Web/API/FileReader/FileReader
+translation_of: Web/API/FileReader/FileReader
+---
+<p>O construtor <strong><code>FileReader()</code></strong> cria um novo <code>FileReader</code>.</p>
+
+<p>Para mais detalhes de como usar o <code>FileReader</code>, veja <a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush: js">var reader = new FileReader();</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<p>Nenhum.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>O seguinte trecho de código ilustra a criação de um objeto <code><a href="/en-US/docs/Web/API/FileReader">FileReader</a></code> usando o construtor <code>FileReader()</code> e depois utilizando o objeto:</p>
+
+<pre class="brush: js">function printFile(file) {
+  var reader = new FileReader();
+  reader.onload = function(evt) {
+    console.log(evt.target.result);
+  };
+  reader.readAsText(file);
+}
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a></li>
+</ul>
diff --git a/files/pt-br/web/api/filereader/index.html b/files/pt-br/web/api/filereader/index.html
new file mode 100644
index 0000000000..772159fd36
--- /dev/null
+++ b/files/pt-br/web/api/filereader/index.html
@@ -0,0 +1,162 @@
+---
+title: FileReader
+slug: Web/API/FileReader
+translation_of: Web/API/FileReader
+---
+<p>{{ APIRef("File API")}}</p>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>O objeto <code>FileReader</code> permite aplicações web ler assincronamente o conteúdo dos arquivos (ou buffers de dados puros) do computador do usuário, utilizando o objeto {{ domxref("File") }} ou {{ domxref("Blob") }} para especificar o arquivo ou os dados a serem lidos.</p>
+
+<p>Objetos File podem ser obtidos a partir de um objeto {{ domxref("FileList") }} retornado como resultado da seleção de um usuário utilizando um elemento {{ HTMLElement("input") }}, a partir de uma operação de drag and drop <a href="/En/DragDrop/DataTransfer" title="En/DragDrop/DataTransfer"><code>DataTransfer</code></a>, ou a partir de um <code>mozGetAsFile()</code> da api {{ domxref("HTMLCanvasElement") }}.</p>
+
+<h2 id="Construtor">Construtor</h2>
+
+<pre class="syntaxbox">FileReader FileReader();</pre>
+
+<p>Veja <a href="/en/Using_files_from_web_applications" title="en/Using files from web applications">Using files from web applications</a> para detalhes e exemplos.</p>
+
+<h2 id="Properties" name="Properties">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt>
+ <dd>Um {{domxref("DOMError")}} representa o erro que ocorreu durante a leitura do arquivo.</dd>
+ <dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt>
+ <dd>Um número indicando o estado do <code>FileReader</code>. Este poderá ser um dos seguintes estados {{ anch("State constants") }}.</dd>
+ <dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt>
+ <dd>O conteúdo do arquivo. Esta propriedade é válida apenas após a operação de leitura estar completa, e o formato dos dados dependem de qual método foi usado para iniciar a operação de leitura.</dd>
+</dl>
+
+<h3 id="Manipuladores_de_eventos">Manipuladores de eventos</h3>
+
+<dl>
+ <dt>{{domxref("FileReader.onabort")}}</dt>
+ <dd>Um manipulador para o evento {{event("abort")}}. Este evento é chamado cada vez que a operação de leitura é abortada.</dd>
+ <dt>{{domxref("FileReader.onerror")}}</dt>
+ <dd>Um manipulador para o evento {{event("error")}}. Este evento é chamado cada vez que a operação de leitura encontra um erro.</dd>
+ <dt>{{domxref("FileReader.onload")}}</dt>
+ <dd>Um manipulador para o evento {{event("load")}}. Este evento é chamado cada vez que a operação de leitura é completada com sucesso.</dd>
+ <dt>{{domxref("FileReader.onloadstart")}}</dt>
+ <dd>Um manipulador para o evento {{event("loadstart")}}. Este evento é chamado cada vez que a leitura começa.</dd>
+ <dt>{{domxref("FileReader.onloadend")}}</dt>
+ <dd>Um manipulador para o evento {{event("loadend")}}. Este evento é chamado cada vez que a operação de leitura é completada (tanto em caso de sucesso quanto de erro).</dd>
+ <dt>{{domxref("FileReader.onprogress")}}</dt>
+ <dd>Um manipulador para o evento {{event("progress")}}. Este evento é chamado durante a leitura do conteúdo de {{domxref("Blob")}}.</dd>
+</dl>
+
+<div class="note">
+<p>Nota: O <code>FileReader</code> herda de {{domxref("EventTarget")}}, todos estes eventos podem ser listados usando o método {{domxref("EventTarget.addEventListener()","addEventListener")}}.</p>
+</div>
+
+<h3 id="State_constants" name="State_constants">Constantes de estado</h3>
+
+<ul>
+ <li><code>EMPTY  </code> : <code>0</code> : Nenhum dado foi carregado ainda.</li>
+ <li><code>LOADING</code> : <code>1</code> : Os dados estão sendo carregados.</li>
+ <li><code>DONE   </code> : <code>2</code> : Toda a requisição de leitura foi completada.</li>
+</ul>
+
+<h2 id="Methods" name="Methods">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.abort()")}}</dt>
+ <dd>Aborta a operação de leitura. O retorno, no <code>readyState</code> será <code>DONE</code>.</dd>
+ <dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{ gecko_minversion_inline("7.0") }}</dt>
+ <dd>Inicia a leitura do conteúdo do {{ domxref("Blob") }} espeficado, uma vez finalizado, o atributo <code>result</code> conterá um {{domxref("ArrayBuffer")}} representando os dados do arquivo.</dd>
+ <dt>{{domxref("FileReader.readAsBinaryString()")}}</dt>
+ <dd>Inicia a leitura do conteúdo do {{ domxref("Blob") }} especificado, uma vez finalizado, o atributo <code>result</code> conterá os dados raw binários do arquivo como  string.</dd>
+ <dt>{{domxref("FileReader.readAsDataURL()")}}</dt>
+ <dd>Inicia a leitura do conteúdo do {{ domxref("Blob") }} especificado, uma vez finalizado, o atributo <code>result</code> conterá um <code>data:</code> URL representando os dados do arquivo.</dd>
+ <dt>{{domxref("FileReader.readAsText()")}}</dt>
+ <dd>Inicia a leitura do conteúdo do {{ domxref("Blob") }} especificado, uma vez finalizado, o atributo <code>result</code> conterá o conteúdo do arquivo como string de  texto.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API','#FileReader-interface','FileReader')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade</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.9.2") }}</td>
+   <td>7</td>
+   <td>10</td>
+   <td>12.02</td>
+   <td>6.0.2</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>32</td>
+   <td>3</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notas_de_implementações">Notas de implementações</h3>
+
+<ul>
+ <li>IE9 possui uma <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info" title="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</li>
+ <li>Opera possui <a href="http://www.opera.com/docs/specs/presto28/file/" title="http://my.opera.com/desktopteam/blog/2011/04/05/stability-gmail-socks">suporte parcial</a> na versão 11.1.</li>
+</ul>
+
+<h4 id="Notas_específicas_para_Gecko">Notas específicas para Gecko</h4>
+
+<ul>
+ <li>Em versões anteriores ao Gecko 2.0 beta 7 (Firefox 4.0 beta 7), todos os parâmetros {{ domxref("Blob") }} abaixo eram parâmetros {{ domxref("File") }}. Isto foi então atualizado para adequarem-se corretamente às especificações.</li>
+ <li>Em versões anteriores ao Gecko 13.0 {{ geckoRelease("13.0") }}, a propriedade <code>FileReader.error</code> retornava um objeto {{ domxref("FileError") }}. Esta interface foi removida e a propriedade <code>FileReader.error</code> agora retorna o objeto {{ domxref("DOMError") }}, assim como está definido na última versão da FileAPI.</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li><a href="/en/Using_files_from_web_applications" title="en/Using files from web applications">Using files from web applications</a></li>
+ <li>{{ domxref("File") }}</li>
+ <li>{{ domxref("Blob") }}</li>
+</ul>
diff --git a/files/pt-br/web/api/filereader/onload/index.html b/files/pt-br/web/api/filereader/onload/index.html
new file mode 100644
index 0000000000..53b5774e88
--- /dev/null
+++ b/files/pt-br/web/api/filereader/onload/index.html
@@ -0,0 +1,29 @@
+---
+title: FileReader.onload
+slug: Web/API/FileReader/onload
+tags:
+  - Arquivo
+  - Event Handler
+  - FileReader
+  - Manipulador de eventos
+  - Propriedade
+translation_of: Web/API/FileReader/onload
+---
+<p>{{APIRef}}</p>
+
+<p>A propriedade <strong>FileReader.onload</strong> contém um manipulador de eventos (event handler) executado quando o evento de carregamento ({{event('load')}})  é ativado, quando o conteúdo lido com  <a href="/en-US/docs/Web/API/FileReader/readAsArrayBuffer">readAsArrayBuffer</a>, <a href="/en-US/docs/Web/API/FileReader/readAsBinaryString">readAsBinaryString</a>, <a href="/en-US/docs/Web/API/FileReader/readAsDataURL">readAsDataURL</a> ou <a href="/en-US/docs/Web/API/FileReader/readAsText">readAsText</a> fica disponível.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush:js; line-numbers  language-js"><code class="language-js">// Callback de um &lt;input type="file" onchange="onChange(event)"&gt;
+function onChange(event) {
+  var file = event.target.files[0];
+  var reader = new FileReader();
+  reader.onload = function(event) {
+    // O arquivo de texto será impresso aqui
+    console.log(event.target.result)
+  };
+
+  reader.readAsText(file);
+}
+</code></pre>
diff --git a/files/pt-br/web/api/filereader/readasarraybuffer/index.html b/files/pt-br/web/api/filereader/readasarraybuffer/index.html
new file mode 100644
index 0000000000..ed94bccf4b
--- /dev/null
+++ b/files/pt-br/web/api/filereader/readasarraybuffer/index.html
@@ -0,0 +1,107 @@
+---
+title: FileReader.readAsArrayBuffer()
+slug: Web/API/FileReader/readAsArrayBuffer
+tags:
+  - API
+  - DOM
+  - File API
+  - FileReader
+  - Files
+  - Method
+  - Reference
+  - readAsArrayBuffer
+translation_of: Web/API/FileReader/readAsArrayBuffer
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>O método <strong><code>readAsArrayBuffer() </code></strong>do objeto {{domxref("FileReader")}} é utilizado para ler o conteúdo de um {{domxref("Blob")}} ou {{domxref("File")}} específico. Quando a operação de leitura é finalizada, o {{domxref("FileReader.readyState","readyState")}} torna-se <code>DONE </code>(finalizado), e o evento {{event("loadend")}} é acionado. Então, o atributo {{domxref("FileReader.result","result")}} retorna um {{domxref("ArrayBuffer")}} representando os dados do arquivo.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsArrayBuffer(<em>blob</em>);</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>O {{domxref("Blob")}} ou {{domxref("File")}} que será lido.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#readAsArrayBuffer", "FileReader.readAsArrayBuffer")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Definição Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_Navegadores">Compatibilidade com Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>32</td>
+   <td>3</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Antes da versão 2.0 beta 7 do Gecko (Firefox 4.0 beta 7), todos os parâmetros do {{domxref("Blob")}} abaixo eram parâmetros do {{domxref("File")}}; a atualização foi realizada pra corresponder corretamente à especificação. Antes da versão 13.0 do Gecko {{geckoRelease("13.0")}} A propriedade <code>.error do FileReader</code> retornava um objeto {{domxref("FileError")}}. Esta interface foi removida e <code>FileReader.error</code> agora retorna o objeto {{domxref("DOMError")}} como definido na última versão da documentação do FileAPI.</p>
+
+<p>[2] IE9 possui <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera <a href="http://www.opera.com/docs/specs/presto28/file/">suporta parcialmente</a> na versão 11.1.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/filereader/readasbinarystring/index.html b/files/pt-br/web/api/filereader/readasbinarystring/index.html
new file mode 100644
index 0000000000..5d23087951
--- /dev/null
+++ b/files/pt-br/web/api/filereader/readasbinarystring/index.html
@@ -0,0 +1,120 @@
+---
+title: FileReader.readAsBinaryString()
+slug: Web/API/FileReader/readAsBinaryString
+tags:
+  - API
+  - API Arquivos
+  - Arquivos
+  - File API
+  - Métodos
+  - Referencias(2)
+translation_of: Web/API/FileReader/readAsBinaryString
+---
+<div>{{APIRef("File API")}} {{non-standard_header}}</div>
+
+<p>O método <code>readAsBinaryString</code> é usado para iniciar a leitura do conteúdo de um {{domxref("Blob")}} especificado, ou {{domxref("File")}}. Quando a operação de leitura é finalizada, o {{domxref("FileReader.readyState","readyState")}} se torna "<code>DONE"</code>, e o evento {{event("loadend")}} é acionado. Neste momento, o atributo {{domxref("FileReader.result","result")}} contém o dado binário bruto do arquivo.</p>
+
+<p>Note que este método se tornou obsoleto desde 12 de Julho de 2012 Working Draft do W3C.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>instanciaDeFileReader</em>.readAsBinaryString(blob);</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>O {{domxref("Blob")}} ou {{domxref("File")}} que deseja ler.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">var canvas = document.createElement('canvas');
+var height = 200;
+var width  = 200;
+
+canvas.width  = width;
+canvas.height = height;
+
+var ctx = canvas.getContext('2d');
+
+ctx.strokeStyle = '#090';
+ctx.beginPath();
+ctx.arc(width/2, height/2, width/2 - width/10, 0, Math.PI*2);
+ctx.stroke();
+
+canvas.toBlob(function (blob) {
+  var reader = new FileReader();
+
+  reader.onloadend = function () {
+    console.log(reader.result);
+  }
+
+  reader.readAsBinaryString(blob);
+});</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<p>Este método foi removido dos padrões FileAPI {{domxref("FileReader.readAsArrayBuffer()")}} deve ser usado no lugar dele.</p>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de 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>Suporte Básico</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>{{CompatNo}}</td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.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>Suporte Básico</td>
+   <td>32</td>
+   <td>3</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Anteriormente ao Gecko 2.0 beta 7 (Firefox 4.0 beta 7), todos os parametros  {{domxref("Blob")}} inferiores eram parametros {{domxref("File")}}; Isso foi atualizado para combinar com as especifiações corretamente. Anteriormente ao Gecko 13.0 {{geckoRelease("13.0")}} a propriedade <code>FileReader.error</code> retornava um objeto {{domxref("FileError")}}. Essa interface foi removida e <code>FileReader.error</code> agora retorna o objeto domxref("DOMError")}} como foi definido no último draft do FileAPI.</p>
+
+<p>[2] IE9 possui um <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera possui <a href="http://www.opera.com/docs/specs/presto28/file/">partial support</a> in 11.1.</p>
+
+<h2 id="Veja_Também">Veja Também</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/filereader/readasdataurl/index.html b/files/pt-br/web/api/filereader/readasdataurl/index.html
new file mode 100644
index 0000000000..a922bf8bd0
--- /dev/null
+++ b/files/pt-br/web/api/filereader/readasdataurl/index.html
@@ -0,0 +1,111 @@
+---
+title: FileReader.readAsDataURL()
+slug: Web/API/FileReader/readAsDataURL
+tags:
+  - API
+  - File API
+  - Files
+  - Image Preview
+  - Method
+translation_of: Web/API/FileReader/readAsDataURL
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>O método <code>readAsDataURL é usado para ler o conteúdo do tipo </code>{{domxref("Blob")}} ou {{domxref("File")}}.<br>
+ Quando a operação de leitura acaba, a flag {{domxref("FileReader.readyState","readyState")}} muda para <strong>DONE</strong> e o evento {{event("loadend")}} é disparado.<br>
+ Então o atributo {{domxref("FileReader.result","result")}} irá conter a URL codificada em base64 do arquivo.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre><em>instanceOfFileReader</em>.readAsDataURL(blob);</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>O conteúdo do tipo {{domxref("Blob")}} ou {{domxref("File")}} que queremos ler.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="syntaxbox">&lt;input type="file" onchange="previewFile()"&gt;&lt;br&gt;
+&lt;img src="" height="200" alt="Prévia da imagem..."&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="syntaxbox">function previewFile() {
+  var preview = document.querySelector('img');
+  var file    = document.querySelector('input[type=file]').files[0];
+  var reader  = new FileReader();
+
+  reader.onloadend = function () {
+    preview.src = reader.result;
+  }
+
+  if (file) {
+    reader.readAsDataURL(file);
+  } else {
+    preview.src = "";
+  }
+}</pre>
+
+<h3 id="Demo">Demo</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 240)}}</p>
+
+<h2 id="Exemplo_de_leitura_com_múltiplos_arquivos">Exemplo de leitura com múltiplos arquivos</h2>
+
+<h4 id="HTML_2"><strong>HTML</strong></h4>
+
+<pre class="syntaxbox"><code>&lt;input id="browse" type="file" onchange="previewFiles()" multiple&gt;
+&lt;div id="preview"&gt;&lt;/div&gt;</code></pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="syntaxbox"><code>function previewFiles() {
+
+  var preview = document.querySelector('#preview');
+  var files   = document.querySelector('input[type=file]').files;
+
+  function readAndPreview(file) {
+
+    // Make sure `file.name` matches our extensions criteria
+    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
+      var reader = new FileReader();
+
+      reader.addEventListener("load", function () {
+        var image = new Image();
+        image.height = 100;
+        image.title = file.name;
+        image.src = this.result;
+        preview.appendChild( image );
+      }, false);
+
+      reader.readAsDataURL(file);
+    }
+
+  }
+
+  if (files) {
+    [].forEach.call(files, readAndPreview);
+  }
+
+}</code></pre>
+
+<div class="note"><strong>Nota:</strong> O construtor do <a href="/en-US/docs/Web/API/FileReader"><code>FileReader()</code></a> não é suportado  por versões anteriores à 10 do Internet Explorer. Para uma maior compatibilidade você pode ver os exemplos <a class="internal" href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html" title="crossbrowser_image_preview.html">prévia de imagem básica</a> ou <a href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html">prévia de imagem avançada</a>.</div>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Especificações</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/FileReader","Specifications")}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/FileReader","Browser compatibility")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/filereader/readastext/index.html b/files/pt-br/web/api/filereader/readastext/index.html
new file mode 100644
index 0000000000..eb0f1582a7
--- /dev/null
+++ b/files/pt-br/web/api/filereader/readastext/index.html
@@ -0,0 +1,104 @@
+---
+title: FileReader.readAsText()
+slug: Web/API/FileReader/readAsText
+translation_of: Web/API/FileReader/readAsText
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>O método readAsText é usado para ler conteúdos de um {{domxref("Blob")}} ou {{domxref("File")}} especificados. Quando a operação de leitura é concluida, o {{domxref("FileReader.readyState","readyState")}} é alterado para DONE, o {{event("loadend")}} é disparado, e o atributo {{domxref("FileReader.result","result")}} passa a conter o conteúdo do arquivo como um texto em formato string.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsText(blob[, encoding]);</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>O {{domxref("Blob")}} ou {{domxref("File")}} a ser lido.</dd>
+ <dt>encoding {{optional_inline}}</dt>
+ <dd>Uma string especificando a codificação a ser usada para o dado retornado. Por padrão, UTF-8 é assumido se o parâmetro não for especificado.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_navedadores">Compatibilidade em navedadores</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>Suporte básico</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0.2</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>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>32</td>
+   <td>3</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Antes do Gecko 2.0 beta 7 (Firefox 4.0 beta 7), todos os parâmetros {{domxref("Blob")}} abaixo eram parâmetros de {{domxref("File")}}; isso desde então foi atualizado para coincidir com a especificação corretamente. Antes do Gecko 13.0 {{geckoRelease("13.0")}} a propriedade <code>FileReader.error</code> retornava um objeto {{domxref("FileError")}}. Essa interface foi removida e agora <code>FileReader.error</code> está retornando um objeto {{domxref("DOMError")}} conforme definido no último rascunho da FileAPI.</p>
+
+<p>[2] IE9 tem uma <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera tem <a href="http://www.opera.com/docs/specs/presto28/file/">suporte parcial</a> em 11.1.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/formdata/append/index.html b/files/pt-br/web/api/formdata/append/index.html
new file mode 100644
index 0000000000..d181310952
--- /dev/null
+++ b/files/pt-br/web/api/formdata/append/index.html
@@ -0,0 +1,177 @@
+---
+title: FormData.append()
+slug: Web/API/FormData/append
+translation_of: Web/API/FormData/append
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>O método <code><strong>append()</strong></code>  da Interface {{domxref("FormData")}}  adiciona um novo valor dentro de uma chave existente dentro do objeto <code>FormData </code>ou  adiciona a  chave caso ainda não exista.</p>
+
+<p>A diferença entre  {{domxref("FormData.set")}} e <code>append()</code> é que se uma  chave específica já exista, {{domxref("FormData.set")}} irá substituir o valor existente com um novo valor, já o <code>append()</code> irá adicionar um novo valor no fim do conjunto de valores.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Este  metodo esta desponivel no <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<p>Existe duas versoes deste metodo: um de dois e um outro de tres:</p>
+
+<pre class="brush: js">formData.append(name, value);
+formData.append(name, value, filename);</pre>
+
+<h3 id="append()_Parameters" name="append()_Parameters">Parametros</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>O nome do campo cujos dados estão contidas em value.</dd>
+ <dt><code>value</code></dt>
+ <dd>O valor deste campo . Nas duas versões este é a {{domxref("USVString")}}, ou  caso não seja , este é convertido em string. Na versão de tres parametros este pode ser {{domxref("Blob")}}, {{domxref("File")}}, ou  {{domxref("USVString")}}, de novo, caso nenhum deses forem especificados  este valor é convertido em uma string.</dd>
+ <dt><code>filename </code>{{optional_inline}}</dt>
+ <dd>O filename reporta para o servidor (a {{domxref("USVString")}}), quando a {{domxref("Blob")}} ou {{domxref("File")}} é passado como o segundo parametro. O default filename para  {{domxref("Blob")}} o objecto é "blob".</dd>
+</dl>
+
+<div class="note">
+<p><strong>Nota:</strong> Se espisificares  {{domxref("Blob")}} como a data append  para o objecto <code>FormData</code> , o filename a ser reportado para o servidor  no "Content-Disposition" header usado para mudar de browser em browser.</p>
+</div>
+
+<h3 id="Retorna">Retorna</h3>
+
+<p>Void.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>As seguintes linhas criam um Objecto <code>FormData</code> vazio:</p>
+
+<pre class="brush: js">var formData = new FormData(); // Corrente vazio</pre>
+
+<p>Podes adicionar chaves/valores pares para usar (domxref("FormData.append")}}:</p>
+
+<pre class="brush: js">formData.append('username', 'Chris');
+formData.append('userpic', myFileInput.files[0], 'chris.jpg');</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Estato</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-append','append()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_Browser">Compatibilidade do Browser</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristicas</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte Basico</td>
+   <td>7+</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10+</td>
+   <td>12+</td>
+   <td>5+</td>
+  </tr>
+  <tr>
+   <td>append com filename</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponivel para Desenvolvedores Web</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.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>Caracteristicas</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (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>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>1.0.1</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>12+</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>append com filename</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12px; line-height: 18px;">Disponivel para Desenvolvedores Web</span></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: XHR em  Android 4.0 envia conteudo vazio  para FormData com blob.</p>
+</div>
+
+<h3 id="Notas_Gecko">Notas Gecko</h3>
+
+<p>Antis do Gecko 7.0 {{geckoRelease("7.0")}}, se especificares {{domxref("Blob")}} como a conteudo a ser  adicionado ao objecto, o filename reportado no "Content-Disposition" HTTP header era um string vazio; este resulta em  erros sendo reportados por alguns servidores. Começando com Gecko 7.0, o filename "blob" é enviado.</p>
+
+<h2 id="Veja_Tambem">Veja Tambem</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Usando XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">UsandoFormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/formdata/delete/index.html b/files/pt-br/web/api/formdata/delete/index.html
new file mode 100644
index 0000000000..042c16f083
--- /dev/null
+++ b/files/pt-br/web/api/formdata/delete/index.html
@@ -0,0 +1,138 @@
+---
+title: FormData.delete()
+slug: Web/API/FormData/delete
+translation_of: Web/API/FormData/delete
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>O metodo <code><strong>delete()</strong></code> da  interface {{domxref("FormData")}} deleta uma chave/valor pares do Objecto <code>FormData</code> .</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Este metodo esta Disponivel em <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush: js">formData.delete(name);</pre>
+
+<h3 id="append()_Parameters" name="append()_Parameters">Parametros</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>O name da chave que desejas apagar.</dd>
+</dl>
+
+<h3 id="Retorna">Retorna</h3>
+
+<p>Void.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Esta linha cria um objecto <code>FormData</code> vazio e subistitui com a chave/valor pares de  form:</p>
+
+<pre class="brush: js">var formData = new FormData(myForm);</pre>
+
+<p>Podes deletar chave/valor pares usando <code>delete()</code>:</p>
+
+<pre class="brush: js">formData.delete('username');
+</pre>
+
+<h2 id="Specificasões">Specificasões</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specificasões</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-delete','delete()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_Browser">Compatibilidade do Browser </h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Carracteristicas</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte Basico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Disponivel em Web Workes</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</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>Caracteristicas</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte Basico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Disponivel em web workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_Tambem">Veja Tambem</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Usando XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Usando Objecto FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/formdata/entries/index.html b/files/pt-br/web/api/formdata/entries/index.html
new file mode 100644
index 0000000000..911c269074
--- /dev/null
+++ b/files/pt-br/web/api/formdata/entries/index.html
@@ -0,0 +1,77 @@
+---
+title: FormData.entries()
+slug: Web/API/FormData/entries
+tags:
+  - API
+  - FormData
+  - Iterador
+  - Referencia
+  - XMLHttpRequest API
+  - metodo
+translation_of: Web/API/FormData/entries
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>O método <code><strong>FormData.entries()</strong></code> retorna um {{jsxref("Iteration_protocols",'iterator')}} permitindo percorrer todos os valores de chave/valor contidos nesse objeto. A chave de cada par é um objeto {{domxref("USVString")}}; o valor é {{domxref("USVString")}}, ou um {{domxref("Blob")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This method is available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">formData.entries();</pre>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p>Retorna um {{jsxref("Iteration_protocols","iterator")}}.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js;highlight:[7]">// Criação de um objeto teste de FormData
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// Exibição dos valores chave/valor
+for(var pair of formData.entries()) {
+   console.log(pair[0]+ ', '+ pair[1]);
+}
+</pre>
+
+<p>O resultado é:</p>
+
+<pre>key1, value1
+key2, value2</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata','entries() (as iterator&lt;&gt;)')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+
+
+<p>{{Compat("api.FormData.entries")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/formdata/formdata/index.html b/files/pt-br/web/api/formdata/formdata/index.html
new file mode 100644
index 0000000000..2202cac454
--- /dev/null
+++ b/files/pt-br/web/api/formdata/formdata/index.html
@@ -0,0 +1,184 @@
+---
+title: FormData()
+slug: Web/API/FormData/FormData
+translation_of: Web/API/FormData/FormData
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>O <code><strong>FormData()</strong></code> construtor cria um novo objeto {{domxref("FormData")}}.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Este recurso está disponível em <a href="/pt-BR/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush: js"><code>var formData = new FormData(</code><code>form</code><code>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parâmetros</h3>
+
+<dl>
+ <dt><code>form </code>{{optional_inline}}</dt>
+ <dd>Um elemento HTML {{HTMLElement("form")}} — quando especifico, o objeto {{domxref("FormData")}} será preenchido com as chaves/valores atuais do formulário usando a propriedade <em>name </em>de cada elemento para as chaves e seu valor enviado para os valores. Também condificará conteúdo de entrada do arquivo.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>A linha a seguir cria um objeto FormData vázio:</p>
+
+<pre class="brush: js">var formData = new FormData(); // Currently empty</pre>
+
+<p>Você poderia adicionar uma chave/valor usando {{domxref("FormData.append")}}:</p>
+
+<pre class="brush: js">formData.append('username', 'Chris');
+</pre>
+
+<p>Ou você pode especificicar o opcional <code><em>form</em></code> argument ao criar o objeto <code>FormData</code>, para o popular com valores de forma especifica:</p>
+
+<pre class="brush: html">&lt;form id="myForm" name="myForm"&gt;
+  &lt;div&gt;
+    &lt;label for="username"&gt;Enter name:&lt;/label&gt;
+    &lt;input type="text" id="username" name="username"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="useracc"&gt;Enter account number:&lt;/label&gt;
+    &lt;input type="text" id="useracc" name="useracc"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="userfile"&gt;Upload file:&lt;/label&gt;
+    &lt;input type="file" id="userfile" name="userfile"&gt;
+  &lt;/div&gt;
+&lt;input type="submit" value="Submit!"&gt;
+&lt;/form&gt;
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Todos os elementos de entrada têm um atributo 'name'. Para que possa acessar seus valores mais tarde.</p>
+</div>
+
+<pre class="brush: js">var myForm = document.getElementById('myForm');
+formData = new FormData(myForm);</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata','FormData()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</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>7</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>12</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>append with filename</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>available in web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.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>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>3.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>12</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>append with filename</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in web workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("39.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<div class="note">
+<p><strong>Note</strong>: XHR in Android 4.0 sends empty content for FormData with blob.</p>
+</div>
+
+<h3 id="Gecko_notes">Gecko notes</h3>
+
+<p>Prior to Gecko 7.0 {{geckoRelease("7.0")}}, if you specified a {{domxref("Blob")}} as the data to append to the object, the filename reported in the "Content-Disposition" HTTP header was an empty string; this resulted in errors being reported by some servers. Starting in Gecko 7.0, the filename "blob" is sent.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
+</div>
diff --git a/files/pt-br/web/api/formdata/get/index.html b/files/pt-br/web/api/formdata/get/index.html
new file mode 100644
index 0000000000..6e4c11caad
--- /dev/null
+++ b/files/pt-br/web/api/formdata/get/index.html
@@ -0,0 +1,142 @@
+---
+title: FormData.get()
+slug: Web/API/FormData/get
+translation_of: Web/API/FormData/get
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>O método get() da interface {{domxref("FormData")}} retorna o primeiro valor associado com a chave fornecida de um objeto do tipo FormData.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Este método está disponível em <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush: js">formData.get(nome);</pre>
+
+<h3 id="append()_Parameters" name="append()_Parameters">Parâmetros</h3>
+
+<dl>
+ <dt><code>nome</code></dt>
+ <dd>Um {{domxref("USVString")}} representando o nome da chave que queira retornar.</dd>
+</dl>
+
+<h3 id="Retorno">Retorno</h3>
+
+<p>Um {{domxref("FormDataEntryValue")}} contendo o valor.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>A linha abaixo cria um objeto vazio do tipo FormData.</p>
+
+<pre class="brush: js">var formData = new FormData();</pre>
+
+<p>Se adicionarmos dois valores usuario_nome usando {{domxref("FormData.append")}}:</p>
+
+<pre class="brush: js">formData.append('usuario_nome', 'Sabrina');
+formData.append('usuario_nome', 'Antônio');</pre>
+
+<p>A função get() abaixo apenas irá retornar o primeiro valor usuario_nome incluido:</p>
+
+<pre class="brush: js">formData.get('usuario_nome'); // Retorna "Sabrina"</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-get','get()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('39.0')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in web workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('39.0')}}</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>Recurso</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}</p>
+   </td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Available in web workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/formdata/getall/index.html b/files/pt-br/web/api/formdata/getall/index.html
new file mode 100644
index 0000000000..5a9b51611c
--- /dev/null
+++ b/files/pt-br/web/api/formdata/getall/index.html
@@ -0,0 +1,74 @@
+---
+title: FormData.getAll()
+slug: Web/API/FormData/getAll
+translation_of: Web/API/FormData/getAll
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>O metodo <code><strong>getAll()</strong></code> do {{domxref("FormData")}} retorna todos os valores associados com a chave dentro <code>de um objeto FormData</code>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Este metodo esta disponivel no <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">formData.getAll(name);</pre>
+
+<h3 id="append()_Parameters" name="append()_Parameters">Parametros</h3>
+
+<dl>
+ <dt><code>nome</code></dt>
+ <dd>O {{domxref("USVString")}} representa o mome da chave que você quer pegar.</dd>
+</dl>
+
+<h3 id="Retorno">Retorno</h3>
+
+<p>Um array de {{domxref("FormDataEntryValue")}}s.</p>
+
+<h2 id="Examplo">Examplo</h2>
+
+<p>A seguinte linha cria um objeto <code>FormData</code> vazio:</p>
+
+<pre class="brush: js">var formData = new FormData();</pre>
+
+<p>Se nos adicionarmos dois valores oara <code>username</code> {{domxref("FormData.append")}}:</p>
+
+<pre class="brush: js">formData.append('username', 'Chris');
+formData.append('username', 'Bob');</pre>
+
+<p>A seguinte função <code>getAll()</code> retornara um arrat com os valore dentro de <code>username</code>:</p>
+
+<pre class="brush: js">formData.getAll('username'); // Returns ["Chris", "Bob"]</pre>
+
+<h2 id="Especificação">Especificação</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','#dom-formdata-getall','getAll()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browsers">Compatibilidade de Browsers</h2>
+
+
+
+<p>{{Compat("api.FormData.getAll")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/formdata/has/index.html b/files/pt-br/web/api/formdata/has/index.html
new file mode 100644
index 0000000000..d9cdeff60b
--- /dev/null
+++ b/files/pt-br/web/api/formdata/has/index.html
@@ -0,0 +1,81 @@
+---
+title: FormData.has()
+slug: Web/API/FormData/has
+tags:
+  - API
+  - FormData
+  - Referencia
+  - XHR
+  - XMLHttlRequest
+  - has
+  - metodo
+translation_of: Web/API/FormData/has
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>O método <code><strong>has()</strong></code> da interface {{domxref("FormData")}} retorna um booleano declarando se o objeto <code>FormData</code> contém uma certa chave.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This method is available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush: js">formData.has(name);</pre>
+
+<h3 id="append_Parameters" name="append()_Parameters">Parâmetros</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Uma {{domxref("USVString")}} que representa o nome da chave que você que testar.</dd>
+</dl>
+
+<h3 id="Retorna">Retorna</h3>
+
+<p>Um {{domxref("Boolean")}}.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>A linha a seguir cria um objeto <code>FormData</code> vazio:</p>
+
+<pre class="brush: js">var formData = new FormData();</pre>
+
+<p>O trecho a seguir mostra os resultados de testar a existência de <code>username</code> no objeto <code>FormData</code>, antes e depois de acrescentar um valor de <code>username</code> no objeto usando {{domxref("FormData.append")}}:</p>
+
+<pre class="brush: js">formData.has('username'); // Retorna false
+formData.append('username', 'Chris');
+formData.has('username'); // Retorna true
+
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-has','has()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2>
+
+
+
+<p>{{Compat("api.FormData.has")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Using FormData objects</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/formdata/index.html b/files/pt-br/web/api/formdata/index.html
new file mode 100644
index 0000000000..30ba7ccb6a
--- /dev/null
+++ b/files/pt-br/web/api/formdata/index.html
@@ -0,0 +1,170 @@
+---
+title: FormData
+slug: Web/API/FormData
+translation_of: Web/API/FormData
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>A interface <strong><code>FormData</code></strong> fornece uma maneira fácil de construir um conjunto de pares chave/valor representando campos de um elemento f<code>orm</code> e seus valores, os quais podem ser facilmente enviados utilizado o método <a href="/pt-BR/docs/DOM/XMLHttpRequest#send()" title="XMLHttpRequest#send()"><code>send()</code></a> do XMLHttpRequest. Essa interface utiliza o mesmo formato que um <code>form</code> utilizaria se o tipo de codificação estivesse configurado como "multipart/form-data".</p>
+
+<p>Um objeto <code>FormData</code> pode ser usado diretamente em uma estrutura {{jsxref("Statements/for...of", "for...of")}} em vez de {{domxref('FormData.entries()', 'entries()')}}: <code>for (var p of myFormData) </code>é o mesmo que <code>for (var p of myFormData.entries())</code>.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Esse recurso está disponível em <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Web_Workers_API">https://developer.mozilla.org/pt-BR/docs/Web/API/Web_Workers_API</a></p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("FormData.FormData","FormData()")}}</dt>
+ <dd>Cria um novo objeto <code>FormData</code>.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("FormData.append")}}</dt>
+ <dd>Acrescenta um novo valor em uma chave existente dentro de um objeto <code>FormData</code>, ou adiciona a chave se ela ainda não existir.</dd>
+ <dt>{{domxref("FormData.delete")}}</dt>
+ <dd>Apaga um par chave/valor de um objeto <code>FormData</code>.</dd>
+ <dt>{{domxref("FormData.get")}}</dt>
+ <dd>Retorna o primeiro valor associado com uma dada chave de dentro de um objeto <code>FormData</code>.</dd>
+ <dt>{{domxref("FormData.getAll")}}</dt>
+ <dd>Retorna uma matriz de todos os valores associados a uma determinada chave de dentro de um <code>FormData</code>.</dd>
+ <dt>{{domxref("FormData.has")}}</dt>
+ <dd>Retorna um valor boleano indicando se um objeto <code>FormData</code> contém um certo par chave/valor.</dd>
+ <dt>{{domxref("FormData.set")}}</dt>
+ <dd>Define um novo valor para uma chave existente dentro de um objeto <code>FormData</code>, ou adiciona a chave/valor se ele ainda não existir.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Nota</strong>: Para ser claro, a diferença entre {{domxref("FormData.set()")}} e {{domxref("FormData.append()")}} é que, se a chave especificada não existir, {{domxref("FormData.set()")}} irá substituir o valor existente por um novo, enquanto {{domxref("FormData.append()")}} irá acrescentar um novo valor no final dos valores existentes. Veja as suas páginas dedicadas para código de exemplo.</p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>FormData definido na especificação XHR</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>7+</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10+</td>
+   <td>12+</td>
+   <td>5+</td>
+  </tr>
+  <tr>
+   <td>append com filename</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>10+</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>delete, get, getAll, has, set</td>
+   <td>Behind Flag</td>
+   <td>{{CompatNo}}</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>Característica</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>3.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>1.0.1</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>12+</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>append com filename</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>delete, get, getAll, has, set</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: XHR in Android 4.0 envia conteúdo vazio para o FormData com blob.</p>
+
+<p><strong>Nota:</strong> Suporte do Chrome aos métodos que não seja append está atualmente atrás da bandeira "Enable Experimental Web Platform Features".</p>
+</div>
+
+<h3 id="Notas_da_Gecko">Notas da Gecko</h3>
+
+<p>Antes do Gecko 7.0 {{geckoRelease("7.0")}}, se você especificasse um {{domxref("Blob")}} como o dado a ser anexado ao objeto, o nome do arquivo relatado no cabeçalho HTTP "Content-Disposition" era uma string vazia; isso resultou em erros sendo relatados por alguns servidores. Começando em Gecko 7.0, o nome do arquivo "blob" é enviado.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/pt-BR/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Usando XMLHttpRequest</a></li>
+ <li><a href="/pt-BR/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Usando objetos FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/formdata/set/index.html b/files/pt-br/web/api/formdata/set/index.html
new file mode 100644
index 0000000000..a6b7dccb69
--- /dev/null
+++ b/files/pt-br/web/api/formdata/set/index.html
@@ -0,0 +1,150 @@
+---
+title: FormData.set()
+slug: Web/API/FormData/set
+translation_of: Web/API/FormData/set
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>O método <code><strong>set()</strong></code> da interface {{domxref("FormData")}} adiciona o novo valor para um chave existente em um objeto <code>FormData</code>, ou adicionar a combinação chave/valor caso ela não exista.</p>
+
+<p>A diferença entre  <code>set()</code> e {{domxref("FormData.append")}} é que, se a chave especificada já existir, <code>set()</code> irá sobrescrever todos os valores existentes pelo novo valor, enquanto o {{domxref("FormData.append")}} apenas acrescenta o novo valor ao conjunto de valores existentes.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Esse método está disponível em <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<p>Existem duas versões desse método: uma com dois e outra com três parâmetros:</p>
+
+<pre class="brush: js">formData.set(name, value);
+formData.set(name, value, filename);</pre>
+
+<h4 id="append()_Parameters" name="append()_Parameters">Parâmetros</h4>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>O nome do campo cujo dado está em <code>value</code>.</dd>
+ <dt><code>value</code></dt>
+ <dd>O valor do campo. Na versão de dois parâmetros, esse é um {{domxref("USVString")}}, e caso não seja, ele é convertido para uma string. Na versão de três parâmetros ele pode ser um {domxref("Blob")}}, {{domxref("File")}}, ou um {{domxref("USVString")}}. Se nenhum desses valores forem especificados, o valor será convertido para string.</dd>
+ <dt><code>filename </code>{{optional_inline}}</dt>
+ <dd>O nome do arquivo a ser enviado (um {{domxref("USVString")}}), quando um {{domxref("Blob")}} ou um {{domxref("File")}} é passdo como o segundo parâmetro. O nome de arquivo padrão para objetos do tipo {{domxref("Blob")}} é "blob".</dd>
+</dl>
+
+<div class="note">
+<p><strong>Nota:</strong> Se você especificar um {{domxref("Blob")}} como o dado a ser acrescentado ao objeto <code>FormData</code>, o nome do arquivo que será enviado para o servidor, enviado no atributo "Content-Disposition" no cabeçalho varia de navegador para navegador.</p>
+</div>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>A linha a seguir cria um objeto <code>FormData</code> vazio:</p>
+
+<pre class="brush: js">var formData = new FormData(); // Currently empty</pre>
+
+<p>Você pode adicionar os pares chave/valor usando (domxref("FormData.set")}}:</p>
+
+<pre class="brush: js">formData.set('username', 'Chris');
+formData.set('userpic', myFileInput.files[0], 'chris.jpg');</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-set','set()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>DIsponível para web workers</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatGeckoDesktop("39.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>Característica</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+  </tr>
+  <tr>
+   <td>DIsponível para web workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Usando XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Usando objetos FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/fullscreenoptions/index.html b/files/pt-br/web/api/fullscreenoptions/index.html
new file mode 100644
index 0000000000..9a85830521
--- /dev/null
+++ b/files/pt-br/web/api/fullscreenoptions/index.html
@@ -0,0 +1,29 @@
+---
+title: FullscreenOptions
+slug: Web/API/FullscreenOptions
+translation_of: Web/API/FullscreenOptions
+---
+<p>{{APIRef("Fullscreen API")}}</p>
+
+<p><span class="seoSummary">O dicionário <strong><code>FullscreenOptions</code></strong> é usado para prover configurações quando chamado {{DOMxRef("Element.requestFullscreen", "requestFullscreen()")}} em um elemento para colocar este elmento em modo full-screen (tela inteira).</span></p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<dl>
+ <dt>{{DOMxRef("FullscreenOptions.navigationUI", "navigationUI")}}{{Optional_Inline}}</dt>
+ <dd>Uma string controlando se deve ou não manter elementos da interface do usuário do navegador visíveis enquanto estiver no modo full-screen. O modo padrão, <code>"auto"</code>, deixa que o navegador faça esta decisão.</dd>
+</dl>
+
+<h2 id="Compatibilidade_dos_Navegadores">Compatibilidade dos Navegadores</h2>
+
+
+
+<p>{{Compat("api.FullscreenOptions")}}</p>
+
+<h2 id="Veja_Também">Veja Também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a></li>
+ <li><a href="/en-US/docs/Web/API/Fullscreen_API/Guide">Guia para a API de Fullscreen</a></li>
+ <li>{{DOMxRef("Element.requestFullscreen()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/gamepad_api/index.html b/files/pt-br/web/api/gamepad_api/index.html
new file mode 100644
index 0000000000..fe026468d8
--- /dev/null
+++ b/files/pt-br/web/api/gamepad_api/index.html
@@ -0,0 +1,90 @@
+---
+title: Gamepad API
+slug: Web/API/Gamepad_API
+translation_of: Web/API/Gamepad_API
+---
+<div>{{DefaultAPISidebar("Gamepad API")}}</div>
+
+<p>A <strong>Gamepad API </strong>é uma maneira dos desenvolvedores acessarem e responderem à sinais oriundos de gamepads e outros controladores de games de forma simples e consistente. A API contém três interfaces, dois eventos e uma função especialista, para responder aos gamepads sendo conectados e desconectados, e acessar outras informações sobre o próprio gamepad, e quais botões e outros controles estão sendo de fato passados.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad" title="The Gamepad interface of the Gamepad API defines an individual gamepad or other controller, allowing access to information such as button presses, axis positions, and id."><code>Gamepad</code></a></dt>
+ <dd>Representa o gamepad/controlador conectado ao computador.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadButton" title="The GamepadButton interface defines an individual button of a gamepad or other controller, allowing access to the current state of different types of buttons available on the control device."><code>GamepadButton</code></a></dt>
+ <dd>Representa um botão num dos controles conectados.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadEvent" title="The GamepadEvent interface of the Gamepad API contains references to gamepads connected to the system, which is what the gamepad events Window.gamepadconnected and Window.gamepaddisconnected are fired in response to."><code>GamepadEvent</code></a></dt>
+ <dd>O objeto de evento representando eventos disparados que são relacionados ao gamepad.</dd>
+</dl>
+
+<h3 id="Experimental_Gamepad_extensions">Experimental Gamepad extensions</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadHapticActuator" title="The GamepadHapticActuator interface of the Gamepad API represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware."><code>GamepadHapticActuator</code></a></dt>
+ <dd>Representa o hardware no controlador designado à prover feedbacks táteis ao usuário (Se disponível), mais comumente um hardware de vibração.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadPose" title="The GamepadPose interface of the Gamepad API represents the pose of a WebVR controller at a given timestamp (which includes orientation, position, velocity, and acceleration information.)"><code>GamepadPose</code></a></dt>
+ <dd>Representa a "localização" de um controle (ex. posição e orientação no espaço 3D) no caso de um controlador WebVR.</dd>
+</dl>
+
+<p>Veja também as <a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad#Experimental_extensions_to_Gamepad">extensões para a interface de Gamepad</a>, para funcionalidades que permitem você acessar as informações acima.</p>
+
+<h3 id="Extensions_to_other_interfaces">Extensions to other interfaces</h3>
+
+<h4 id="Navigator">Navigator</h4>
+
+<dl>
+ <dt>{{domxref("Navigator.getGamepads()")}}</dt>
+ <dd>Uma extensão para o objeto {{domxref("Navigator")}} que retorna um array  de objetos {{domxref("Gamepad")}}, um para cada controlador conectado.</dd>
+</dl>
+
+<h4 id="Window_events">Window events</h4>
+
+<dl>
+ <dt>{{domxref("Window.ongamepadconnected")}}</dt>
+ <dd>Representa um controlador de evento que irá rodar quando o gamepad é conectado (quando o evento {{event('gamepadconnected')}} for disparado).</dd>
+ <dt>{{domxref("Window.ongamepaddisconnected")}}</dt>
+ <dd>Representa um controlador de evento que irá rodar quando o gamepad é desconectado (quando o evento {{event('gamepaddisconnected')}} for disparado).</dd>
+</dl>
+
+<h2 id="Guias_e_tutorias">Guias e tutorias</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Using the Gamepad API</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Implementing controls using the Gamepad API</a></li>
+</ul>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentários</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("GamepadExtensions")}}</td>
+   <td>{{Spec2("GamepadExtensions")}}</td>
+   <td>Defines the {{anch("Experimental Gamepad extensions")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "", "The Gamepad API specification")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<div class="hidden"> A tabela de compatibilidade nesta página é gerada de um dado estruturado. Se você gostaria de contribuir com os dados, por favor, verifique <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um "pull request"</div>
+
+<p>{{Compat("api.Gamepad")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a class="external text" href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" rel="nofollow">The Gamepad API</a> por Ted Mielczarek and Robert Nyman</li>
+ <li><a href="http://luser.github.io/gamepadtest/">Simple API demo page</a> (<a href="https://github.com/luser/gamepadtest">source</a>)</li>
+</ul>
diff --git a/files/pt-br/web/api/geolocation/clearwatch/index.html b/files/pt-br/web/api/geolocation/clearwatch/index.html
new file mode 100644
index 0000000000..2aaa1d6658
--- /dev/null
+++ b/files/pt-br/web/api/geolocation/clearwatch/index.html
@@ -0,0 +1,84 @@
+---
+title: Geolocation.clearWatch()
+slug: Web/API/Geolocation/clearWatch
+translation_of: Web/API/Geolocation/clearWatch
+---
+<p>{{securecontext_header}}{{ APIref("Geolocation API") }}</p>
+
+<p>O método <strong><code>Geolocation.clearWatch()</code></strong> é usado para cancelar o registro dos manipuladores de monitoramento de localização / erro instalados anteriormente usando {{domxref("Geolocation.watchPosition()")}}.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">navigator.geolocation.clearWatch(<em>id</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><em>id</em></dt>
+ <dd>O número do ID retornado pelo método {{domxref("Geolocation.watchPosition()")}} ao instalar o manipulador que você deseja remover.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">var id, target, option;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude &amp;&amp; target.longitude === crd.longitude) {
+    console.log('Congratulation, you reach the 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>
+
+<h2 id="Especificações">Especificações</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('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibiliade_dos_Navegadores">Compatibiliade dos Navegadores</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta pagina é gerada de dados estruturados. Se você quiser contribuir com os dados, por favor cheque <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie um pull request para nós.</div>
+
+<p>{{Compat("api.Geolocation.clearWatch")}}</p>
+
+<h2 id="Veja_Também">Veja Também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Usando geolocation</a></li>
+ <li>{{domxref("Geolocation")}}</li>
+ <li>{{domxref("Geolocation.watchPosition()")}}</li>
+ <li>{{domxref("Geolocation.getCurrentPosition()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/geolocation/getcurrentposition/index.html b/files/pt-br/web/api/geolocation/getcurrentposition/index.html
new file mode 100644
index 0000000000..c5aa7919f6
--- /dev/null
+++ b/files/pt-br/web/api/geolocation/getcurrentposition/index.html
@@ -0,0 +1,127 @@
+---
+title: Geolocation.getCurrentPosition()
+slug: Web/API/Geolocation/getCurrentPosition
+translation_of: Web/API/Geolocation/getCurrentPosition
+---
+<p>{{ APIRef("Geolocation API") }}</p>
+
+<p>O método <strong><code>Geolocation.getCurrentPosition()</code></strong> é utilizado para capturar a posição atual do dispositivo.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">navigator.geolocation.getCurrentPosition(<em>success</em>, <em>error</em>, <em>options</em>)</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><em>success</em></dt>
+ <dd>Uma função de retorno que captura um objeto {{domxref("Position")}} como seu parâmetro de entrada.</dd>
+ <dt><em>erro</em>r {{optional_inline}}</dt>
+ <dd>Uma função de retorno opcional que captura um objeto {{domxref ("PositionError")}} como seu parâmetro de entrada.</dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>Um objeto opcional {{domxref("PositionOptions")}}.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">var options = {
+  enableHighAccuracy: true,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+function success(pos) {
+  var crd = pos.coords;
+
+  console.log('Sua posição atual é:');
+  console.log('Latitude : ' + crd.latitude);
+  console.log('Longitude: ' + crd.longitude);
+  console.log('Mais ou menos ' + crd.accuracy + ' metros.');
+};
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+};
+
+navigator.geolocation.getCurrentPosition(success, error, options);
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Especificação inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegadores_compatíveis">Navegadores compatíveis</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>Suporte básico</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removido no 15.0<br>
+    Reintroduzido no 16.0</td>
+   <td>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>Suporte básico</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Usando geolocalização</a></li>
+ <li>{{domxref("Navigator.geolocation")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/geolocation/index.html b/files/pt-br/web/api/geolocation/index.html
new file mode 100644
index 0000000000..4ca0efa69a
--- /dev/null
+++ b/files/pt-br/web/api/geolocation/index.html
@@ -0,0 +1,75 @@
+---
+title: Geolocation
+slug: Web/API/Geolocation
+tags:
+  - API
+  - Geolocalização
+  - Geolocation
+  - Geolocation API
+translation_of: Web/API/Geolocation
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p>A interface <strong>Geolocation</strong> representa um objeto ábil de programaticamente obter a posição do aparelho. Dá ao conteúdo web acesso à localização do aparelho. Isto permite com que o website ou a aplicação ofereça resultados customizados baseados na localização do usuário.</p>
+
+<p>Um objeto com tal interface é obtido utilizando a propriedade {{domxref("NavigatorGeolocation.geolocation")}} implementada pelo objeto {{domxref("Navigator")}}.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Por questões de segurança, quando uma página tenta obter acesso às informações de localização o usuário é notificado e uma requisição é feita para o mesmo fornecesser a permissão. Saiba que cada navegaor possui suas próprias políticas e métodos para requisitar tal permissão.</p>
+</div>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>A interface </em>Geolocation<em> não implementa nem herda qualquer propriedade.</em></p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>A interface </em>Geolocation<em> não herda qualquer métodos.</em></p>
+
+<dl>
+ <dt>{{domxref("Geolocation.getCurrentPosition()")}}</dt>
+ <dd>Determina a posição atual do aparelho e retorna um objeto {{domxref("Position")}} com os dados.</dd>
+ <dt>{{domxref("Geolocation.watchPosition()")}}</dt>
+ <dd>Retorna um valor long representando a nova função de callback estabelecida para ser invocada a qualquer momento que o localização do aparelho alterar-se.</dd>
+ <dt>{{domxref("Geolocation.clearWatch()")}}</dt>
+ <dd>Remove qualquer encarregado previamente instalado usando<em> watchPosition()</em>.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Especificação Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2>
+
+<p> </p>
+
+<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.Geolocation")}}</p>
+
+<p> </p>
+
+<div id="compat-desktop"> </div>
+
+<h2 id="Veja_Também">Veja Também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Usando Geolocation</a></li>
+</ul>
diff --git a/files/pt-br/web/api/geolocation/watchposition/index.html b/files/pt-br/web/api/geolocation/watchposition/index.html
new file mode 100644
index 0000000000..ffabaa2c76
--- /dev/null
+++ b/files/pt-br/web/api/geolocation/watchposition/index.html
@@ -0,0 +1,140 @@
+---
+title: Geolocation.watchPosition()
+slug: Web/API/Geolocation/watchPosition
+translation_of: Web/API/Geolocation/watchPosition
+---
+<p>{{ APIref("Geolocation API") }}</p>
+
+<p>O método <strong><code>Geolocation.watchPosition()</code></strong> é usado para registrar uma função manipuladora (handler function) que irá ser chamada automáticamente  cada vez que a posição no dispositivo mudar. Você pode, opcionalemnte, especificar uma função de retorno que manipulará qualquer erro.</p>
+
+<p>Este método retorna um valor para o <em>watch ID</em> que pode ser usado para desregistrar o manipulador passando isto para o método {{domxref("Geolocation.clearWatch()")}}.</p>
+
+<h2 id="Síntaxe">Síntaxe</h2>
+
+<pre class="syntaxbox"><em>id</em> = navigator.geolocation.watchPosition(<em>success</em>, <em>error</em>, <em>options</em>)</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><em>success</em></dt>
+ <dd>AUma função de retorno (callback) que pega um objeto {{domxref("Position")}} como parametro de entrada.  </dd>
+ <dt><em>error</em> {{optional_inline}}</dt>
+ <dd>Uma função de retorno opcional que pega um objeto {{domxref("PositionError")}} como parametro de entrada.  </dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>Um objeto opcional {{domxref("PositionOptions")}}.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</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('Parabéns, você alcançou o destino');
+    navigator.geolocation.clearWatch(id);
+  }
+}
+
+function error(err) {
+  console.warn('ERRO(' + err.code + '): ' + err.message);
+}
+
+target = {
+  latitude : 0,
+  longitude: 0
+};
+
+options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+id = navigator.geolocation.watchPosition(success, error, options);
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#watch-position', 'Geolocation.watchPosition()')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Especificação Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibillidade_de_Navegadores">Compatibillidade de Navegadores</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>Suporte básico</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removido no 15.0<br>
+    Reintroduzido no 16.0</td>
+   <td>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>Suporte básico</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Usando geolocalização</a></li>
+ <li>A interface que ele pertence, {{domxref("Geolocation")}}, e como acessar {{domxref("NavigatorGeolocation.geolocation")}}.</li>
+ <li>A operação oposta: {{domxref("Geolocation.clearWatch()")}}</li>
+ <li>Um método similar: {{domxref("Geolocation.getCurrentPosition()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/geolocationcoordinates/altitude/index.html b/files/pt-br/web/api/geolocationcoordinates/altitude/index.html
new file mode 100644
index 0000000000..b4b7850bf9
--- /dev/null
+++ b/files/pt-br/web/api/geolocationcoordinates/altitude/index.html
@@ -0,0 +1,45 @@
+---
+title: Coordinates.altitude
+slug: Web/API/GeolocationCoordinates/altitude
+translation_of: Web/API/GeolocationCoordinates/altitude
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>A propriedade <code><strong>Coordinates.altitude</strong></code> somente-leitura é uma representação do tipo double da altitude em metros, relativo ao nível do mar. O valor é nulo se a implementação não pode fornecer este dado.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>alt</em> = <code><em>coordinates</em><code>.altitude</code></code>
+</pre>
+
+<h2 id="Especificações">Especificações</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('Geolocation', '#altitude', 'Coordinates.altitude')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_os_navegadores">Compatibilidade entre os navegadores</h2>
+
+<div class="hidden"> compatibilidade das tabelas nesta página é gerada a partir dos dados estruturados. Se você gostaria de contribuir com esses dados, entre em <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>  e envie um pull request.</div>
+
+<p>{{Compat("api.Coordinates.altitude")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>The {{domxref("Coordinates")}} interface it belongs to.</li>
+</ul>
diff --git a/files/pt-br/web/api/geolocationcoordinates/index.html b/files/pt-br/web/api/geolocationcoordinates/index.html
new file mode 100644
index 0000000000..2263a8117a
--- /dev/null
+++ b/files/pt-br/web/api/geolocationcoordinates/index.html
@@ -0,0 +1,141 @@
+---
+title: Coordinates
+slug: Web/API/GeolocationCoordinates
+translation_of: Web/API/GeolocationCoordinates
+---
+<div>
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>O <strong><code>Coordinates</code></strong> iinterface representa a posição e a altitude do dispositivo na Terra, bem como a precisão com que essas propriedades são calculadas.</p>
+
+<h2 id="Propriedades"><font><font>Propriedades</font></font></h2>
+
+<p><em>A interface do <code>Coordinates</code> não herda nenhuma propiedade</em>.</p>
+
+<dl>
+ <dt>{{domxref("Coordinates.latitude")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Retorna um <code>double</code> representando a latitude da posição em graus decimais.</dd>
+ <dt>{{domxref("Coordinates.longitude")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Retorna um <code>double</code> representando a longitude da posição em graus decimais.</dd>
+ <dt>{{domxref("Coordinates.altitude")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Retorna um <code>double</code> <font>representando a altitude da posição em metros, em relação ao nível do mar. </font><font>Esse valor pode ser</font> <code>null</code> se a implementação não puder fornecer os dados.</dd>
+ <dt>{{domxref("Coordinates.accuracy")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Retorna um <code>double</code> <font>representação da precisão das </font><font>propriedades em</font> <code>latitude</code> e <code>longitude</code>, expressa em metros.</dd>
+ <dt>{{domxref("Coordinates.altitudeAccuracy")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Retorna um <code>double</code> representação da precisão da <code>altitude</code> expressa em metros. Esse valor pode ser <code>null</code>.</dd>
+ <dt>{{domxref("Coordinates.heading")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Retorna um <code>double</code><font><font> representação da direção na qual o dispositivo está viajando. </font><font>Esse valor, especificado em graus, indica o quão longe do título verdadeiro do norte do dispositivo. </font></font><code>0</code> <font><font>representam o verdadeiro norte e a direção é determinada no sentido horário (o que significa que o leste é </font></font><code>90</code><font><font>graus e oeste é </font></font><code>270</code><font><font>graus). </font><font>Se </font></font><code>speed</code><font><font>é </font></font><code>0</code><font><font>, </font></font><code>heading</code><font><font>é </font></font><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/JavaScript/Reference/Global_Objects/NaN">NaN</a></code><font><font>. </font><font>Se o dispositivo não conseguir fornecer </font></font><code>heading</code><font><font>informações, esse valor é </font></font><code>null</code><font><font>.</font></font></dd>
+ <dt>{{domxref("Coordinates.speed")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd><font><font>Retorna um </font></font><code>double</code><font><font>representação da velocidade do dispositivo em metros por segundo. </font><font>Esse valor pode ser </font></font><code>null</code><font><font>.</font></font></dd>
+</dl>
+
+<h2 id="Métodos"><font><font>Métodos</font></font></h2>
+
+<p><em><em><font><font>A interface da </font></font><code>Coordinates</code><font><font> </font></font><em><font><font>não implementa, nem herda nenhum método.</font></font></em></em></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('Geolocation', '#coordinates', 'Coordinates')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Especificação inicial.</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>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Apenas contexto seguro</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>Característica</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>Suporte básico</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>Apenas contexto seguro</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="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Geolocation" title="/ en-US / docs / WebAPI / Using_geolocation"><font><font>Usando geolocalização</font></font></a></li>
+ <li>O {{domxref("Geolocation")}}  e a  interface que o usa.</li>
+</ul>
+</div>
+
+<ul>
+</ul>
diff --git a/files/pt-br/web/api/geolocationposition/coords/index.html b/files/pt-br/web/api/geolocationposition/coords/index.html
new file mode 100644
index 0000000000..d14cbc59a7
--- /dev/null
+++ b/files/pt-br/web/api/geolocationposition/coords/index.html
@@ -0,0 +1,116 @@
+---
+title: Position.coords
+slug: Web/API/GeolocationPosition/coords
+translation_of: Web/API/GeolocationPosition/coords
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>A propriedade <code><strong>Position.coords</strong></code> é somente leitura. É um objeto de {{domxref("Coordinates")}} que contém uma representação geográfica: a localização, que é a latitude e longitude na Terra, a altitude e a velocidade do objeto em questão. Também contempla a precisão da informação sobre estes valores.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>coord</var> = <var>position</var>.coords
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#coords', 'Position.coords')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Especificação inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removido em 15.0<br>
+    Reintroduzido em 16.0</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Somente em contexto seguro</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>Característica</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>Suporte básico</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>Somente em contexto seguro</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="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Usando geolocalização</a></li>
+ <li>A interface {{domxref("Position")}} a qual ela pertence.</li>
+</ul>
diff --git a/files/pt-br/web/api/geolocationposition/index.html b/files/pt-br/web/api/geolocationposition/index.html
new file mode 100644
index 0000000000..1fb810305d
--- /dev/null
+++ b/files/pt-br/web/api/geolocationposition/index.html
@@ -0,0 +1,61 @@
+---
+title: Position
+slug: Web/API/GeolocationPosition
+translation_of: Web/API/GeolocationPosition
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>A interface <strong><code>Position</code></strong> representa a posição do dispositivo em questão em um dado momento. A posição, representada por um objeto {{domxref("Coordinates")}}, compreende a posição 2D do dispositivo, em um esferóide representando a Terra, e também inclui sua altitude e velocidade.</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>A interface <code>Position</code> não herda nenhuma propriedade</em>.</p>
+
+<dl>
+ <dt>{{domxref("Position.coords")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Retorna um objeto {{domxref("Coordinates")}} definindo a localização atual.</dd>
+ <dt>{{domxref("Position.timestamp")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Retorna um {{domxref("DOMTimeStamp")}} representando o momento em que a localização foi detectada.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em><em>A inteface <code>Position</code> não implementa ou herda nenhum método<em>.</em></em></em></p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#position', 'Position')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Especificação inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>
+
+<p> </p>
+
+<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.Position")}}</p>
+
+<div id="compat-desktop"> </div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Usando geolocalização</a></li>
+ <li>A interface {{domxref("Geolocation")}} que usa isto</li>
+</ul>
diff --git a/files/pt-br/web/api/geolocationpositionerror/index.html b/files/pt-br/web/api/geolocationpositionerror/index.html
new file mode 100644
index 0000000000..d5f5ec0f96
--- /dev/null
+++ b/files/pt-br/web/api/geolocationpositionerror/index.html
@@ -0,0 +1,128 @@
+---
+title: PositionError
+slug: Web/API/GeolocationPositionError
+translation_of: Web/API/GeolocationPositionError
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p>A interface <strong><code>PositionError</code></strong> representa a rasão de um erro ocorrer quando usando o dispositivo de geolocalização.</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>A interface <code>PositionError</code> não herda nenhuma propriedade</em>.</p>
+
+<dl>
+ <dt>{{domxref("PositionError.code")}} {{readonlyInline}}</dt>
+ <dd>Retorna um tipo <code>unsigned short</code> representando o código de erro. Os valores possíveis são os seguintes:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Valor</th>
+    <th scope="col">Constante associada</th>
+    <th scope="col">Descrição</th>
+   </tr>
+   <tr>
+    <td><code>1</code></td>
+    <td><code>PERMISSION_DENIED</code></td>
+    <td>Não foi possível obter a informação sobre geolocalização por que a página não possuía permissão para fazê-lo.</td>
+   </tr>
+   <tr>
+    <td><code>2</code></td>
+    <td><code>POSITION_UNAVAILABLE</code></td>
+    <td>A obtenção da geolocalização falhou por que pelo menos uma fonte interna de posicionamento retornou um erro interno.</td>
+   </tr>
+   <tr>
+    <td><code>3</code></td>
+    <td><code>TIMEOUT</code></td>
+    <td>O tempo máximo permitido para obter a geolocalização, definido por {{domxref("PositionOptions.timeout")}} foi atingido antes de se obter a informação.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("PositionError.message")}} {{readonlyInline}}</dt>
+ <dd>Retorna um {{domxref("DOMString")}} humanamente legível descrevendo os detalhes do erro. A especificação observa que esta informação é primariamente projetada para propósitos de debug e não deve ser exibida diretamente na interface com o usuário.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em><em>A interface <code>PositionError</code> não implementa nem herda qualquer método<em>.</em></em></em></p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#positionerror', 'PositionError')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Especificação inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Usando geolocation</a></li>
+ <li>A interface {{domxref("Geolocation")}} que o utiliza.</li>
+</ul>
diff --git a/files/pt-br/web/api/globaleventhandlers/index.html b/files/pt-br/web/api/globaleventhandlers/index.html
new file mode 100644
index 0000000000..1801888d2b
--- /dev/null
+++ b/files/pt-br/web/api/globaleventhandlers/index.html
@@ -0,0 +1,536 @@
+---
+title: GlobalEventHandlers
+slug: Web/API/GlobalEventHandlers
+tags:
+  - API
+  - DOM
+  - HTML-DOM
+  - Mixin
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+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 implement more event handlers.</p>
+
+<p><code>GlobalEventHandlers</code> is a mixin and not an interface and no object of this type can be created.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p>The events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("GlobalEventHandlers")}}, and implemented by {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.</p>
+
+<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.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.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.onloadstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised.</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.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.onselectionchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</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.onwaiting")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface defines no method.</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>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</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>{{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>{{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>{{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>30.0</td>
+   <td>5.5</td>
+   <td>17</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondragexit</code></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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncuechange</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondragexit</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmousewheel</code></td>
+   <td>{{CompatNo}}</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>{{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>{{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></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>{{CompatNo}}</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>{{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>{{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>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>{{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>{{CompatGeckoMobile(1.9.1)}}</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>{{CompatGeckoMobile(1.9.1)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmouseenter</code>, <code>onmouseleave</code></td>
+   <td>{{CompatGeckoMobile(10)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsuspend</code></td>
+   <td>{{CompatGeckoMobile(1.9.2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondragexit</code></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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncuechange</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondragexit</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmousewheel</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsort</code></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>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onpointerlockchange</code>, <code>onpointerlockerror</code></td>
+   <td>{{CompatGeckoMobile(10)}}<sup>[1]</sup></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>{{CompatNo}}</td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onselectionchange</code></td>
+   <td>{{CompatGeckoMobile(43)}}<sup>[4]</sup></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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</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>
+</ul>
diff --git a/files/pt-br/web/api/globaleventhandlers/onabort/index.html b/files/pt-br/web/api/globaleventhandlers/onabort/index.html
new file mode 100644
index 0000000000..9882a8b82d
--- /dev/null
+++ b/files/pt-br/web/api/globaleventhandlers/onabort/index.html
@@ -0,0 +1,44 @@
+---
+title: GlobalEventHandlers.onabort
+slug: Web/API/GlobalEventHandlers/onabort
+translation_of: Web/API/GlobalEventHandlers/onabort
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>Um manipulador de eventos que aborta eventos enviados para a janela. (Não disponível para o Firefox 2 ou Safari)</p>
+
+<p>TODO define what "abort" is. Closing the window via window manager? Stopping the load of the page? By which means and reasons (user, network/server)? At which stages would it fire / be catched? For IE, onabort is only available with <code>img</code> tags.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">window.onabort =<em>funcRef</em>
+</pre>
+
+<ul>
+ <li><code>funcRef</code>: Reference to a function</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:js">window.onabort = function() {
+  alert("Load aborted.");
+}</pre>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onabort','onabort')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/pt-br/web/api/globaleventhandlers/onblur/index.html b/files/pt-br/web/api/globaleventhandlers/onblur/index.html
new file mode 100644
index 0000000000..ee4133a0da
--- /dev/null
+++ b/files/pt-br/web/api/globaleventhandlers/onblur/index.html
@@ -0,0 +1,94 @@
+---
+title: GlobalEventHandlers.onblur
+slug: Web/API/GlobalEventHandlers/onblur
+tags:
+  - API
+  - HTML DOM
+  - Propriedade
+  - Referencia
+translation_of: Web/API/GlobalEventHandlers/onblur
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>The <strong>onblur</strong> property returns the onBlur event handler code, if any, that exists on the current element.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">element.onblur = function;
+</pre>
+
+<ul>
+ <li><code>function</code> é o nome de uma função definida pelo usuário, sem o sufixo () ou qualquer parâmetro, ou uma declaração de função anônima, como por exemplo</li>
+</ul>
+
+<pre class="syntaxbox">element.onblur = function() { console.log("evento onblur detectado!"); };
+</pre>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: html">&lt;html&gt;
+
+&lt;head&gt;
+&lt;title&gt;exemplo de evento onblur&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+var elem = null;
+
+function initElement()
+{
+  elem = document.getElementById("foo");
+  // NOTA: doEvent(); ou doEvent(param); NÃO irão funcionar aqui.
+  // Deve ser uma referência ao nome da função, não à chamada da função.
+  elem.onblur = doEvent;
+};
+
+function doEvent()
+{
+  elem.value = 'Tchauzinho';
+  console.log("Evento onblur detectado!")
+}
+&lt;/script&gt;
+
+&lt;style type="text/css"&gt;
+&lt;!--
+#foo {
+border: solid blue 2px;
+}
+--&gt;
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body onload="initElement();"&gt;
+&lt;form&gt;
+&lt;input type="text" id="foo" value="Olá!" /&gt;
+&lt;/form&gt;
+
+&lt;p&gt;Clique no elemento acima para dá-lo focus, depois clique fora do elemento.&lt;br /&gt; Recarregue a pagina através do NavBar.&lt;/p&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>O evento blur aparece quando um elemento perde o focus.</p>
+
+<p>Em contraste cp, MSIE--O qual faz quase todos os elementos receberem o evento blur--quase todos os elementos em navegadores baseados no Gecko NÃO funcionam com este evento.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onblur','onblur')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/pt-br/web/api/globaleventhandlers/onchange/index.html b/files/pt-br/web/api/globaleventhandlers/onchange/index.html
new file mode 100644
index 0000000000..c2dab3f1d8
--- /dev/null
+++ b/files/pt-br/web/api/globaleventhandlers/onchange/index.html
@@ -0,0 +1,46 @@
+---
+title: GlobalEventHandlers.onchange
+slug: Web/API/GlobalEventHandlers/onchange
+tags:
+  - API
+  - HTML DOM
+  - Propriedade
+  - Referencia
+translation_of: Web/API/GlobalEventHandlers/onchange
+---
+<div>
+<div>{{ ApiRef("HTML DOM") }}</div>
+</div>
+
+<p>A propriedade <code>onchange</code> determina e retorna o <a href="/docs/Web/Guide/Events/Event_handlers" title="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">manipulador de eventos</a> para o evento {{event("change")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em><var>element</var></em>.onchange = <em>handlerFunction</em>;
+var <em>handlerFunction</em> = <em><var>element</var></em>.onchange;
+</pre>
+
+<p><code><em>handlerFunction</em></code> deve ser ou <code>null</code> ou uma <a href="/en-US/docs/Web/JavaScript/Reference/Functions" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">função JavaScript</a> especificando o manipulador para o evento.</p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Veja a página do <a href="/en-US/docs/Web/Guide/Events/Event_handlers" title="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">manipulador de eventos do DOM</a> para informações sobre como trabalhar com manipuladores <code>on...</code> </p>
+
+<p>Veja a documentação do evento {{event("change")}} para informações sobre o evento.</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentários</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onchange','onchange')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/pt-br/web/api/globaleventhandlers/onclick/index.html b/files/pt-br/web/api/globaleventhandlers/onclick/index.html
new file mode 100644
index 0000000000..ea91496ac9
--- /dev/null
+++ b/files/pt-br/web/api/globaleventhandlers/onclick/index.html
@@ -0,0 +1,83 @@
+---
+title: GlobalEventHandlers.onclick
+slug: Web/API/GlobalEventHandlers/onclick
+translation_of: Web/API/GlobalEventHandlers/onclick
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<p>A propriedade <code><strong>onclick</strong></code> do mixin {{domxref("GlobalEventHandlers")}} é o {{domxref("EventHandler")}} para o processamento de eventos de {{event("click")}} em um dado elemento.</p>
+
+<p>O evento <code>click</code> acontece quando o usuário clica em um elemento. É disparado após os eventos {{event("mousedown")}} e{{event("mouseup")}} na respectiva ordem.</p>
+
+<div class="note"><strong>Note:</strong> Ao usar o evento <code>click</code> para disparar uma ação, considere também adicionar essa mesma ação ao evento {{event("keydown")}}, para permitir o uso dessa mesma ação a pessoas que não usam um mouse ou uma touchscreen.</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>elemento</var>.onclick = <em>refDeFuncao</em>;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p><code>refDeFuncao</code> é o nome de uma função ou uma <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/function">expressão de função</a>. Essa função recebe um objeto {{domxref("MouseEvent")}} como único argumento. Dentro da função, <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/this">this</a></code> será o elemento de qual o evento foi disparado.</p>
+
+<p>Apenas um manipulador <code>onclick</code> pode estar associado a um objeto em um momento. Em vez disso, você talvez prefira usar o método {{domxref("EventTarget.addEventListener()")}}, já que ele é mais flexível.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Esse evento registra a posição dos cliques.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;p&gt;Clique em qualquer lugar nesse exemplo.&lt;/p&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let log = document.getElementById('log');
+
+document.onclick = inputChange;
+
+function inputChange(e) {
+  log.textContent = `Posição: (${e.clientX}, ${e.clientY})`;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Especificação">Especificação</h2>
+
+<table class="spectable 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','webappapis.html#handler-onclick','onclick')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Navegador">Compatibilidade de Navegador</h2>
+
+<div>
+
+
+<p>{{Compat("api.GlobalEventHandlers.onclick")}}</p>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{event("click")}} event</li>
+ <li>Manipuladores de evento relacionados:
+  <ul>
+   <li>{{domxref("GlobalEventHandlers.onauxclick")}}</li>
+   <li>{{domxref("GlobalEventHandlers.ondblclick")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/pt-br/web/api/globaleventhandlers/oncontextmenu/index.html b/files/pt-br/web/api/globaleventhandlers/oncontextmenu/index.html
new file mode 100644
index 0000000000..5649c6671f
--- /dev/null
+++ b/files/pt-br/web/api/globaleventhandlers/oncontextmenu/index.html
@@ -0,0 +1,48 @@
+---
+title: GlobalEventHandlers.oncontextmenu
+slug: Web/API/GlobalEventHandlers/oncontextmenu
+tags:
+  - API
+  - HTML DOM
+  - Propriedade
+  - Referencia
+translation_of: Web/API/GlobalEventHandlers/oncontextmenu
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<p>Um uma propriedade do manipulador de eventos da janela para eventos com o botão direito do mouse. A menos que o comportamento padrão do navegador seja bloqueado (veja exemplos abaixo sobre como fazer isso), o menu de contexto do navegador irá ser ativado (apesar do IE8 ter um bug com ele e não irá ativar o menu de contexto se o manipulador de eventos contextmenu for definido). Note que este evento irá acontecer com qualquer evento não-desabilitado do botão direito do mouse e não depende de um elemento que contenha o <a href="http://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/" title="http://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/">atributo "contextmenu"</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">window.oncontextmenu = funcRef;
+//funcRef se refere à função a ser chamada</pre>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<p>Os exemplos abaixo irão desabilitar o clique com botão direito na página:</p>
+
+<pre class="brush:js;">document.oncontextmenu = function () { // Usa o document ao invés de window para compatibilidade com o IE8
+   return false;
+};
+
+window.addEventListener('contextmenu', function (e) { // Não compatível com IE &lt; 9
+    e.preventDefault();
+}, false);
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificações</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-oncontextmenu','oncontextmenu')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/pt-br/web/api/globaleventhandlers/onerror/index.html b/files/pt-br/web/api/globaleventhandlers/onerror/index.html
new file mode 100644
index 0000000000..95fdc08ce3
--- /dev/null
+++ b/files/pt-br/web/api/globaleventhandlers/onerror/index.html
@@ -0,0 +1,97 @@
+---
+title: GlobalEventHandlers.onerror
+slug: Web/API/GlobalEventHandlers/onerror
+tags:
+  - API
+  - HTML DOM
+  - Propriedade
+  - Referencia
+translation_of: Web/API/GlobalEventHandlers/onerror
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Um <a href="/en-US/docs/Web/Guide/Events/Event_handlers">event handler</a> para o evento <code><a href="/en-US/docs/Web/Events/error">error</a></code> . Eventos de erro são disparados contra diversos tipos de alvos, para diferentes tipos de erros: </p>
+
+<ul>
+ <li>Quando um <strong>erro de execução (runtime error) de JavaScript</strong> (incluindo erros de sintaxe) ocorrem, um evento <code><a href="/en-US/docs/Web/Events/error">error</a></code> usando a interface {{domxref("ErrorEvent")}} é disparado  no  {{domxref("window")}} e <code>window.onerror()</code> é invocado.</li>
+ <li>Quando um recurso (como um {{HTMLElement("img")}} ou {{HTMLElement("script")}}) <strong>falha na inicialização</strong>, um evento <code><a href="/en-US/docs/Web/Events/error">error</a></code> usando a interface {{domxref("Event")}} é disparado no elemento , que inicializa o load e o <code>onerror()</code> handler do elemento é invocado. Esse evento de erro emergem para a janela, mas (pelo menos no Firefox) pode ser manipulado com uma captura única {{domxref("window.addEventListener")}}.</li>
+</ul>
+
+<p>Instalando um manipulador de eventos de erro global é útil para compilação automatizada de relatórios de erro. </p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<p>Por questões históricas, diferentes argumentos são passados para os manipuladores window.onerror e element.onerror;</p>
+
+<h3 id="window.onerror">window.onerror</h3>
+
+<pre class="brush: js">window.onerror = function(message, source, lineno, colno, error) { ... }
+</pre>
+
+<p>Parâmetros da função:</p>
+
+<ul>
+ <li><code>message</code>: mensagem de erro (string). Disponível como <code>event</code> (sic!)  no manipulador HTML <code>onerror=""</code> .</li>
+ <li><code>source</code>: URL do script onde o erro foi disparado(string)</li>
+ <li><code>lineno</code>: Número da linha onde o evento foi disparado (number)</li>
+ <li><code>colno</code>: Número da coluna para a linha onde o evento ocorreu (number) {{gecko_minversion_inline("31.0")}}</li>
+ <li><code>error</code>: <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error Object</a> (object) {{gecko_minversion_inline("31.0")}}</li>
+</ul>
+
+<p> </p>
+
+<p>Quando a função retorna verdadeira, ela evita o disparo do manipulador de evento padrão </p>
+
+<h3 id="element.onerror">element.onerror</h3>
+
+<pre class="brush: js">element.onerror = function(event) { ... }
+</pre>
+
+<p><code>element.onerror</code> aceita uma função dom um único argumento do tipo {{domxref("Event")}}.</p>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Quando um erro de sintaxe<strong>(?)</strong> ocorre em um script, carregado de uma <a href="/en-US/docs/Web/Security/Same-origin_policy">origem diferente</a>, os detalhes do erro de sintaxe não são reportados para previnir vazamento de informações (veja {{bug("363897")}}). Ao invés de exibir simplesmente <code><strong>"Script error." (erro de script)</strong></code>, este comportamento pode ser sobrescrito em alguns navegadores usando o atributo  <code>{{htmlattrxref("crossorigin","script")}}</code> no {{HTMLElement("script")}} e tendo o servidor enviado os cabeçalhos HTTP CORS apropriados.  Uma solução alternativa é isolar o "Script error." e manipulá-lo sabendo que o detalhe do erro é visível somente no console do navegador e não acessível através do JavaScript.</p>
+
+<pre class="brush: js">window.onerror = function (msg, url, lineNo, columnNo, error) {
+    var string = msg.toLowerCase();
+    var substring = "script error";
+    if (string.indexOf(substring) &gt; -1){
+        alert('Script Error: See Browser Console for Detail');
+    } else {
+        alert(msg, url, lineNo, columnNo, error);
+    }
+  return false;
+};</pre>
+
+<p>Quando usamos a marcação HTML inline (<code>&lt;body onerror="alert('an error occurred')"&gt;</code>), a especificação HTML requer argumentos passados para o <code>onerror</code> identificados como <code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, <code>error</code>. Os navegadors que não implementam este requerimento, podem ainda serem obtidos por <code>arguments[0]</code> até <code>arguments[2]</code>.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onerror','onerror')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<p>Antes do Firefox 14, quando um {{HTMLElement("script")}} falhava na inicialização, <code>window.onerror</code> era invocada com a mensagem <strong>"Error loading script"(erro de leitura de script)</strong>. Isto foi corrigido no {{bug("737087")}}, agora <code>scriptElement.onerror</code> é chamado ao invés disto.</p>
+
+<p>Desde o Firefox 31, os últimos 2 argumentos (<code>colno</code> and <code>error</code>) foram adicionados, o que significa que você tem acesso a pilha de rastreamento de um erro de script através do <code>window.onerror</code> por intermédio do <code>Error</code> object ({{bug("355430")}}.)</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="http://blog.getsentry.com/2016/01/04/client-javascript-reporting-window-onerror.html">Capture e reporte erros JavaScript com window.onerror (blog.getsentry.com, 2016)</a></li>
+ <li><a href="https://danlimerick.wordpress.com/2014/01/18/how-to-catch-javascript-errors-with-window-onerror-even-on-chrome-and-firefox/">Como capturar erros JavaScript com window.onerror (mesmo no Chrome ou Firefox) (danlimerick.wordpress.com, 2014)</a></li>
+</ul>
diff --git a/files/pt-br/web/api/globaleventhandlers/onfocus/index.html b/files/pt-br/web/api/globaleventhandlers/onfocus/index.html
new file mode 100644
index 0000000000..3d27899ec3
--- /dev/null
+++ b/files/pt-br/web/api/globaleventhandlers/onfocus/index.html
@@ -0,0 +1,36 @@
+---
+title: GlobalEventHandlers.onfocus
+slug: Web/API/GlobalEventHandlers/onfocus
+translation_of: Web/API/GlobalEventHandlers/onfocus
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>A propriedade <strong>onfocus</strong> retorna o código de manipulador de eventos <em>onFocus</em> no elemento atual.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">element.onfocus = <em>código de manipulação de eventos</em>
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>O evento <em>Focus </em>é gerado quando o usuario define o foco no elemento.</p>
+
+<p>Oposta à MSIE, em que quase todos os tipos de elementos recebem o evento <em>focus</em>, em navegadores Gecko quase todos os tipos de elementos não funcionam com este evento.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">especificaçãos</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onfocus','onfocus')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/pt-br/web/api/globaleventhandlers/onkeyup/index.html b/files/pt-br/web/api/globaleventhandlers/onkeyup/index.html
new file mode 100644
index 0000000000..394aa886b2
--- /dev/null
+++ b/files/pt-br/web/api/globaleventhandlers/onkeyup/index.html
@@ -0,0 +1,61 @@
+---
+title: GlobalEventHandlers.onkeyup
+slug: Web/API/GlobalEventHandlers/onkeyup
+tags:
+  - API
+  - HTML DOM
+  - Propriedade
+  - Referencia
+translation_of: Web/API/GlobalEventHandlers/onkeyup
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>A propriedade<strong> onkeyup</strong> retorna o código de manipulador de eventos onKeyUp no elemento atual.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">element.onkeyup = <em>código do manipulador do evento</em>s
+</pre>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js"> &lt;input type="text" onKeyUp="teclaPressionada(event)"&gt;
+ &lt;script&gt;
+    function teclaPressionada(evt) {
+       console.log(evt.keyCode)
+    }
+ &lt;/script&gt;
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>O evento keyup é iniciado quando o usuário libera a tecla é pressionada.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="spectable 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','webappapis.html#handler-onkeyup','onkeyup')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade">Compatibilidade</h2>
+
+<article>
+<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.GlobalEventHandlers.onkeyup")}}</p>
+</article>
+
+<div id="compat-mobile"> </div>
diff --git a/files/pt-br/web/api/globaleventhandlers/onload/index.html b/files/pt-br/web/api/globaleventhandlers/onload/index.html
new file mode 100644
index 0000000000..2de2fb11c4
--- /dev/null
+++ b/files/pt-br/web/api/globaleventhandlers/onload/index.html
@@ -0,0 +1,74 @@
+---
+title: GlobalEventHandlers.onload
+slug: Web/API/GlobalEventHandlers/onload
+translation_of: Web/API/GlobalEventHandlers/onload
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Um manipulador de eventos para o evento de carregamento do objeto {{domxref("window")}}.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="eval">window.onload = <em>funcRef</em>;
+</pre>
+
+<ul>
+ <li><code>funcRef é a função do manipulador a ser chamada quando o evento de carregamento do objeto </code>{{domxref("window")}} <code>dispara.</code></li>
+</ul>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<pre class="brush: js">window.onload = function() {
+  init();
+  doSomethingElse();
+};
+</pre>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;onload test&lt;/title&gt;
+    &lt;script&gt;
+      function load() {
+        console.log("Evento de carregamento detectado!");
+      }
+      window.onload = load;
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;O evento de carregamento dispara quando o documento acabou de ser carregado!&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>O evento de carregamento dispara no final do processo de carregamento do documento. Neste ponto, todos os objetos do documento estão no DOM, e todas as imagens, scripts, links e sub-frames terminaram de carregar.</p>
+
+<p>Existe também os <a href="/en-US/docs/Web/Events">Gecko-Specific DOM Events</a>, como o <code>DOMContentLoaded </code>e o <code>DOMFrameContentLoaded</code> (que pode ser manipulado utilizando o {{domxref("EventTarget.addEventListener()")}}) que são disparados após o DOM para a página ser construído, mas não espera outros recursos serem carregados.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#handler-onload", "onload")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><code>DOMContentLoaded</code> event em <a href="/en-US/docs/Listening_to_events_in_Firefox_extensions#Simple_DOM_events">Listening to events: Simple DOM events</a></li>
+ <li>IIEF <a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression" rel="nofollow noreferrer">Immediately-invoked function expression</a></li>
+</ul>
diff --git a/files/pt-br/web/api/globaleventhandlers/onlostpointercapture/index.html b/files/pt-br/web/api/globaleventhandlers/onlostpointercapture/index.html
new file mode 100644
index 0000000000..8df6a32e69
--- /dev/null
+++ b/files/pt-br/web/api/globaleventhandlers/onlostpointercapture/index.html
@@ -0,0 +1,70 @@
+---
+title: GlobalEventHandlers.onlostpointercapture
+slug: Web/API/GlobalEventHandlers/onlostpointercapture
+tags:
+  - API
+  - DOM
+  - Event Handler
+  - GlobalEventHandlers
+  - HTML
+  - Propriedade
+  - Referencia
+  - events
+  - onlostpointercapture
+translation_of: Web/API/GlobalEventHandlers/onlostpointercapture
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>A propriedade <strong><code>onlostpointercapture</code></strong> do mixin {{domxref("GlobalEventHandlers")}} é uma {{domxref("EventHandler")}} que processa eventos {{event("lostpointercapture")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>target</em>.onlostpointercapture = <em>functionRef</em>;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p><code>functionRef</code> é o nome de uma função ou uma <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/function">expressão de função</a>. A função recebe um objeto {{domxref("PointerEvent")}} como seu único argumento.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">function overHandler(event) {
+  // Determinar o manipulador lostpointercapture para o evento alvo (<em>target event</em>).
+  let lostCaptureHandler = event.target.onlostpointercapture;
+}
+
+function init() {
+  let el = document.getElementById('target');
+  el.onlostpointercapture = overHandler;
+}
+</pre>
+
+<h2 id="Especificações">Especificações</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('Pointer Events 2', '#the-lostpointercapture-event', 'onlostpointercapture')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Navegador">Compatibilidade de Navegador</h2>
+
+
+
+<p>{{Compat("api.GlobalEventHandlers.onlostpointercapture")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Evento <code><a href="/pt-BR/docs/Web/API/Document/lostpointercapture_event">Document: lostpointercapture</a></code></li>
+ <li>Evento <code><a href="/pt-BR/docs/Web/API/HTMLElement/lostpointercapture_event">HTMLElement: lostpointercapture</a></code></li>
+ <li>{{domxref("Element.releasePointerCapture()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/globaleventhandlers/onscroll/index.html b/files/pt-br/web/api/globaleventhandlers/onscroll/index.html
new file mode 100644
index 0000000000..1156bfb2f7
--- /dev/null
+++ b/files/pt-br/web/api/globaleventhandlers/onscroll/index.html
@@ -0,0 +1,94 @@
+---
+title: GlobalEventHandlers.onscroll
+slug: Web/API/GlobalEventHandlers/onscroll
+translation_of: Web/API/GlobalEventHandlers/onscroll
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>A propriedade <strong><code>onscroll</code></strong> do {{domxref("GlobalEventHandlers")}} é uma mistura de eventos {{domxref("EventHandler")}} que processam eventos <code>scroll</code>.</p>
+
+<p>O evento <code>scroll</code> é disparado quando uma visão do documento ou um elemento foi rolado, seja por um usuário, uma <a href="/en-US/docs/Web/API">API Web</a>, ou o {{glossary("user agent")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Não confunda <code>onscroll</code> com {{domxref("GlobalEventHandlers.onwheel", "onwheel")}}: <code>onwheel</code> manipula a rotação da roda do mouse, enquanto <code>onscroll</code> manipula rolagem do conteúdo do objeto.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>target</em>.onscroll = <em>functionRef</em>;
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p><code>functionRef</code> é o nome de uma função ou uma  <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">expressão de função</a>. A função recebe um  {{domxref("UIEvent")}} objeto com um único argumento.</p>
+
+<p>Apenas um manipulador <code>onscroll</code> pode ser associado à um objeto por vez. Para uma maior flexibilidade, você pode passar um {{event("scroll")}} evento para o {{domxref("EventTarget.addEventListener()")}} metódo ao invés disso.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Este exemplo monitora rolagens sobre o elemento {{HtmlElement("textarea")}}, e registra a posição vertical adequadamente.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;textarea&gt;1 2 3 4 5 6 7 8 9&lt;/textarea&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">textarea {
+  width: 4rem;
+  height: 8rem;
+  font-size: 3rem;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const textarea = document.querySelector('textarea');
+const log = document.getElementById('log');
+
+textarea.onscroll = logScroll;
+
+function logScroll(e) {
+  log.textContent = `Posição do scroll: ${e.target.scrollTop}`;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Exemplo", 700, 200)}}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','#handler-onscroll','onscroll')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Events", "#event-type-scroll", "onscroll")}}</td>
+   <td>{{Spec2("DOM3 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_o_Navegador">Compatibilidade com o Navegador</h2>
+
+
+
+<p>{{Compat("api.GlobalEventHandlers.onscroll")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document/scroll_event">Document: evento <code>scroll</code></a></li>
+ <li><a href="/en-US/docs/Web/API/Element/scroll_event">Element: evento <code>scroll</code></a></li>
+</ul>
diff --git a/files/pt-br/web/api/history/index.html b/files/pt-br/web/api/history/index.html
new file mode 100644
index 0000000000..8541516f41
--- /dev/null
+++ b/files/pt-br/web/api/history/index.html
@@ -0,0 +1,89 @@
+---
+title: History
+slug: Web/API/History
+translation_of: Web/API/History
+---
+<div>{{APIRef ("HTML DOM")}}</div>
+
+<p>A interface <code>History</code> permite a manipulação do histórico da sessão do navegador, ou seja, as páginas visitadas na guia ou quadro em que a página atual está carregada.</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+
+
+<p><em>A interface <code>History</code> não herda nenhuma propriedade.</em></p>
+
+<dl>
+ <dt>{{domxref("History.length")}} {{readOnlyInline}}</dt>
+ <dd>Returns an <code>Integer</code> representing the number of elements in the session history, including the currently loaded page. For example, for a page loaded in a new tab this property returns <code>1</code>.</dd>
+ <dt>{{domxref("History.current")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the URL of the active item of the session history. This property was never available to web content and is no more supported by any browser. Use {{domxref("Location.href")}} instead.</dd>
+ <dt>{{domxref("History.next")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the URL of the next item in the session history. This property was never available to web content and is not supported by other browsers.</dd>
+ <dt>{{domxref("History.previous")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the URL of the previous item in the session history. This property was never available to web content and is not supported by other browsers.</dd>
+ <dt>{{domxref("History.scrollRestoration")}} {{experimental_inline}}</dt>
+ <dd>Allows web applications to explicitly set default scroll restoration behavior on history navigation. This property can be either <code>auto</code> or <code>manual</code>.</dd>
+ <dt>{{domxref("History.state")}} {{readOnlyInline}} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>Returns an <code>any</code> value representing the state at the top of the history stack. This is a way to look at the state without having to wait for a {{event("popstate")}} event.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The <code>History</code></em> <em>interface doesn't inherit any methods.</em></p>
+
+<dl>
+ <dt>{{domxref("History.back()")}}</dt>
+ <dd>Goes to the previous page in session history, the same action as when the user clicks the browser's Back button. Equivalent to <code>history.go(-1)</code>.
+ <div class="note">Calling this method to go back beyond the first page in the session history has no effect and doesn't raise an exception.</div>
+ </dd>
+ <dt>{{domxref("History.forward()")}}</dt>
+ <dd>Goes to the next page in session history, the same action as when the user clicks the browser's Forward button; this is equivalent to <code>history.go(1)</code>.
+ <div class="note">Calling this method to go forward beyond the most recent page in the session history has no effect and doesn't raise an exception.</div>
+ </dd>
+ <dt>{{domxref("History.go()")}}</dt>
+ <dd>Loads a page from the session history, identified by its relative location to the current page, for example -1 for the previous page or 1  for the next page. If you specify an out-of-bounds value (for instance, specifying -1 when there are no previously-visited pages in the session history), this method silently has no effect. Calling <code>go()</code> without parameters or a value of 0 reloads the current page. Internet Explorer lets you specify a string, instead of an integer, to go to a specific URL in the history list.</dd>
+ <dt>{{domxref("History.pushState()")}} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>Pushes the given data onto the session history stack with the specified title and, if provided, URL. The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized.  Note that Firefox currently ignores the title parameter; for more information, see <a href="/en-US/docs/Web/API/History_API">manipulating the browser history</a>.</dd>
+ <dt>{{domxref("History.replaceState()")}} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>Updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL. The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized.  Note that Firefox currently ignores the title parameter; for more information, see <a href="/en-US/docs/Web/API/History_API">manipulating the browser history</a>.</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', "browsers.html#the-history-interface", "History")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Adds the <code>scrollRestoration</code> attribute.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Custom Scroll Restoration', '#web-idl', "History")}}</td>
+   <td>{{Spec2('Custom Scroll Restoration')}}</td>
+   <td>Adds the <code>scrollRestoration</code> attribute.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.History")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("Window.history")}} property returning the history of the current session.</li>
+</ul>
diff --git a/files/pt-br/web/api/history_api/exemplo/index.html b/files/pt-br/web/api/history_api/exemplo/index.html
new file mode 100644
index 0000000000..a4dfc4b68f
--- /dev/null
+++ b/files/pt-br/web/api/history_api/exemplo/index.html
@@ -0,0 +1,418 @@
+---
+title: Exemplo de navegação Ajax
+slug: Web/API/History_API/Exemplo
+tags:
+  - Exemplo navegação ajax
+translation_of: Web/API/History_API/Example
+---
+<p>Esse é um exemplo de um web site em AJAX web site composto por apenas três páginas (<em>first_page.php</em>, <em>second_page.php</em> e <em>third_page.php</em>). Para ver como funciona, crie os arquivos a seguir (ou <em>git clone</em> <a href="https://github.com/giabao/mdn-ajax-nav-example" title="/en-US/docs/">https://github.com/giabao/mdn-ajax-nav-example.git</a> ):</p>
+
+<div class="note" id="const_compatibility"><strong>Nota:</strong> Para integrar completamente os elementos {{HTMLElement("form")}} com esse <em>mecanismo</em>, porfavor dê uma olhada no parágrafo <a href="/pt-BR/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">Enviando formulários e enviando arquivos</a>.</div>
+
+<p><strong>first_page.php</strong>:</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: php">&lt;?php
+    $page_title = "Primeira página";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) &amp;&amp; $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?&gt;
+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;?php
+        include "include/header.php";
+        echo "&lt;title&gt;" . $page_title . "&lt;/title&gt;";
+?&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;?php include "include/before_content.php"; ?&gt;
+
+&lt;p&gt;Esse parágrafo só é mostrado quando a navegação começa em &lt;strong&gt;first_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;div id="ajax-content"&gt;
+&lt;?php } ?&gt;
+
+    &lt;p&gt;Esse é o conteúdo de &lt;strong&gt;first_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+    if ($as_json) {
+        echo json_encode(array("page" =&gt; $page_title, "content" =&gt; ob_get_clean()));
+    } else {
+?&gt;
+&lt;/div&gt;
+
+&lt;p&gt;Esse parágrafo só é mostrado quando a navegação começa em &lt;strong&gt;first_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+        include "include/after_content.php";
+        echo "&lt;/body&gt;\n&lt;/html&gt;";
+    }
+?&gt;
+</pre>
+</div>
+
+<p><strong>second_page.php</strong>:</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: php">&lt;?php
+    $page_title = "Segunda página";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) &amp;&amp; $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?&gt;
+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;?php
+        include "include/header.php";
+        echo "&lt;title&gt;" . $page_title . "&lt;/title&gt;";
+?&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;?php include "include/before_content.php"; ?&gt;
+
+&lt;p&gt;Esse parágrafo só é mostrado quando a navegação começa em &lt;strong&gt;second_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;div id="ajax-content"&gt;
+&lt;?php } ?&gt;
+
+    &lt;p&gt;Esse é o conteúdo de &lt;strong&gt;second_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+    if ($as_json) {
+        echo json_encode(array("page" =&gt; $page_title, "content" =&gt; ob_get_clean()));
+    } else {
+?&gt;
+&lt;/div&gt;
+
+&lt;p&gt;Esse parágrafo só é mostrado quando a navegação começa em &lt;strong&gt;second_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+        include "include/after_content.php";
+        echo "&lt;/body&gt;\n&lt;/html&gt;";
+    }
+?&gt;
+</pre>
+</div>
+
+<p><strong>third_page.php</strong>:</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: php">&lt;?php
+    $page_title = "Terceira página";
+    $page_content = "&lt;p&gt;Esse é o conteúdo de &lt;strong&gt;third_page.php&lt;/strong&gt;. This content is stored into a php variable.&lt;/p&gt;";
+
+    if (isset($_GET["view_as"]) &amp;&amp; $_GET["view_as"] == "json") {
+        echo json_encode(array("page" =&gt; $page_title, "content" =&gt; $page_content));
+    } else {
+?&gt;
+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;?php
+        include "include/header.php";
+        echo "&lt;title&gt;" . $page_title . "&lt;/title&gt;";
+?&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;?php include "include/before_content.php"; ?&gt;
+
+&lt;p&gt;Esse parágrafo só é mostrado quando a navegação começa em &lt;strong&gt;third_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;div id="ajax-content"&gt;
+&lt;?php echo $page_content; ?&gt;
+&lt;/div&gt;
+
+&lt;p&gt;Esse parágrafo só é mostrado quando a navegação começa em &lt;strong&gt;third_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+        include "include/after_content.php";
+        echo "&lt;/body&gt;\n&lt;/html&gt;";
+    }
+?&gt;
+</pre>
+</div>
+
+<p><strong>css/style.css</strong>:</p>
+
+<pre class="brush: css">#ajax-loader {
+    position: fixed;
+    display: table;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#ajax-loader &gt; div {
+    display: table-cell;
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    text-align: center;
+    background-color: #000000;
+    opacity: 0.65;
+}
+</pre>
+
+<p><strong>include/after_content.php</strong>:</p>
+
+<pre class="brush: php">&lt;p&gt;Esse é o rodapé. Ele é compartilhado entre todas as páginas ajax.&lt;/p&gt;
+</pre>
+
+<p><strong>include/before_content.php</strong>:</p>
+
+<pre class="brush: php">&lt;p&gt;
+[ &lt;a class="ajax-nav" href="first_page.php"&gt;Primeiro exemplo&lt;/a&gt;
+| &lt;a class="ajax-nav" href="second_page.php"&gt;Segundo exemplo&lt;/a&gt;
+| &lt;a class="ajax-nav" href="third_page.php"&gt;Terceiro exemplo&lt;/a&gt;
+| &lt;a class="ajax-nav" href="unexisting.php"&gt;Página inexistente&lt;/a&gt; ]
+&lt;/p&gt;
+
+</pre>
+
+<p><strong>include/header.php</strong>:</p>
+
+<pre class="brush: php">&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;script type="text/javascript" src="js/ajax_nav.js"&gt;&lt;/script&gt;
+&lt;link rel="stylesheet" href="css/style.css" /&gt;
+</pre>
+
+<p><strong>js/ajax_nav.js</strong>:</p>
+
+<p>(antes de implementar em um ambiente de trabalho, <strong>porfavor leia <a href="#const_compatibility" title="Note about *const* compatibility">a nota sobre a compatibilidade de declaração de const</a></strong>)</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: js">"use strict";
+
+const ajaxRequest = new (function () {
+
+    function closeReq () {
+        oLoadingBox.parentNode &amp;&amp; document.body.removeChild(oLoadingBox);
+        bIsLoading = false;
+    }
+
+    function abortReq () {
+        if (!bIsLoading) { return; }
+        oReq.abort();
+        closeReq();
+    }
+
+    function ajaxError () {
+        alert("Unknown error.");
+    }
+
+    function ajaxLoad () {
+        var vMsg, nStatus = this.status;
+        switch (nStatus) {
+            case 200:
+                vMsg = JSON.parse(this.responseText);
+                document.title = oPageInfo.title = vMsg.page;
+                document.getElementById(sTargetId).innerHTML = vMsg.content;
+                if (bUpdateURL) {
+                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
+                    bUpdateURL = false;
+                }
+                break;
+            default:
+                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
+                switch (Math.floor(nStatus / 100)) {
+                    /*
+                    case 1:
+                        // Informational 1xx
+                        console.log("Information code " + vMsg);
+                        break;
+                    case 2:
+                        // Successful 2xx
+                        console.log("Successful code " + vMsg);
+                        break;
+                    case 3:
+                        // Redirection 3xx
+                        console.log("Redirection code " + vMsg);
+                        break;
+                    */
+                    case 4:
+                        /* Client Error 4xx */
+                        alert("Client Error #" + vMsg);
+                        break;
+                    case 5:
+                        /* Server Error 5xx */
+                        alert("Server Error #" + vMsg);
+                        break;
+                    default:
+                        /* Unknown status */
+                        ajaxError();
+                }
+        }
+        closeReq();
+    }
+
+    function filterURL (sURL, sViewMode) {
+        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&amp;").replace(rView, sViewMode ? "&amp;" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
+    }
+
+    function getPage (sPage) {
+        if (bIsLoading) { return; }
+        oReq = new XMLHttpRequest();
+        bIsLoading = true;
+        oReq.onload = ajaxLoad;
+        oReq.onerror = ajaxError;
+        if (sPage) { oPageInfo.url = filterURL(sPage, null); }
+        oReq.open("get", filterURL(oPageInfo.url, "json"), true);
+        oReq.send();
+        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
+    }
+
+    function requestPage (sURL) {
+        if (history.pushState) {
+            bUpdateURL = true;
+            getPage(sURL);
+        } else {
+            /* Ajax navigation is not supported */
+            location.assign(sURL);
+        }
+    }
+
+    function processLink () {
+        if (this.className === sAjaxClass) {
+            requestPage(this.href);
+            return false;
+        }
+        return true;
+    }
+
+    function init () {
+        oPageInfo.title = document.title;
+        history.replaceState(oPageInfo, oPageInfo.title, oPageInfo.url);
+        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx &lt; nLen; document.links[nIdx++].onclick = processLink);
+    }
+
+    const
+
+        /* customizable constants */
+        sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
+
+        /* not customizable constants */
+        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&amp;*/, rView = new RegExp("&amp;" + sViewKey + "\\=[^&amp;]*|&amp;*$", "i"), rEndQstMark = /\?$/,
+        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
+        oPageInfo = {
+            title: null,
+            url: location.href
+        }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ {
+            100: "Continue",
+            101: "Switching Protocols",
+            102: "Processing",
+            200: "OK",
+            201: "Created",
+            202: "Accepted",
+            203: "Non-Authoritative Information",
+            204: "No Content",
+            205: "Reset Content",
+            206: "Partial Content",
+            207: "Multi-Status",
+            208: "Already Reported",
+            226: "IM Used",
+            300: "Multiple Choices",
+            301: "Moved Permanently",
+            302: "Found",
+            303: "See Other",
+            304: "Not Modified",
+            305: "Use Proxy",
+            306: "Reserved",
+            307: "Temporary Redirect",
+            308: "Permanent Redirect",
+            400: "Bad Request",
+            401: "Unauthorized",
+            402: "Payment Required",
+            403: "Forbidden",
+            404: "Not Found",
+            405: "Method Not Allowed",
+            406: "Not Acceptable",
+            407: "Proxy Authentication Required",
+            408: "Request Timeout",
+            409: "Conflict",
+            410: "Gone",
+            411: "Length Required",
+            412: "Precondition Failed",
+            413: "Request Entity Too Large",
+            414: "Request-URI Too Long",
+            415: "Unsupported Media Type",
+            416: "Requested Range Not Satisfiable",
+            417: "Expectation Failed",
+            422: "Unprocessable Entity",
+            423: "Locked",
+            424: "Failed Dependency",
+            425: "Unassigned",
+            426: "Upgrade Required",
+            427: "Unassigned",
+            428: "Precondition Required",
+            429: "Too Many Requests",
+            430: "Unassigned",
+            431: "Request Header Fields Too Large",
+            500: "Internal Server Error",
+            501: "Not Implemented",
+            502: "Bad Gateway",
+            503: "Service Unavailable",
+            504: "Gateway Timeout",
+            505: "HTTP Version Not Supported",
+            506: "Variant Also Negotiates (Experimental)",
+            507: "Insufficient Storage",
+            508: "Loop Detected",
+            509: "Unassigned",
+            510: "Not Extended",
+            511: "Network Authentication Required"
+        };
+
+    var
+
+        oReq, bIsLoading = false, bUpdateURL = false;
+
+    oLoadingBox.id = "ajax-loader";
+    oCover.onclick = abortReq;
+    oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
+    oCover.appendChild(oLoadingImg);
+    oLoadingBox.appendChild(oCover);
+
+    onpopstate = function (oEvent) {
+        bUpdateURL = false;
+        oPageInfo.title = oEvent.state.title;
+        oPageInfo.url = oEvent.state.url;
+        getPage();
+    };
+
+    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
+
+    // Public methods
+
+    this.open = requestPage;
+    this.stop = abortReq;
+    this.rebuildLinks = init;
+
+})();
+</pre>
+</div>
+
+<div class="note" id="const_compatibility"><strong>Nota:</strong> A atual implementação de <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> (declaração de constante) <strong>não é parte do ECMAScript 5</strong>. É suportada no Firefox e no Chrome (V8) e parcialmente suportada no Opera 9+ e no Safari. <strong>Ela  não é suportada nas versões do Internet Explorer 6 ao 9, ou na versão <em>preview</em> do Internet Explorer 10</strong>. <a href="/pt-BR/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> será definida no ECMAScript 6, mas com semânticas diferentes. Similarmente ao que acontece com variáveis definidas como <a href="/pt-BR/JavaScript/Reference/Statements/let" title="en/JavaScript/Reference/Statements/let"><code>let</code></a>, constantes declaradas com <a href="/pt-BR/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> serão <em>block-scoped</em>, limitando seu escopo no bloco. <strong>Nós só usamos isso com propósito didático. Se você quer total compatibilidade com os navegadores, substitua todas as declarações <a href="/pt-BR/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> por declarações <a href="/pt-BR/JavaScript/Reference/Statements/var" title="en/JavaScript/Reference/Statements/var"><code>var</code></a>.</strong></div>
+
+<p>Para mais informações, veja: <a href="/pt-BR/docs/DOM/Manipulating_the_browser_history" title="/en-US/docs/DOM/Manipulating_the_browser_history">Manipulando o histórico do navegador</a>.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{ domxref("window.history") }}</li>
+ <li>{{ domxref("window.onpopstate") }}</li>
+</ul>
diff --git a/files/pt-br/web/api/history_api/index.html b/files/pt-br/web/api/history_api/index.html
new file mode 100644
index 0000000000..5b763f9a97
--- /dev/null
+++ b/files/pt-br/web/api/history_api/index.html
@@ -0,0 +1,257 @@
+---
+title: Manipulando o histórico do navegador
+slug: Web/API/History_API
+tags:
+  - Avançado
+  - DOM
+  - HTML5
+  - Histórico
+translation_of: Web/API/History_API
+---
+<p>O objeto DOM {{ domxref("window") }} fornece acesso ao histórico do navegador através do objeto {{ domxref("window.history", "history") }}. Ele expõe métodos e propriedades úteis que permitem que você se mova para trás e para frente através do histórico de navegação do usuário, bem como -- iniciando com o HTML5 -- manipular o conteúdo da pilha de históricos.</p>
+
+<h2 id="Navegando_através_do_histórico">Navegando através do histórico</h2>
+
+<p><span id="result_box" lang="pt"><span>Mover para trás e para a frente através do histórico do usuário é feito usando os métodos <code>back()</code>, <code>forward()</code> e <code>go()</code>. </span></span></p>
+
+<h3 id="Movendo_para_frente_e_para_trás">Movendo para frente e para trás</h3>
+
+<p>Para mover para trás no histórico, apenas faça:</p>
+
+<pre class="brush: js">window.history.back();
+</pre>
+
+<p><span id="result_box" lang="pt"><span>Isso funcionará exatamente como se o usuário clicasse no botão Voltar na barra de ferramentas do navegador.</span><br>
+ <br>
+ <span>Da mesma forma, você pode avançar (como se o usuário clicasse no botão Avançar), assim:</span></span></p>
+
+<pre class="brush: js">window.history.forward();
+</pre>
+
+<h3 id="Movendo_para_um_ponto_específico_no_histórico">Movendo para um ponto específico no histórico</h3>
+
+<p>Você pode usar o método <code>go()</code> para carregar uma página específica do histórico. Cada página é identificada por sua posição relativa à página atual (sendo a página atual o indíce 0). </p>
+
+<p>Para retornar uma página (equivalente ao método <code>back()</code>):</p>
+
+<pre class="brush: js">window.history.go(-1);
+</pre>
+
+<p>Para avançar uma página (equivalente ao método <code>forward()</code>):</p>
+
+<pre class="brush: js">window.history.go(1);
+
+</pre>
+
+<p>O número de páginas do histórico pode ser determinado pela propriedade <em>length</em>:</p>
+
+<pre class="brush: js">const numberOfEntries = window.history.length;
+</pre>
+
+<div class="note"><strong>Note: </strong>O Internet Explorer suporta URLs como argumento para o método <code>go()</code>; isso não é um comportamento padrão e não é suportado pelo Gecko.</div>
+
+<h2 id="Adicionando_e_modificando_entradas">Adicionando e modificando entradas</h2>
+
+<p>{{ gecko_minversion_header("2") }}</p>
+
+<p>O HTML5 introduziu os métodos <a href="/en-US/docs/Web/API/History/pushState">history.pushState()</a> e <a href="/en-US/docs/Web/API/History_API#The_replaceState()_method">history.replaceState()</a>, que permitem adicionar e modificar entradas no histórico, respectivamente. Estes métodos funcionam em conjunto com o evento {{ domxref("window.onpopstate") }}.</p>
+
+<p>Usar <code>history.pushState()</code> modifica a referência que é utilizada no cabeçalho HTTP para objetos <code><a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></code> criados após a utilização do método. A referência será a URL do documento cuja janela é o <code>this</code> no momento de criação do objeto <code><a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></code>.</p>
+
+<h3 id="Exemplo_do_método_pushState()">Exemplo do método pushState()</h3>
+
+<p>Suponha que <span class="nowiki">http://mozilla.org/foo.html executa o seguinte JavaScript:</span></p>
+
+<pre class="brush: js">const stateObj = { foo: "bar" };
+history.pushState(stateObj, "page 2", "bar.html");
+</pre>
+
+<p>Isto fará com que a barra URL mostre <span class="nowiki">http://mozilla.org/bar.html, porém não fará com que o navegador carregue </span><code>bar.html</code> ou verifique se <code>bar.html</code> existe. </p>
+
+<p>Agora suponha que o usuário navegue para <span class="nowiki">http://google.com e logo em seguida clique no botão Voltar. Nesse momento, a barra de URL mostrará http://mozilla.org/bar.html, e <s>a página receberá um evento </s></span><s><code>popstate</code> cujo <em>objeto de estado</em> contém uma copia de <code>stateObj</code></s> se você ler o <code>history.state</code> você receberá o <code>stateObj</code>. O evento <code>popstate</code> não será disparado pois a página foi recarregada. A página carregada será <code>bar.html</code>.</p>
+
+<p>Se clicarmos no botão Voltar novamente, a URL modificará para <span class="nowiki">http://mozilla.org/foo.html, e o documento receberá um evento </span><code>popstate</code>, dessa vez com objeto de estado sendo nulo. Nesse momento, o documento também não altera seu conteúdo em relação ao passo anterior, porém o documento pode atualizar seu conteúdo manualmente após o recebimento do evento <code>popstate</code>.</p>
+
+<h3 id="O_método_pushState()">O método pushState()</h3>
+
+<p><code>pushState()</code> recebe três parâmetros: um objeto de estado, um título (que atualmente é ignorado) e (opcionalmente) uma URL. Vamos examinar cada um dos argumentos com mais detalhes:</p>
+
+<ul>
+ <li>
+  <p><strong>objeto de estado</strong> — O objeto de estado é um objeto JavaScript que é associado com uma nova entrada no histórico criado por <code>pushState()</code>. Sempre que o usuário navegar para o novo estado um evento <code>popstate</code> é disparado e a propriedade <code>state</code> do evento contém uma cópia do objeto de estado da entrada no histórico.</p>
+ </li>
+ <li>
+  <p>O objeto de estado pode ser qualquer coisa que possa ser serializada. O Firefox salva o objeto de estado no disco do usuário para que possa ser restaurado após um reinício do navegador. É imposto um limite de 640k caracteres na representação serializada do objeto de estado. Caso um objeto de estado serializado maior que este valor seja passado como argumento para <code>pushState()</code>, o método irá ativar uma exceção. Caso você precise de mais espaço do que 640k, é recomendada a utilização do <code>sessionStorage</code> e/ou <code>localSotrage</code>.</p>
+ </li>
+ <li>
+  <p><strong>título </strong>— Atualmente o Firefox ignora este parâmetro. Passar uma string vazia é suficiente contra futuras mudanças no método. Alternativamente, você pode passar um título curto para o estado.</p>
+ </li>
+ <li>
+  <p><strong>URL</strong> — A URL da nova entrada no histórico é passada por este parâmetro. Note que o navegador não tentará carregar essa URL após uma chamada do método <code>pushState()</code>, porém pode tentar carregar a URL mais tarde, por exemplo depois que o usuário reinicie o navegador. A nova URL não precisa ser absoluta; caso seja relativa, é resolvida em relação a atual URL. A nova URL precisar ser da mesma origem que a URL atual; caso contrário, <code>pushState()</code> ativará uma exceção. Este parâmetro é opcional; caso seja especificado, é utilizado como a atual URL do documento.</p>
+ </li>
+</ul>
+
+<div class="note"><strong>Nota: </strong>No Gecko 2.0 {{ geckoRelease("2.0") }} até Gecko 5.0 {{ geckoRelease("5.0") }}, o objeto passado é serializado utilizando JSON. A partir do Gecko 6.0 {{ geckoRelease("6.0") }}, o objeto é serializado usando <a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm"> o algorítmo de clonagem estruturada</a>. Isso permite que uma variedade maior de objetos possam ser serializados.</div>
+
+<p>De certa forma, chamar o método <code>pushState()</code> é similar a executar <code>window.location = "#foo"</code>,  no sentido de que ambos criarão e ativarão uma nova entrada no histórico associado com o documento atual. Porém <code>pushState()</code> tem algumas vantagens:</p>
+
+<ul>
+ <li>A nova URL pode ser qualquer URL na mesma origem da atual. Em contrapartida, modificar o valor de <code>window.location</code> o mantém no mesmo {{ domxref("document") }} somente se apenas a hash é modificada.</li>
+ <li>Você não precisa mudar a URL caso não queira. Em contrapartida, executar <code>window.location = "#foo"</code> só cria uma nova entrada no histórico se a atual hash não for <code>#foo</code>.</li>
+ <li>Você pode associar dados arbitrários com a nova entrada do histórico. Com a solução baseada em hash, você precisa codificar todos os dados relevantes em uma string curta.</li>
+ <li>Se <code>title</code> for utilizado pelos navegadores, esse dado pode ser utilizado (independente do hash).</li>
+</ul>
+
+<p>Note que <code>pushState()</code> nunca causa a ativação de um evento <code>hashchange</code>, mesmo se a nova URL diferir somente na hash,</p>
+
+<p>Em um documento <a href="/en-US/docs/Mozilla/Tech/XUL">XUL</a> é criado o elemento XUL especificado.</p>
+
+<p>Em outros documentos, é criado um elemento com um namespace <code>null</code> de URI.</p>
+
+<h3 id="O_método_replaceState()">O método replaceState()</h3>
+
+<p><code>history.replaceState()</code> opera exatamente igual à <code>history.pushState()</code> com exceção de modificar a atual entrada no histórico ao invés de criar uma nova. Note que isso não impede a criação de uma nova entrada no histórico global do navegador.</p>
+
+<p><code>replaceState()</code> é particularmente útil quando você quer atualiza o objeto de estado ou a URL da atual entrada do histórico como resposta a alguma ação do usuário.</p>
+
+<div class="note"><strong>Nota: </strong>Em Gecko 2.0 {{ geckoRelease("2.0") }} até Gecko 5.0 {{ geckoRelease("5.0") }}, o objeto passado é serializado utilizando JSON. Começando do Gecko 6.0 {{ geckoRelease("6.0") }}, o objeto é serializado usando <a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm"> o algorítmo de clonagem estruturada</a>. Isso permite que uma variedade maior de objetos possam ser serializados.</div>
+
+<h3 id="Exemplo_do_método_replaceState()">Exemplo do método replaceState()</h3>
+
+<p>Suponha que <span class="nowiki">http://mozilla.org/foo.html</span> execute o seguinte JavaScript:</p>
+
+<pre class="brush: js">const stateObj = { foo: "bar" };
+history.pushState(stateObj, "page 2", "bar.html");
+
+</pre>
+
+<p>A explicação destas duas linhas acima pode ser encontrada na seção "Exemplo do método pushState()". Suponha, então, que http://mozilla.org/bar.html execute o seguinte JavaScript:</p>
+
+<pre class="brush: js">history.replaceState(stateObj, "page 3", "bar2.html");
+</pre>
+
+<p>Isso fará com que a barra de URL do navegador exiba http://mozilla.org/bar2.html, mas não fará com que o navegador carregue <code>bar2.html</code> ou cheque se <code>bar2.html</code> existe.</p>
+
+<p>Suponha agora que o usuário navegue até http://www.microsoft.com e, em seguida, clique no botão voltar. Neste momento, a barra de URL mostrará http://mozilla.org/bar2.html. Caso o usuário clique novamente no botão voltar, a barra de URL mostrará http://mozilla.org/foo.html e ignorará completamente <code>bar.html</code>.</p>
+
+<h3 id="O_evento_popstate">O evento popstate</h3>
+
+<p>O evento <code>popstate</code> é disparado sempre que a entrada do histórico ativo é alterada. Se a entrada do histórico ativa foi criada por uma chamada <code>pushState</code> ou afetada por uma chamada <code>replaceState</code>, a propriedade <code>state</code> do evento <code>popstate</code> contém uma cópia do objeto de estado da entrada do histórico.</p>
+
+<p>Veja {{ domxref("window.onpopstate") }} para exemplo de utilização.</p>
+
+<h3 id="Lendo_o_estado_atual">Lendo o estado atual</h3>
+
+<p>Quando sua página é carregada, ela pode ter um objeto de estado não nulo. Isso pode acontecer, por exemplo, se a página definir um objeto de estado (usando <code>pushState()</code> ou <code>replaceState()</code>) e, em seguida, o usuário reiniciar seu navegador. Quando sua página é recarregada, ela receberá um evento <code>onload</code>, mas nenhum evento <code>popstate</code>. No entanto, se você ler a propriedade <code>history.state</code>, receberá o objeto de estado que teria obtido se um <code>popstate</code> tivesse sido disparado.</p>
+
+<p>Você pode ler o estado da entrada do histórico atual sem esperar por um evento <code>popstate</code> usando a propriedade <code>history.state</code> como o exemplo abaixo:</p>
+
+<pre class="brush: js">var currentState = history.state;
+</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Para um exemplo completo de um web site AJAX, veja: <a href="/pt-BR/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Example" title="/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Example">Exemplo de navegação Ajax</a>.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Nenhuma alteração do {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>replaceState, pushState</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>10</td>
+   <td>11.50</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>history.state</td>
+   <td>18</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>10</td>
+   <td>11.50</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</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>replaceState, pushState</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>history.state</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><strong style="font-size: 2.143rem; font-weight: 700; letter-spacing: -1px; line-height: 1;">Veja também</strong></p>
+
+<ul>
+ <li>{{ domxref("window.history") }}</li>
+ <li>{{ domxref("window.onpopstate") }}</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/DOM/Manipulating_the_browser_history"} ) }}</p>
diff --git a/files/pt-br/web/api/htmlcanvaselement/getcontext/index.html b/files/pt-br/web/api/htmlcanvaselement/getcontext/index.html
new file mode 100644
index 0000000000..c50cd97abb
--- /dev/null
+++ b/files/pt-br/web/api/htmlcanvaselement/getcontext/index.html
@@ -0,0 +1,292 @@
+---
+title: HTMLCanvasElement.getContext()
+slug: Web/API/HTMLCanvasElement/getContext
+tags:
+  - API
+  - Canvas
+  - HTMLCanvasElement
+  - Referencia
+  - metodo
+translation_of: Web/API/HTMLCanvasElement/getContext
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>O metodo <strong><code>HTMLCanvasElement.getContext()</code></strong> retorna um contexto de desenho no canvas, ou {{jsxref("null")}} se o contexto identificado não é suportado.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var><em>canvas</em>.getContext(<em>contextType, contextAttributes</em>);</var>
+</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt>contextType</dt>
+ <dd>É um {{domxref("DOMString")}} contendo o contexto identificador definindo o contexto de desenho associado ao canvas.        Os valores possiveis são:
+ <ul>
+  <li><code>"2d"</code>, levando a criação de um objeto {{domxref("CanvasRenderingContext2D")}} representando uma  renderização bidimensional.</li>
+  <li><code>"webgl"</code> (or <code>"experimental-webgl"</code>) que criará um objeto {{domxref("WebGLRenderingContext")}} representando uma renderização tridimensional. Esse contexto está disponivel somente em browsers que implementam <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> versão 1 (OpenGL ES 2.0).</li>
+  <li><code>"webgl2"</code> que criará um objeto {{domxref("WebGL2RenderingContext")}} representando uma renderização tridimensional. Esse contexto está disponivel somente em browsers que implementam <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> versão 2 (OpenGL ES 3.0). {{experimental_inline}}</li>
+  <li><code>"bitmaprenderer"</code> que criará um  {{domxref("ImageBitmapRenderingContext")}} que apenas provê a funcionalidade de substituir o conteúdo do canvas pelo de um {{domxref("ImageBitmap")}}.</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Note</strong>: O identificador "<code>experimental-webgl</code>" é usado em novas implementações do WebGL. Essas implementações ou ainda não passaram nos casos de teste, ou os drivers gráficos na plataforma ainda não estão estáveis. O <a href="https://www.khronos.org/">Khronos Group</a> certifica as implementações do WebGL sob certas <a href="https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt">regas de conformidade</a>.</p>
+ </div>
+ </dd>
+ <dt><code>contextAttributes</code></dt>
+ <dd>
+ <p>Você pode usar alguns atributos de contexto quando criar o seu contexto de renderização, por exemplo:</p>
+
+ <pre class="brush: js">canvas.getContext('webgl',
+                 { antialias: false,
+                   depth: false });</pre>
+ Atributos de contexto 2d:
+
+ <ul>
+  <li><strong><code>alpha</code></strong>: Boleano que indica se o canvas contém um canal alfa. Se definido como <code>false</code>, o browser saberá que o resultado será sempre opaco, o que pode acelerar o desenho de conteudo transparente e imagens.</li>
+  <li>{{non-standard_inline}} (Gecko only) <strong><code>willReadFrequently</code></strong>: Boleano que indica quando uma série de operações read-back estão planejadas. Isso forçará o uso de renderização 2D no canvas via software (ao invés de utilizar GPU) o que pode salvar memoria quando {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} for chamado frequentemente. Essa opção está disponivel somente, se a flag <code>gfx.canvas.willReadFrequently.enable</code> está definida como <code>true</code> (o que, por padrão, é o caso do B2G/Firefox OS apenas).</li>
+  <li>{{non-standard_inline}} (Blink only) <strong><code>storage</code></strong>: String que indica qual storage é usado ("persistent" por padrão).</li>
+ </ul>
+ Atributos de contexto WebGL:
+
+ <ul>
+  <li><strong><code>alpha</code></strong>: Boleano que indica se o canvas contém um buffer alfa.</li>
+  <li><strong><code>depth</code></strong>: Boleano que indica que o buffer do desenho tem um buffer de profundidade de pelo menos 16 bits.</li>
+  <li><strong><code>stencil</code></strong>: Boleano que indica que o buffer do desenho tem um buffer de stencil de pelo menos 8 bits.</li>
+  <li><strong><code>antialias</code></strong>: Boleano que indica se deve realizar o anti-aliasing ou não.</li>
+  <li><strong><code>premultipliedAlpha</code></strong>: Boleano que indica se o compositor da página vai assumir que o buffer do desenho contendo cores com alfa pré-multiplicado.</li>
+  <li><strong><code>preserveDrawingBuffer</code></strong>: Se o valor é <code>true</code> os buffers não serão limpos e preservarão seus valores até serem limpos ou subrescritos pelo autor.</li>
+  <li>
+   <p><code><strong>failIfMajorPerformanceCaveat</strong></code>: Boleano que indica se um contexto será criado se a performance do sistema for baixa.</p>
+  </li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Um {{domxref("RenderingContext")}} que pode ser:</p>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}} para <code>"2d"</code>,</li>
+ <li>{{domxref("WebGLRenderingContext")}} para <code>"webgl"</code> e <code>"experimental-webgl"</code>,</li>
+ <li>{{domxref("WebGL2RenderingContext")}} para <code>"webgl2"</code> ou</li>
+ <li>{{domxref("ImageBitmapRenderingContext")}} para <code>"bitmaprenderer"</code>.</li>
+</ul>
+
+<p>Se o <em>contextType</em> não bater com um possivel contexto de desenho,<code>null</code> é retornado.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Dado este elemento {{HTMLElement("canvas")}}:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Você pega um contexto <code>2d</code> do canvas com o código a seguir:</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+console.log(ctx); // CanvasRenderingContext2D { ... }
+</pre>
+
+<p>Agora você tem <a href="/en-US/docs/Web/API/CanvasRenderingContext2D">contexto de renderização 2d</a> para o canvas e você pode desenhar nele.</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#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Nenhuma mudança desde o ultimo snapshot, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot do {{SpecName('HTML WHATWG')}} contendo a definição inicial.</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 (<code>2d</code> context)</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatIE(9)}}</td>
+   <td>{{CompatOpera(9)}}</td>
+   <td>{{CompatSafari(3.1)}}</td>
+  </tr>
+  <tr>
+   <td><code>webgl</code> context</td>
+   <td>{{CompatChrome(9)}}<sup>[1]</sup><br>
+    {{CompatChrome(33)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop('1.9.2')}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop('24')}}</td>
+   <td>11.0<sup>[2]</sup></td>
+   <td>9.0<sup>[3]</sup></td>
+   <td>5.1<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td><code>webgl2</code> context </td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop('25')}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>2d <code>alpha</code> context attribute</td>
+   <td>32</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(30)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>failIfMajorPerformanceCaveat</code> attribute</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>bitmaprenderer context</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(46)}}</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>Edge</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>webgl</code> context</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>webgl2</code> context </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>2d <code>alpha</code> context attribute</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(30)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>failIfMajorPerformanceCaveat</code> attribute</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>bitmaprenderer context</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(46)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chrome 9 e Gecko 1.9.2 inicialmente implementaram isso como um <code>experimental-webgl</code>. Desde o Chrome 33 e Gecko 24 é implementado como definido pelo padrão: <code>webgl</code>.</p>
+
+<p>[2] Internet Explorer 11, WebKit 5.1 e Firefox Mobile implementaram isso como um <code>experimental-webgl</code>.</p>
+
+<p>[3] Opera 9 implementou isso como um <code>experimental-webgl</code>, ativado nas preferencias do usuario, na versão 15.0 a preferencia de usuario foi removida.</p>
+
+<p>[4] Gecko 25 implementou isso como um "<code>experimental-webgl2</code>" ativado na preferencia do usuario <code>webgl.enable-prototype-webgl2</code>. Apartir do Gecko 42, a string "<code>webgl2</code>"é usada na mesma configuração e "<code>experimental-webgl2</code>" não é mais aceito.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>A definição de interface, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>{{domxref("OffscreenCanvas.getContext()")}}</li>
+ <li>Contextos de renderização disponiveis: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} and {{domxref("WebGL2RenderingContext")}} and {{domxref("ImageBitmapRenderingContext")}}.</li>
+</ul>
diff --git a/files/pt-br/web/api/htmlcanvaselement/height/index.html b/files/pt-br/web/api/htmlcanvaselement/height/index.html
new file mode 100644
index 0000000000..fd737da382
--- /dev/null
+++ b/files/pt-br/web/api/htmlcanvaselement/height/index.html
@@ -0,0 +1,79 @@
+---
+title: HTMLCanvasElement.height
+slug: Web/API/HTMLCanvasElement/height
+tags:
+  - API
+  - Canvas
+  - HTMLCanvasElement
+  - Propriedade
+  - altura
+translation_of: Web/API/HTMLCanvasElement/height
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p>A propriedade <strong><code><span>HTMLCanvasElement.height</span></code></strong> é um <code>inteiro</code> positivo que reflete o atributo {{htmlattrxref("height", "canvas")}} do elemento HTML {{HTMLElement("canvas")}} interpretado em pixels no CSS. Quando o atributo não é especificado, ou se for definido como um valor inválido, como um <code>inteiro</code> negativo, o valor padrão de <code>150</code> será usado.</p>
+
+<p>Essa é uma de duas propriedades, que controla o tamanho do canvas, sendo a outra {{domxref("HTMLCanvasElement.width")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>var <em>pxl</em> = <em>canvas</em></var>.height;
+<em>canvas</em>.height = <em>pxl</em>;
+</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Dado este elemento {{HTMLElement("canvas")}}:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Você pode capturar a altura do canvas com o seguinte código:</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+console.log(canvas.height); // 300
+</pre>
+
+<h2 id="Especificações">Especificações</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#attr-canvas-height", "HTMLCanvasElement.height")}}</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#attr-canvas-height", "HTMLCanvasElement.height")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_os_browsers">Compatibilidade entre os browsers</h2>
+
+
+
+<p>{{Compat("api.HTMLCanvasElement.height")}}</p>
+
+<h2 id="See_Also" name="See_Also">Veja também</h2>
+
+<ul>
+ <li>A interface a define, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>Outra propriedade para controlar o tamanho do canvas, {{domxref("HTMLCanvasElement.width")}}.</li>
+</ul>
diff --git a/files/pt-br/web/api/htmlcanvaselement/index.html b/files/pt-br/web/api/htmlcanvaselement/index.html
new file mode 100644
index 0000000000..c2121aab9a
--- /dev/null
+++ b/files/pt-br/web/api/htmlcanvaselement/index.html
@@ -0,0 +1,264 @@
+---
+title: HTMLCanvasElement
+slug: Web/API/HTMLCanvasElement
+tags:
+  - API
+  - Canvas
+  - HTML DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLCanvasElement
+---
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+
+<p>The <strong><code>HTMLCanvasElement</code></strong> interface provides properties and methods for manipulating the layout and presentation of canvas elements. The <code>HTMLCanvasElement</code> interface also inherits the properties and methods of the {{domxref("HTMLElement")}} interface.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.height")}}</dt>
+ <dd>Is a positive <code>integer</code> reflecting the {{htmlattrxref("height", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of <code>150</code> is used.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} reflecting the {{htmlattrxref("moz-opaque", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element. It lets the canvas know whether or not translucency will be a factor. If the canvas knows there's no translucency, painting performance can be optimized.</dd>
+ <dt>{{domxref("HTMLCanvasElement.width")}}</dt>
+ <dd>Is a positive <code>integer</code> reflecting the {{htmlattrxref("width", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of <code>300</code> is used.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozPrintCallback")}}{{non-standard_inline}}</dt>
+ <dd>Is a <code>function</code> that is Initially null, Web content can set this to a JavaScript function that will be called if the page is printed. This function can then redraw the canvas at a higher resolution that is suitable for the printer being used. <a href="https://blog.mozilla.org/labs/2012/09/a-new-way-to-control-printing-output/">See this blog post.</a></dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("CanvasCaptureMediaStream")}} that is a real-time video capture of the surface of the canvas.</dd>
+ <dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt>
+ <dd>Returns a drawing context on the canvas, or null if the context ID is not supported. A drawing context lets you draw on the canvas. Calling getContext with <code>"2d"</code> returns a {{domxref("CanvasRenderingContext2D")}} object, whereas calling it with <code>"experimental-webgl"</code> (or <code>"webgl"</code>) returns a {{domxref("WebGLRenderingContext")}} object. This context is only available on browsers that implement <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt>
+ <dd>Returns a data-URL containing a representation of the image in the format specified by the <code>type</code> parameter (defaults to <code>png</code>). The returned image is in a resolution of 96dpi.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt>
+ <dd>Creates a {{domxref("Blob")}} object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.</dd>
+ <dt>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}</dt>
+ <dd>Transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main thread or on a worker.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Returns a {{domxref("File")}} object representing the image contained in the canvas; this file is a memory-based file, with the specified <code>name</code>. If <code>type</code> is not specified, the image type is <code>image/png</code>.</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('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>Adds the method <code>captureStream()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The method <code>getContext()</code> now returns a {{domxref("RenderingContext")}} rather than an opaque <code>object</code>.<br>
+    The methods <code>probablySupportsContext()</code>, <code>setContext()</code> and <code>transferControlToProxy()</code>have been added.</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>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</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>2D</code> context)</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</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>{{CompatNo}}</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> {{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</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>{{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>{{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>{{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>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 (<code>2D</code> context)</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</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>{{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>{{CompatNo}}</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>{{obsolete_inline}}</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>mozGetAsFile()</code> {{non-standard_inline}} {{deprecated_inline}}</td>
+   <td>{{CompatNo}}</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>{{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>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}} [3]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Opera Mini 5.0 and later has partial support.</p>
+
+<p>[2] Support for the third parameter, has been added in Gecko 25 only: when used with the <code>"image/jpeg"</code> type, this argument specifies the image quality.</p>
+
+<p>[3] This feature is behind a feature preference setting. In about:config, set <code>gfx.offscreencanvas.enabled</code> to <code>true</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{HTMLElement("canvas")}}.</li>
+</ul>
diff --git a/files/pt-br/web/api/htmlcanvaselement/todataurl/index.html b/files/pt-br/web/api/htmlcanvaselement/todataurl/index.html
new file mode 100644
index 0000000000..503f9cb636
--- /dev/null
+++ b/files/pt-br/web/api/htmlcanvaselement/todataurl/index.html
@@ -0,0 +1,157 @@
+---
+title: HTMLCanvasElement.toDataURL()
+slug: Web/API/HTMLCanvasElement/toDataURL
+tags:
+  - API
+  - Canvas
+  - HTMLCanvasElement
+  - Imagens
+translation_of: Web/API/HTMLCanvasElement/toDataURL
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p>O método <strong><code>HTMLCanvasElement.toDataURL()</code></strong> retorna uma <a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a>, contendo uma representação da imagem no formato especificado pelo parâmetro <code>type</code> (por padrão, esse valor é <a href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a>). A resolução da imagem retornada é de 96 dpi.</p>
+
+<ul>
+ <li>Se a altura ou largura do canvas for <code>0</code>, será retornada a string <code>"data:,"</code>.</li>
+ <li>Se o tipo solicitado não for <code>image/png</code>, mas o valor retornado começa com <code>data:image/png</code>, então o tipo da requisição não é suportado.</li>
+ <li>O Chrome também suporta o tipo <code>image/webp</code>.</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><var><em>canvas</em>.toDataURL(<em>type</em>, <em>encoderOptions</em>);</var>
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>type</code> {{optional_inline}}</dt>
+ <dd>Uma {{domxref("DOMString")}} indicando o formato da imagem. Por padrão, o formato definido é <code>image/png</code>.</dd>
+ <dt><code>encoderOptions</code> {{optional_inline}}</dt>
+ <dd>Um {{jsxref("Number")}} entre <code>0</code> e <code>1</code>, indicando a qualidade da imagem solicitada pelo tipo <code>image/jpeg</code> ou <code>image/webp</code>.<br>
+ Se esse argumento for outro valor que não de <code>0</code> a <code>1</code>, então o valor padrão (<code>0.92)</code> será usado. Outros valores serão ignorados.</dd>
+</dl>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p>Uma {{domxref("DOMString")}} contendo a <a href="/en-US/docs/Web/HTTP/data_URIs">data URI</a> solicitada.</p>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Dado este elemento {{HTMLElement("canvas")}}:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="5" height="5"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Você poderá capturar a data-URL do canvas com as seguintes linhas:</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var dataURL = canvas.toDataURL();
+console.log(dataURL);
+// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
+// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
+</pre>
+
+<h3 id="Defindo_a_qualidade_de_imagens_jpeg">Defindo a qualidade de imagens jpeg</h3>
+
+<pre class="brush: js">var fullQuality = canvas.toDataURL('image/jpeg', 1.0);
+// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
+var mediumQuality = canvas.toDataURL('image/jpeg', 0.5);
+var lowQuality = canvas.toDataURL('image/jpeg', 0.1);
+</pre>
+
+<h3 id="Example_Dynamically_change_images" name="Example:_Dynamically_change_images">Exemplo: Alterando imagens dinamicamente</h3>
+
+<p>Você poderá utilizar esta técnica em associação com os eventos do mouse para alterar dinamicamente uma imagem (escala de cinza vs. cor, neste exemplo):</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;img class="grayscale" src="myPicture.png" alt="Description of my picture" /&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js;highlight:[33]">window.addEventListener('load', removeColors);
+
+function showColorImg() {
+  this.style.display = 'none';
+  this.nextSibling.style.display = 'inline';
+}
+
+function showGrayImg() {
+  this.previousSibling.style.display = 'inline';
+  this.style.display = 'none';
+}
+
+function removeColors() {
+  var aImages = document.getElementsByClassName('grayscale'),
+      nImgsLen = aImages.length,
+      oCanvas = document.createElement('canvas'),
+      oCtx = oCanvas.getContext('2d');
+  for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId &lt; nImgsLen; nImgId++) {
+    oColorImg = aImages[nImgId];
+    nWidth = oColorImg.offsetWidth;
+    nHeight = oColorImg.offsetHeight;
+    oCanvas.width = nWidth;
+    oCanvas.height = nHeight;
+    oCtx.drawImage(oColorImg, 0, 0);
+    oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
+    aPix = oImgData.data;
+    nPixLen = aPix.length;
+    for (nPixel = 0; nPixel &lt; nPixLen; nPixel += 4) {
+      aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
+    }
+    oCtx.putImageData(oImgData, 0, 0);
+    oGrayImg = new Image();
+    oGrayImg.src = oCanvas.toDataURL();
+    oGrayImg.onmouseover = showColorImg;
+    oColorImg.onmouseout = showGrayImg;
+    oCtx.clearRect(0, 0, nWidth, nHeight);
+    oColorImg.style.display = "none";
+    oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
+  }
+}</pre>
+
+<h2 id="Especificações">Especificações</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-todataurl", "HTMLCanvasElement.toDataURL")}}</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-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>
+
+
+
+<p>{{Compat("api.HTMLCanvasElement.toDataURL")}}</p>
+
+<h2 id="See_Also" name="See_Also">Veja também</h2>
+
+<ul>
+ <li>A interface que a define, {{domxref("HTMLCanvasElement")}}.</li>
+ <li><a href="/en-US/docs/Web/HTTP/data_URIs">Data URIs</a> na referência <a href="/en-US/docs/Web/HTTP">HTTP</a>.</li>
+</ul>
diff --git a/files/pt-br/web/api/htmlcollection/index.html b/files/pt-br/web/api/htmlcollection/index.html
new file mode 100644
index 0000000000..4d462b4b6a
--- /dev/null
+++ b/files/pt-br/web/api/htmlcollection/index.html
@@ -0,0 +1,68 @@
+---
+title: HTMLCollection
+slug: Web/API/HTMLCollection
+translation_of: Web/API/HTMLCollection
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>A interface <strong><code>HTMLCollection</code></strong> representa uma coleção genérica (objeto array) de elementos (na ordem em que aparecem no documento) e oferece métodos e propriedades para selecioná-los da lista.</p>
+
+<div class="note"><strong>Nota:</strong> Esta interface é chamada <code>HTMLCollection</code> por razões históricas (antes do DOM4, coleções implementadas por esta interface somente podiam ter elementos HTML).</div>
+
+<p>Uma coleção <code>HTMLCollection</code> de um HTML DOM está linkada com o documento; ela será automaticamente atualizada quando o documento for modificado.</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("HTMLCollection.length")}} {{readonlyInline}}</dt>
+ <dd>Retorna o número de itens da coleção.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("HTMLCollection.item()")}}</dt>
+ <dd>Retorna um nó especificado por <code>index</code> da lista. o primeiro index da lista é 0. Retorna <code>null</code> se <code>index</code> não existir na lista.</dd>
+ <dt>{{domxref("HTMLCollection.namedItem()")}}</dt>
+ <dd>Retorna o nó especificado pelo ID ou, caso não tenha ID, o item cuja propriedade <code>name</code> seja igual à pesquisa. Pesquisa por <code style="font-style: normal;">name</code> só é feita em último caso, somente em HTML, e somente se os elementos referenciados suportarem o atributo <code>name</code>. Retorna <code>null</code> se nenhum nó corresponder ao nome pesquisado.</dd>
+</dl>
+
+<h2 id="Uso_no_JavaScript">Uso no JavaScript</h2>
+
+<p><code>HTMLCollection </code>expõe seus membros diretamente como propriedades, tanto por nome quanto por índice. IDs HTML podem conter : e . como caracteres válidos, o que fará necessária a utilização de colchetes para acessar as propriedades. Atualmente HTMLCollection não reconhece IDs puramente numéricos, o que pode causar conflitos com acesso em formato array, apesar do HTML5 os permitir.</p>
+
+<p>Por exemplo, assumindo que há um elemento <code>&lt;form&gt;</code> no documento e seu <code>id</code> é <code>"myForm"</code>:</p>
+
+<pre class="brush:js">var elem1, elem2;
+
+// document.forms é um HTMLCollection
+
+elem1 = document.forms[0];
+elem2 = document.forms.item(0);
+
+alert(elem1 === elem2); // exibe: "true"
+
+elem1 = document.forms.myForm;
+elem2 = document.forms.namedItem("myForm");
+
+alert(elem1 === elem2); // exibe: "true"
+
+elem1 = document.forms["named.item.with.periods"];</pre>
+
+<h2 id="Compatibilidade_entre_Browsers">Compatibilidade entre Browsers</h2>
+
+<p>Diferentes browsers se comportam de maneira diferente quando um os mais elementos são pesquisados pela string utilizada  como índice (ou o argumento <span style="font-family: consolas,monaco,andale mono,monospace;">namedItem</span>). Firefox 8 se comporta como especificado no DOM 2 e no DOM 4, retornando o primeiro elemento encontrado. WebKit browsers e o Internet Explorer, neste caso, retornam outro <span style="font-family: consolas,monaco,andale mono,monospace;">HTMLCollection </span>e o Opera retorna um {{domxref("NodeList")}} com todos os elementos encontrados.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506" title="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506">DOM Level 2 HTML, Section 1.4, Miscellaneous Object Definitions</a></li>
+ <li><a href="http://www.w3.org/TR/domcore/#interface-htmlcollection" title="http://www.w3.org/TR/domcore/#interface-htmlcollection">DOM4: HTMLCollection</a></li>
+</ul>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("NodeList")}}</li>
+ <li>{{domxref("HTMLFormControlsCollection")}}, {{domxref("HTMLOptionsCollection")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/htmlcontentelement/getdistributednodes/index.html b/files/pt-br/web/api/htmlcontentelement/getdistributednodes/index.html
new file mode 100644
index 0000000000..fa6b3bb8dc
--- /dev/null
+++ b/files/pt-br/web/api/htmlcontentelement/getdistributednodes/index.html
@@ -0,0 +1,100 @@
+---
+title: HTMLContentElement.getDistributedNodes()
+slug: Web/API/HTMLContentElement/getDistributedNodes
+tags:
+  - Componente web
+  - HTML DOM
+  - HTMLContentElement
+  - HTMLContentElement.getDistributedNodes()
+  - Property
+  - getDistributedNodes()
+translation_of: Web/API/HTMLContentElement/getDistributedNodes
+---
+<p>{{ APIRef("Web Components") }}</p>
+
+<p>O método <code><strong>HTMLContentElement.getDistributedNodes()</strong></code> retorna um static {{domxref("NodeList")}} do {{glossary("distributed nodes")}} associado com este elemento <code>&lt;content&gt;</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>nodeList</em> = <em>object</em>.getDistributedNodes()
+</pre>
+
+<h2 id="Specifications" name="Specifications">Exemplo</h2>
+
+<pre class="brush: js">//Pegue os nós distribuídos
+var nodes = myContentObject.getDistributedNodes();</pre>
+
+<h2 id="Specifications" name="Specifications">Specificações</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', '#the-content-element', 'content')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_browser">Compatibilidade do browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Componente</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Supporte básico</td>
+   <td>35</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatGeckoDesktop("28")}}</span> [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></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>37</td>
+   <td>{{CompatGeckoMobile("28")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Se Shadow DOM não é habilitado no Firefox, <code>&lt;content&gt;</code> elementos se comportará como {{domxref("HTMLUnknownElement")}}. Shadow DOM foi primeiro implementado em Firefox 28 e está atrás de uma preferência, <code>dom.webcomponents.enabled</code>, ao qual é desabilitado por padrão.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/HTMLContentElement">HTMLContentElement</a></li>
+</ul>
diff --git a/files/pt-br/web/api/htmlcontentelement/index.html b/files/pt-br/web/api/htmlcontentelement/index.html
new file mode 100644
index 0000000000..b3a23164a6
--- /dev/null
+++ b/files/pt-br/web/api/htmlcontentelement/index.html
@@ -0,0 +1,116 @@
+---
+title: HTMLContentElement
+slug: Web/API/HTMLContentElement
+tags:
+  - ContentElement
+  - Deprecated_header
+  - HTMLContentElement
+  - HTMLElement
+  - Web Components
+  - elemento depreciado
+  - shadow dom
+translation_of: Web/API/HTMLContentElement
+---
+<p>{{ APIRef("Web Components") }}</p>
+
+<p>{{Deprecated_header}}</p>
+
+<p>A interface do <code><strong>HTMLContentElement</strong></code> representa um {{HTMLElement("content")}} Element HTML, ao qual é usado em <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a>. </p>
+
+<h2 id="Properties" name="Properties">Propriedades</h2>
+
+<p><em>Esta interface herda as propriedades de {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLContentElement.select")}}</dt>
+ <dd>é um {{domxref("DOMString")}} que reflete o {{ htmlattrxref("select", "content") }} attributo HTML . O valor é uma lista de vírgula separada dos seletores CSS que selecionam o conteúdo para inserir em lugar do elemento <code>&lt;content&gt;</code>.</dd>
+</dl>
+
+<h2 id="Méthodos">Méthodos</h2>
+
+<p><em>Esta interface herda os méthodos de {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLContentElement.getDistributedNodes()")}}</dt>
+ <dd>Returna um static {{domxref("NodeList")}} do {{glossary("distributed nodes")}} associado com este elemento <code>&lt;content&gt;</code>. </dd>
+</dl>
+
+<h2 id="Specificações">Specificações</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentários</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', '#the-content-element', 'content')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_browser">Compatibilidade do browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Componentes</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>35</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatGeckoDesktop("28")}}</span> [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></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>37</td>
+   <td>{{CompatGeckoMobile("28")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Se Shadow DOM não é habilitado no Firefox, &lt;content&gt; elementos vai se comportar como {{domxref("HTMLUnknownElement")}}. Shadow DOM foi a primeira implementação do Firefox 28 e está atrásde uma preferência , <code>dom.webcomponents.enabled</code>, qual é desabilitado por padrão.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>O elemento HTML {{HTMLElement("content")}} , implementa esta interface.</li>
+ <li><a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a></li>
+</ul>
+
+<dl>
+ <dt> </dt>
+</dl>
diff --git a/files/pt-br/web/api/htmlcontentelement/seletor/index.html b/files/pt-br/web/api/htmlcontentelement/seletor/index.html
new file mode 100644
index 0000000000..63fae05c69
--- /dev/null
+++ b/files/pt-br/web/api/htmlcontentelement/seletor/index.html
@@ -0,0 +1,98 @@
+---
+title: HTMLContentElement.select
+slug: Web/API/HTMLContentElement/Seletor
+tags:
+  - API
+  - HTMLContentElement
+  - HTMLContentElement.select
+  - Select
+translation_of: Web/API/HTMLContentElement/select
+---
+<p>{{ APIRef("Web Components") }}</p>
+
+<p>A propriedade <code><strong>HTMLContentElement.select</strong></code> reflete o atributo selecionado. É um {{domxref("DOMString")}} contendo uma lista de spaço-separado de seletores CSS que seleciona o conteúdo para inserir em lugar do elemento &lt;content&gt;.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>object</em>.select = "<em>CSSselector</em> <em>CSSselector</em> ...";
+</pre>
+
+<h2 id="Specifications" name="Specifications">Exemplo</h2>
+
+<pre class="brush: js">// Select &lt;h1&gt; elements and elements with class="error"
+myContentObject.select = "h1 .error";</pre>
+
+<h2 id="Specifications" name="Specifications">Especificações</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', '#the-content-element', 'content')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_browser">Compatibilidade do browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Componente</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>35</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatGeckoDesktop("28")}}</span> [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></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>Suporte básico</td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile("28")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Se Shadow DOM não estiver habilitado no Firefox, os elementos &lt;content&gt; se comportarão como {{domxref("HTMLUnknownElement")}}. Shadow DOM foi o primeiro implementado no Firefox 28 e está atrás de uma preferência, <code>dom.webcomponents.enabled</code>, ao qual é desabilitado por padrão.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/HTMLContentElement">HTMLContentElement</a></li>
+</ul>
diff --git a/files/pt-br/web/api/htmldivelement/index.html b/files/pt-br/web/api/htmldivelement/index.html
new file mode 100644
index 0000000000..f658b94f06
--- /dev/null
+++ b/files/pt-br/web/api/htmldivelement/index.html
@@ -0,0 +1,133 @@
+---
+title: HTMLDivElement
+slug: Web/API/HTMLDivElement
+tags:
+  - API
+  - HTMLDivElement
+  - Interface
+  - PrecisaNovoLayout
+  - Referência(2)
+translation_of: Web/API/HTMLDivElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<div> </div>
+
+<p>A interface <code><strong>HTMLDivElement</strong> </code>fornece propriedades especiais ( além da interface normal {{domxref ("HTMLElement")}} que também está a sua disposição por herança ) para manipular elementos div.</p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>As propriedades são herdadas de seu pai, {{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Nome</th>
+   <th scope="col">Tipo</th>
+   <th scope="col">Descrição</th>
+  </tr>
+  <tr>
+   <td><code>align</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Propriedade enumerada indicando alinhamento  dos conteúdos do elemento, respeitando ao contexto geral. Os valores possíveis são <code>"left"</code>, <code>"right"</code>, <code>"justify"</code>, e<code>"center"</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Nenhum método específico; os métodos são herdados de seu pai, {{domxref ("HTMLElement")}}.</em></p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "grouping-content.html#the-div-element", "HTMLDivElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-div-element", "HTMLDivElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>No change from {{SpecName("DOM2 HTML")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-22445964', 'HTMLDivElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change from {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-22445964', 'HTMLDivElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</h2>
+
+<h2 id="CompatibilityTable"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{CompatibilityTable}}</span></h2>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</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>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</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="Ver_também">Ver também</h2>
+
+<ul>
+ <li>O elemento HTML implementar essa interface: {{HTMLElement ("div")}}.</li>
+</ul>
diff --git a/files/pt-br/web/api/htmlelement/blur/index.html b/files/pt-br/web/api/htmlelement/blur/index.html
new file mode 100644
index 0000000000..25a2273aec
--- /dev/null
+++ b/files/pt-br/web/api/htmlelement/blur/index.html
@@ -0,0 +1,89 @@
+---
+title: HTMLElement.blur()
+slug: Web/API/HTMLElement/blur
+tags:
+  - API
+  - DOM HTML
+  - Foco
+  - HTMLElement
+  - Referencia
+  - metodo
+translation_of: Web/API/HTMLOrForeignElement/blur
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>O método <code><strong>HTMLElement.blur()</strong></code> remove o foco do teclado no elemento corrente.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>elemento</em>.blur();</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Removendo_o_foco_de_um_input_de_texto">Removendo o foco de um input de texto</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;input type="text" id="meuTexto" value="Texto Exemplo"&gt;
+&lt;br&gt;&lt;br&gt;
+&lt;button type="button" onclick="focusInput()"&gt;Clique para definir o foco&lt;/button&gt;
+&lt;button type="button" onclick="blurInput()"&gt;Clique para remover o foco&lt;/button&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">function focusInput() {
+  document.getElementById('meuTexto').focus();
+}
+function blurInput() {
+  document.getElementById('meuTexto').blur();
+}</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{ EmbedLiveSample('Remove_focus_from_a_text_input') }}</p>
+
+<h2 id="Especificação">Especificação</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'editing.html#dom-blur', 'blur')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#blur()-0', 'blur')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'editing.html#dom-blur', 'blur')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-28216144', 'blur')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.blur")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>Método DOM {{domxref("HTMLElement.focus()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/htmlelement/click/index.html b/files/pt-br/web/api/htmlelement/click/index.html
new file mode 100644
index 0000000000..8bfe8a9d66
--- /dev/null
+++ b/files/pt-br/web/api/htmlelement/click/index.html
@@ -0,0 +1,115 @@
+---
+title: HTMLElement.click()
+slug: Web/API/HTMLElement/click
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Method
+  - Reference
+translation_of: Web/API/HTMLElement/click
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>O método <code><strong>HTMLElement.click()</strong></code> simula o clique do mouse em um elemento.</p>
+
+<p>Quando clique é usado com elementos que o suportam (por exemplo, um dos {{HTMLElement ("input")}} tipos listados acima), ele também dispara evento de clique do elemento que vai propagar pelos elementos mais acima na árvore de documentos (ou cadeia do evento) e disparando seus eventos de clique também. No entanto, o evento de clique, propagado como bubble, não vai iniciar a navegação do elemento {{HTMLElement("a")}} como se uma verdadeiro clique do mouse tivesse sido recebido. </p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>elt</em>.click()</pre>
+
+<h2 id="Especificação">Especificação</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibilidade">Browser compatibilidade</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>20<sup>[3]</sup></td>
+   <td>5<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>6<sup>[3]</sup></td>
+  </tr>
+  <tr>
+   <td><code>input@file (limited)</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>12.10</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>input@file (full)</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4</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>Feature</th>
+   <th>Android</th>
+   <th>Chrome for 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>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Antes Gecko 5.0 {{geckoRelease("5.0")}}, Gecko não implementa o método de clique em outros elementos que podem ser esperados para responder a cliques do mouse como links (elementos {{HTMLElement("a")}}), nem seria necessariamente acionado o evento clique de outros elementos.</p>
+
+<p>[2] Em versões do Opera o método <code>click()</code> irá silenciosamente ser ignorado se for realizado baseado no motor de layout Presto em {{HTMLElement("input")}} com o atributo type definido para o arquivo e seu CSS {{cssxref('display')}} propriedade definida como nenhum.</p>
+
+<p>[3] As versões mais antigas tinham <code>HTMLInputElement.click()</code> e <code>HTMLButtonElement.click() </code>apenas.</p>
diff --git a/files/pt-br/web/api/htmlelement/contenteditable/index.html b/files/pt-br/web/api/htmlelement/contenteditable/index.html
new file mode 100644
index 0000000000..22d356ae0d
--- /dev/null
+++ b/files/pt-br/web/api/htmlelement/contenteditable/index.html
@@ -0,0 +1,102 @@
+---
+title: HTMLElement.contentEditable
+slug: Web/API/HTMLElement/contentEditable
+translation_of: Web/API/HTMLElement/contentEditable
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>A propriedade <strong><code>HTMLElement.contentEditable </code></strong>é usada para indicar se o elemento é editável ou não. Esse atributo enumerado pode ter os seguintes valores:</p>
+
+<ul>
+ <li><code>"true"</code> Indica que o elemento é editável;</li>
+ <li><code>"false"</code> Indica que o elemento não pode ser editável;</li>
+ <li><code>"inherit"</code> Indica que o elemento herda o status editável de seu pai.</li>
+</ul>
+
+<p>Você pode usar a propriedade {{domxref( "HTMLElement.isContentEditable")}} para testar o valor calculado {{domxref ("Boolean")}} desta propriedade.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>editable</em> = element.contentEditable element.contentEditable= "true"
+</pre>
+
+<h2 id="Especificação">Especificação</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_Browsers">Compatibilidade Browsers</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>11</td>
+   <td>{{CompatGeckoDesktop(1.9)}}</td>
+   <td>6<sup>[1]</sup></td>
+   <td>10.6</td>
+   <td>3.2</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</td>
+   <td>{{CompatGeckoMobile(1.9)}}</td>
+   <td>6<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer has a bunch of bugs regarding the implementation of this feature. IE10 crashes in some cases when editing lists (<a href="https://connect.microsoft.com/IE/feedback/details/796187/internet-explorer-10-crash-with-contenteditable-list">bug 796187</a>). IE11+ uses invalid positioning for caret when an element is floated (<a href="https://connect.microsoft.com/IE/feedback/details/858749">bug 858749</a>). In IE9-10 the window freezes when using mousewheel while dragging (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/809254">bug 809254</a>). IE10-11 does not fire the <a href="/en-US/docs/Web/Events/input"><code>input</code></a> event (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/794285">bug 794285</a>). IE10 crashes after selecting "Cut" from the context menu (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/801770">bug 801770</a>). IE11+ does not allow placing the caret in an empty table cell (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/807199">bug 807199</a>). IE10 does not fire <a href="/en-US/docs/Web/Events/contextmenu"><code>contextmenu</code></a> event when right-clicking on misspelled words (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/774350">bug 774350</a>). IE11 appends {{HTMLElement("br")}} elements to {{HTMLElement("body")}} when showing/hiding an {{HTMLElement("iframe")}} with contenteditable document inside (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/864804">bug 864804</a>). IE11 does not allow disabling resize handles for images/inputs (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/907422">bug 907422</a>).</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.isContentEditable")}}</li>
+ <li>The <a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a> global attribute.</li>
+ <li><a href="https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480">Why ContentEditable is Terrible, Or: How the Medium Editor Works</a></li>
+</ul>
diff --git a/files/pt-br/web/api/htmlelement/contextmenu/index.html b/files/pt-br/web/api/htmlelement/contextmenu/index.html
new file mode 100644
index 0000000000..e03c61a256
--- /dev/null
+++ b/files/pt-br/web/api/htmlelement/contextmenu/index.html
@@ -0,0 +1,44 @@
+---
+title: HTMLElement.contextMenu
+slug: Web/API/HTMLElement/contextMenu
+tags:
+  - API
+  - Depreciado
+  - Elemento
+  - HTML
+  - HTML DOM
+  - Propriedade
+  - Referencia
+  - UX
+translation_of: Web/API/HTMLElement/contextMenu
+---
+<div>{{APIRef("HTML DOM")}}{{deprecated_header()}}
+<p>A propriedade <code><strong>HTMLElement.contextMenu</strong></code> refere-se ao menu de contexo atribuído aum elemento usando o {{htmlattrxref("contextmenu")}} atributo. O menu em sí é criado usando o {{HTMLElement("menu")}} elemento.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <var>elementContextMenu</var> = <var>element</var>.contextMenu;
+</pre>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">var contextMenu = document.getElementById("element").contextMenu;
+
+// Altere o label da primeira entrada do menu
+contextMenu.firstElementChild.label = "New label";
+</pre>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pull-request.</div>
+
+<p>{{Compat("api.HTMLElement.contextMenu")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{htmlattrxref("contextmenu")}}</li>
+ <li>{{HTMLElement("menu")}}</li>
+ <li>{{HTMLElement("menuitem")}}</li>
+</ul>
+</div>
diff --git a/files/pt-br/web/api/htmlelement/dataset/index.html b/files/pt-br/web/api/htmlelement/dataset/index.html
new file mode 100644
index 0000000000..2cb4ba63b0
--- /dev/null
+++ b/files/pt-br/web/api/htmlelement/dataset/index.html
@@ -0,0 +1,97 @@
+---
+title: HTMLElement.dataset
+slug: Web/API/HTMLElement/dataset
+translation_of: Web/API/HTMLOrForeignElement/dataset
+---
+<p>{{ APIRef }}</p>
+
+<p>A propriedade <code><strong>HTMLElement.dataset</strong></code> permite o acesso, em modo de leitura e escrita, a todos os <a href="/en/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">atributos de dados personalizado</a> (<em>data-*</em>) no elemento. Ele é um mapa de <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">DOMString</a>, com uma entrada para cada atributo de dados personalizado.</p>
+
+<p>O nome de um atributo de dados customizado inicia com <code>data-</code>. Ele deve conter somente letras, números e os seguintes caracteres: dash (<code>-</code>), dot (<code>.</code>), collon(<code>:</code>), underscore (<code>_</code>). Além disso, ele não deve conter letras ASCII captalizadas (<code>A</code> à <code>Z</code>).</p>
+
+<p>Um atributo de dados personalizado é transformado em uma chave para uma entrada no {{ domxref("DOMStringMap") }} de acordo com as seguintes regras</p>
+
+<ul>
+ <li>O prefixo <code>data-</code> é removido (incluindo o dash);</li>
+ <li>Para qualquer dash (<code>U+002D</code>) seguido por uma ASCII letra minúscula (<code>a</code><span style="line-height: 1.5;"> à </span><code>z</code>)<span style="line-height: 1.5;">, o dash é removido e a letra que segue é tranformada em maíscula;</span></li>
+ <li>outros caracteres (incluindo outros dash) são deixados inalterados.</li>
+</ul>
+
+<p>A transformação oposta, que mapeia uma chave para um nome de atributo, usa as seguintes regras:</p>
+
+<ul>
+ <li>Restrição: um dash pode não ser imediatamente seguido de uma letra ASCII minúscula (<code>a</code> à <code>z</code>)(antes da transformação);</li>
+ <li>Um prefixo <code>data-</code> é adicionado;</li>
+ <li>Qualquer caractere ASCII maiúsculo (<code>A</code> à <code>Z</code>) é transformado em um dash seguido pela sua forma mínúscula;</li>
+ <li>outros caracteres são deixados inalterados.</li>
+</ul>
+
+<p>A restrição nas regras acima garantem que as duas trasnformações são inversa uma da outra.</p>
+
+<p>Por exemplo, o atributo <code>data-abc-def</code> corresponde a chave <code>abcDef</code>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>element</em>.dataset.<em>camelCasedName</em>;
+<em>element.</em>dataset.<em>camelCasedName</em> = <em>string</em>;</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<pre class="brush: js">&lt;div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth&gt;John Doe
+&lt;/div&gt;
+
+var el = document.querySelector('#user');
+
+// el.id == 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.
+
+// 'someDataAttr' in el.dataset === false
+
+el.dataset.someDataAttr = 'mydata';
+// 'someDataAttr' in el.dataset === true
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Espeficicação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sem mudanças desde o último  snapshot, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}, sem mudanças desde {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot de {{SpecName('HTML WHATWG')}}, definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_Browsers">Compatibilidade com Browsers</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.HTMLElement.dataset")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A classe HTML <a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a> de atributos globais.</li>
+</ul>
diff --git a/files/pt-br/web/api/htmlelement/focus/index.html b/files/pt-br/web/api/htmlelement/focus/index.html
new file mode 100644
index 0000000000..8f798b3d86
--- /dev/null
+++ b/files/pt-br/web/api/htmlelement/focus/index.html
@@ -0,0 +1,62 @@
+---
+title: HTMLElement.focus()
+slug: Web/API/HTMLElement/focus
+translation_of: Web/API/HTMLOrForeignElement/focus
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>O método <strong><code>HTMLElement.focus()</code></strong>  seta o foco em um determinado elemento em especifico, caso esse elemento permita ter o foco neste elemento.</p>
+
+<h2 id="Syntax" name="Syntax">Síntaxe</h2>
+
+<pre class="syntaxbox">element.focus()</pre>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Caso você utilize o <code>HTMLElement.focus()</code> por meio da manipulação de um evento mousedown , você deve utilizar o evento <code>event.preventDefault()</code> a fim de o foco não sair do arquivo <code>HTMLElement</code>.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>Método DOM {{domxref("HTMLElement.blur()")}} para remover o foco de um determinado elemento.</li>
+ <li>{{ domxref("document.activeElement") }} para saber qual elemento do html que está com o foco. </li>
+</ul>
diff --git a/files/pt-br/web/api/htmlelement/index.html b/files/pt-br/web/api/htmlelement/index.html
new file mode 100644
index 0000000000..f264d6158b
--- /dev/null
+++ b/files/pt-br/web/api/htmlelement/index.html
@@ -0,0 +1,410 @@
+---
+title: HTMLElement
+slug: Web/API/HTMLElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - NeedsMobileBrowserCompatibility
+  - NeedsNewLayout
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - TopicStub
+translation_of: Web/API/HTMLElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<div> </div>
+
+<p>A interface <strong><code>HTMLElement</code></strong> representa qualquer elemento <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>. Alguns elementos implementam diretamente essa interface, outros a implementam por meio de uma interface que a herda.</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>Propriedades herdadas do elemento pai, {{domxref("Element")}}, e aquelas implementadas de {{domxref("GlobalEventHandlers")}} e de {{domxref("TouchEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.accessKey")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the access key assigned to the element.</dd>
+ <dt>{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the element's assigned access key.</dd>
+ <dt>{{domxref("HTMLElement.contentEditable")}}</dt>
+ <dd>Is a {{domxref("DOMString")}}, where a value of <code>"true"</code> means the element is editable and a value of <code>"false"</code> means it isn't.</dd>
+ <dt>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} that indicates whether or not the content of the element can be edited.</dd>
+ <dt>{{domxref("HTMLElement.contextMenu")}}</dt>
+ <dd>Is an {{domxref("HTMLMenuElement")}} representing the contextual menu associated with the element. It may be null</dd>
+ <dt>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMStringMap")}} that allows access to read and write the element custom data attributes (<code>data-*</code>) .</dd>
+ <dt>{{domxref("HTMLElement.dir")}}</dt>
+ <dd>Is a {{domxref("DOMString")}}, reflecting the <code>dir</code> global attribute, representing the directionality of the element. Possible values are <code>"ltr"</code>, <code>"rtl"</code>, and <code>"auto"</code>.</dd>
+ <dt>{{domxref("HTMLElement.draggable")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element can be dragged.</dd>
+ <dt>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMSettableTokenList")}} reflecting the <code>dropzone</code> global attribute and describing the behavior of the element regarding a drop operation.</dd>
+ <dt>{{domxref("HTMLElement.hidden")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element is hidden or not.</dd>
+ <dt>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd>
+ <dt>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</dt>
+ <dd>Returns an {{jsxref("Object")}}…</dd>
+ <dt>{{domxref("HTMLElement.lang")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.</dd>
+ <dt>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code> containing the height of an element, relative to the layout.</dd>
+ <dt>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code>, the distance from this element's left border to its <code>offsetParent</code>'s left border.</dd>
+ <dt>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns an {{domxref("Element")}} that is the element from which all offset calculations are currently computed.</dd>
+ <dt>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code>, the distance from this element's top border to its <code>offsetParent</code>'s top border.</dd>
+ <dt>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>double</code> containing the width of an element, relative to the layout.</dd>
+ <dt>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns an {{domxref("HTMLPropertiesCollection")}}…</dd>
+ <dt>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} that controls <a href="/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms" title="en/Controlling_spell_checking_in_HTML_forms">spell-checking</a>. It is present on all HTML elements, though it hasn't an effect on all of them.</dd>
+ <dt>{{domxref("HTMLElement.style")}}</dt>
+ <dd>Is {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.</dd>
+ <dt>{{domxref("HTMLElement.tabIndex")}}</dt>
+ <dd>Is a <code>long</code> representing the position of the element in the tabbing order.</dd>
+ <dt>{{domxref("HTMLElement.title")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.</dd>
+ <dt>{{domxref("HTMLElement.translate")}} {{experimental_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}}</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<p>Most events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}}, implemented by <code>HTMLElement</code>. A few more are specific to <code>HTMLElement</code>.</p>
+
+<dl>
+ <dt>{{ domxref("HTMLElement.oncopy") }}  {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>copy</code> event ({{bug("280959")}}).</dd>
+ <dt>{{ domxref("HTMLElement.oncut") }}  {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>cut</code> event ({{bug("280959")}}).</dd>
+ <dt>{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}</dt>
+ <dd>Returns the event handling code for the <code>paste</code> event ({{bug("280959")}}).</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchstart")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchend")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchmove")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchenter")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchleave")}} event.</dd>
+ <dt>{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}</dt>
+ <dd>Returns the event handling code for the {{event("touchcancel")}} event.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("Element")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.blur()")}}</dt>
+ <dd>Removes keyboard focus from the currently focused element.</dd>
+ <dt>{{domxref("HTMLElement.click()")}}</dt>
+ <dd>Sends a mouse click event to the element.</dd>
+ <dt>{{domxref("HTMLElement.focus()")}}</dt>
+ <dd>Makes the element the current keyboard focus.</dd>
+ <dt>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</dt>
+ <dd>Makes the spell checker runs on the element.</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('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the following properties: <code>offsetParent</code>, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, and <code>offsetHeight</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Added the following properties: <code>translate</code>, <code>itemScope</code>, <code>itemType</code>, <code>itemId</code>, <code>itemRef</code>, <code>itemProp</code>, <code>properties</code>, and <code>itemValue</code>.<br>
+    Added the following method: <code>forceSpellcheck()</code>.<br>
+    Moved the <code>onXYZ</code> attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Added the following properties: <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>, and all the <code>onXYZ</code> properties.<br>
+    Moved the <code>id</code> and <code>className</code> properties to the {{domxref("Element")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>No change from {{SpecName('DOM2 HTML')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</td>
+   <td>{{Spec2('DOM1')}}</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("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.style", "style")}}</td>
+   <td>{{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</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>
+  <tr>
+   <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</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>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>
+    <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>
+  <tr>
+   <td>{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}</td>
+   <td>{{CompatGeckoMobile("1.9")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/htmlelement/lang/index.html b/files/pt-br/web/api/htmlelement/lang/index.html
new file mode 100644
index 0000000000..6f877f1e33
--- /dev/null
+++ b/files/pt-br/web/api/htmlelement/lang/index.html
@@ -0,0 +1,51 @@
+---
+title: HTMLElement.lang
+slug: Web/API/HTMLElement/lang
+translation_of: Web/API/HTMLElement/lang
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>The <code><strong>HTMLElement.lang</strong></code> property gets or sets the base language of an element's attribute values and text content.</p>
+
+<p>The language code returned by this property is defined in <a class="external" href="http://tools.ietf.org/html/rfc1766" title="http://tools.ietf.org/html/rfc1766">RFC 1766</a>. Common examples include "en" for English, "ja" for Japanese, "es" for Spanish and so on. The default value of this attribute is <code>unknown</code>. Note that this attribute, though valid at the individual element level described here, is most often specified for the root element of the document.</p>
+
+<p>This also only works with the <code>lang</code> attribute and not with <code>xml:lang</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var <var>languageUsed</var> = elementNodeReference.lang; // Get the value of lang
+elementNodeReference.lang = <var>NewLanguage</var>; // Set new value for lang
+</pre>
+
+<p><var>languageUsed é uma variável string que obtém o idioma no qual o texto do elemento atual é gravado. NewLanguage é uma variável  string cujo valor define o idioma no qual o texto do elemento atual é gravado.</var></p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush: js">// this snippet compares the base language and
+// redirects to another url based on language
+if (document.documentElement.lang === "en") {
+  window.location.href = "Some_document.html.en";
+} else if (document.documentElement.lang === "ru") {
+  window.location.href = "Some_document.html.ru";
+}</pre>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-59132807', 'lang')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/pt-br/web/api/htmlelement/offsetheight/index.html b/files/pt-br/web/api/htmlelement/offsetheight/index.html
new file mode 100644
index 0000000000..fdf05ca699
--- /dev/null
+++ b/files/pt-br/web/api/htmlelement/offsetheight/index.html
@@ -0,0 +1,126 @@
+---
+title: HTMLElement.offsetHeight
+slug: Web/API/HTMLElement/offsetHeight
+translation_of: Web/API/HTMLElement/offsetHeight
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p>A propriedade <strong><code>HTMLElement.offsetHeight</code></strong> é somente leitura e retorna um valor do tipo inteiro a altura de um elemento incluindo  padding-top+padding-bottom+border-top+border-bottom.</p>
+
+<p>Typically, an element's <code>offsetHeight</code> is a measurement in pixels of the element's CSS height, including border, padding and the element's horizontal scrollbar (if present, if rendered).</p>
+
+<p>For the document body object, the measurement includes total linear content height instead of the element's CSS height. Floated elements extending below other linear content are ignored.</p>
+
+<div class="note">
+<p>This property will round the value to an integer. If you need a fractional value, use {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Syntax</h2>
+
+<pre class="syntaxbox">var <em>intElemOffsetHeight</em> = <em>element</em>.offsetHeight;</pre>
+
+<p><em>intElemOffsetHeight</em> is a variable storing an integer corresponding to the offsetHeight pixel value of the element. The offsetHeight property is read-only.</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p> </p>
+
+<p>              <img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>
+
+
+<p>The example image above shows a scrollbar and an offsetHeight which fits on the window. However, non-scrollable elements may have large offsetHeight values, much larger than the visible content. These elements are typically contained within scrollable elements; consequently these non-scrollable elements may be completely or partly invisible, depending on the scrollTop setting of the scrollable container.</p>
+
+<p> </p>
+
+<h2 id="Specification" name="Specification">Specification</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('CSSOM View', '#dom-htmlelement-offsetHeight', 'offsetLeft')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p><code>offsetHeight</code> is a property of the DHTML object model which was first introduced by MSIE. It is sometimes referred to as an element's physical/graphical dimensions, or an element's border-box height.</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>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>31</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>In compliance with the specification, this property will return <code>null</code> on Webkit if the element is hidden (the <code>style.display</code> of this element or any ancestor is <code>"none"</code>) or if the <code>style.position</code> of the element itself is set to <code>"fixed"</code>.</p>
+
+<p>This property will return <code>null</code> on Internet Explorer (9) if the <code>style.position</code> of the element itself is set to <code>"fixed"</code>. (Having <code>display:none</code> does not affect this browser.)</p>
+
+<h2 id="See_Also" name="See_Also">See Also</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/pt-br/web/api/htmlelement/offsetleft/index.html b/files/pt-br/web/api/htmlelement/offsetleft/index.html
new file mode 100644
index 0000000000..68f5f0b986
--- /dev/null
+++ b/files/pt-br/web/api/htmlelement/offsetleft/index.html
@@ -0,0 +1,142 @@
+---
+title: HTMLElement.offsetLeft
+slug: Web/API/HTMLElement/offsetLeft
+tags:
+  - API
+  - ApenasLeitura
+  - Propriedade
+  - Referência(2)
+translation_of: Web/API/HTMLElement/offsetLeft
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>O <strong><code>HTMLElement.offsetLeft</code></strong> é um método apenas de leitura que retorna a medida, em pixels, da distância do canto superior esquerdo do elemento atual para o nó {{domxref("HTMLElement.offsetParent")}}.</p>
+
+<p>Para elementos "block-level", que ocupam todo o espaço do elemento pai, o <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, e <code>offsetHeight</code> representam a borda de um elemento relativo ao <code>offsetParent</code>.</p>
+
+<p>Entretando, para elementos "inline-level"  (como o <strong>span</strong>) que podem envolver de uma linha para outra, o <code>offsetTop</code> e <code>offsetLeft</code> representam a posição da primeira borda (use {{domxref("Element.getClientRects()")}} para retornar a largura e altura), enquanto <code>offsetWidth</code> e <code>offsetHeight</code> representam as dimensões do bloco delimitador (use {{domxref("Element.getBoundingClientRect()")}} pra retornar sua posição). Portanto, um bloco que possua um left, top, widht ou height do <code>offsetLeft, offsetTop, offsetWidth</code> e <code>offsetHeight</code> não será um delimitador para um span com texto envolvido.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="eval"><em>left</em> = <em>element</em>.offsetLeft;
+</pre>
+
+<p><code>left</code> é um número inteiro representando o deslocamento para esquerda, em pixels,  do elemento pai mais próximo posicionado com relative.</p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre>var colorTable = document.getElementById("t1");
+var tOLeft = colorTable.offsetLeft;
+
+if (tOLeft &gt; 5) {
+  // deslocamento à esquerda maior que 5: faça alguma coisa
+}
+</pre>
+
+<p>Esse exemplo mostra uma frase 'longa' envolvida por uma div com uma borda azul, e uma caixa vermelha que deveria delimitar o span.</p>
+
+<p><img alt="Image:offsetLeft.jpg" class="internal" src="/@api/deki/files/790/=OffsetLeft.jpg"></p>
+
+<pre>&lt;div style="width: 300px; border-color:blue;
+  border-style:solid; border-width:1;"&gt;
+  &lt;span&gt;Short span. &lt;/span&gt;
+  &lt;span id="long"&gt;Long span that wraps within this div.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="box" style="position: absolute; border-color: red;
+  border-width: 1; border-style: solid; z-index: 10"&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+  var box = document.getElementById("box");
+  var long = document.getElementById("long");
+  box.style.left = long.offsetLeft + document.body.scrollLeft + "px";
+  box.style.top = long.offsetTop + document.body.scrollTop + "px";
+  box.style.width = long.offsetWidth + "px";
+  box.style.height = long.offsetHeight<span style="line-height: normal;"> + "px"</span><span style="line-height: normal;">;
+</span><span style="line-height: normal;">&lt;/script&gt; </span></pre>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-htmlelement-offsetleft', 'offsetLeft')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibility" name="Compatibility">Compatibilidade do navegador</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>Suporte Básico</td>
+   <td>{{CompatVersionUnknown}}</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 para Android</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Em conformidade com a especificação, essa propriedade  retornará <code>null no</code> Webkit se o elemento não estiver sendo exibido (o <code>style.display</code> desse elemento ou ancestral estiver como <code>"none"</code>) ou se o <code>style.position</code> do elemento estiver setado como <code>"fixed"</code>.</p>
+
+<p>Essa propriedade retornará <code>null</code> no Internet Explorer (9) se o <code>style.position</code> do elemento estiver setado como <code>"fixed"</code>. (Ter <code>display:none</code> não afeta esse browser.)</p>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.offsetParent")}}, {{domxref("HTMLElement.offsetTop")}}, {{domxref("HTMLElement.offsetWidth")}}, {{domxref("HTMLElement.offsetHeight")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/htmlelement/offsetparent/index.html b/files/pt-br/web/api/htmlelement/offsetparent/index.html
new file mode 100644
index 0000000000..d08c3d3e09
--- /dev/null
+++ b/files/pt-br/web/api/htmlelement/offsetparent/index.html
@@ -0,0 +1,40 @@
+---
+title: HTMLElement.offsetParent
+slug: Web/API/HTMLElement/offsetParent
+translation_of: Web/API/HTMLElement/offsetParent
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>A propriedade somente de leitura <strong><code>HTMLElement.offsetParent</code></strong> retorna uma referência ao objeto ao qual está contido(mais próximo na hierarquia do conteúdo) posicionado contendo o elemento. Caso o elemento não esteja posicionado, mais próximo a célula da tabela ou do elemento raiz (nos padrões do modo de conformidade do <code>html; no modo quirks de redenrização) é o</code> <code>offsetParent</code>. quando o elemento está definido<font face="Consolas, Liberation Mono, Courier, monospace"> </font><code>style.display </code>para "none", <code>offsetParent</code> re<font face="Consolas, Liberation Mono, Courier, monospace">torna null</font>. A propriedade <code>offsetParent</code> é útil devido a {{domxref("HTMLElement.offsetTop","offsetTop")}} e {{domxref("HTMLElement.offsetLeft","offsetLeft")}} serem relativos ao seu preenchimento da borda.</p>
+
+<pre class="syntaxbox"><var>parentObj</var> = element.offsetParent;
+</pre>
+
+<ul>
+ <li><var>parentObj</var> é uma referência de objeto ao elemento no qual o elemento corrente é offset.</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Especificação</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('CSSOM View', '#dom-htmlelement-offsetparent', 'offsetParent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibility" name="Compatibility">Compatibilidade do Navegador</h2>
+
+<p>{{Compat("api.HTMLElement.offsetParent")}}</p>
diff --git a/files/pt-br/web/api/htmlelement/offsettop/index.html b/files/pt-br/web/api/htmlelement/offsettop/index.html
new file mode 100644
index 0000000000..f0a19ee86d
--- /dev/null
+++ b/files/pt-br/web/api/htmlelement/offsettop/index.html
@@ -0,0 +1,62 @@
+---
+title: HTMLElement.offsetTop
+slug: Web/API/HTMLElement/offsetTop
+tags:
+  - API
+  - ApenasLeitura
+  - Propriedade
+translation_of: Web/API/HTMLElement/offsetTop
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>O <strong><code>HTMLElement.offsetTop</code></strong> é um método apenas de leitura que retorna a medida, em pixels, da distância do elemento atual em relação ao topo do {{domxref("HTMLelement.offsetParent","offsetParent")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>topPos</var> = element.offsetTop;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parâmetros</h3>
+
+<ul>
+ <li><code>topPos</code> é o número, em pixels, que representa a distância do elemento para o topo do elemento pai mais próximo posicionado com relative.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:js">var d = document.getElementById("div1");
+var topPos = d.offsetTop;
+
+if (topPos &gt; 10) {
+  // deslocamento em relação ao topo maior
+  // que 10pixels do topo
+}</pre>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-htmlelement-offsettop', 'offsetTop')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibility" name="Compatibility">Compatibilidade do navegador</h2>
+
+<p>{{Compat("api.HTMLElement.offsetTop")}}</p>
+
+<p>Em conformidade com a especificação, essa propriedade retornará <code>null</code> no Webkit se o elemento não estiver sendo exibido (o <code>style.display</code> desse elemento ou ancestral estiver como <code>"none"</code>) ou se o <code>style.position</code> do elemento estiver setado como <code>"fixed"</code>.</p>
+
+<p>Essa propriedade retornará <code>null</code> no Internet Explorer (9) se o <code>style.position</code> do elemento estiver setado como <code>"fixed"</code>. (Ter <code>display:none</code> não afeta esse browser.)</p>
diff --git a/files/pt-br/web/api/htmlelement/offsetwidth/index.html b/files/pt-br/web/api/htmlelement/offsetwidth/index.html
new file mode 100644
index 0000000000..63d60ee4c1
--- /dev/null
+++ b/files/pt-br/web/api/htmlelement/offsetwidth/index.html
@@ -0,0 +1,65 @@
+---
+title: HTMLElement.offsetWidth
+slug: Web/API/HTMLElement/offsetWidth
+translation_of: Web/API/HTMLElement/offsetWidth
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><code>A propriedade<strong> HTMLElement.offsetWidth</strong></code> é de somente leitura e retorna a largura de um elemento no layout.  Normalmente, o <code>offsetWidth</code> é uma medida que inclui as bordas do elemento, seu padding horizontal e o vertical scrollbar (se presente e renderizado) e também a largura CSS do elemento.</p>
+
+<p>Sintaxe </p>
+
+<pre class="syntaxbox">var<em> offsetWidth</em> =<em>element</em>.offsetWidth;
+</pre>
+
+<p><code>offsetWidth</code> é uma propriedade somente leitura.</p>
+
+<div class="note">
+<p>Esta propriedade irá arredondar o valor para um inteiro. se você precisa um valor fracionado, use {{ domxref("element.getBoundingClientRect()") }}.</p>
+</div>
+
+<p> </p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<p> </p>
+
+<p>              <img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>
+
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Situação</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-htmlelement-offsetwidth', 'offsetWidth')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">Notas</h3>
+
+<p><code>offsetWidth</code> é uma propriedade do modelo de objeto <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> que foi primeiro apresentado pelo MSIE. Algumas vezes referenciado como as dimensões físicas/gráficas do elemento, ou a largura do border-box.</p>
+
+<h2 id="Compatibilidade_de_Browsers">Compatibilidade de Browsers</h2>
+
+<p>{{Compat("api.HTMLElement.offsetWidth")}}</p>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Element.clientWidth")}}</li>
+ <li>{{domxref("Element.scrollWidth")}}</li>
+ <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determinando as dimensões dos elementos</a></li>
+</ul>
+
+<div class="noinclude"> </div>
diff --git a/files/pt-br/web/api/htmlinputelement/index.html b/files/pt-br/web/api/htmlinputelement/index.html
new file mode 100644
index 0000000000..2537ee7395
--- /dev/null
+++ b/files/pt-br/web/api/htmlinputelement/index.html
@@ -0,0 +1,643 @@
+---
+title: HTMLInputElement
+slug: Web/API/HTMLInputElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - NeedsNewLayout
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLInputElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<div></div>
+
+<p>A interface HTMLInputElement fornece propriedades e métodos especiais (além da interface regular {{domxref ("HTMLElement")}}) que também tem disponível por herança) para manipular o layout e a apresentação dos elementos de entrada.</p>
+
+<h2 id="Properties" name="Properties">Propriedades</h2>
+
+<p><em>Inherits propriedades dos parentes, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Name</th>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>accept</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflete o {{ htmlattrxref("accept", "input") }} atributo HTML, contendo uma lista separada por vírgula de tipos de arquivos aceitos pelo servidor quando {{htmlattrxref("type","input")}} é <code>file</code>.</td>
+  </tr>
+  <tr>
+   <td><code>accessKey</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Um único caractere que alterna o foco de entrada para o controle.</td>
+  </tr>
+  <tr>
+   <td><code>align</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Alinhamento do elemento.</td>
+  </tr>
+  <tr>
+   <td><code>alt</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflete o {{ htmlattrxref("alt", "input") }} atributo HTML, contendo texto alternativo para usar quando {{htmlattrxref("type","input")}} é <code>image.</code></td>
+  </tr>
+  <tr>
+   <td><code>autocapitalize</code> {{experimental_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Define o comportamento de capitalização para entrada do usuário. Valores válidos são <code>none</code>, <code>off</code>, <code>characters</code>, <code>words</code>, ou <code>sentences</code>.</td>
+  </tr>
+  <tr>
+   <td><code>autocomplete</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{htmlattrxref("autocomplete", "input")}} HTML attribute, indicating whether the value of the control can be automatically completed by the browser. Ignored if the value of the {{htmlattrxref("type","input")}} attribute is <span style="font-family: courier new;">hidden</span>, <span style="font-family: courier new;">checkbox</span>, <span style="font-family: courier new;">radio</span>, <span style="font-family: courier new;">file</span>, or a button type (<span style="font-family: courier new;">button</span>, <span style="font-family: courier new;">submit</span>, <span style="font-family: courier new;">reset</span>, <span style="font-family: courier new;">image</span>). Possible values are:
+    <ul>
+     <li><span style="font-family: courier new;">off</span>: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.</li>
+     <li><span style="font-family: courier new;">on</span>: The browser can automatically complete the value based on values that the user has entered during previous uses.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Reflects the {{ htmlattrxref("autofocus", "input") }} HTML attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the {{htmlattrxref("autofocus","input")}} attribute. It cannot be applied if the {{htmlattrxref("type","input")}} attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control).</td>
+  </tr>
+  <tr>
+   <td><code>checked</code></td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>The current state of the element when {{htmlattrxref("type","input")}} is <code>checkbox</code> or <code>radio</code>.</td>
+  </tr>
+  <tr>
+   <td><code>defaultChecked</code></td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>The default state of a radio button or checkbox as originally specified in HTML that created this object.</td>
+  </tr>
+  <tr>
+   <td><code>defaultValue</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The default value as originally specified in HTML that created this object.</td>
+  </tr>
+  <tr>
+   <td><code>dirName</code></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Reflects the {{ htmlattrxref("disabled", "input") }} HTML attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form. See also {{ htmlattrxref("readOnly", "input") }} </td>
+  </tr>
+  <tr>
+   <td><code>files</code> {{readonlyInline}}</td>
+   <td>{{domxref("FileList")}}</td>
+   <td>A list of selected files.</td>
+  </tr>
+  <tr>
+   <td><code>form</code> {{readonlyInline}}</td>
+   <td>{{domxref("HTMLFormElement")}}</td>
+   <td>The containing form element, if this element is in a form. If this element is not contained in a form element:
+    <ul>
+     <li>{{ HTMLVersionInline(5) }} this can be the {{ htmlattrxref("id", "form") }} attribute of any {{ HTMLElement("form") }} element in the same document. Even if the attribute is set on {{ HTMLElement("input") }}, this property will be <code>null</code>, if it isn't the id of a {{ HTMLElement("form") }} element.</li>
+     <li>{{ HTMLVersionInline(4) }} this must be <code>null</code>.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>formAction</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("formaction", "input") }} HTML attribute, containing the URI of a program that processes information submitted by the element. If specified, this attribute overrides the {{ htmlattrxref("action", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.</td>
+  </tr>
+  <tr>
+   <td><code>formEncType</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("formenctype", "input") }} HTML attribute, containing the type of content that is used to submit the form to the server. If specified, this attribute overrides the {{ htmlattrxref("enctype", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.</td>
+  </tr>
+  <tr>
+   <td><code>formMethod</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("formmethod", "input") }} HTML attribute, containing the HTTP method that the browser uses to submit the form. If specified, this attribute overrides the {{ htmlattrxref("method", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.</td>
+  </tr>
+  <tr>
+   <td><code>formNoValidate</code></td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Reflects the {{ htmlattrxref("formnovalidate", "input") }} HTML attribute, indicating that the form is not to be validated when it is submitted. If specified, this attribute overrides the {{ htmlattrxref("novalidate", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.</td>
+  </tr>
+  <tr>
+   <td><code>formTarget</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("formtarget", "input") }} HTML attribute, containing a name or keyword indicating where to display the response that is received after submitting the form. If specified, this attribute overrides the {{ htmlattrxref("target", "form") }} attribute of the {{ HTMLElement("form") }} element that owns this element.</td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("height", "input") }} HTML attribute, which defines the height of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <span style="font-family: courier new;">image</span>.</td>
+  </tr>
+  <tr>
+   <td><code>indeterminate</code></td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Indicates that a checkbox is neither on nor off.</td>
+  </tr>
+  <tr>
+   <td><code>labels</code> {{readonlyInline}}</td>
+   <td>{{domxref("NodeList")}}</td>
+   <td>A list of {{ HTMLElement("label") }} elements that are labels for this element.</td>
+  </tr>
+  <tr>
+   <td><code>list</code></td>
+   <td>{{domxref("HTMLElement")}}</td>
+   <td>Identifies a list of pre-defined options to suggest to the user. The value must be the <strong>id</strong> of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the {{htmlattrxref("type","input")}} attribute's value is <span style="font-family: courier new;">hidden</span>, <span style="font-family: courier new;">checkbox</span>, <span style="font-family: courier new;">radio</span>, <span style="font-family: courier new;">file</span>, or a button type.</td>
+  </tr>
+  <tr>
+   <td><code>max</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("max", "input") }} HTML attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum (<strong>min</strong> attribute) value.</td>
+  </tr>
+  <tr>
+   <td><code>maxLength</code></td>
+   <td> <code>long</code></td>
+   <td>Reflects the {{ htmlattrxref("maxlength", "input") }} HTML attribute, containing the maximum length of text (in Unicode code points) that the value can be changed to. The constraint is evaluated only when the value is changed
+    <div class="note"><strong>Note:</strong> If you set <code>maxLength</code> to a negative value programmatically, an exception will be thrown.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>min</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("min", "input") }} HTML attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum ({{htmlattrxref("max","input")}} attribute) value.</td>
+  </tr>
+  <tr>
+   <td><code>multiple</code></td>
+   <td></td>
+   <td>Reflects the {{ htmlattrxref("multiple", "input") }} HTML attribute, indicating whether more than one value is possible (e.g., multiple files).</td>
+  </tr>
+  <tr>
+   <td><code>name</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("name", "input") }} HTML attribute, containing a name that identifies the element when submitting the form.</td>
+  </tr>
+  <tr>
+   <td><code>pattern</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("pattern", "input") }} HTML attribute, containing a regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span> or <span style="font-family: courier new;">email</span>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>placeholder</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("placeholder", "input") }} HTML attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span> or <span style="font-family: courier new;">email</span>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>readOnly</code></td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>
+    <p>Reflects the {{ htmlattrxref("readonly", "input") }} HTML attribute, indicating that the user cannot modify the value of the control.<br>
+     {{HTMLVersionInline(5)}}This is ignored if the value of the {{htmlattrxref("type","input")}} attribute is <span style="font-family: courier new;">hidden</span>, <span style="font-family: courier new;">range</span>, <span style="font-family: courier new;">color</span>, <span style="font-family: courier new;">checkbox</span>, <span style="font-family: courier new;">radio</span>, <span style="font-family: courier new;">file</span>, or a button type.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>required</code></td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Reflects the {{ htmlattrxref("required", "input") }} HTML attribute, indicating that the user must fill in a value before submitting a form.</td>
+  </tr>
+  <tr>
+   <td><code>selectionDirection</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The direction in which selection occurred. This is <code>"forward"</code> if selection was performed in the start-to-end direction of the current locale, or <code>"backward"</code> for the opposite direction. This can also be <code>"none"</code> if the direction is unknown."</td>
+  </tr>
+  <tr>
+   <td><code>selectionEnd</code></td>
+   <td><code>unsigned long</code></td>
+   <td>The index of the end of selected text.</td>
+  </tr>
+  <tr>
+   <td><code>selectionStart</code></td>
+   <td><code>unsigned long</code></td>
+   <td>The index of the beginning of selected text. When nothing is selected, this is also the caret position inside of the <code>&lt;input&gt;</code> element.</td>
+  </tr>
+  <tr>
+   <td><code>size</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Reflects the {{ htmlattrxref("size", "input") }} HTML attribute, containing size of the control. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is <span style="font-family: courier new;">text</span> or <span style="font-family: courier new;">password</span>, in which case, it is an integer number of characters. {{ HTMLVersionInline(5) }} Applies only when {{htmlattrxref("type","input")}} is set to <span style="font-family: courier new;">text</span>, <span style="font-family: courier new;">search</span>, <span style="font-family: courier new;">tel</span>, <span style="font-family: courier new;">url</span>, <span style="font-family: courier new;">email</span>, or <span style="font-family: courier new;">password</span>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("src", "input") }} HTML attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of {{htmlattrxref("type","input")}} is <span style="font-family: courier new;">image</span>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>step</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("step", "input") }} HTML attribute, which works with<strong> </strong>{{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string <span style="font-family: courier new;">any</span> or a positive floating point number. If this is not set to <span style="font-family: courier new;">any</span>, the control accepts only values at multiples of the step value greater than the minimum.</td>
+  </tr>
+  <tr>
+   <td><code>tabIndex</code></td>
+   <td>long</td>
+   <td>The position of the element in the tabbing navigation order for the current document.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("type", "input") }} HTML attribute, indicating the type of control to display. See {{ htmlattrxref("type", "input") }} attribute of {{ HTMLElement("input") }} for possible values.</td>
+  </tr>
+  <tr>
+   <td><code>useMap</code> {{ obsolete_inline }}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>A client-side image map.</td>
+  </tr>
+  <tr>
+   <td><code>validationMessage</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>A localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ({{htmlattrxref("willValidate","input")}} is <code>false</code>), or it satisfies its constraints.</td>
+  </tr>
+  <tr>
+   <td><code>validity</code> {{readonlyInline}}</td>
+   <td>{{domxref("ValidityState")}}</td>
+   <td>The validity state that this element is in. </td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>Current value in the control.</p>
+
+    <div class="note">
+    <p><strong>Note: </strong>for certain input types the returned value might not match the value the user has entered. For example, if the user enters a non-numeric value into an &lt;input type="number"&gt;, the returned value might be an empty string instead.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code><a id="property-valueasdate" name="property-valueasdate"></a>valueAsDate</code></td>
+   <td>{{jsxref("Date")}}</td>
+   <td>The value of the element, interpreted as a date, or <code>null</code> if conversion is not possible.</td>
+  </tr>
+  <tr>
+   <td><code><a id="property-valueasnumber" name="property-valueasnumber"></a>valueAsNumber</code></td>
+   <td><code>double</code></td>
+   <td>The value of the element, interpreted as one of the following in order:
+    <ol>
+     <li>a time value</li>
+     <li>a number</li>
+     <li><code>NaN</code> if conversion is not possible</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the {{ htmlattrxref("width", "input") }} HTML attribute, which defines the width of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <span style="font-family: courier new;">image</span>.</td>
+  </tr>
+  <tr>
+   <td><code>willValidate</code></td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Indicates whether the element is a candidate for constraint validation. It is <code>false</code> if any conditions bar it from constraint validation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Name &amp; Arguments</th>
+   <th>Return</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>blur()</code></td>
+   <td><code>void</code></td>
+   <td>Removes focus from input; keystrokes will subsequently go nowhere.</td>
+  </tr>
+  <tr>
+   <td><code>checkValidity</code>()</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Returns false if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an {{event("invalid")}} event at the element. It returns true if the element is not a candidate for constraint validation, or if it satisfies its constraints.</td>
+  </tr>
+  <tr>
+   <td><code>click()</code></td>
+   <td><code>void</code></td>
+   <td>Simulates a click on the element.</td>
+  </tr>
+  <tr>
+   <td><code>focus()</code></td>
+   <td><code>void</code></td>
+   <td>Focus on input; keystrokes will subsequently go to this element.</td>
+  </tr>
+  <tr>
+   <td><code>mozSetFileArray(files)</code>{{non-standard_inline}}</td>
+   <td><code>void</code></td>
+   <td>Sets the files selected on the input to the given array of <code><a href="/en-US/docs/Web/API/File">File</a></code> objects.  This is an alternative to <code>mozSetFileNameArray</code> which can be used in frame scripts: a chrome script can <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">open files as <code>File</code> objects</a> and send them via <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">message manager</a>.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/DOM/Input.mozGetFileNameArray" title="en/DOM/Input.mozGetFileNameArray">mozGetFileNameArray</a>(length, filenames)</code>{{non-standard_inline}}</td>
+   <td><code>void</code></td>
+   <td>Returns an array of all the file names from the input.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/DOM/Input.mozSetFileNameArray" title="en/DOM/Input.mozSetFileNameArray">mozSetFileNameArray</a>(filenames, length)</code>{{non-standard_inline}}</td>
+   <td><code>void</code></td>
+   <td>Sets the filenames for the files selected on the input.  Not for use in <a href="/en-US/Firefox/Multiprocess_Firefox/Limitations_of_frame_scripts">frame scripts</a>, because it accesses the filesystem.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/DOM/Input.select" title="en/DOM/Input.select">select</a>()</code></td>
+   <td><code>void</code></td>
+   <td>Selects the input text in the element, and focuses it so the user can subsequently replace the whole entry.</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity(error)</code></td>
+   <td><code>void</code></td>
+   <td>Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/DOM/Input.setSelectionRange" title="en/DOM/Input.setSelectionRange">setSelectionRange</a>(selectionStart, selectionEnd, [optional] selectionDirection)</code></td>
+   <td><code>void</code></td>
+   <td>Selects a range of text in the element (but does not focus it). The optional <code>selectionDirection</code> parameter may be <code>"forward"</code> or <code>"backward"</code> to establish the direction in which selection was set, or <code>"none"</code> if the direction is unknown or not relevant. The default is <code>"none"</code>. Specifying a <code>selectionDirection</code> parameter sets the value of the <code>selectionDirection</code> property.</td>
+  </tr>
+  <tr>
+   <td><code>setRangeText(replacement, [optional] start, [optional] end, [optional] selectMode)</code></td>
+   <td><code>void</code></td>
+   <td>Replaces a range of text with the new text. Supported input types: <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>password.</code></td>
+  </tr>
+  <tr>
+   <td><code>stepDown(n)</code></td>
+   <td><code>void</code></td>
+   <td>Decrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * <code>n</code>), where <code>n</code> defaults to <code>1</code> if not specified. Throws an <code>INVALID_STATE_ERR</code> exception:
+    <ul>
+     <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.</li>
+     <li>if the element has no {{htmlattrxref("step","input")}} value.</li>
+     <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number.</li>
+     <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}. </li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>stepUp(n)</code></td>
+   <td><code>void</code></td>
+   <td>Increments the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * <code>n</code>), where <code>n</code> defaults to <code>1</code> if not specified. Throws an <code>INVALID_STATE_ERR</code> exception:
+    <ul>
+     <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.</li>
+     <li>if the element has no {{htmlattrxref("step","input")}} value.</li>
+     <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number.</li>
+     <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<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', "tthe-input-element.html#the-input-element", "HTMLInputElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Technically, the  <code>tabindex</code> and <code>accesskey</code> properties, as well as the <code>blur()</code>, <code>click()</code>, and <code>focus()</code> methods, are now defined on {{domxref("HTMLElement")}}.<br>
+    The following properties are now obsolete: <code>align</code> and <code>useMap</code>.<br>
+    The following properties have been added: <code>autocomplete</code>, <code>autofocus</code>, <code>dirName</code>, <code>files</code>, <code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>height</code>, <code>indeterminate</code>, <code>labels</code>, <code>list</code>, <code>max</code>, <code>min</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>required</code>, <code>selectionDirection</code>, <code>selectionEnd</code>, <code>selectionStart</code>, <code>step</code>, <code>validationMessage</code>, <code>validity</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, <code>width</code>, and <code>willValidate</code>.<br>
+    The following methods have been added: <code>checkValidity()</code>, <code>setCustomValidity()</code>, <code>setSelectionRange()</code>, <code>stepUp()</code>, and <code>stepDown()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The <code>size</code> property is now an <code>unsigned</code> <code>long</code>. The <code>type</code> property must be entirely given in lowercase characters.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}</td>
+   <td>{{Spec2('DOM1')}}</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>autocomplete</code> &amp; <code>autofocus</code> properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>files</code> property</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.9)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>multiple</code> property</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>indeterminate</code> property</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>list</code> property</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formTarget</code> properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>formNoValidate</code>, <code>validationMessage</code>, <code>validity</code>, <code>willValidate</code> properties and <code>setCustomValidity()</code> and <code>checkValidity()</code> methods.</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>pattern</code>, <code>placeholder</code>, <code>required</code> properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>height</code> and <code>weight</code> properties</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(16)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>labels</code> property</td>
+   <td>{{CompatChrome(14.0)}}</td>
+   <td>{{CompatNo}} ({{bug("556743")}})</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>min</code>, <code>max</code>, and <code>step</code> for <code>&lt;input type="number"&gt;</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>Experimental, and without specific UI, since {{CompatGeckoDesktop(16)}}: behind the pref <code>dom.experimental_forms</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>stepUp</code> and <code>stepDown</code> methods</td>
+   <td>{{CompatUnknown}}</td>
+   <td>Experimental since {{CompatGeckoDesktop(16)}}: behind the pref <code>dom.experimental_forms</code><br>
+    <br>
+    There are still differences with the latest spec: {{bug(835773)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>min</code>, <code>max</code>, and <code>step </code>properties for <code>&lt;input type="range"&gt;</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>min</code>, <code>max</code>, and <code>step </code>properties for <code>&lt;input type="date"&gt;</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>Experimental, and without specific UI, since {{CompatGeckoDesktop(20)}}: behind the pref <code>dom.experimental_forms</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>min</code>, <code>max</code>, and <code>step </code>properties for other date-related <code>type</code> values</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetFileNameArray()</code> and <code>mozSetFileNameArray() </code>methods {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozSetFileArray()</code> method {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("38")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>autocapitalize</code></td>
+   <td>{{CompatChrome(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 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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>autocapitalize</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{CompatUnknown}}</span></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{ HTMLElement("input") }}.</li>
+</ul>
diff --git a/files/pt-br/web/api/htmlinputelement/select/index.html b/files/pt-br/web/api/htmlinputelement/select/index.html
new file mode 100644
index 0000000000..c560161be4
--- /dev/null
+++ b/files/pt-br/web/api/htmlinputelement/select/index.html
@@ -0,0 +1,52 @@
+---
+title: HTMLInputElement.select()
+slug: Web/API/HTMLInputElement/select
+tags:
+  - API
+  - HTML DOM
+  - HTMLInputElement
+  - Referencia
+  - Selecionar
+  - Select
+  - metodo
+translation_of: Web/API/HTMLInputElement/select
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>O método <strong><code>HTMLInputElement.select()</code></strong> seleciona todo o texto em um elemento {{HTMLElement("textarea")}} ou em um elemento {{HTMLElement("input")}} do tipo <em>text</em>.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">element.select()</pre>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#dom-textarea/input-select', 'select')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Executar <code>element.select()</code> não irá necessariamente focar o <em>input</em>, por isso é frequentemente usado em conjunto com {{domxref("HTMLElement.focus()")}}.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{ HTMLElement("input") }}</li>
+ <li>{{ HTMLElement("textarea") }}</li>
+ <li>{{ domxref("HTMLInputElement") }}</li>
+ <li>{{ domxref("HTMLInputElement.setSelectionRange") }}</li>
+</ul>
diff --git a/files/pt-br/web/api/htmlinputelement/setselectionrange/index.html b/files/pt-br/web/api/htmlinputelement/setselectionrange/index.html
new file mode 100644
index 0000000000..86631688fc
--- /dev/null
+++ b/files/pt-br/web/api/htmlinputelement/setselectionrange/index.html
@@ -0,0 +1,173 @@
+---
+title: HTMLInputElement.setSelectionRange()
+slug: Web/API/HTMLInputElement/setSelectionRange
+translation_of: Web/API/HTMLInputElement/setSelectionRange
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>O método<strong><code>HTMLInputElement.setSelectionRange()</code></strong> define as posições inicial e final da seleção atual do texto em um elemento {{HTMLElement("input")}}.</p>
+
+<p>Opcionalmente, em navegadores mais novos, você pode especificar a direção na qual a seleção deve ser feita; isso permite a você indicar, por exemplo, que a seleção foi feita como se o usuário tivesse clicado no fim do texto selecionado e arrastado em direção ao início.</p>
+
+<p>Esse método atualiza ao mesmo tempo <code>HTMLInputElement.selectionStart</code>, <code>selectionEnd</code>, and <code>selectionDirection</code>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">inputElement.setSelectionRange(<var>selectionStart</var>, <var>selectionEnd</var>, [optional] <var>selectionDirection</var>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><em>selectionStart</em></dt>
+ <dd>The 0-based index of the first selected character.</dd>
+ <dt><em>selectionEnd</em></dt>
+ <dd>The 0-based index of the character <em>after</em> the last selected character.</dd>
+ <dt><em>selectionDirection</em> {{optional_inline}}</dt>
+ <dd>A string indicating the direction in which the selection is performed. This string can be "forward" or "backward", or "none" if the direction is unknown or irrelevant.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>The following 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;JS Bin&lt;/title&gt;
+&lt;script&gt;
+function SelectText () {
+        var input = document.getElementById("mytextbox");
+            input.focus();
+            input.setSelectionRange(2,5);
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;&lt;input type="text" id="mytextbox" size="20" value="Mozilla"/&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;button onclick="SelectText()"&gt;Select text&lt;/button&gt;&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>will produce the following:</p>
+
+<p><img alt="example.png" class="default internal" src="/@api/deki/files/6104/=example.png"></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("HTML WHATWG", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange()")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange()")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</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>Edge</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>9</td>
+   <td>8.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>selectionDirection</code></td>
+   <td>15<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("8.0")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table" style="height: 104px; width: 1023px;">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>Yes</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <td><code>selectionDirection</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("8.0")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The support for <code>selectionDirection</code> was added Blink in {{WebkitBug("60403")}}.</p>
+
+<p>Note that accordingly to the <a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply">WHATWG forms spec</a> <code>selectionStart</code>, <code>selectionEnd</code> properties and <code>setSelectionRange</code> method apply only to inputs of types text, search, URL, tel and password. Chrome, starting from version 33, throws an exception while accessing those properties and method on the rest of input types. For example, on input of type number: "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection." Related links: <a href="http://stackoverflow.com/questions/21177489/selectionstart-selectionend-on-input-type-number-no-longer-allowed-in-chrome">question on StackOverflow</a>, <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=24796">whatwg bug</a>, <a href="https://code.google.com/p/chromium/issues/detail?id=324360">Chromium bug</a>.</p>
+
+<p>[2] The support for <code>selectionDirection</code> was added to Gecko in {{bug("674558")}}.</p>
+
+<p>[3] The support for <code>selectionDirection</code> was added Webkit in {{WebKitBug("60403")}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{domxref("HTMLInputElement")}}</li>
+ <li>{{domxref("Selection")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/htmloptionelement/index.html b/files/pt-br/web/api/htmloptionelement/index.html
new file mode 100644
index 0000000000..3ec8c7c27a
--- /dev/null
+++ b/files/pt-br/web/api/htmloptionelement/index.html
@@ -0,0 +1,129 @@
+---
+title: HTMLOptionElement
+slug: Web/API/HTMLOptionElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - NeedsNewLayout
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLOptionElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>The <strong><code>HTMLOptionElement</code></strong> interface represents {{HTMLElement("option")}} elements and inherits all classes and methods of the {{domxref("HTMLElement")}} interface.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>defaultSelected</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Contains the initial value of the {{htmlattrxref("selected", "option")}} HTML attribute, indicating whether the option is selected by default or not.</td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Reflects the value of the {{htmlattrxref("disabled", "option")}} HTML attribute, which indicates that the option is unavailable to be selected. An option can also be disabled if it is a child of an {{HTMLElement("optgroup")}} element that is disabled.</td>
+  </tr>
+  <tr>
+   <td><code>form</code>{{readonlyInline}}</td>
+   <td>{{domxref("HTMLFormElement")}}</td>
+   <td>If the option is a descendent of a {{HTMLElement("select")}} element, then this property has the same value as the <code>form</code> property of the corresponding {{DomXref("HTMLSelectElement")}} object; otherwise, it is <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td><code>index</code>{{readonlyInline}}</td>
+   <td><code>long</code></td>
+   <td>The position of the option within the list of options it belongs to, in tree-order. If the option is not part of a list of options, like when it is part of the {{HTMLElement("datalist")}} element, the value is <code>0</code>.</td>
+  </tr>
+  <tr>
+   <td><code>label</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the value of the {{htmlattrxref("label", "option")}} HTML attribute, which provides a label for the option. If this attribute isn't specifically set, reading it returns the element's text content.</td>
+  </tr>
+  <tr>
+   <td><code>selected</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Indicates whether the option is currently selected.</td>
+  </tr>
+  <tr>
+   <td><code>text</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Contains the text content of the element.</td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflects the value of the {{htmlattrxref("value", "option")}} HTML attribute, if it exists; otherwise reflects value of the {{domxref("Node.textContent")}} property.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>Option()</dt>
+ <dd>Is a constructor creating an <code>HTMLOptionElement</code> object. It has four values: the text to display, <code>text</code>, the value associated, <code>value</code>, the value of <code>defaultSelected</code>, and the value of <code>selected</code>. The last three values are optional.</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', "#htmloptionelement", "HTMLOptionElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-option-element", "HTMLOptionElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>A constructor, <code>Option()</code>, has been added.<br>
+    The <code>form</code> property can be the <code>null</code> value.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-70901257', 'HTMLOptionElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The <code>selected</code> property changed its meaning: it now indicates if the option is currently selected and no longer if it was initally selected.<br>
+    The <code>defaultSelected</code> property is no longer read-only.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-70901257', 'HTMLOptionElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLOptionElement")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{HTMLElement("option")}}.</li>
+</ul>
diff --git a/files/pt-br/web/api/htmloptionelement/option/index.html b/files/pt-br/web/api/htmloptionelement/option/index.html
new file mode 100644
index 0000000000..9027e9b799
--- /dev/null
+++ b/files/pt-br/web/api/htmloptionelement/option/index.html
@@ -0,0 +1,101 @@
+---
+title: Option()
+slug: Web/API/HTMLOptionElement/Option
+translation_of: Web/API/HTMLOptionElement/Option
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>O construtor <strong><code>Option()</code></strong> cria novos {{domxref("HTMLOptionElement")}}.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>o</em><em>ptionElementReference</em> = new Option(<em>text</em>, <em>value</em>, <em>defaultSelected</em>, <em>selected</em>);</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>text</code> {{optional_inline}}</dt>
+ <dd>Um {{domxref("DOMString")}} representa o conteúdo do elemento, o texto mostrado na tela. Se  o texto não é especificado, o texto padrão "" (texto vazio) é  utilizado.</dd>
+ <dt><code>value</code> {{optional_inline}}</dt>
+ <dd>Um {{domxref("DOMString")}} representa o valor do {{domxref("HTMLOptionElement")}}, i.e. o valor do elemento {{htmlelement("option")}}. Se não especificado, o texto é usado como valor, e.g. o elemento {{htmlelement("select")}} tem seu valor associado quando o formulário é submetido ao servidor.</dd>
+ <dt><code>defaultSelected</code> {{optional_inline}}</dt>
+ <dd>Um {{domxref("Boolean")}} é usado para adicionar o atributo <strong>selected</strong>, para que este {{htmlelement("option")}} seja mostrado como selecionado no elemento {{htmlelement("select")}} quando a página for carregada. Se não especificado, o estado padrão é não selecionado. Observe que o <strong>defaultSelected = true</strong> não define a opção como o valor selecionado do elemento {{htmlelement("select")}}.</dd>
+ <dt><code>selected</code> {{optional_inline}}</dt>
+ <dd>Um {{domxref("Boolean")}} é usado para colocar elemento {{htmlelement("option")}} no estado de selecionado; como padrão do elemento tem o estado de não selecionado. Se omitido, mesmo que o parâmetro <strong>defaultSelected </strong>for verdadeiro, o elemento {{htmlelement("option")}} não é selecionado. </dd>
+</dl>
+
+<h2 id="Examplos">Examplos</h2>
+
+<h3 id="Adicionando_novas_tags_options">Adicionando novas tags options</h3>
+
+<pre class="brush: js"> /* <code class="language-js">assumindo que temos este HTML</code>
+&lt;select id='s'&gt;
+
+&lt;/select&gt;
+*/
+
+var s = document.getElementById('s');
+var options = [Quatro, Cinco, Seis];
+
+options.forEach(function(elemento, chave) {
+    s.appendChild(new Option(elemento, chave));
+});
+
+ /* <code class="language-js">Resultado
+</code>&lt;select id='s'&gt;
+    &lt;option value="0"&gt;Quatro&lt;/option&gt;
+    &lt;option value="1"&gt;Cinco&lt;/option&gt;
+    &lt;option value="2"&gt;Seis&lt;/option&gt;
+&lt;/select&gt; */
+</pre>
+
+<h3 id="Adicionando_options_com_diferentes_parâmetros">Adicionando options com diferentes parâmetros</h3>
+
+<pre class="brush: js"><code class="language-js">/* assumindo que temos este HTML
+&lt;select id="s"&gt;
+    &lt;option&gt;Primeiro&lt;/option&gt;
+    &lt;option&gt;Segundo&lt;/option&gt;
+    &lt;option&gt;Terceiro&lt;/option&gt;
+&lt;/select&gt;
+*/
+
+var s = document.getElementById('s');
+</code>var options = [ 'zero', 'um', 'dois' ];<code class="language-js">
+
+options.forEach(function(elemento, chave) {</code>
+  if (elemento == 'zero') {
+    s[s.options.length] = new Option(elemento, s.options.length, false, false);
+  }
+  if (elemento == 'um') {
+    s[s.options.length] = new Option(elemento, s.options.length, true, false); // Adicionando atributo "selected"
+  }
+  if (elemento == 'dois') {
+    s[s.options.length] = new Option(elemento, s.options.length, false, true); // Apenas irá selecionar a opção na visualização
+  }
+<code class="language-js">});
+
+/* Resultado
+&lt;select id="s"&gt;
+  &lt;option value="0"&gt;zero&lt;/option&gt;
+  &lt;option value="1" selected=""&gt;um&lt;/option&gt;
+  &lt;option value="2"&gt;dois&lt;/option&gt; // O usuário verá esta opção selecionada
+&lt;/select&gt;
+</code>*/</pre>
+
+<h2 id="Especificação">Especificação</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="http://www.w3.org/TR/2012/WD-html5-20121025/the-option-element.html#dom-option" hreflang="en" lang="en">HTML5<br>
+    <small lang="en-US">The definition of 'Option' in that specification.</small></a></td>
+   <td>Recomendado</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/pt-br/web/api/htmlselectelement/checkvalidity/index.html b/files/pt-br/web/api/htmlselectelement/checkvalidity/index.html
new file mode 100644
index 0000000000..11bfc0a7bf
--- /dev/null
+++ b/files/pt-br/web/api/htmlselectelement/checkvalidity/index.html
@@ -0,0 +1,98 @@
+---
+title: HTMLSelectElement.checkValidity()
+slug: Web/API/HTMLSelectElement/checkValidity
+translation_of: Web/API/HTMLSelectElement/checkValidity
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>O <code><strong>HTMLSelectElement.checkValidity()</strong></code> método verifica se o elemento possui restrições e se as satisfaz. Se o elemento falhar suas restrições, o navegador dispara um evento {{event("invalid")}} no elemento e, em seguida, retorna <code>false</code>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="eval  language-html"><code class="language-html">var <em>resultado</em> = <em>selectElt</em>.checkValidity();</code></pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-cva-checkvalidity', 'HTMLSelectElement.checkValidity()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-cva-checkvalidity', 'HTMLSelectElement.checkValidity()')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial definition, snapshot of {{SpecName('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibilidade">Browser compatibilidade</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(2.0)}}</td>
+   <td>10</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</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Form validation.</a></li>
+</ul>
diff --git a/files/pt-br/web/api/htmlselectelement/index.html b/files/pt-br/web/api/htmlselectelement/index.html
new file mode 100644
index 0000000000..94c0f2edd9
--- /dev/null
+++ b/files/pt-br/web/api/htmlselectelement/index.html
@@ -0,0 +1,290 @@
+---
+title: HTMLSelectElement
+slug: Web/API/HTMLSelectElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLSelectElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>The <code><strong>HTMLSelectElement</strong></code> interface represents a {{HTMLElement("select")}} HTML Element. These elements also share all of the properties and methods of other HTML elements via the {{domxref("HTMLElement")}} interface.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface inherits the properties of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLSelectElement.autofocus")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("autofocus", "select")}} HTML attribute, which indicates whether the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified. {{gecko_minversion_inline("2.0")}}</dd>
+ <dt>{{domxref("HTMLSelectElement.disabled")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("disabled", "select")}} HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks.</dd>
+ <dt>{{domxref("HTMLSelectElement.form")}}{{ReadOnlyInline}}</dt>
+ <dd>An {{domxref("HTMLFormElement")}} referencing the form that this element is associated with. If the element is not associated with of a {{HTMLElement("form")}} element, then it returns <code>null</code>.</dd>
+ <dt>{{domxref("HTMLSelectElement.labels")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("NodeList")}} of {{HTMLElement("label")}} elements associated with the element.</dd>
+ <dt>{{domxref("HTMLSelectElement.length")}}</dt>
+ <dd>An <code>unsigned long </code>The number of {{HTMLElement("option")}} elements in this <code>select</code> element.</dd>
+ <dt>{{domxref("HTMLSelectElement.multiple")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("multiple", "select")}} HTML attribute, which indicates whether multiple items can be selected.</dd>
+ <dt>{{domxref("HTMLSelectElement.name")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the {{htmlattrxref("name", "select")}} HTML attribute, containing the name of this control used by servers and DOM search functions.</dd>
+ <dt>{{domxref("HTMLSelectElement.options")}}{{ReadOnlyInline}}</dt>
+ <dd>An {{domxref("HTMLOptionsCollection")}} representing the set of {{HTMLElement("option")}} elements contained by this element.</dd>
+ <dt>{{domxref("HTMLSelectElement.required")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("required", "select")}} HTML attribute, which indicates whether the user is required to select a value before submitting the form. {{gecko_minversion_inline("2.0")}}</dd>
+ <dt>{{domxref("HTMLSelectElement.selectedIndex")}}</dt>
+ <dd>A <code>long</code> reflecting the index of the first selected {{HTMLElement("option")}} element. The value <code>-1</code> indicates no element is selected.</dd>
+ <dt>{{domxref("HTMLSelectElement.selectedOptions")}}{{ReadOnlyInline}}</dt>
+ <dd>An {{domxref("HTMLCollection")}} representing the set of {{HTMLElement("option")}} elements that are selected.</dd>
+ <dt>{{domxref("HTMLSelectElement.size")}}</dt>
+ <dd>A <code>long</code> reflecting the {{htmlattrxref("size", "select")}} HTML attribute, which contains the number of visible items in the control. The default is 1, unless <code>multiple</code> is true, in which case it is 4.</dd>
+ <dt>{{domxref("HTMLSelectElement.type")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} represeting the form control's type. When <code>multiple</code> is <code>true</code>, it returns <code>"select-multiple"</code>; otherwise, it returns <code>"select-one"</code>.</dd>
+ <dt>{{domxref("HTMLSelectElement.validationMessage")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} representing a localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is false), or it satisfies its constraints.</dd>
+ <dt>{{domxref("HTMLSelectElement.validity")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("ValidityState")}} reflecting the validity state that this control is in.</dd>
+ <dt>{{domxref("HTMLSelectElement.value")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form control (the first selected option). Returns the value attribute of the option element or if it is missing, the text attribute.</dd>
+ <dt>{{domxref("HTMLSelectElement.willValidate")}}{{ReadOnlyInline}}</dt>
+ <dd>A {{jsxref("Boolean")}} that indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface inherits the methods of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLSelectElement.add()")}}</dt>
+ <dd>Adds an element to the collection of <code>option</code> elements for this <code>select</code> element.</dd>
+ <dt>{{domxref("HTMLSelectElement.blur()")}}{{obsolete_inline}}</dt>
+ <dd>Removes input focus from this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd>
+ <dt>{{domxref("HTMLSelectElement.checkValidity()")}}</dt>
+ <dd>Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable {{event("invalid")}} event at the element (and returns <code>false</code>).</dd>
+ <dt>{{domxref("HTMLSelectElement.focus()")}}{{obsolete_inline}}</dt>
+ <dd>Gives input focus to this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd>
+ <dt>{{domxref("HTMLSelectElement.item()")}}</dt>
+ <dd>Gets an item from the options collection for this {{HTMLElement("select")}} element. You can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly.</dd>
+ <dt>{{domxref("HTMLSelectElement.namedItem()")}}</dt>
+ <dd>Gets the item in the options collection with the specified name. The name string can match either the <code>id</code> or the <code>name</code> attribute of an option node. You can also access an item by specifying the name in array-style brackets or parentheses, without calling this method explicitly.</dd>
+ <dt>{{domxref("HTMLSelectElement.remove()")}}</dt>
+ <dd>Removes the element at the specified index from the options collection for this select element.</dd>
+ <dt>{{domxref("HTMLSelectElement.setCustomValidity()")}}</dt>
+ <dd>Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does <em>not</em> have a custom validity error.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="Get_information_about_the_selected_option">Get information about the selected option</h3>
+
+<pre class="brush: js">/* assuming we have the following HTML
+&lt;select id='s'&gt;
+    &lt;option&gt;First&lt;/option&gt;
+    &lt;option selected&gt;Second&lt;/option&gt;
+    &lt;option&gt;Third&lt;/option&gt;
+&lt;/select&gt;
+*/
+
+var select = document.getElementById('s');
+
+// return the index of the selected option
+console.log(select.selectedIndex); // 1
+
+// return the value of the selected option
+console.log(select.options[select.selectedIndex].value) // Second
+</pre>
+
+<p>A better way to track changes to the user's selection is to watch for the {{event("change")}} event to occur on the <code>&lt;select&gt;</code>. This will tell you when the value changes, and you can then update anything you need to. See <a href="/en-US/docs/Web/Events/change#Example_Change_event_on_a_select">the example provided</a> in the documentation for the <code>change</code> event for details.</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', '#htmlselectelement', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Since the latest snapshot, {{SpecName('HTML5 W3C')}}, it adds the <code>autocomplete</code> property and the <code>reportValidity()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Is a snapshot of {{SpecName("HTML WHATWG")}}.<br>
+    It adds the <code>autofocus</code>, <code>form</code>, <code>required</code>, <code>labels</code>, <code>selectedOptions</code>, <code>willValidate</code>, <code>validity</code> and <code>validationMessage</code> properties.<br>
+    The <code>tabindex</code> property and the <code>blur()</code> and <code>focus()</code> methods have been moved to {{domxref("HTMLElement")}}.<br>
+    The methods <code>item()</code>, <code>namedItem()</code>, <code>checkValidity()</code> and <code>setCustomValidity()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td><code>options</code> now returns an {{domxref("HTMLOptionsCollection")}}.<br>
+    <code>length</code> now returns an <code>unsigned long</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}</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>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}} <sup>[2]</sup></td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>item()</code> and <code>namedItem()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>8<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity()</code>, <code>checkValidity()</code>, <code>willValidate</code>, <code>validationMessage</code>, <code>validity</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>selectedOptions</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(26)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>labels</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(56)}}<sup>[1]</sup></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</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>item()</code> and <code>namedItem()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity()</code>, <code>checkValidity()</code>, <code>willValidate</code>, <code>validationMessage</code>, <code>validity</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>selectedOptions</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(26)}}</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>labels</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(56)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implemented in {{bug("556743")}}.</p>
+
+<p>[2] Historically, Firefox has allowed keyboard and mouse events to bubble up from the <code>&lt;option&gt;</code> element to the parent {{HTMLElement("select")}} element. This doesn't happen in Chrome, however, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode and the <code>&lt;select&gt;</code> element is displayed as a drop-down list. The behavior is unchanged if the <code>&lt;select&gt;</code> is presented inline and it has either the <code>multiple</code> attribute defined or a <code>size</code> attribute set to more than 1. Rather than watching <code>&lt;option&gt;</code> elements for events, you should watch for {event("change")}} events on {{HTMLElement("select")}}. See {{bug(1090602)}} for details.</p>
+
+<p>[3] namedItem does not appear to take the <code>name</code> attribute into account (only the <code>id</code> attribute) on Internet Explorer and Edge. There is a <a href="https://connect.microsoft.com/IE/feedbackdetail/view/2414092/">bug report</a> to Microsoft about this.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{HTMLElement("select")}} HTML element, which implements this interface.</li>
+</ul>
diff --git a/files/pt-br/web/api/htmlshadowelement/index.html b/files/pt-br/web/api/htmlshadowelement/index.html
new file mode 100644
index 0000000000..fe52a8caf5
--- /dev/null
+++ b/files/pt-br/web/api/htmlshadowelement/index.html
@@ -0,0 +1,67 @@
+---
+title: HTMLShadowElement
+slug: Web/API/HTMLShadowElement
+tags:
+  - API
+  - HTML DOM
+  - HTMLShadowElement
+  - Web/Api
+  - shadow dom
+translation_of: Web/API/HTMLShadowElement
+---
+<p>{{obsolete_header}}</p>
+
+<p>{{ APIRef("Web Components") }}</p>
+
+<p>A interface <code><strong>HTMLShadowElement</strong></code> representa um  elemento HTML {{HTMLElement("shadow")}}, Ao qual é usado no <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a>.</p>
+
+<h2 id="Properties" name="Properties">Propriedades</h2>
+
+<p><em> Esta interface herda as propriedades do {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Esta interface herda os métodos do {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLShadowElement.getDistributedNodes()")}}</dt>
+ <dd>Retorna uma estática {{domxref("NodeList")}} do {{glossary("distributed nodes")}} associado com este elemento &lt;shadow&gt;.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', '#the-shadow-element', 'shadow')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatível">Browser compatível</h2>
+
+<div class="hidden">
+<p>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>
+</div>
+
+<p>{{Compat("api.HTMLShadowElement")}}</p>
+
+<p>Se Shadow DOM não é habilitado no Firefox, os elementos &lt;shadow&gt; se comportarão como {{domxref("HTMLUnknownElement")}}. Shadow DOM foi implementado primeiro no Firefox 28 e está por trás de uma preferência, <code>dom.webcomponents.enabled</code>, ao qual é desabilitado por padrão. [1]</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>O elemento HTML {{HTMLElement("shadow")}} , implementa esta interface.</li>
+ <li><a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a></li>
+</ul>
+
+<dl>
+ <dt> </dt>
+</dl>
diff --git a/files/pt-br/web/api/htmlspanelement/index.html b/files/pt-br/web/api/htmlspanelement/index.html
new file mode 100644
index 0000000000..dd06fbd0b0
--- /dev/null
+++ b/files/pt-br/web/api/htmlspanelement/index.html
@@ -0,0 +1,72 @@
+---
+title: HTMLSpanElement
+slug: Web/API/HTMLSpanElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - span
+translation_of: Web/API/HTMLSpanElement
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>A interface <strong><code><span class="external">HTMLSpanElement</span></code></strong> representa um elemento {{HTMLElement("span")}} e deriva de uma interface {{DOMxRef("HTMLElement")}}, mas sem implementar propriedades ou métodos adicionais.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>Essa interface não possui propriedades, mas herda propriedades de: {{DOMxRef("HTMLElement")}}.</em></p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Essa interface não possui métodos, mas herda métodos de: {{DOMxRef("HTMLElement")}}.</em></p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#htmlspanelement", "HTMLSpanElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.3', "textlevel-semantics.html#htmlspanelement", "HTMLSpanElement")}}</td>
+   <td>{{Spec2('HTML5.3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.2', "textlevel-semantics.html#htmlspanelement", "HTMLSpanElement")}}</td>
+   <td>{{Spec2('HTML5.2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "textlevel-semantics.html#htmlspanelement", "HTMLSpanElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#htmlspanelement", "HTMLSpanElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>A definição inicial, como {{HTMLElement("span")}} foi associada a um {{DOMxRef("HTMLElement")}}} antes disso.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
+
+
+
+<p>{{Compat("api.HTMLSpanElement")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>O elemento HTML que implementa essa interface: {{HTMLElement("span")}}.</li>
+</ul>
diff --git a/files/pt-br/web/api/idbcursor/index.html b/files/pt-br/web/api/idbcursor/index.html
new file mode 100644
index 0000000000..ce9c02414b
--- /dev/null
+++ b/files/pt-br/web/api/idbcursor/index.html
@@ -0,0 +1,181 @@
+---
+title: IDBCursor
+slug: Web/API/IDBCursor
+translation_of: Web/API/IDBCursor
+---
+<p>{{APIRef("IndexedDB")}}</p>
+
+<p>O <code><strong>IDBCursor </strong></code>é uma interface da <a href="/en-US/docs/IndexedDB">API IndexedDB</a> que representa o <a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_cursor">cursor</a> para atravessar ou interagir <span id="result_box" lang="pt"><span class="hps">sobre</span> <span class="hps">vários registros</span> <span class="hps">em</span> <span class="hps">um banco de dados</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="pt"><span class="hps">O</span> <span class="hps">cursor</span> <span class="hps">tem uma fonte</span> <span class="hps">que indica qual</span> <span class="hps">índice ou</span> <span class="hps">armazenamento o objeto</span> <span class="hps">está sobre a</span></span><span lang="pt"><span class="hps"> iteração</span><span>.</span> <span class="hps">Ele tem uma posição</span> <span class="hps">dentro do intervalo</span><span>,</span> <span class="hps">e</span> <span class="hps">move-se</span> <span class="hps">numa direcção</span> <span class="hps">que</span> <span class="hps">é</span> <span class="hps">aumentar ou diminuir</span> <span class="hps">na ordem</span> <span class="hps">de</span> <span class="hps">chaves</span> <span class="hps">ficha</span><span>.</span> <span class="hps">O</span> <span class="hps">cursor</span> <span class="hps">permite que um aplicativo</span> <span class="hps">para processar</span> <span class="hps">de forma assíncrona</span> <span class="hps">todos os registros</span> <span class="hps">na faixa</span> <span class="hps">do</span> <span class="hps">cursor.</span></span></p>
+
+<p><span id="result_box" lang="pt"><span class="hps">Pode</span> <span class="hps">ter um número ilimitado</span> <span class="hps">de</span> <span class="hps">cursores</span> <span class="hps">ao mesmo</span> <span class="hps">tempo</span><span>.</span> <span class="hps">Você sempre consegue</span> <span class="hps">o mesmo objeto</span> <span class="hps">IDBCursor</span> <span class="hps">representando</span> <span class="hps">um determinado</span> <span class="hps">cursor.</span> <span class="hps">As operações são</span> <span class="hps">realizadas</span> <span class="hps">na</span> <span class="hps">loja de</span> <span class="hps">índice ou</span> <span class="hps">objeto subjacente</span><span>.</span></span></p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("IDBCursor.advance()")}}</dt>
+ <dd><span id="result_box" lang="pt"><span class="hps">Define</span> <span class="hps">o número de vezes</span> <span class="hps">um</span> <span class="hps">cursor</span> <span class="hps">deve mover</span> <span class="hps">a sua posição</span> <span class="hps">para a frente.</span></span></dd>
+ <dt>{{domxref("IDBCursor.continue()")}}</dt>
+ <dd><span id="result_box" lang="pt"><span class="hps">Avança o</span> <span class="hps">cursor</span> <span class="hps">para a próxima posição</span> <span class="hps">ao longo de sua</span> <span class="hps">direção,</span> <span class="hps">para o item</span> <span class="hps">cuja chave</span> <span class="hps">corresponde ao</span> <span class="hps">parâmetro <code>chave</code></span><code> </code><span class="hps">opcional.</span></span></dd>
+ <dt>{{domxref("IDBCursor.delete()")}}</dt>
+ <dd>Retorna um {{domxref("IDBRequest")}} <span id="result_box" lang="pt"><span class="hps">objeto</span><span>,</span> <span class="hps">e</span><span>,</span> <span class="hps">em um segmento separado</span><span>,</span> <span class="hps">exclui o registro</span> <span class="hps">na posição do</span> <span class="hps">cursor</span><span>,</span> <span class="hps">sem alterar</span> <span class="hps">a posição do</span> <span class="hps">cursor.</span> <span class="hps">Isso pode ser usado</span> <span class="hps">para excluir registros</span> <span class="hps">específicos.</span></span></dd>
+ <dt>{{domxref("IDBCursor.update()")}}</dt>
+ <dd>Retorna um {{domxref("IDBRequest")}} objeto, <span id="result_box" lang="pt"><span class="hps">e</span><span>,</span> <span class="hps">em um segmento separado</span><span>,</span> <span class="hps">atualiza o valor</span> <span class="hps">na posição atual</span> <span class="hps">do</span> <span class="hps">cursor</span> <span class="hps">em armazenar o objeto</span><span>.</span> <span class="hps">Isso pode ser usado</span> <span class="hps">para atualizar registros</span> <span class="hps">específicos.</span></span></dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("IDBCursor.source")}} {{readonlyInline}}</dt>
+ <dd>Retorna um {{domxref("IDBObjectStore")}} ou {{domxref("IDBIndex")}} <span id="result_box" lang="pt"><span class="hps">que</span> <span class="hps">o cursor é</span> <span class="hps">a iteração</span><span>.</span> <span class="hps">Esta função</span> <span class="hps">nunca retorna</span> <span class="hps">nulo ou</span> <span class="hps">gera uma exceção</span><span>, mesmo se o</span> <span class="hps">cursor</span> <span class="hps">está actualmente a ser</span> <span class="hps">iterativo,</span> <span class="hps">tem</span> <span class="hps">iterated</span> <span class="hps">além de seu fim</span><span>,</span> <span class="hps">ou a sua</span> <span class="hps">operação não</span> <span class="hps">está ativa.</span></span></dd>
+ <dt>{{domxref("IDBCursor.direction")}} {{readonlyInline}}</dt>
+ <dd><span id="result_box" lang="pt"><span class="hps">Retorna</span> <span class="hps">a direcção do</span> <span class="hps">percurso</span> <span class="hps">do cursor</span><span>.</span> <span class="hps">Veja</span> <span class="hps"><a href="#">constantes </a>para</span> <span class="hps">os possíveis valores.</span></span></dd>
+ <dt>{{domxref("IDBCursor.key")}} {{readonlyInline}}</dt>
+ <dd>Returns the key for the record at the cursor's position. If the cursor is outside its range, this is set to <code>undefined</code>. The cursor's key can be any data type.</dd>
+ <dt>{{domxref("IDBCursor.primaryKey")}} {{readonlyInline}}</dt>
+ <dd><span id="result_box" lang="pt"><span class="hps">Retorna a chave</span> <span class="hps">para o registro</span> <span class="hps">na posição do</span> <span class="hps">cursor.</span> <span class="hps">Se o cursor estiver</span> <span class="hps">fora do seu</span> <span class="hps">alcance,</span> <span class="hps">isso é definido como</span> <span class="hps">indefinido.</span> <span class="hps">A chave do</span> <span class="hps">cursor</span> <span class="hps">pode ser qualquer</span> <span class="hps">tipo de dados.</span></span></dd>
+</dl>
+
+<h2 id="Constants" name="Constants">Constantes</h2>
+
+<div>{{ obsolete_header(25) }}</div>
+
+<div class="warning">
+<p>These constants are no longer available. You should use the string constants directly instead. ({{ bug(891944) }})</p>
+</div>
+
+<ul>
+ <li><code>NEXT </code>: <code>"next"</code> : The cursor shows all records, including duplicates. It starts at the lower bound of the key range and moves upwards (monotonically increasing in the order of keys).</li>
+ <li><code>NEXTUNIQUE</code> : <code>"nextunique"</code> : The cursor shows all records, excluding duplicates. If multiple records exist with the same key, only the first one iterated is retrieved. It starts at the lower bound of the key range and moves upwards.</li>
+ <li><code>PREV </code>: <code>"prev"</code> : The cursor shows all records, including duplicates. It starts at the upper bound of the key range and moves downwards (monotonically decreasing in the order of keys).</li>
+ <li><code>PREVUNIQUE </code>: <code>"prevunique"</code> : The cursor shows all records, excluding duplicates. If multiple records exist with the same key, only the first one iterated is retrieved. It starts at the upper bound of the key range and moves downwards.</li>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<p>In this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store. T<span style="line-height: 1.5;">he cursor does not require us to select the data based on a key; we can just grab all of it. Also note that in each iteration of the loop, you can grab data from the current record under the cursor object using </span><code style="font-style: normal; line-height: 1.5;">cursor.value.foo</code><span style="line-height: 1.5;">. For a complete working example, see our <a href="https://github.com/mdn/IDBcursor-example/">IDBCursor example</a></span><span style="line-height: 1.5;"> (</span><a href="http://mdn.github.io/IDBcursor-example/" style="line-height: 1.5;">view example live</a><span style="line-height: 1.5;">.)</span></p>
+
+<pre><span style="line-height: 1.5;">function displayData() {</span>
+  var transaction = db.transaction(['rushAlbumList'], "readonly");
+  var objectStore = transaction.objectStore('rushAlbumList');
+
+  objectStore.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = cursor.value.albumTitle + ', ' + cursor.value.year;
+      list.appendChild(listItem);
+
+      cursor.continue();
+    } else {
+      console.log('Entries all displayed.');
+    }
+  };
+};</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('IndexedDB', '#idl-def-IDBCursor', 'cursor')}}</td>
+   <td>{{Spec2('IndexedDB')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</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>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="warning">
+<p>Be careful in Chrome as it still implements the old specification along with the new one. Similarly it still has the prefixed <code>webkitIndexedDB</code> property even if the unprefixed <code>indexedDB</code> is present.</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
+ <li>Using transactions: {{domxref("IDBTransaction")}}</li>
+ <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
+ <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
+ <li>Using cursors: {{domxref("IDBCursor")}}</li>
+ <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/pt-br/web/api/idbfactory/index.html b/files/pt-br/web/api/idbfactory/index.html
new file mode 100644
index 0000000000..e422763fd2
--- /dev/null
+++ b/files/pt-br/web/api/idbfactory/index.html
@@ -0,0 +1,210 @@
+---
+title: IDBFactory
+slug: Web/API/IDBFactory
+translation_of: Web/API/IDBFactory
+---
+<p>{{APIRef("IndexedDB")}}</p>
+
+<div>
+<p>A interface IDBFactory, pertencente a <a href="/en-US/docs/IndexedDB">IndexedDB API</a> , permite que aplicativos acessem de forma assíncrona os bancos de dados indexados. O objeto que implementa a interface é o window.indexedDB, com este objeto é possível criar, acessar, modificar e excluir informações de um banco de dados. </p>
+
+<p>{{AvailableInWorkers}}</p>
+</div>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("IDBFactory.open")}}</dt>
+ <dd>Realizar a abertura de uma <a href="https://developer.mozilla.org/en-US/docs/IndexedDB#gloss_database_connection">conexão com uma base de dados</a>.</dd>
+ <dt>{{domxref("IDBFactory.deleteDatabase")}}</dt>
+ <dd>Remove uma base de dados.</dd>
+ <dt>{{domxref("IDBFactory.cmp")}}</dt>
+ <dd>Compara dois valores chaves e determina se elas são iguais e se não, quem é a maior.</dd>
+</dl>
+
+<h3 id="Métodos_Obsoletos">Métodos Obsoletos</h3>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/IDBFactory.open-obsolete">IDBFactory.open</a></code>, a versão original {{ obsolete_inline }}</dt>
+ <dd>Este método realizava <a href="https://developer.mozilla.org/en-US/docs/IndexedDB#gloss_database_connection">conexão com uma base de dados</a>, ele ainda é usado em alguns navegadores.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>No código abaixo, realizamos uma conexão com um banco de dados e incluímos manipuladores para os casos de sucesso e erro. Você pode obter o <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> app como exemplo (<a class="external" href="http://mdn.github.io/to-do-notifications/">Visualizar exemplo</a>.)</p>
+
+<pre class="brush:js;highlight:[10]">var note = document.querySelector("ul");
+
+// In the following line, you should include the prefixes of implementations you want to test.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// DON'T use "var indexedDB = ..." if you're not in a function.
+// Moreover, you may need references to some window.IDB* objects:
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)
+
+// Let us open version 4 of our database
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// these two event handlers act on the database being opened successfully, or not
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;Error loading database.&lt;/li&gt;';
+};
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Database initialised.&lt;/li&gt;';
+
+  // store the result of opening the database in the db variable. This is used a lot later on, for opening transactions and suchlike.
+  db = DBOpenRequest.result;
+};
+</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('IndexedDB', '#idl-def-IDBFactory', 'IDBFactory')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#factory-interface", "IDBFactory")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</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>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(23)}} {{property_prefix("webkit")}}<br>
+    {{CompatChrome(24)}} (unprefixed)<br>
+    {{CompatChrome(38)}} (prefixes deprecated)<br>
+    {{CompatChrome(57)}} (prefixes removed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15<br>
+    {{CompatOpera(44)}} (prefixes removed)</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}} (unprefixed)<br>
+    {{CompatChrome(38)}} (prefixes deprecated)<br>
+    {{CompatChrome(57)}} (prefixes removed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatOpera(44)}} (prefixes removed)</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Indexed Database 2.0</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(45)}}</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>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatChrome(38)}} (prefixes deprecated)<br>
+    {{CompatChrome(57)}} (prefixes removed)</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatChrome(38)}} (prefixes deprecated)<br>
+    {{CompatChrome(57)}} (prefixes removed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22<br>
+    {{CompatOperaMobile(44)}} (prefixes removed)</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}} (unprefixed)<br>
+    {{CompatChrome(38)}} (prefixes deprecated)<br>
+    {{CompatChrome(57)}} (prefixes removed)</td>
+   <td>{{CompatVersionUnknown}} (unprefixed)<br>
+    {{CompatChrome(38)}} (prefixes deprecated)<br>
+    {{CompatChrome(57)}} (prefixes removed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatOperaMobile(44)}} (prefixes removed)</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Indexed Database 2.0</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Usando IndexedDB</a></li>
+ <li>Inicializando uma Transaction: {{domxref("IDBDatabase")}}</li>
+ <li>Usando uma Transaction: {{domxref("IDBTransaction")}}</li>
+ <li>Configurando um Intervalo de chaves: {{domxref("IDBKeyRange")}}</li>
+ <li>Recuperando e modificando dados: {{domxref("IDBObjectStore")}}</li>
+ <li>Usando cursors: {{domxref("IDBCursor")}}</li>
+ <li>Exemplo de referência: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">Visualizar exemplo</a>.)</li>
+</ul>
diff --git a/files/pt-br/web/api/imagecapture/index.html b/files/pt-br/web/api/imagecapture/index.html
new file mode 100644
index 0000000000..242ec1ac22
--- /dev/null
+++ b/files/pt-br/web/api/imagecapture/index.html
@@ -0,0 +1,116 @@
+---
+title: ImageCapture
+slug: Web/API/ImageCapture
+translation_of: Web/API/ImageCapture
+---
+<div>{{APIRef("MediaStream Image")}}</div>
+
+<p><span class="seoSummary">A interface <strong><code>ImageCapture</code></strong> da <a href="/en-US/docs/Web/API/MediaStream_Image_Capture_API">MediaStream Image Capture API</a> fornece métodos para permitir a captura de images ou fotos de uma câmera ou de um dispositivo fotográfico. É fornecido uma interface para capturar images de um dispositive fotográfico referenciado por meio de um {{domxref("MediaStreamTrack")}} válido.</span></p>
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("ImageCapture.ImageCapture()", "ImageCapture()")}}</dt>
+ <dd>Cria um novo objeto <code>ImageCapture</code> que pode ser usado para capturar quadros estáticos (fotos) de um determinado {{domxref ("MediaStreamTrack")}} que representa um fluxo de vídeo.</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("ImageCapture.track")}} {{readonlyinline}}</dt>
+ <dd>Retorna uma referência ao {{domxref ("MediaStreamTrack")}} passado ao construtor.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p>A interface do <code>ImageCapture</code> é baseada em {{domxref ("EventTarget")}}}, portanto inclui os métodos definidos por essa interface e os listados abaixo.</p>
+
+<dl>
+ <dt>{{domxref("ImageCapture.takePhoto()")}}</dt>
+ <dd>Faz uma única exposição usando o dispositivo de captura de vídeo que busca um {{domxref ("MediaStreamTrack")}} e retorna um {{jsxref ("Promise")}} que resolve com um {{domxref ("Blob")}} que contém o dados.</dd>
+ <dt>{{domxref("ImageCapture.getPhotoCapabilities()")}}</dt>
+ <dd>Retorna um {{jsxref ("Promise")}} que resolve com um objeto {{domxref ("PhotoCapabilities")}} que contém os intervalos de opções de configuração disponíveis.</dd>
+ <dt>{{domxref("ImageCapture.getPhotoSettings()")}}</dt>
+ <dd>Retorna um {{jsxref ("Promise")}} que é resolvido com um objeto {{domxref ("PhotoSettings")}} que contém as definições de configuração de foto atuais.</dd>
+ <dt>{{domxref("ImageCapture.grabFrame()")}}</dt>
+ <dd>Tira uma captura instantânea do vídeo ao vivo em um {{domxref ("MediaStreamTrack")}}, retornando um {{domxref ("ImageBitmap")}}, se for bem-sucedido.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>O código a seguir foi retirado do <a href="https://googlechrome.github.io/samples/image-capture/grab-frame-take-photo.html">Chrome's Grab Frame - Take Photo Sample</a>. Como o <code>ImageCapture</code> requer algum lugar para capturar uma imagem, o exemplo abaixo começa com o dispositivo de mídia de um dispositivo (em outras palavras, uma câmera).</p>
+
+<p>Este exemplo mostra, aproximadamente, um {{domxref ("MediaStreamTrack")}} extraído do {{domxref ("MediaStream")}} de um dispositivo. A faixa é usada para criar um objeto <code>ImageCapture</code>, para que seja possível chamar <code>takePhoto()</code> e <code>grabFrame()</code>. Por fim, mostra como aplicar os resultados dessas chamadas a um objeto de tela.</p>
+
+<pre class="brush: js">var imageCapture;
+
+function onGetUserMediaButtonClick() {
+  navigator.mediaDevices.getUserMedia({video: true})
+  .then(mediaStream =&gt; {
+    document.querySelector('video').srcObject = mediaStream;
+
+    const track = mediaStream.getVideoTracks()[0];
+    imageCapture = new ImageCapture(track);
+  })
+  .catch(error =&gt; console.log(error));
+}
+
+function onGrabFrameButtonClick() {
+  imageCapture.grabFrame()
+  .then(imageBitmap =&gt; {
+    const canvas = document.querySelector('#grabFrameCanvas');
+    drawCanvas(canvas, imageBitmap);
+  })
+  .catch(error =&gt; console.log(error));
+}
+
+function onTakePhotoButtonClick() {
+  imageCapture.takePhoto()
+  .then(blob =&gt; createImageBitmap(blob))
+  .then(imageBitmap =&gt; {
+    const canvas = document.querySelector('#takePhotoCanvas');
+    drawCanvas(canvas, imageBitmap);
+  })
+  .catch(error =&gt; console.log(error));
+}
+
+/* Utils */
+
+function drawCanvas(canvas, img) {
+  canvas.width = getComputedStyle(canvas).width.split('px')[0];
+  canvas.height = getComputedStyle(canvas).height.split('px')[0];
+  let ratio  = Math.min(canvas.width / img.width, canvas.height / img.height);
+  let x = (canvas.width - img.width * ratio) / 2;
+  let y = (canvas.height - img.height * ratio) / 2;
+  canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
+  canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height,
+      x, y, img.width * ratio, img.height * ratio);
+}
+
+document.querySelector('video').addEventListener('play', function() {
+  document.querySelector('#grabFrameButton').disabled = false;
+  document.querySelector('#takePhotoButton').disabled = false;
+});</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('MediaStream Image','#imagecaptureapi','ImageCapture')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
+
+
+
+<p>{{Compat("api.ImageCapture")}}</p>
diff --git a/files/pt-br/web/api/index.html b/files/pt-br/web/api/index.html
new file mode 100644
index 0000000000..4537f1f179
--- /dev/null
+++ b/files/pt-br/web/api/index.html
@@ -0,0 +1,32 @@
+---
+title: APIs da Web
+slug: Web/API
+tags:
+  - API
+  - DOM
+  - JavaScript
+  - Referencia
+  - Web
+translation_of: Web/API
+---
+<p>Ao escrever código para a Web, há muitas APIs da Web disponíveis. Abaixo está uma lista de todas as APIs e interfaces (tipos de objeto) que você pode usar ao desenvolver seu aplicativo ou site da Web.</p>
+
+<p>As APIs da Web são normalmente usadas com JavaScript, embora isso nem sempre tenha que ser o caso.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<p>Esta é uma lista de todas as APIs disponíveis.</p>
+
+<p>{{ListGroups}}</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>Esta é uma lista de todas as interfaces (isto é, tipos de objetos) disponíveis.</p>
+
+<div>{{APIListAlpha}}</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/pt-BR/docs/Web/Events">Referência de evento de API da Web</a></li>
+</ul>
diff --git a/files/pt-br/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/pt-br/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html
new file mode 100644
index 0000000000..c83b48750e
--- /dev/null
+++ b/files/pt-br/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html
@@ -0,0 +1,249 @@
+---
+title: Conceitos Básicos sobre IndexedDb
+slug: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
+tags:
+  - Avançado
+  - IndexedDB
+  - conceitos
+translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
+---
+<p>{{DefaultAPISidebar("IndexedDB")}}</p>
+
+<div class="summary">
+<p><strong>IndexedDB</strong> é uma forma de você armazenar dados no browser do usuário. <span lang="pt-PT">Permite criar aplicativos da Web com habilidades de consulta ricas, independentemente da disponibilidade da rede, esses aplicativos podem trabalhar on-line e off-line. IndexedDB é útil para aplicativos que armazenam uma grande quantidade de dados (por exemplo, um catálogo de DVDs em uma biblioteca de empréstimos) e aplicativos que não precisam de conectividade persistente à Internet para trabalhar (por exemplo, clientes de e-mail, listas de tarefas e Blocos de notas).</span></p>
+</div>
+
+<h2 class="western" id="Sobre_esse_documento">Sobre esse documento</h2>
+
+<p>Essa introdução discute conceitos essenciais e a terminologia do IndexedDB. Ele vai ter dar um visão geral e explicar conceitos chaves.</p>
+
+<p>Você vai achar útil:</p>
+
+<ul>
+ <li>
+  <p style="margin-bottom: 0cm;">Para aprender mais sobre termos do IndexedDB, veja a seção <a href="#definitions">Definições</a>.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0cm;">Para um tutorial detalhado de como usar a API, veja <a href="https://developer.mozilla.org/pt-BR/docs/IndexedDB/Usando_IndexedDB">Usando IndexedDB</a>.</p>
+ </li>
+ <li>
+  <p style="margin-bottom: 0cm;">Para obter a documentação da referência da API IndexedDB, volte para o artigo principal <a href="https://developer.mozilla.org/pt-BR/docs/IndexedDB">IndexedDB API</a> e suas sub-páginas, que documentam os tipos de objetos suportados pelo IndexedDB.</p>
+ </li>
+ <li>
+  <p>Para mais informações  de como o navegador armazena seus dados em segundo plano, leia <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Browser storage limits and eviction criteria</a>.</p>
+ </li>
+</ul>
+
+<h2 class="western" id="Visão_geral_do_IndexedDB">Visão geral do IndexedDB</h2>
+
+<p>IndexedDB permite você armazenar e consultar objetos que são indexados com uma chave. Todas as mudanças na base dados são feitas por transações. Como a maioria soluções de armazenamento web, IndexedDB segue a <a href="http://www.w3.org/Security/wiki/Same_Origin_Policy">política de mesma origem</a>. Então enquanto você pode acessar dados armazenados em um domínio, você não pode acessar em diferentes domínios.</p>
+
+<p>IndexedDB é uma API <a>assíncrona</a> que pode ser usada em diversos contextos, incluindo <a>WebWorkers</a>. Isso permite o uso de uma versão <a>síncrona</a> também, para o uso em web workers, mas isso foi removido da especificação por falta de interesse da comunidade web.</p>
+
+<p><br>
+ IndexedDB foi pensado para ser uma especificação concorrente ao banco de dados WebSQL, mas o W3C depreciou o WebSQL em 18 de novembro de 2010. Embora IndexedDB e WebSQL sejam soluções para armazenamento, eles não oferecem as mesmas funcionalidades. WebSQL Database é um sistema de acesso a banco de dados relacional, enquanto que IndexedDB é um sistema de tabelas indexadas.</p>
+
+<h2 class="western" id="Principais_conceitos">Principais conceitos</h2>
+
+<p> Se você já trabalhou com outros tipos de banco de dados, você pode esquecer enquanto trabalha com IndexedDB. E tenha esses importantes conceitos em mente:</p>
+
+<ul>
+ <li>
+  <p><strong>Bases de dados IndexedDB armazenam pares chave-valor.</strong> Os valores podem ser objetos de estruturas complexas, e chaves podem ser propriedades desses objetos. Você pode criar índices que usam qualquer propriedade dos objetos para pesquisa rápida, bem como enumerações ordenadas. As chaves podem ser objetos binários.</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB é </strong><strong>construído</strong><strong> em um modelo de base de dado</strong><strong>s</strong><strong> transacional</strong>. Tudo o que você faz no IndexedDB sempre acontece no contexo de uma <a href="#gloss_transaction">transaction</a>. A API IndexedDB fornece uma série de objetos que representam índices, tabelas, cursores, assim por diante, mas cada um vinculado a uma transação. Assim, você não pode executar comandos ou abrir cursores fora de uma transação. As transações têm um tempo de vida bem definido, portanto, tentar usar uma transação após concluída irá gerar exceções. Além disso, as transações fazem commits automaticamente sem opção de se fazer manualmente.</p>
+
+  <p>Esse modelo de transação é muito útil se você considerar que o usuário pode abrir duas instâncias da sua aplicação em duas diferentes abas simultaneamente. Sem as operações de transação, As duas instâncias poderiam interferir outras modificações. Se você não está familiarizado com transações no banco de dados, leia o  <a href="https://en.wikipedia.org/wiki/Database_transaction">Wikipedia article on transactions</a>. Também veja <a href="#gloss_transaction">transaction</a> na seção de definições.</p>
+ </li>
+</ul>
+
+<p style="margin-bottom: 0cm; line-height: 100%;"> </p>
+
+<ul>
+ <li>
+  <p><strong><span id="result_box" lang="pt"><span>A API IndexedDB é na maior parte assíncrona</span></span>.</strong> A API não retorna dados usando valores; em vez disso você deve passar uma função <a href="https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/Using_js-ctypes/Declaring_and_Using_Callbacks">callback</a>. <span id="result_box" lang="pt"><span>Você não "armazena" um valor no banco de dados, ou "recupera" um valor do banco de dados através de meios síncronos.</span> <span>Em vez disso, você "solicita" que uma operação de banco de dados aconteça.</span> <span>Você será notificado por um evento DOM quando a operação for concluída e o tipo de evento recebido informará se a operação foi bem-sucedida ou falhou.</span> <span>Isto soa um pouco complicado no início, mas faz sentido no fundo. Não é tão diferente da maneira que </span></span><a href="/en/DOM/XMLHttpRequest" title="https://developer.mozilla.org/en/xmlhttprequest">XMLHttpRequest</a> funciona.</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB usa várias requisições. </strong> <span id="result_box" lang="pt"><span>As </span></span>requisições <span lang="pt"><span>são objetos que recebem os eventos  de sucesso ou falha do DOM mencionados anteriormente</span></span> . Eles têm propriedades <code style="font-size: 14px;">onsuccess</code> e <code style="font-size: 14px;">onerror</code>, e você pode chamar  <code style="font-size: 14px;">addEventListener()</code> e <code style="font-size: 14px;">removeEventListener()</code> neles. Eles também tem as propriedades <code style="font-size: 14px;">readyState</code>, <code style="font-size: 14px;">result</code>, e <code style="font-size: 14px;">errorCode</code> que informam o status da requisição. A propriedade <code style="font-size: 14px;">result</code> é particurlamente mágica, pode ser muitas coisas diferentes , depende de como a requisção foi feita (por exemplo, uma instancia <code style="font-size: 14px;">IDBCursor</code>,  ou uma chave para um valor que você inseriu na base).</p>
+ </li>
+ <li>
+  <p><span id="result_box" lang="pt"><span><strong>IndexedDB usa eventos DOM para notificá-lo quando os resultados estão disponíveis</strong>.</span> <span>Eventos DOM sempre têm um tipo propriedade (em IndexedDB, é mais comumente definido como "sucesso" ou "erro").</span> <span>Os eventos DOM também têm uma propriedade de destino que indica para onde o evento é dirigido.</span> <span>Na maioria dos casos, o destino de um evento é o objeto IDBRequest que foi gerado como resultado de alguma operação no banco de dados.</span> <span>Eventos de sucesso não disparam um evento em bolha (bubble up) e não podem ser cancelados.</span> <span>Eventos de erro, por outro lado, criam evento bolha  que podem ser cancelados.</span> <span>Isso é muito importante, pois eventos de erro podem cancelar qualquer transações em que estejam rodando, a menos que elas sejam canceladas.</span></span></p>
+ </li>
+ <li>
+  <p><span id="result_box" lang="pt"><span><strong>IndexedDB é orientado a objetos</strong>.</span> <span>IndexedDB não é um banco de dados relacional com tabelas que representam coleções de linhas e colunas.</span> <span>Esta diferença importante e fundamental afeta a maneira como você projeta e constrói suas aplicações.</span></span></p>
+
+  <p><span id="result_box" lang="pt"><span>Em um banco de dados relacional tradicional, você teria uma tabela que armazena uma coleção de linhas de dados e colunas de tipos de dados nomeados.</span> <span>IndexedDB, por outro lado, requer que você crie um armazenamento de objetos para um tipo de dado e simplesmente persista objetos JavaScript nesse armazenamento.</span> <span>Cada armazenamento de objeto pode ter uma coleção de índices que o torna eficiente para consultar e iterar</span></span>. Se você não está familiarizado  com sitemas de banco de dados orientados a objetos, leia o artigo <a class="external" href="https://en.wikipedia.org/wiki/Object_database" title="http://en.wikipedia.org/wiki/Object_database">Wikipedia article on object database</a>.</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB não usa Structured Query Language (<abbr>SQL</abbr>).</strong> <span id="result_box" lang="pt"><span>Ele usa consultas em um índice que produz um cursor, que você usa para iterar em todo o conjunto de resultados.</span> <span>Se você não estiver familiarizado com os sistemas NoSQL, leia o artigo</span></span> <a class="external" href="https://en.wikipedia.org/wiki/NoSQL" title="http://en.wikipedia.org/wiki/NoSQL">Wikipedia article on NoSQL</a>.</p>
+ </li>
+ <li>
+  <p><strong>IndexedDB segue a política de mesma origem</strong>. Uma origem equivale a um domínio, um protocolo de camada de aplicação e porta de uma URL de um documento de onde um script está sendo executado. Cada origem tem seu próprio conjunto de bancos de dados associados. Cada banco de dados tem um nome que o identifica dentro da origem.<br>
+   <br>
+   A restrição de segurança imposta sobre o IndexedDB previne que aplicações acessem dados de uma origem diferente. Por exemplo, enquanto um app ou página em <a class="external" href="http://www.example.com/app/" rel="freelink">http://www.exemplo.com/app/</a> pode obter dados de <a class="external" href="http://www.example.com/app/" rel="freelink">http://www.exemplo.com/dir/</a>, porque compartilham a mesma origem, ela não pode obter dados de <a class="external" href="http://www.example.com/app/" rel="freelink">http://www.exemplo.com:8080/app</a> (porta diferente) ou <a class="external" href="http://www.example.com/app/" rel="freelink">https://www.exemplo.com/app</a> (protocolo diferente), porque possuem diferentes origens.<br>
+    </p>
+
+  <div class="note"><strong>Nota</strong>: O conteúdo de janelas de terceiros (por exemplo, {{htmlelement ("iframe")}} conteúdo) pode acessar o armazenamento IndexedDB para a origem em que está incorporado, a menos que o navegador esteja configurado para <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">nunca aceitar cookies de terceiros</a> (veja {{bug ("1147821 ")}}.)</div>
+ </li>
+</ul>
+
+<h2 id="definitions" name="definitions">Definições</h2>
+
+<p>Essa seção define e explica os termos usado na API IndexedDB.</p>
+
+<h3 id="database" name="database">Base de dados</h3>
+
+<dl>
+ <dt>Base de dados</dt>
+ <dd>Um repositório de informação, normalmente é composto por um ou mais <a href="#gloss_object_store" title="#gloss_object_store"><em>object stores</em></a>. cada base de dados deve possuir:
+ <ul>
+  <li>Name. This identifies the database within a specific origin and stays constant throughout its lifetime. The name can be any string value (including an empty string).</li>
+  <li>
+   <p>Current <a href="#gloss_version"><em>version</em></a>. When a database is first created, its version is the integer 1 if not specified otherwise. Each database can have only one version at any given time.</p>
+  </li>
+ </ul>
+ </dd>
+ <dt><a name="durable">durable</a></dt>
+ <dd>
+ <p>In Firefox, IndexedDB used to be <strong>durable</strong>, meaning that in a readwrite transaction {{domxref("IDBTransaction.oncomplete")}} was fired only when all data was guaranteed to have been flushed to disk.</p>
+
+ <p>As of Firefox 40, IndexedDB transactions have relaxed durability guarantees to increase performance (see {{Bug("1112702")}}), which is the same behaviour as other IndexedDB-supporting browsers. In this case the {{Event("complete")}} event is fired after the OS has been told to write the data but potentially before that data has actually been flushed to disk. The event may thus be delivered quicker than before, however, there exists a small chance that the entire transaction will be lost if the OS crashes or there is a loss of system power before the data is flushed to disk. Since such catastrophic events are rare, most consumers should not need to concern themselves further.</p>
+
+ <div class="note">
+ <p><strong>Note</strong>: In Firefox, if you wish to ensure durability for some reason (e.g. you're storing critical data that cannot be recomputed later) you can force a transaction to flush to disk before delivering the <code>complete</code> event by creating a transaction using the experimental (non-standard) <code>readwriteflush</code> mode (see {{domxref("IDBDatabase.transaction")}}.) This is currently experimental, and can only be used if the <code>dom.indexedDB.experimental</code> pref is set to <code>true</code> in <code>about:config</code>.</p>
+ </div>
+ </dd>
+ <dt><a name="gloss_object_store">object store</a></dt>
+ <dd>
+ <p>The mechanism by which data is stored in the database. The object store persistently holds records, which are key-value pairs. Records within an object store are sorted according to the <em><a href="#gloss_key">keys</a></em> in an ascending order.</p>
+
+ <p>Every object store must have a name that is unique within its database. The object store can optionally have a <em><a href="#gloss_keygenerator">key generator</a></em> and a <em><a href="#gloss_keypath">key path</a></em>. If the object store has a key path, it is using <em><a href="#gloss_inline_key">in-line keys</a></em>; otherwise, it is using <em><a href="#gloss_outofline_key">out-of-line keys</a></em>.</p>
+
+ <p>For the reference documentation on object store, see <a href="../../../../en/IndexedDB/IDBObjectStore" rel="internal">IDBObjectStore</a> or <a href="../../../../en/IndexedDB/IDBObjectStoreSync" rel="internal">IDBObjectStoreSync</a>.</p>
+ </dd>
+ <dt><a name="gloss_version">version</a></dt>
+ <dd>When a database is first created, its version is the integer 1. Each database has one version at a time; a database can't exist in multiple versions at once. The only way to change the version is by opening it with a greater version than the current one. This will start a <a href="/en-US/docs/Web/API/IDBVersionChangeRequest"><code>versionchange</code></a> <em>transaction</em> and fire an <a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB"><code>upgradeneeded</code></a> event. The only place where the schema of the database can be updated is inside the handler of that event.</dd>
+ <dd>Note: This definition describes the <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">most recent specification</a>, which is only implemented in up-to-date browsers. Old browsers implemented the now deprecated and removed <a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="/en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a> method.</dd>
+ <dt><a name="gloss_database_connection">database connection</a></dt>
+ <dd>An operation created by opening a <em><a href="#gloss_database">database</a></em>. A given database can have multiple connections at the same time.</dd>
+ <dt><a name="gloss_transaction">transaction</a></dt>
+ <dd>
+ <p>An atomic set of data-access and data-modification operations on a particular database. It is how you interact with the data in a database. In fact, any reading or changing of data in the database must happen in a transaction.</p>
+
+ <p>A database connection can have several active transaction associated with it at a time, so long as the writing transactions do not have overlapping <a href="#scope"><em>scopes</em></a>. The scope of transactions, which is defined at creation, determines which object stores the transaction can interact with and remains constant for the lifetime of the transaction. So, for example, if a database connection already has a writing transaction with a scope that just covers the <code>flyingMonkey</code> object store, you can start a second transaction with a scope of the <code>unicornCentaur</code> and <code>unicornPegasus</code> object stores. As for reading transactions, you can have several of them — even overlapping ones.</p>
+
+ <p>Transactions are expected to be short-lived, so the browser can terminate a transaction that takes too long, in order to free up storage resources that the long-running transaction has locked. You can abort the transaction, which rolls back the changes made to the database in the transaction. And you don't even have to wait for the transaction to start or be active to abort it.</p>
+
+ <p>The three modes of transactions are: <code>readwrite</code>, <code>readonly</code>, and <code>versionchange</code>. The only way to create and delete object stores and indexes is by using a <a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB"><code>versionchange</code></a> transaction. To learn more about transaction types, see the reference article for <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a>.</p>
+
+ <p>Because everything happens within a transaction, it is a very important concept in IndexedDB. To learn more about transactions, especially on how they relate to versioning, see <a href="../../../../en/IndexedDB/IDBTransaction" rel="internal">IDBTransaction</a>, which also has reference documentation. For the documentation on the synchronous API, see <a href="../../../../en/IndexedDB/IDBTransactionSync" rel="internal">IDBTransactionSync</a>.</p>
+ </dd>
+ <dt><a name="gloss_request">request</a></dt>
+ <dd>The operation by which reading and writing on a database is done. Every request represents one read or write operation.</dd>
+ <dt><a name="gloss_index">index</a></dt>
+ <dd>
+ <p>An index is a specialized object store for looking up records in another object store, called the <em>referenced object store</em>. The index is a persistent key-value storage where the value part of its records is the key part of a record in the referenced object store. The records in an index are automatically populated whenever records in the referenced object store are inserted, updated, or deleted. Each record in an index can point to only one record in its referenced object store, but several indexes can reference the same object store. When the object store changes, all indexes that refer to the object store are automatically updated.</p>
+
+ <p>Alternatively, you can also look up records in an object store using the <a href="#gloss_key"> key</a><em>.</em></p>
+
+ <p>To learn more on using indexes, see <a href="/en/IndexedDB/Using_IndexedDB#Using_an_index" title="en/IndexedDB/Using_IndexedDB#Using_an_index">Using IndexedDB</a>. For the reference documentation on index, see <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p>
+ </dd>
+</dl>
+
+<h3 id="key" name="key">Chave e valor</h3>
+
+<dl>
+ <dt><a name="gloss_key">key</a></dt>
+ <dd>
+ <p>A data value by which stored values are organized and retrieved in the object store. The object store can derive the key from one of three sources: a <em><a href="#gloss_keygenerator">key generator</a></em>, a <em><a href="#gloss_keypath">key path</a></em>, or an explicitly specified value. The key must be of a data type that has a number that is greater than the one before it. Each record in an object store must have a key that is unique within the same store, so you cannot have multiple records with the same key in a given object store.</p>
+
+ <p>A key can be one of the following types: <a href="/en/JavaScript/Reference/Global_Objects/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a>, <a href="/en/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, float, a binary blob, and <a href="/en/JavaScript/Reference/Global_Objects/Array" title="en/JavaScript/Reference/Global Objects/Array">array</a>. For arrays, the key can range from an empty value to infinity. And you can include an array within an array.</p>
+
+ <p>Alternatively, you can also look up records in an object store using the <em><a href="#gloss_index">index</a>.</em></p>
+ </dd>
+ <dt><a name="gloss_keygenerator">key generator</a></dt>
+ <dd>A mechanism for producing new keys in an ordered sequence. If an object store does not have a key generator, then the application must provide keys for records being stored. Generators are not shared between stores. This is more a browser implementation detail, because in web development, you don't really create or access key generators.</dd>
+ <dt><a name="gloss_inline_key">in-line key</a></dt>
+ <dd>A key that is stored as part of the stored value. It is found using a <em>key path</em>. An in-line key can be generated using a generator. After the key has been generated, it can then be stored in the value using the key path or it can also be used as a key.</dd>
+ <dt><a name="gloss_outofline_key">out-of-line key</a></dt>
+ <dd>A key that is stored separately from the value being stored.</dd>
+ <dt><a name="gloss_keypath">key path</a></dt>
+ <dd>Defines where the browser should extract the key from in the object store or index. A valid key path can include one of the following: an empty string, a JavaScript identifier, or multiple JavaScript identifiers separated by periods or an array containing any of those. It cannot include spaces.</dd>
+ <dt><a name="gloss_value">value</a></dt>
+ <dd>
+ <p>Each record has a value, which could include anything that can be expressed in JavaScript, including <a href="/en/JavaScript/Reference/Global_Objects/Boolean" rel="internal" title="en/JavaScript/Reference/Global_Objects/Boolean">boolean</a>, <a href="/en/JavaScript/Reference/Global_Objects/Number" rel="internal" title="en/JavaScript/Reference/Global_Objects/Number">number</a>, <a href="/en/JavaScript/Reference/Global_Objects/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a>, <a href="/en/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, <a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global Objects/Object">object</a>, <a href="/en/JavaScript/Reference/Global_Objects/Array" rel="internal" title="en/JavaScript/Reference/Global_Objects/Array">array</a>, <a href="/en/JavaScript/Reference/Global_Objects/RegExp" rel="internal" title="en/JavaScript/Reference/Global_Objects/RegExp">regexp</a>, <a href="/en/JavaScript/Reference/Global_Objects/undefined" title="en/JavaScript/Reference/Global_Objects/undefined">undefined</a>, and null.</p>
+
+ <p>When an object or array is stored, the properties and values in that object or array can also be anything that is a valid value.</p>
+
+ <p><a href="/en/DOM/Blob" title="en/DOM/Blob">Blobs</a> and files can be stored, cf. <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">specification</a> {{ fx_minversion_inline("11") }}.</p>
+ </dd>
+</dl>
+
+<h3 id="range" name="range">Intervalo e escopo</h3>
+
+<dl>
+ <dt id="scope"><a id="gloss_scope" name="gloss_scope">scope</a></dt>
+ <dd>The set of object stores and indexes to which a transaction applies. The scopes of read-only transactions can overlap and execute at the same time. On the other hand, the scopes of writing transactions cannot overlap. You can still start several transactions with the same scope at the same time, but they just queue up and execute one after another.</dd>
+ <dt id="cursor"><a id="gloss_cursor" name="gloss_cursor">cursor</a></dt>
+ <dd>A mechanism for iterating over multiple records with a <em>key range</em>. The cursor has a source that indicates which index or object store it is iterating. It has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. For the reference documentation on cursors, see <a href="../../../../en/IndexedDB/IDBCursor" rel="internal">IDBCursor</a> or <a href="../../../../en/IndexedDB/IDBCursorSync" rel="internal">IDBCursorSync</a>.</dd>
+ <dt id="key_range"><a id="gloss_keyrange" name="gloss_keyrange">key range</a></dt>
+ <dd>
+ <p>A continuous interval over some data type used for keys. Records can be retrieved from object stores and indexes using keys or a range of keys. You can limit or filter the range using lower and upper bounds. For example, you can iterate over all values of a key between x and y.</p>
+
+ <p>For the reference documentation on key range, see <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p>
+ </dd>
+</dl>
+
+<h2 id="limitations" name="limitations">Limitações</h2>
+
+<p>IndexedDB is designed to cover most cases that need client-side storage. However, it is not designed for a few cases like the following:</p>
+
+<ul>
+ <li>Internationalized sorting. Not all languages sort strings in the same way, so internationalized sorting is not supported. While the database can't store data in a specific internationalized order, you can sort the data that you've read out of the database yourself. Note, however, that <a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#Locale-aware_sorting">locale-aware sorting</a> has been allowed with an experimental flag enabled (currently for Firefox only) since Firefox 43.</li>
+ <li>Synchronizing. The API is not designed to take care of synchronizing with a server-side database. You have to write code that synchronizes a client-side indexedDB database with a server-side database.</li>
+ <li>Full text searching. The API<span style="direction: ltr;"> does not have an</span><span style="direction: ltr;"> equivalent of the <code>LIKE</code> operator in SQL. </span></li>
+</ul>
+
+<p>In addition, be aware that browsers can wipe out the database, such as in the following conditions:</p>
+
+<ul>
+ <li>The user requests a wipe out. Many browsers have settings that let users wipe all data stored for a given website, including cookies, bookmarks, stored passwords, and IndexedDB data.</li>
+ <li>The browser is in private browsing mode. Some browsers, have "private browsing" (Firefox) or "incognito" (Chrome) modes. At the end of the session, the browser wipes out the database.</li>
+ <li>The disk or quota limit has been reached.</li>
+ <li>The data is corrupt.</li>
+ <li>An incompatible change is made to the feature.</li>
+</ul>
+
+<p>The exact circumstances and browser capabilities change over time, but the general philosophy of the browser vendors is to make the best effort to keep the data when possible.</p>
+
+<h2 id="next" name="next">Próximos passos</h2>
+
+<p>With these big concepts under our belts, we can get to more concrete stuff. For a tutorial on how to use the API, see <a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<p>Especificação</p>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/"><span style="direction: ltr;">Indexed Database API Specification</span></a></li>
+</ul>
+
+<p>Referência</p>
+
+<ul>
+ <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li>
+</ul>
+
+<p>Tutoriais</p>
+
+<ul>
+ <li><a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a></li>
+ <li><a class="external" href="http://www.html5rocks.com/en/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">A simple TODO list using HTML5 IndexedDB</a><span class="external">. </span><span class="external"> {{ Note("This example uses an old version of the spec and does not work on up-to-date browsers - it still uses the removed <code>setVersion()</code> method.") }}</span></li>
+</ul>
+
+<p>Artigo relacionado</p>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li>
+</ul>
diff --git a/files/pt-br/web/api/indexeddb_api/index.html b/files/pt-br/web/api/indexeddb_api/index.html
new file mode 100644
index 0000000000..06e84254f2
--- /dev/null
+++ b/files/pt-br/web/api/indexeddb_api/index.html
@@ -0,0 +1,167 @@
+---
+title: IndexedDB
+slug: Web/API/IndexedDB_API
+translation_of: Web/API/IndexedDB_API
+---
+<div class="summary">
+<p>IndexedDB é uma API para armazenamento client-side de quantidades significantes de informações e buscas com alta performance por índices. Enquanto <a href="https://developer.mozilla.org/pt-BR/docs/DOM/Storage">DOM Storage</a> é útil para armazenamento de pequenas quantidade de dados, IndexedDB é a solução para grande porção de dados estruturados.</p>
+</div>
+
+<p>Esta página basicamente é o ponto de entrada para uma descrição técnica dos objetos da API. Precisando de suporte ainda mais inicial consulte os <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">Conceitos Básicos sobre IndexedDb</a>. Para mais detalhes sobre a implementação, veja <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB">Usando IndexedDB</a>.<br>
+ <br>
+ IndexedDB provém APIs separadas para acesso tanto síncrono quanto assíncrono. As APIs síncronas devem ser utilizadas apenas dentro de <a href="https://developer.mozilla.org/en-US/docs/DOM/Worker">Web Workers</a>, apesar de não ser implementada por nenhum navegador atualmente. A API assíncrona funciona tanto com ou sem Web Workers, sendo que o Firefox ainda não implementou este.</p>
+
+<h2 id="API_Assíncrona">API Assíncrona</h2>
+
+<p>Os métodos da API assíncrona são chamados sem bloquear a thread que os chama. Para obter acesso assíncrono à database, chame <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBFactory.open">open()</a> no atributo <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBEnvironment.indexedDB">indexedDB</a> do objeto <a href="https://developer.mozilla.org/en-US/docs/DOM/window">window</a>, que retornará um objeto {{domxref("IDBRequest")}}. Operações assíncronas comunicam-se com a aplicação que os chamam executando eventos nos objetos {{domxref("IDBRequest")}}.</p>
+
+<div class="note">
+<p>Nota: O objeto indexedDB é prefixado em navegadores mais antigos (propriedade mozIndexedDB em Gecko &lt; 16, webkitIndexedDb em Chrome e msIndexedDB no IE 10).</p>
+</div>
+
+<p>As interfaces da API assíncrona do IndexedDB são:</p>
+
+<dl>
+ <dt>{{domxref("IDBFactory")}}</dt>
+ <dd>Provém acesso ao banco de dados. É a interface implementado pelo objeto global indexedDB e é, portanto, o ponto de entrada para API.</dd>
+ <dt>{{domxref("IDBCursor")}}</dt>
+ <dd>Itera sobre objectStores e índices</dd>
+ <dt>{{domxref("IDBCursorWithValue")}}</dt>
+ <dd>Itera sobre objectStores e índices e retorna o atual valor do cursor</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>
+ <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("IDBIndex")}}</dt>
+ <dd>Provides access to the metadata of an index.</dd>
+ <dt>{{domxref("IDBKeyRange")}}</dt>
+ <dd>Define um alcance das chaves.</dd>
+ <dt>{{domxref("IDBObjectStore")}}</dt>
+ <dd>Representa um ObjectStore</dd>
+ <dt>{{domxref("IDBOpenDBRequest")}}</dt>
+ <dd>Representa uma requisição para abrir o banco de dados.</dd>
+ <dt>{{domxref("IDBRequest")}}</dt>
+ <dd>Provém acesso a resultados de requisições assíncronas ao banco de dados e a objetos do banco de dados. É o que você obtém quando chama um método assíncrono.</dd>
+ <dt>{{domxref("IDBTransaction")}}</dt>
+ <dd>Representa uma transação. Você cria a transação no banco de dados, especifíca o escopo (tal como qual objectStore você deseja acessar), e determina que tipo de acesso (apenas leitura ou também escrita) daquilo que você deseja.</dd>
+</dl>
+
+<ul>
+</ul>
+
+<p>Uma versão anterior da especificação também define estas interfaces agora removidas. Elas ainda estão documentadas caso você precise atualizar códigos escritos anteriormente:</p>
+
+<dl>
+ <dt>{{domxref("IDBVersionChangeRequest")}}</dt>
+ <dd>Representa uma requisição para alterar a versão do banco de dados. O modo de alterar a versão do banco de dados mudou então (chamando IDBFactory.open sem também chamar IDBDatabase.setVersion) e a interface IDBOpenDBRequest agora tem a funcionalidade do removido IDBVersionChangeRequest.</dd>
+ <dt>{{domxref("IDBDatabaseException")}}  {{ obsolete_inline() }}</dt>
+ <dd>Representa condições de erro que podem ser encontradas enquanto performando operações no banco de dados.</dd>
+</dl>
+
+<ul>
+</ul>
+
+<div class="note">
+<p> <strong>Nota</strong>: há também a <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Syncronous_API">versão síncrona da API</a>. A versão síncrona não tem implementação em qualquer navegador. É feita para ser utilizada com <a href="https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers">WebWorkers</a>.</p>
+</div>
+
+<h2 id="Limites_de_Armazenamento">Limites de Armazenamento</h2>
+
+<p>Não há qualquer limite em um único elemento da database. Entretanto podem haver limites quanto ao tamanho de cada banco de dados. Este limite (e a maneira com qual o usuário chega a ele) pode variar de um navegador para outro:</p>
+
+<ul>
+ <li>
+  <p>Firefox: não há limite no tamanho do banco de dados. A interface do usuário irá apenas pedir a permissão para armazenar conjuntos com tamanho maior que 50mb. Este limite de tamanho pode ser customizado através da preferência dom.indexedDB.warningQuota  (que é definida em <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>).</p>
+ </li>
+ <li>
+  <p>Google Chrome: veja <a class="link-https" href="https://developers.google.com/chrome/whitepapers/storage#temporary" rel="freelink">https://developers.google.com/chrome...rage#temporary</a></p>
+ </li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplos</h2>
+
+<ul>
+ <li>Um grande exemplo de para o que o indexedDb pode ser utilizado  na web é o exemplo do Marco Castelluccion, vencedor do IndexedDB Mozilla DevDerby. A demonstração vencedora foi o eLibri, uma aplicação biblioteca e leitora de Ebook.</li>
+ <li>Você deveria também checar a referência de aplicações exemplo neste documento de referências: <a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">Notificações de A Fazer</a> (<a href="http://chrisdavidmills.github.io/to-do-notifications/">veja ao vivo</a>). Nem todo fragmento de código aparece neste exemplo, mas todo exemplo usa a mesma estrutura de dados e sintaxe, e fará sentido no contexto da aplicação.</li>
+</ul>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade dos navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>API Assíncrona</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>11.1</td>
+  </tr>
+  <tr>
+   <td>API Síncrona (com <a href="https://developer.mozilla.org/en-US/docs/DOM/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>API Assíncrona</td>
+   <td>4.4</td>
+   <td>{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10</td>
+   <td>17</td>
+   <td>10.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="note">
+<p>Nota: alguns browsers ainda não suportam IndexedDB mas suportam WebSQL, mais especificamente Safari/Webkit no desktop e iOS. Uma maneira de driblar este problema é utilizar IndexedDB Polyfill ou Shim, que recorre ao WebSQL para navegadores que não suportam.</p>
+</div>
+
+<h2 id="Veja_Também">Veja Também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="en-US/docs/IndexedDB/Basic Concepts Behind IndexedDB">Conceitos Básicos sobre IndexedDB</a></li>
+ <li><a href="/en-US/docs/IndexedDB/Using_IndexedDB" title="en-US/docs/IndexedDB/IndexedDB primer">Utilizando IndexedDB</a></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/">Armazenando Imagens e Arquivos com IndexedDB</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Especificação da API de Indexed Database</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — O armazenamento em seu Navegador</a></li>
+ <li><a class="external" href="http://nparashuram.com/IndexedDB/trialtool/index.html" title="http://nparashuram.com/IndexedDB/trialtool/index.html">IndexedDB Exemplos</a></li>
+ <li><a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">IndexedDB Polyfill/Shim</a> para navegadores que apenas suportam WebSQL (e.g. mobile WebKit)</li>
+ <li><a href="http://nparashuram.com/IndexedDBShim/" title="http://nparashuram.com/IndexedDBShim/">JQuery IndexedDB plugin</a></li>
+</ul>
diff --git a/files/pt-br/web/api/indexeddb_api/usando_indexeddb/index.html b/files/pt-br/web/api/indexeddb_api/usando_indexeddb/index.html
new file mode 100644
index 0000000000..da14879b31
--- /dev/null
+++ b/files/pt-br/web/api/indexeddb_api/usando_indexeddb/index.html
@@ -0,0 +1,1281 @@
+---
+title: Usando IndexedDB
+slug: Web/API/IndexedDB_API/Usando_IndexedDB
+tags:
+  - API IndexedDB Tutorial Avançado
+translation_of: Web/API/IndexedDB_API/Using_IndexedDB
+---
+<div class="summary">
+<p>IndexedDB é uma forma de armazenar dados no navegador do usuário. Com ele você pode criar aplicações web com possibilidade de fazer query sem necessidade de conexão, suas aplicações podem funcionar tanto online quanto offline. </p>
+</div>
+
+<h2 id="Sobre_esse_documento">Sobre esse documento</h2>
+
+<p>Esse tutorial utiliza a API assíncrona do IndexedDB. Se você não está familiarizado com IndexedDB, você pode ler <a href="/pt-BR/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">Conceitos básicos sobre IndexedDB</a>.</p>
+
+<p>Para a documentação de referência, veja o artigo sobre <a href="/pt-BR/docs/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">API IndexedDB</a>, pois nele contém os tipos de objetos utilizados no IndexedDB,  como também métodos da API, tanto síncrona como assíncrona. </p>
+
+<h2 id="pattern" name="pattern">Padrão básico</h2>
+
+<p>O IndexedDB encoraja o uso do seguinte padrão:</p>
+
+<ol>
+ <li>Abrir um banco de dados.</li>
+ <li>Criar um ObjectStore ao atualizar o banco. </li>
+ <li>Iniciar uma transação e e faz um request para fazer alguma operação no banco, como adicionar ou obter dados.</li>
+ <li>
+  <div>Esperar a operação ser completada ouvindo algum evento DOM.</div>
+ </li>
+ <li>
+  <div>Fazer algo com o resultado da query (que pode ser obtida pelo objeto request).</div>
+ </li>
+</ol>
+
+<p>OK, então, agora com esses conceitos em mente, nós podemos fazer coisas mais concretas.</p>
+
+<h2 id="open" name="open">Criando e estruturando o banco</h2>
+
+<p>Pelo fato  da especificação ainda estar evoluindo, as implementações do IndexedDB tem prefixos de navegadores. Os navegadores podem ter implementações diferentes da API IndexedDB até a especificação ser consolidada. Mas uma vez que tudo chegar a um consenso, os navegadores tirarão seus prefixos. Atualmente, algumas implementações removeram o prefixo: Internet Explorer 10, Firefox 16, Chrome 24. Quando eles usam prefixo, navegadores baseados no Gecko usam o prefixo <code>moz</code>, enquanto os navegadores baseados no WebKit usam o prefixo <code>webkit</code>.</p>
+
+<h3 id="Usando_uma_versão_experimental_do_IndexedDB">Usando uma versão experimental do IndexedDB</h3>
+
+<p>Se você quiser testar seu código em navegadores que usam prefixo, você pode usar o código abaixo:  </p>
+
+<pre class="brush: js">// Na linha abaixo, você deve incluir os prefixos do navegador que você vai testar.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// Não use "var indexedDB = ..." se você não está numa function.
+// Posteriormente, você pode precisar de referências de algum objeto window.IDB*:
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// (Mozilla nunca usou prefixo nesses objetos, então não precisamos window.mozIDB*)</pre>
+
+<p>Tome cuidado, implementações prefixadas podem estar com bugs ou implementando especificações antigas. Portanto, não é recomendado usar em produção. É preferível não usar IndexedDB em navegadores antigos:</p>
+
+<pre class="brush: js">if (!window.indexedDB) {
+    window.alert("Seu navegador não suporta uma versão estável do IndexedDB. Alguns recursos não estarão disponíveis.");
+}
+</pre>
+
+<h3 id="Abrindo_um_banco">Abrindo um banco</h3>
+
+<p>Começamos todo o processo assim:</p>
+
+<pre class="brush: js">// Abrindo o banco de dados
+var request = window.indexedDB.open("DBteste", 3);
+</pre>
+
+<p>Abrir um banco é como qualquer outra operação — Você tem que "requerer (request)".</p>
+
+<p>A requisição de abertura não abre o banco ou inicia a transação. A chamada da função <code>open()</code> retorna um objeto <a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="/en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> com o resultado (success) ou um erro que você terá que tratar. Muitas outras funções assíncronas no IndexedDB fazem a mesma coisa - retornam um objeto <a href="/en-US/docs/IndexedDB/IDBRequest" title="/en-US/docs/IndexedDB/IDBRequest"><code style="font-size: 14px; color: rgb(51, 51, 51);">IDBRequest</code></a> com o resultado ou erro. O resultado para a função open é uma instância de <code style="font-size: 14px; color: rgb(51, 51, 51);"><a href="/en-US/docs/IndexedDB/IDBDatabase" title="/en-US/docs/IndexedDB/IDBDatabase">IDBDatabase</a>.</code></p>
+
+<p>O segundo parâmetro para o método open é a versão do banco. A versão do banco determina seu schema — os registros no banco e sua estrutura. Se o banco não existe ainda, ele é criado pela operação <code>open</code>, então o evento<code> onupgradeneeded </code>é chamado e você cria o schema do banco nesse evento. Se o banco existe mas você está fornecendo um novo número de versão, o evento <code>onupgradeneeded </code>é chamado imediatamente, permitindo você tratar a atualização do schema. Para mais informações sobre isso veja <a href="#Updating_the_version_of_the_database">Updating the version of the database</a>.</p>
+
+<div class="warning">
+<p>O número de versão é um <code>unsigned long long</code>, o que significa que ele pode ver um inteiro muito grande. Isso também significa que você não pode usar float, pois ele será convertido em um inteiro pequeno e a transação pode não acontecer, ou o evento <code>upgradeneeded</code> pode não ser chamado. Então se você usar 2.4 como versão:</p>
+
+<pre class="brush: js">var request = indexedDB.open("DBteste", 2.4); // não faça isso, pois a versão será convertida para 2.</pre>
+</div>
+
+<h4 id="Gerenciando_handlers">Gerenciando handlers</h4>
+
+<p>A primeira coisa que você vai querer fazer em quase todos os requests é tratar os casos de success e error:</p>
+
+<pre class="brush: js">request.onerror = function(event) {
+  // Fazer algo com request.errorCode!
+};
+request.onsuccess = function(event) {
+  // Fazer algo com request.result!
+};</pre>
+
+<p>Qual das duas funções, <code>onsuccess()</code> ou <code>onerror()</code>,  será chamada? Se tudo correr bem, o evento de sucesso (que é um evento DOM event com propriedade <code>type</code> setada <code>"success"</code>) é chamado com <code>request</code> como seu <code>target</code>. Uma vez chamado, a função <code>onsuccess()</code> no <code>request</code> é chamada com o evento de sucesso em seu contexto. Por outro lado, se acontecer algum problema, um evento de erro (que é um evento DOM com a propriedade <code>type</code> setada para <code>"error"</code>) é chamado no <code>request</code>. Então a função <code><code>onerror()</code></code>  com o evento erro em seu contexto.</p>
+
+<p>A API IndexedDB é feita para minimizar a necessidade de manipular erros, então você não fará muitos eventos de erro (ao menos, se você usar a API!) No  caso de abrir um banco, portanto, existe algumas condições comuns para eventos de erro. O problema mais comum é o usuário não dar permissão para criar o banco. Um dos principais objetivos do IndexedDB é permitir muitos dados serem armazenados para uso offline. (Para aprender mais sobre o quanto cada navegador pode armazenar, veja <a href="/en/IndexedDB#Storage_limits" title="https://developer.mozilla.org/en/IndexedDB#Storage_limits">Storage limits</a>).  </p>
+
+<p>Obviamente, navegadores não querem armazenar dados que poluem seu computador, então o navegador mostra uma mensagem ao usuário na primeira vez que um aplicativo tenta abrir o IndexedDB. O usuário pode escolher permitir ou negar acesso. O IndexedDB também é desabilitado no modo privado dos navegadores (ctrl+shift+N no Chrome e ctrl+shift+P no Firefox). Isso acontece porque o intuito do modo privado é não deixar rastros na navegação.</p>
+
+<p>Agora, assumindo que o usuário aprovou seu request para criar o banco, e você recebeu success; Qual é o próximo passo? O request foi gerado com a chamada de <code>indexedDB.open()</code>, e <code>request.result</code> é uma instância de <code>IDBDatabase</code>, e você definitivamente vai querer armazenar isso para usar depois. Veja abaixo:</p>
+
+<pre class="brush: js">var db;
+var request = indexedDB.open("DBteste");
+request.onerror = function(event) {
+  alert("Você não habilitou minha web app para usar IndexedDB?!");
+};
+request.onsuccess = function(event) {
+  db = request.result;
+};
+</pre>
+
+<h4 id="Tratando_Erros">Tratando Erros</h4>
+
+<p>Como mencionado acima, o evento de erro é chamado quando o request dá erro. Se você quer evitar manipuladores de erro a cada request, você pode adicionar um único manipulador de erro no objeto db, como abaixo:</p>
+
+<pre class="brush: js">db.onerror = function(event) {
+  // Função genérica para tratar os erros de todos os requests desse banco!
+  alert("Database error: " + event.target.errorCode);
+};
+</pre>
+
+<p>Um dos erros mais comuns ao abrir o banco é <code>VER_ERR</code>. Ele indica que a versão do banco existente é maior que a versão que você quer abrir.</p>
+
+<h3 id="Criando_ou_atualizando_a_versão_do_banco">Criando ou atualizando a versão do banco</h3>
+
+<p><a name="Updating_the_version_of_the_database"></a>Quando você cria um novo banco ou aumenta sua versão, o evento <code style="font-size: 14px; color: rgb(51, 51, 51);">onupgradeneeded</code><span style="line-height: 21px;"> será chamado. No manipulador deste evento, você deve criar o objectStore necessário para a versão do banco:</span></p>
+
+<pre class="brush:js;">// Este evento é implementado somente em navegadores mais recentes
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // cria um objectStore para esse banco
+  var objectStore = db.createObjectStore("nome", { keyPath: "minhaChave" });
+};</pre>
+
+<p>Neste caso, o banco já terá objectStores de suas versões anteriores, então você não terá que criar esses objectStores de novo. Você somente precisará criar um novo objectStore qualquer, ou deletar objectStores da versão anterior que não serão utilizados. Se você precisa mudar um objectStore existente (mudar o <code>keyPath, por exemplo</code>),  então você precisa deletar o objectStore antigo e criá-lo novamente com as novas opções. (Note que isso irá deletar a informação no objectStore! Se você precisa salvar a informação, você deve ler isso e salvá-lo em algum lugar antes de atualizar o banco.)</p>
+
+<p>Blink/Webkit suporta a versão atual da especificação, nas versões do Chrome 23+ e Opera 17+; IE10+ também suporta. Outros motores e versões antigas não implementam a versão atual da especificação e não suportam a assinatura <code>indexedDB.open(name, version).onupgradeneeded</code> ainda.  Para mais informação sobre como atualizar a versão do banco em Webkit/Blink, veja <a href="/en/IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated" title="https://developer.mozilla.org/en/IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated">IDBDatabase reference article</a>.</p>
+
+<h3 id="Estruturando_o_banco">Estruturando o banco</h3>
+
+<p>Agora a estrutura do banco. IndexedDB usa "armazens de objetos" em vez de tabelas, e um único banco de dados pode conter qualquer número de "armazem de objetos". Sempre que um valor é armazenado num objectStore, ele é associado a uma chave. Existe várias maneiras diferentes de uma chave ser mostrada, dependendo do que o objectStore usa, um <a href="/en/IndexedDB#gloss_key_path" title="https://developer.mozilla.org/en/IndexedDB#gloss_key_path">key path</a> ou <a href="/en/IndexedDB#gloss_key_generator" title="en/IndexedDB#gloss key generator">key generator</a>.</p>
+
+<p>A tabela abaixo mostra as direfentes chaves suportadas:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Key Path (<code>keyPath</code>)</th>
+   <th scope="col">Key Generator (<code>autoIncrement</code>)</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Não</td>
+   <td>Não</td>
+   <td>Este objectStore pode ter qualquer tipo de valor primitivo como número ou string. Você deve suprir uma chave separada sempre que adicionar um novo valor.</td>
+  </tr>
+  <tr>
+   <td>Sim</td>
+   <td>Não</td>
+   <td>Este objectStore pode simplesmente armazenar objetos JavaScript. O objeto deve ter uma propriedade com o mesmo nome do key path.</td>
+  </tr>
+  <tr>
+   <td>Não</td>
+   <td>Sim</td>
+   <td>Este objectStore pode possuir qualquer tipo de valor. A chave é gerada para você, automaticamente, ou você pode suprir uma chave separada, caso utilize uma chave específica.</td>
+  </tr>
+  <tr>
+   <td>Sim</td>
+   <td>Sim</td>
+   <td>Este objectStore suporta somente objetos JavaScript. Normalmente uma chave é gerada e o valor dela é armazenado no objeto em uma propriedade com o mesmo nome da key path. Portanto, se a propriedade já existe, o valor dela será usado como chave, em vez do valor gerado.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Você também pode criar índices em qualquer objectStore. Um indice deixa você olhar os valores armazenados no objectStore usando o valor de uma propriedade do objectStore, em vez de sua chave.</p>
+
+<p>Adicionalmente, indices tem a habilidade de forçar restrições simples nos dados armazenados. Setando uma flag única quando criar o índice, reforça que dois objetos são armazenados contendo o mesmo valor para o key path do índice. Então, por exemplo, se você tem um objeto armazenado que tem um conjunto de pessoas, e você quer ter certeza que ninguém tera o mesmo e-mail, você pode usar um índice com flag única para forçar isso.</p>
+
+<p>Isso soa meio confuso, mas este exemplo pode iluminar o conceito. Primeiro, vamos definir alguns dados a serem usados no exemplo:</p>
+
+<pre class="brush: js">// Isso é o que os dados de nossos clientes será.
+const DadosClientes = [
+  { ssn: "444-44-4444", nome: "Bill", idade: 35, email: "bill@company.com" },
+  { ssn: "555-55-5555", nome: "Donna", idade: 32, email: "donna@home.org" }
+];
+</pre>
+
+<p>Agora  vamos ver  ccomo criar um IndexedDB para armazenar nossos dados:</p>
+
+<pre class="brush: js">const dbName = "clientes";
+
+var request = indexedDB.open(dbName, 2);
+
+request.onerror = function(event) {
+  // Tratar erros.
+};
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Cria um objectStore para conter a informação sobre nossos clientes. Nós vamos
+  // usar "ssn" como key path porque sabemos que é único;
+  var objectStore = db.createObjectStore("clientes", { keyPath: "ssn" });
+
+  // Cria um índice para buscar clientes pelo nome. Podemos ter nomes
+  // duplicados, então não podemos usar como índice único.
+  objectStore.createIndex("nome", "nome", { unique: false });
+
+  // Cria um índice para buscar clientes por email. Queremos ter certeza
+  // que não teremos 2 clientes com o mesmo e-mail;
+  objectStore.createIndex("email", "email", { unique: true });
+
+  // Usando transação oncomplete para afirmar que a criação do objectStore
+  // é terminada antes de adicionar algum dado nele.
+  objectStore.transaction.oncomplete = function(event) {
+    // Armazenando valores no novo objectStore.
+    var clientesObjectStore = db.transaction("clientes", "readwrite").objectStore("clientes");
+    for (var i in DadosClientes) {
+      clientesObjectStore.add(DadosClientes[i]);
+    }
+  }
+};
+</pre>
+
+<p>Como falamos antes, <code>onupgradeneeded</code> é o único lugar onde você pode alterar a estrutura do banco. Nele você pode criar e deletar objectStores e construir ou remover índices.</p>
+
+<div>Armazens de objetos são criados com uma única chamada de <code>createObjectStore()</code>. O método pega o nome do armazem e um objeto parâmetro. Mesmo que o objeto parâmetro seja opcional, ele é muito importante porque ele deixa você definir propriedades importantes e ajustar tipos de dados que você quer criar. No nosso caso, nós obtemos um objectStore chamado "clientes" e definimos um <code>keyPath</code>, que é a propriedade que faz um objeto individual ser único no banco. Essa propriedade, nesse exemplo, é "ssn", que simboliza o cpf (social security number), que é único. O "ssn" deve ser apresentado em cada objeto armazenado no <code>objectStore</code>. </div>
+
+<p>Nós também criamos um índice chamado "nome" ligado à propriedade <code>nome</code>. Assim como o <code>createObjectStore()</code>, o <code>createIndex()</code> tem um parâmetro opcional <code>options</code> que cuida do tipo de índice que você quer criar. Adicionando objetos que não tem a propriedade <code>nome</code> terá sucesso, porém esses objetos não aparecerão no índice "nome".</p>
+
+<p>Nós podemos obter os objetos de clientes armazenados usando os <code>ssn</code> da objectStore diretamente, ou usando os nomes usados no índice. Para aprender como isso é feito, veja a seção <a href="#Using_an_index" title="Using IndexedDB#Using an index">usando um índice</a>.</p>
+
+<h3 id="Usando_um_key_generator">Usando um key generator</h3>
+
+<p>Setando uma flag <code>autoIncrement </code>ao criar o objectStore habilitará o key generator. Por padrão ele não é setado.</p>
+
+<p>Com o key generator, a chave será gerada automaticamente quando você adicionar algum valor no objectStore. O atual número do key generator é sempre setado 1 quando a primeira key generator do objectStore é criada. Basicamente a próxima chave recebe o incremento de 1. O número atual da key generator nunca decresce,  a não ser se alguma operação do banco for revertida, como numa transação abortada, por exemplo. No entanto, deletar um registro ou limpar todos os registros nunca afeta o key generator dos objectStores.</p>
+
+<p>Nós podemos criar outro objectStore com o key generator como abaixo:</p>
+
+<pre class="brush: js">// Abrindo o indexedDB.
+var request = indexedDB.open(dbName, 3);
+
+request.onupgradeneeded = function (event) {
+
+    var db = event.target.result;
+
+    // Criando outro objeto chamado "names" com o autoIncrement setado.
+    var objStore = db.createObjectStore("names", { autoIncrement : true });
+
+    // Porque "names" tem o the key generator, a chave para o nome é gerada automaticamente.
+    // Os registros adicionados serão assim:
+    // key : 1 =&gt; value : "Bill"
+    // key : 2 =&gt; value : "Donna"
+    for (var i in DadosClientes) {
+        objStore.add(DadosClientes[i].nome);
+    }
+}</pre>
+
+<p>Para mais detalhes veja <a href="http://www.w3.org/TR/IndexedDB/#key-generator-concept">"W3C Key Generators"</a>.</p>
+
+<h2 id="Adicionando_obtendo_e_removendo_dados">Adicionando, obtendo e removendo dados</h2>
+
+<p>Antes de fazer qualquer coisa em um novo banco, você precisa iniciar uma transação. Transações estão no objeto database, e você tem que especificar qual objectStore você quer na transaction. Uma vez que você está dentro da transação, você pode acessar os objectStores  com seus dados e fazer os requests. Depois, você precisa decidir se você vai fazer mudanças no banco ou se você simplesmente quer ler esses dados. Transações tem três modos disponíveis: <code>readonly</code>, <code>readwrite</code>, and <code>versionchange</code>.</p>
+
+<p>Para mudar o "schema" ou estrutura do banco — o que envolve criar ou deletar objectStores ou índices — a transação deve ser em modo <code>versionchange</code>. Esta transação é aberta chamando o método {{domxref("IDBFactory.open")}} especificando a  <code>version.</code> (Em navegadores com WebKit que não tem a ultima especificação implementada, o método {{domxref("IDBFactory.open")}} tem apenas um parâmetro, o <code>nome</code> do banco; então você deve chamar {{domxref("IDBVersionChangeRequest.setVersion")}} para estabelecer uma transação <code>versionchange</code>.)</p>
+
+<p>Para ler os registros de um objectStore existente, a transação pode ser tanto<code> readonly</code> quanto <code>readwrite</code>. Para fazer mudanças em um objectStore existente, a transação deve ser em modo <code>readwrite</code>. Você abre essas transações usando {{domxref("IDBDatabase.transaction")}}. O método aceita dois parâmetros: o <code>storeNames</code> (o escopo, definido como um array de objectStores que você quer acessar) e o <code>modo</code> (<code>readonly</code> or <code>readwrite</code>) da transação. O método retorna o objeto detransação contendo o método {{domxref("IDBIndex.objectStore")}}, que você pode usar para acessar seu objectStore. Por padrão, quando nenhum modo é especificado, a transação é aberta no modo <code>readonly</code>.</p>
+
+<p>Você pode deixar o acesso aos dados mais rápido usando o escopo correto e o modo correto de transação. Aqui vai algumas dicas:</p>
+
+<ul>
+ <li>Quando definir o escopo, especifique apenas os objectStores que você precisa. Desse jeito você pode rodar multiplas transações sem que uma sobreponha a outra.</li>
+ <li>Somente especifique uma transação  <code>readwrite</code> quando necessário. Você pode rodar várias transações <code>readonly</code> com escopos sobreposts, mas você pode ter somente uma transação <code>readwrite</code> por objectStore. Para aprender mais sobre <dfn><a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#Database">transactions</a></dfn> veja <a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">Basic Concepts</a>.</li>
+</ul>
+
+<h3 id="Adicionando_dados_no_banco">Adicionando dados no banco</h3>
+
+<p>Se você acabou de criar o banco, então você provavelmente quer escrever algo nele. Veja abaixo:</p>
+
+<pre class="brush:js;">var transaction = db.transaction(["clientes"], "readwrite");
+// Nota: Implementações mais antigas usam uma versão IDBTransaction.READ_WRITE antiga em vez de "readwrite".
+// Então, para suportar versões antigas, escreva:
+// var transaction = db.transaction(["clientes"], IDBTransaction.READ_WRITE);</pre>
+
+<p>A função <code>transaction()</code> tem dois argumentos (opcionais) e retorna um objeto de transação. O primeiro argumento é uma lista de objectStores que serão trabalhados na transação. Você pode passar um array vazio se você quer uma transação com todos os objectStores, mas não faça isso pois a especificação diz que um array vazio pode gerar um erro InvalidAccessError. Se você não especificar nada no segundo parâmetro, você tem uma transação read-only. Se você quer escrever no banco, use <code>"readwrite"</code>.</p>
+
+<p>Agora que você tem uma transação, você precisa entender seu tempo de uso. Transações são amarradas a um evento. Se você faz uma transação fora de um evento, ela ficará inativa. A única maneira de manter uma transação ativa é fazer um request nela. Quando o request acabar você terá a oportunidade de extender a transação durante o callback. Se você tentar extender uma transação dentro de um evento, então ela tornará inativa. Se existir requests pendentes, a transação continua ativa. O tempo de vida de uma transação é realmente simples mas deve ser usada em um curto espaço de tempo. Outros exemplos poderão ajudá-lo. Se você começar a ver<code> TRANSACTION_INACTIVE_ERR</code> error então você está fazendo algo errado.</p>
+
+<p>Transações podem receber eventos DOM de três tipos diferentes: <code>error</code>, <code>abort</code>, e <code>complete</code>. Nós falamos sobre o <code>error</code>, ou seja, a transação recebe um error sempre que o request gerar erro. Um ponto mais sutil é que o comportamento padrão de um erro é abortar a transação na qual ele estava. A menos que você manipule o erro chamando <code>preventDefault()</code> e fazendo algo depois, a transaçaõ inteira será desfeita. Este design força você a pensar sobre manipulação de erros, mas você pode sempre adicionar um manipulador de todos os erros se a manipulação separada estiver complicada. Se você não tratar o erro ou chamar <code>abort()</code> na transação, então a transação é desfeita (roll back) e o evento <code>abort</code> é chamado. Por outro lado, depois de todo request completado, você tem um evento <code>complete</code>. Se você fazer várias operações no banco, então seguir as operações de transações pode ser um caminho a seguir.</p>
+
+<p>Agora que você tem uma transação, você precisará obter um objectStore dela. Transações somente deixam você obter um objectStore citado na transação. Então você pode adicionar os dados que precisa.</p>
+
+<pre class="brush: js">// Faz algo após a inserção dos dados.
+transaction.oncomplete = function(event) {
+  alert("Pronto!");
+};
+
+transaction.onerror = function(event) {
+  // Não esquecer de tratar os erros!
+};
+
+var objectStore = transaction.objectStore("clientes");
+for (var i in DadosClientes) {
+  var request = objectStore.add(DadosClientes[i]);
+  request.onsuccess = function(event) {
+    // event.target.result == DadosClientes[i].ssn;
+  };
+}</pre>
+
+<p>O <code>result</code> de um request gerado de uma chamada de <code>add()</code> é a chave do valor  que foi adicionado. Então neste caso, ele deve ser igual ao valor do <code>ssn</code> do objeto que foi adicionado, desde que o objeto use o <code>ssn</code> como key path. Note que a função <code>add()</code> não deixa nenhum objeto ser adicionado com a mesma chave. Se você está tentando modificar um registro existente, você deve usar o <code>put()</code>, como explica a seção  {{ anch("Updating an entry in the database") }}.</p>
+
+<h3 id="Removendo_dados_do_banco">Removendo dados do banco</h3>
+
+<p>Para remoção o código é parecido:</p>
+
+<pre class="brush: js">var request = db.transaction(["clientes"], "readwrite")
+                .objectStore("clientes")
+                .delete("444-44-4444");
+request.onsuccess = function(event) {
+  // Pronto!
+};</pre>
+
+<h3 id="Obtendo_dados_do_banco">Obtendo dados do banco</h3>
+
+<p>Agora que o banco tem algumas informações nele, você pode obtê-las de diferentes maneiras. Primeiro, um <code>get()</code> simples. Você precisa informar a chave do valor a ser obtido:</p>
+
+<pre class="brush: js">var transaction = db.transaction(["clientes"]);
+var objectStore = transaction.objectStore("clientes");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Tratar erro!
+};
+request.onsuccess = function(event) {
+  // Fazer algo com request.result!
+  alert("O nome do SSN 444-44-4444 é " + request.result.name);
+};</pre>
+
+<p>Veja agora de maneira resumida:</p>
+
+<pre class="brush: js">db.transaction("clientes").objectStore("clientes").get("444-44-4444").onsuccess = function(event) {
+  alert("O nome do SSN 444-44-4444 é " + request.result.name);
+};</pre>
+
+<p>Viu como funciona? Desde que exista um objectStore, você pode evitar passar uma lista de objectStores que precisa na transação e passar apenas o nome como string. Você também pode ler do banco, apenas, então não precisará de uma transação <code>"readwrite".</code> Chamando <code>transaction()</code> com nenhum modo especificado, você terá uma transação <code>"readonly"</code>. Outra consideração é que você não necessita salvar o request em uma variável. Desde que o evento DOM tenha o target que você precisará para obter a propriedade <code>result</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Você pode deixar o acesso aos dados mais rápido limitando o escopo e o modo de transação. Veja algumas dicas:</p>
+
+<ul>
+ <li>
+  <p>Quando definir o <a href="#scope">escopo</a>, especifique somente os objectStores que vai precisar. Assim você pode rodar multiplas transações sem sopreposições.</p>
+ </li>
+ <li>
+  <p>Utilize uma transação <code>readwrite</code>  somente quando necessário. Você pode rodar várias transações <code>readonly</code> simultâneas, mas apenas uma transação <code>readwrite</code> por objectStore. Para aprender mais sobre isso veja o artigo <a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_transaction"><dfn>transactions</dfn> in the Basic Concepts</a>.</p>
+ </li>
+</ul>
+</div>
+
+<h3 id="Atualizando_um_registro_no_banco">Atualizando um registro no banco</h3>
+
+<p>Agora que obtemos algum dado, atualizá-ls é inserí-los novamente no IndexedDB é bem simples. Vamos atualizar o exemplo anterior:</p>
+
+<pre class="brush: js">var objectStore = db.transaction(["clientes"], "readwrite").objectStore("clientes");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Tratar erro
+};
+request.onsuccess = function(event) {
+  // Obter os valores antigos
+  var data = request.result;
+
+  // atualizar algum dado
+  data.age = 42;
+
+  // Atulizar esse dado no banco
+  var requestUpdate = objectStore.put(data);
+   requestUpdate.onerror = function(event) {
+     // Tratar erro
+   };
+   requestUpdate.onsuccess = function(event) {
+     // Sucesso na atualização \o/
+   };
+};</pre>
+
+<p>Criamos uma <code>objectStore</code> e obtemos um cliente dele, identificado pelo ssn (<code>444-44-4444</code>). Nós atualizamos o objeto, passando-o como parâmetro de um método put de outro request (<code>requestUpdate</code>) sobrescrevendo o valor antigo.</p>
+
+<div class="note">
+<p><strong>Note</strong> que neste caso nós temos que especificar a transação <code>readwrite</code> porque nós queremos escrever no banco, não somente ler os dados dele.</p>
+</div>
+
+<h3 id="Usando_um_cursor">Usando um cursor</h3>
+
+<p>Ao usar o método <code>get()</code> você precisa saber a chave do objeto que deseja obter. Se você quer passear entre todos os valores do seu objectStore, então você pode usar um cursor. Veja:</p>
+
+<pre class="brush: js">var objectStore = db.transaction("cliente").objectStore("cliente");
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    alert("O nome do SSN " + cursor.key + " é " + cursor.value.name);
+    cursor.continue();
+  }
+  else {
+    alert("Não existe mais registros!");
+  }
+};</pre>
+
+<p><code>A função openCursor()</code> tem vários argumentos. Primeiro, você pode limitar o número de itens obtidos usando uma chave que veremos logo abaixo. Segundo, você pode especificar a direção que deseja iterar. No exemplo acima, nós estamos iterando em todos os objetos em ordem ascendente. O callback de sucesso para cursor é um pouco especial. O objeto cursor já é o <code>result</code> do request (acima nós usamos <code>event.target.result</code>). Então a chave atual e o valor pode ser encontrado na propriedade <code>key</code> e <code>value</code> do objeto cursor. Se você quer manter adiante, então você usa o método <code>continue()</code>. Quando você chegar ao fim dos dados (ou se não existem registros encontrados no <code>openCursor()</code>) você ainda tem um callback de sucesso, mas a propriedade <code>result</code> fica <code>undefined</code>.</p>
+
+<p>Um padrão comum para cursores é obter todos os objetos em um objectStore e adicioná-los a um array como este:</p>
+
+<pre class="brush: js">var clientes = [];
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    clientes.push(cursor.value);
+    cursor.continue();
+  }
+  else {
+    alert("Todos os clientes: " + clientes);
+  }
+};</pre>
+
+<div class="note">
+<p>Note: Mozilla também implementou o método <code>getAll()</code> para ser usado nesse caso (e <code>getAllKeys()</code>, que está atualmente dentro da preferência do <code>dom.indexedDB.experimental</code> em about:config). Estes métodos não são parte do padrão IndexedDB, então eles podem desaparecer no futuro. Nós adicionamos porque achamos útil. O código abaixo faz o mesmo que o código acima:</p>
+
+<pre class="brush: js">objectStore.getAll().onsuccess = function(event) {
+  alert("Todos os clientes: " + event.target.result);
+};</pre>
+
+<p>Existe um custo de performance associado com a propriedade <code>value</code> do cursor, porque o objeto é criado de forma lenta. Quando você usa <code>getAll()</code> por exemplo, Gecko deve criar todos os objetos de uma vez. Se você está somente interessado em cada chave, é muito melhor usar o cursor do que usar o <code>getAll()</code>. Se você está tentando obter um array de todos os objetos, então é melhor usar o <code>getAll()</code>.</p>
+</div>
+
+<h3 id="Usando_um_índice">Usando um índice</h3>
+
+<p>Armazenar dados de um cliente usando o SSN como chave é lógico pois o SSN identifica o cliente de forma única. Se você precisa obter um cliente pelo seu nome, portanto, você precisará iterar todos os registros no banco e comparar os nomes até achar o que você procura. Buscar dessa maneira é algo lento, então criamos um índice.</p>
+
+<pre class="brush: js">var index = objectStore.index("nome");
+index.get("John").onsuccess = function(event) {
+  alert("O SSN de John é " + event.target.result.ssn);
+};</pre>
+
+<p>O cursor "nome" não é único, então pode existir mais de um registro com o <code>nome</code> igual a <code>"John"</code>. Neste caso você sempre obtem o registro com a chave de menor valor.</p>
+
+<p>Se você precisa acessar todos os registros retornados, você pode usar um cursor. Você pode abrir dois tipos de cursores. Um cursor normal mapeia o índice ao objeto na objectStore. Uma cursor-chave mapeia o a propriedade índice à chave usada para armazenar o objeto. As diferenças são ilustradas abaixo:</p>
+
+<pre class="brush: js">// Usando um cursor normal para obter todos os objetos
+index.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key é um nome, como "Bill", e cursor.value é o objeto inteiro.
+    alert("Nome: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+    cursor.continue();
+  }
+};
+
+// Usando um cursor-chave para obter todos os objetos
+index.openKeyCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key é o nome, como "Bill", e cursor.value é o SSN (chave).
+    // Não tem como obter o resto do objeto
+    alert("Nome: " + cursor.key + ", SSN: " + cursor.value);
+    cursor.continue();
+  }
+};</pre>
+
+<h3 id="Especificando_o_número_e_a_direção_dos_cursores">Especificando o número e a direção dos cursores</h3>
+
+<p>Se você gostaria de limitar o número de valores retornados pelo cursor, você pode usar um objeto <code>IDBKeyRange</code> e passar isso como o primeiro argumento ao <code>openCursor()</code> ou <code>openKeyCursor()</code>. Você pode fazer um key range que permite um único valor, ou valores acima ou abaixo do especificado. O limite pode ser fechado (o key range inclui os valores dados) ou aberto (o key range não inclue os valores dados). Veja como funciona:</p>
+
+<pre class="brush: js">// Somente se for igual "Donna"
+var singleKeyRange = IDBKeyRange.only("Donna");
+
+// Combinações menores que "Bill", incluindo "Bill"
+var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
+
+// Combinações menores que "Bill", sem incluir "Bill"
+var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
+
+// Combinações maiores que Donna, não incluindo "Donna"
+var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
+
+// Combinações entre "Bill" e "Donna", sem incluir "Donna"
+var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
+
+// Para usar qualquer um desses key ranges, basta passar como primeiro parâmetro de openCursor()/openKeyCursor()
+index.openCursor(boundKeyRange).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Faz algo com o que encontrar
+    cursor.continue();
+  }
+};</pre>
+
+<p>As vezes você pode querer iterar em ordem decrescente, em vez de crescente, alterando o segundo parâmetro de <code>openCursor()</code>:</p>
+
+<pre class="brush: js">objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Prev indica ordem decrescente
+    cursor.continue();
+  }
+};</pre>
+
+<p>Se você apenas quer especificar a ordem sem key range, é só passar null no primeiro parâmetro:</p>
+
+<pre class="brush: js">objectStore.openCursor(null, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Faça algo com os resultados.
+    cursor.continue();
+  }
+};</pre>
+
+<p>Uma vez que o índice "nome" não é único, pode existir várias entradas onde o <code>nome</code> é o mesmo. Isso não acontece com objectStores porque a chave deve ser sempre única. Se você deseja filtrar valores duplicados numa iteração do cursor, você pode passar <code>nextunique</code> (ou <code>prevunique</code> se quiser decrescer) como parâmetro de direção. Quando <code>nextunique</code> ou <code>prevunique</code> é usado, o registro com menor chave é retornado.</p>
+
+<pre class="brush: js">index.openKeyCursor(null, "nextunique").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Faça algo com os registros.
+    cursor.continue();
+  }
+};</pre>
+
+<p>Veja "<a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBCursor?redirectlocale=en-US&amp;redirectslug=IndexedDB%2FIDBCursor#Constants">IDBCursor Constants</a>" para parâmetros válidos.</p>
+
+<h2 id="Mudança_de_versão_quando_a_web_app_está_aberta_em_outra_aba.">Mudança de versão quando a web app está aberta em outra aba.</h2>
+
+<p>Quando sua web app muda a versão você precisa considerar o que vai acontecer se o usuário está na versão antiga em uma aba, e carrega a versão nova na outra. Quando você chamar o <code>open()</code> com a versão mais nova, um evento <code>onblocked</code>  é chamado até que a aba da versão antiga seja fechada ou recarregada. Veja abaixo:</p>
+
+<pre class="brush: js">var openReq = mozIndexedDB.open("DBteste", 2);
+
+openReq.onblocked = function(event) {
+  // Se existe outra aba com a versão antiga
+  alert("Existe uma versão antiga da web app aberta em outra aba, feche-a por favor!");
+};
+
+openReq.onupgradeneeded = function(event) {
+  // Se estiver tudo fechado, então faça as devidas alterações
+  db.createObjectStore(/* ... */);
+  useDatabase(db);
+}
+
+openReq.onsuccess = function(event) {
+  var db = event.target.result;
+  useDatabase(db);
+  return;
+}
+
+function useDatabase(db) {
+  // Esteja certo de que adicionou um evento para notificar se a página muda a versão
+  // Nós devemos fechar o banco. Isso permite à outra página ser atualizada
+  // Se você não fizer isso a atualização não acontecerá até fechar as abas.
+  db.onversionchange = function(event) {
+    db.close();
+    alert("Uma nova versão desta web app está pronta. Atualiza, por favor!");
+  };
+
+  // Fazer algo com os bancos
+}
+</pre>
+
+<h2 id="Segurança">Segurança</h2>
+
+<p>IndexedDB usa o princípio de mesma origem, o que significa que o banco só será acessado pelo site que o criou.</p>
+
+<p>É importante notar que o IndexedDB não funciona para conteúdo carregado em um frame de outro site (seja {{ HTMLElement("frame") }} ou {{ HTMLElement("iframe") }}. Esta é uma política de segurança e privacidade análoga ao bloqueio de cookies de terceiros. Para mais detalhes, veja {{ bug(595307) }}.</p>
+
+<h2 id="Alerta_sobre_fechar_o_navegador">Alerta sobre fechar o navegador</h2>
+
+<p>Quando o navegador é fechado, qualquer transação pendente no IndexedDB será abortada (silenciosamente) — ele não vai completar, nem chamar o evento de erro.  <span id="result_box" lang="pt"><span class="hps">Uma vez que o</span> <span class="hps">usuário pode</span> <span class="hps">sair do navegador</span><span>, em qualquer momento</span><span>, isto significa que</span> <span class="hps">você não pode</span> <span class="hps">confiar em qualquer</span> <span class="hps">transação específica</span> <span class="hps">para completar</span> <span class="hps">ou</span> <span class="hps">para saber que</span> <span class="hps">ela não foi concluída</span><span>.</span></span> Existem várias implicações nesse comportamento.</p>
+
+<p><span id="result_box" lang="pt"><span class="hps">Primeiro, você deve</span> <span class="hps">ter o cuidado de</span> <span class="hps">sempre deixar</span> <span class="hps">seu banco de dados</span> <span class="hps">em um estado consistente</span><span>, no final de</span> <span class="hps">cada transação.</span> <span class="hps">Por exemplo, suponha</span> <span class="hps">que você está usando</span> <span class="hps">IndexedDB</span> <span class="hps">para armazenar</span> <span class="hps">uma lista de</span> <span class="hps">itens que</span> <span class="hps">permitem ao usuário</span> <span class="hps">editar.</span> <span class="hps">Você</span> <span class="hps">salvar a lista</span> <span class="hps">após</span> <span class="hps">a edição</span><span>, limpando o</span> <span class="hps">armazenamento de objetos</span> <span class="hps">e</span><span>, em seguida,</span> <span class="hps">escrever a</span> <span class="hps">nova lista.</span> <span class="hps">Se você</span> <span class="hps">limpar o</span> <span class="hps">armazenamento de objetos</span> <span class="hps">em uma transação</span> <span class="hps">e escrever</span> <span class="hps">a nova lista</span> <span class="hps">em outra transação</span><span>, há um</span> <span class="hps">perigo de que o</span> <span class="hps">navegador irá</span> <span class="hps">fechar</span> <span class="hps">após a</span> limpeza de dados e <span class="hps">antes da</span> <span class="hps">gravação</span><span>,</span> <span class="hps">deixando-o com</span> <span class="hps">um banco de dados</span> <span class="hps">vazio.</span> <span class="hps">Para evitar isso,</span> <span class="hps">você deve combinar</span> tanto a limpeza quanto a <span class="hps">gravação</span> <span class="hps">em</span> <span class="hps">uma única transação.</span></span></p>
+
+<p><span id="result_box" lang="pt"><span class="hps">Em segundo lugar,</span> <span class="hps">você nunca deve</span> <span class="hps">amarrar</span> <span class="hps">as operações</span> <span class="hps">de banco de dados</span> ao evento unload<span class="hps">.</span> <span class="hps">Se o evento</span> <span class="hps">unload</span> <span class="hps">é acionado</span> <span class="hps">pelo fechamento</span> <span class="hps">do navegador</span><span>,</span> <span class="hps">todas as transações</span> <span class="hps">criadas</span> <span class="hps">no unload</span> <span class="hps">nunca</span> <span class="hps">serão concluídas</span><span>.</span> <span class="hps">Uma abordagem</span> <span class="hps">intuitiva para</span> <span class="hps">manter</span> <span class="hps">algumas informações</span> <span class="hps">em sessões do navegador</span> <span class="hps">é lê-la</span> <span class="hps">a partir do</span> <span class="hps">banco de dados</span> <span class="hps">quando o navegador</span> <span class="hps">(ou</span> <span class="hps">uma determinada página</span><span>)</span> é<span class="hps"> aberta,</span> <span class="hps">atualizá-la</span> <span class="hps">assim que</span> <span class="hps">o usuário interagir</span> <span class="hps">com o navegador,</span> <span class="hps">e depois</span> <span class="hps">salvá-lo para</span> <span class="hps">o banco de dados</span> <span class="hps">quando o navegador</span> <span class="atn hps">(</span><span class="hps">ou página)</span> <span class="hps">será fechada.</span> <span class="hps">No entanto, isso</span> <span class="hps">não vai funcionar.</span> <span class="hps">As transações</span> <span class="hps">de banco de dados</span> <span class="hps">será criado</span> <span class="hps">no unload</span><span>, mas como elas</span> <span class="hps">são assíncronas</span>, <span class="hps">serão abortada</span>s <span class="hps">antes que eles possam</span> <span class="hps">executar.</span></span></p>
+
+<p>De fato, não existe uma maneira de garantir que as transações no IndexedDBserão completadas, mesmo com o fechamento padrão do navegador. Ver {{ bug(870645) }}.</p>
+
+<h2 id="Full_IndexedDB_example" name="Full_IndexedDB_example">Exemplo de IndexedDB</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
+
+    &lt;h1&gt;IndexedDB Demo: storing blobs, e-publication example&lt;/h1&gt;
+    &lt;div class="note"&gt;
+      &lt;p&gt;
+        Works and tested with:
+      &lt;/p&gt;
+      &lt;div id="compat"&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div id="msg"&gt;
+    &lt;/div&gt;
+
+    &lt;form id="register-form"&gt;
+      &lt;table&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-title" class="required"&gt;
+                Title:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-title" name="pub-title" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-biblioid" class="required"&gt;
+                Bibliographic ID:&lt;br/&gt;
+                &lt;span class="note"&gt;(ISBN, ISSN, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-biblioid" name="pub-biblioid"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-year"&gt;
+                Year:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="number" id="pub-year" name="pub-year" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-file"&gt;
+                File image:
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="file" id="pub-file"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-file-url"&gt;
+                Online-file image URL:&lt;br/&gt;
+                &lt;span class="note"&gt;(same origin URL)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-file-url" name="pub-file-url"/&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+      &lt;/table&gt;
+
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="add-button" value="Add Publication" /&gt;
+        &lt;input type="reset" id="register-form-reset"/&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;form id="delete-form"&gt;
+      &lt;table&gt;
+        &lt;tbody&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="pub-biblioid-to-delete"&gt;
+                Bibliographic ID:&lt;br/&gt;
+                &lt;span class="note"&gt;(ISBN, ISSN, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="pub-biblioid-to-delete"
+                     name="pub-biblioid-to-delete" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+          &lt;tr&gt;
+            &lt;td&gt;
+              &lt;label for="key-to-delete"&gt;
+                Key:&lt;br/&gt;
+                &lt;span class="note"&gt;(for example 1, 2, 3, etc.)&lt;/span&gt;
+              &lt;/label&gt;
+            &lt;/td&gt;
+            &lt;td&gt;
+              &lt;input type="text" id="key-to-delete"
+                     name="key-to-delete" /&gt;
+            &lt;/td&gt;
+          &lt;/tr&gt;
+        &lt;/tbody&gt;
+      &lt;/table&gt;
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="delete-button" value="Delete Publication" /&gt;
+        &lt;input type="button" id="clear-store-button"
+               value="Clear the whole store" class="destructive" /&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;form id="search-form"&gt;
+      &lt;div class="button-pane"&gt;
+        &lt;input type="button" id="search-list-button"
+               value="List database content" /&gt;
+      &lt;/div&gt;
+    &lt;/form&gt;
+
+    &lt;div&gt;
+      &lt;div id="pub-msg"&gt;
+      &lt;/div&gt;
+      &lt;div id="pub-viewer"&gt;
+      &lt;/div&gt;
+      &lt;ul id="pub-list"&gt;
+      &lt;/ul&gt;
+    &lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">body {
+  font-size: 0.8em;
+  font-family: Sans-Serif;
+}
+
+form {
+  background-color: #cccccc;
+  border-radius: 0.3em;
+  display: inline-block;
+  margin-bottom: 0.5em;
+  padding: 1em;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  padding: 0.3em;
+  border-color: #cccccc;
+  border-radius: 0.3em;
+}
+
+.required:after {
+  content: "*";
+  color: red;
+}
+
+.button-pane {
+  margin-top: 1em;
+}
+
+#pub-viewer {
+  float: right;
+  width: 48%;
+  height: 20em;
+  border: solid #d092ff 0.1em;
+}
+#pub-viewer iframe {
+  width: 100%;
+  height: 100%;
+}
+
+#pub-list {
+  width: 46%;
+  background-color: #eeeeee;
+  border-radius: 0.3em;
+}
+#pub-list li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 0.5em;
+}
+
+#msg {
+  margin-bottom: 1em;
+}
+
+.action-success {
+  padding: 0.5em;
+  color: #00d21e;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.action-failure {
+  padding: 0.5em;
+  color: #ff1408;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.note {
+  font-size: smaller;
+}
+
+.destructive {
+  background-color: orange;
+}
+.destructive:hover {
+  background-color: #ff8000;
+}
+.destructive:active {
+  background-color: red;
+}
+</pre>
+
+<p> </p>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">(function () {
+  var COMPAT_ENVS = [
+    ['Firefox', "&gt;= 16.0"],
+    ['Google Chrome',
+     "&gt;= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
+  ];
+  var compat = $('#compat');
+  compat.empty();
+  compat.append('&lt;ul id="compat-list"&gt;&lt;/ul&gt;');
+  COMPAT_ENVS.forEach(function(val, idx, array) {
+    $('#compat-list').append('&lt;li&gt;' + val[0] + ': ' + val[1] + '&lt;/li&gt;');
+  });
+
+  const DB_NAME = 'mdn-demo-indexeddb-epublications';
+  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
+  const DB_STORE_NAME = 'publications';
+
+  var db;
+
+  // Used to keep track of which view is displayed to avoid uselessly reloading it
+  var current_view_pub_key;
+
+  function openDb() {
+    console.log("openDb ...");
+    var req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onsuccess = function (evt) {
+      // Better use "this" than "req" to get the result to avoid problems with
+      // garbage collection.
+      // db = req.result;
+      db = this.result;
+      console.log("openDb DONE");
+    };
+    req.onerror = function (evt) {
+      console.error("openDb:", evt.target.errorCode);
+    };
+
+    req.onupgradeneeded = function (evt) {
+      console.log("openDb.onupgradeneeded");
+      var store = evt.currentTarget.result.createObjectStore(
+        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
+
+      store.createIndex('biblioid', 'biblioid', { unique: true });
+      store.createIndex('title', 'title', { unique: false });
+      store.createIndex('year', 'year', { unique: false });
+    };
+  }
+
+  /**
+   * @param {string} store_name
+   * @param {string} mode either "readonly" or "readwrite"
+   */
+  function getObjectStore(store_name, mode) {
+    var tx = db.transaction(store_name, mode);
+    return tx.objectStore(store_name);
+  }
+
+  function clearObjectStore(store_name) {
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.clear();
+    req.onsuccess = function(evt) {
+      displayActionSuccess("Store cleared");
+      displayPubList(store);
+    };
+    req.onerror = function (evt) {
+      console.error("clearObjectStore:", evt.target.errorCode);
+      displayActionFailure(this.error);
+    };
+  }
+
+  function getBlob(key, store, success_callback) {
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var value = evt.target.result;
+      if (value)
+        success_callback(value.blob);
+    };
+  }
+
+  /**
+   * @param {IDBObjectStore=} store
+   */
+  function displayPubList(store) {
+    console.log("displayPubList");
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readonly');
+
+    var pub_msg = $('#pub-msg');
+    pub_msg.empty();
+    var pub_list = $('#pub-list');
+    pub_list.empty();
+    // Resetting the iframe so that it doesn't display previous content
+    newViewerFrame();
+
+    var req;
+    req = store.count();
+    // Requests are executed in the order in which they were made against the
+    // transaction, and their results are returned in the same order.
+    // Thus the count text below will be displayed before the actual pub list
+    // (not that it is algorithmically important in this case).
+    req.onsuccess = function(evt) {
+      pub_msg.append('&lt;p&gt;There are &lt;strong&gt;' + evt.target.result +
+                     '&lt;/strong&gt; record(s) in the object store.&lt;/p&gt;');
+    };
+    req.onerror = function(evt) {
+      console.error("add error", this.error);
+      displayActionFailure(this.error);
+    };
+
+    var i = 0;
+    req = store.openCursor();
+    req.onsuccess = function(evt) {
+      var cursor = evt.target.result;
+
+      // If the cursor is pointing at something, ask for the data
+      if (cursor) {
+        console.log("displayPubList cursor:", cursor);
+        req = store.get(cursor.key);
+        req.onsuccess = function (evt) {
+          var value = evt.target.result;
+          var list_item = $('&lt;li&gt;' +
+                            '[' + cursor.key + '] ' +
+                            '(biblioid: ' + value.biblioid + ') ' +
+                            value.title +
+                            '&lt;/li&gt;');
+          if (value.year != null)
+            list_item.append(' - ' + value.year);
+
+          if (value.hasOwnProperty('blob') &amp;&amp;
+              typeof value.blob != 'undefined') {
+            var link = $('&lt;a href="' + cursor.key + '"&gt;File&lt;/a&gt;');
+            link.on('click', function() { return false; });
+            link.on('mouseenter', function(evt) {
+                      setInViewer(evt.target.getAttribute('href')); });
+            list_item.append(' / ');
+            list_item.append(link);
+          } else {
+            list_item.append(" / No attached file");
+          }
+          pub_list.append(list_item);
+        };
+
+        // Move on to the next object in store
+        cursor.continue();
+
+        // This counter serves only to create distinct ids
+        i++;
+      } else {
+        console.log("No more entries");
+      }
+    };
+  }
+
+  function newViewerFrame() {
+    var viewer = $('#pub-viewer');
+    viewer.empty();
+    var iframe = $('&lt;iframe /&gt;');
+    viewer.append(iframe);
+    return iframe;
+  }
+
+  function setInViewer(key) {
+    console.log("setInViewer:", arguments);
+    key = Number(key);
+    if (key == current_view_pub_key)
+      return;
+
+    current_view_pub_key = key;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readonly');
+    getBlob(key, store, function(blob) {
+      console.log("setInViewer blob:", blob);
+      var iframe = newViewerFrame();
+
+      // It is not possible to set a direct link to the
+      // blob to provide a mean to directly download it.
+      if (blob.type == 'text/html') {
+        var reader = new FileReader();
+        reader.onload = (function(evt) {
+          var html = evt.target.result;
+          iframe.load(function() {
+            $(this).contents().find('html').html(html);
+          });
+        });
+        reader.readAsText(blob);
+      } else if (blob.type.indexOf('image/') == 0) {
+        iframe.load(function() {
+          var img_id = 'image-' + key;
+          var img = $('&lt;img id="' + img_id + '"/&gt;');
+          $(this).contents().find('body').html(img);
+          var obj_url = window.URL.createObjectURL(blob);
+          $(this).contents().find('#' + img_id).attr('src', obj_url);
+          window.URL.revokeObjectURL(obj_url);
+        });
+      } else if (blob.type == 'application/pdf') {
+        $('*').css('cursor', 'wait');
+        var obj_url = window.URL.createObjectURL(blob);
+        iframe.load(function() {
+          $('*').css('cursor', 'auto');
+        });
+        iframe.attr('src', obj_url);
+        window.URL.revokeObjectURL(obj_url);
+      } else {
+        iframe.load(function() {
+          $(this).contents().find('body').html("No view available");
+        });
+      }
+
+    });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {string} url the URL of the image to download and store in the local
+   *   IndexedDB database. The resource behind this URL is subjected to the
+   *   "Same origin policy", thus for this method to work, the URL must come from
+   *   the same origin as the web site/app this code is deployed on.
+   */
+  function addPublicationFromUrl(biblioid, title, year, url) {
+    console.log("addPublicationFromUrl:", arguments);
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    // Setting the wanted responseType to "blob"
+    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
+    xhr.responseType = 'blob';
+    xhr.onload = function (evt) {
+                           if (xhr.status == 200) {
+                             console.log("Blob retrieved");
+                             var blob = xhr.response;
+                             console.log("Blob:", blob);
+                             addPublication(biblioid, title, year, blob);
+                           } else {
+                             console.error("addPublicationFromUrl error:",
+                                           xhr.responseText, xhr.status);
+                           }
+                         };
+    xhr.send();
+
+    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
+    // responseType is not handled.
+    // http://bugs.jquery.com/ticket/11461
+    // http://bugs.jquery.com/ticket/7248
+    // $.ajax({
+    //   url: url,
+    //   type: 'GET',
+    //   xhrFields: { responseType: 'blob' },
+    //   success: function(data, textStatus, jqXHR) {
+    //     console.log("Blob retrieved");
+    //     console.log("Blob:", data);
+    //     // addPublication(biblioid, title, year, data);
+    //   },
+    //   error: function(jqXHR, textStatus, errorThrown) {
+    //     console.error(errorThrown);
+    //     displayActionFailure("Error during blob retrieval");
+    //   }
+    // });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {Blob=} blob
+   */
+  function addPublication(biblioid, title, year, blob) {
+    console.log("addPublication arguments:", arguments);
+    var obj = { biblioid: biblioid, title: title, year: year };
+    if (typeof blob != 'undefined')
+      obj.blob = blob;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req;
+    try {
+      req = store.add(obj);
+    } catch (e) {
+      if (e.name == 'DataCloneError')
+        displayActionFailure("This engine doesn't know how to clone a Blob, " +
+                             "use Firefox");
+      throw e;
+    }
+    req.onsuccess = function (evt) {
+      console.log("Insertion in DB successful");
+      displayActionSuccess();
+      displayPubList(store);
+    };
+    req.onerror = function() {
+      console.error("addPublication error", this.error);
+      displayActionFailure(this.error);
+    };
+  }
+
+  /**
+   * @param {string} biblioid
+   */
+  function deletePublicationFromBib(biblioid) {
+    console.log("deletePublication:", arguments);
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.index('biblioid');
+    req.get(biblioid).onsuccess = function(evt) {
+      if (typeof evt.target.result == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      deletePublication(evt.target.result.id, store);
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublicationFromBib:", evt.target.errorCode);
+    };
+  }
+
+  /**
+   * @param {number} key
+   * @param {IDBObjectStore=} store
+   */
+  function deletePublication(key, store) {
+    console.log("deletePublication:", arguments);
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readwrite');
+
+    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
+    // the result of the Object Store Deletion Operation algorithm is
+    // undefined, so it's not possible to know if some records were actually
+    // deleted by looking at the request result.
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var record = evt.target.result;
+      console.log("record:", record);
+      if (typeof record == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      // Warning: The exact same key used for creation needs to be passed for
+      // the deletion. If the key was a Number for creation, then it needs to
+      // be a Number for deletion.
+      req = store.delete(key);
+      req.onsuccess = function(evt) {
+        console.log("evt:", evt);
+        console.log("evt.target:", evt.target);
+        console.log("evt.target.result:", evt.target.result);
+        console.log("delete successful");
+        displayActionSuccess("Deletion successful");
+        displayPubList(store);
+      };
+      req.onerror = function (evt) {
+        console.error("deletePublication:", evt.target.errorCode);
+      };
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublication:", evt.target.errorCode);
+      };
+  }
+
+  function displayActionSuccess(msg) {
+    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
+    $('#msg').html('&lt;span class="action-success"&gt;' + msg + '&lt;/span&gt;');
+  }
+  function displayActionFailure(msg) {
+    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
+    $('#msg').html('&lt;span class="action-failure"&gt;' + msg + '&lt;/span&gt;');
+  }
+  function resetActionStatus() {
+    console.log("resetActionStatus ...");
+    $('#msg').empty();
+    console.log("resetActionStatus DONE");
+  }
+
+  function addEventListeners() {
+    console.log("addEventListeners");
+
+    $('#register-form-reset').click(function(evt) {
+      resetActionStatus();
+    });
+
+    $('#add-button').click(function(evt) {
+      console.log("add ...");
+      var title = $('#pub-title').val();
+      var biblioid = $('#pub-biblioid').val();
+      if (!title || !biblioid) {
+        displayActionFailure("Required field(s) missing");
+        return;
+      }
+      var year = $('#pub-year').val();
+      if (year != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (isNaN(year))  {
+          displayActionFailure("Invalid year");
+          return;
+        }
+        year = Number(year);
+      } else {
+        year = null;
+      }
+
+      var file_input = $('#pub-file');
+      var selected_file = file_input.get(0).files[0];
+      console.log("selected_file:", selected_file);
+      // Keeping a reference on how to reset the file input in the UI once we
+      // have its value, but instead of doing that we rather use a "reset" type
+      // input in the HTML form.
+      //file_input.val(null);
+      var file_url = $('#pub-file-url').val();
+      if (selected_file) {
+        addPublication(biblioid, title, year, selected_file);
+      } else if (file_url) {
+        addPublicationFromUrl(biblioid, title, year, file_url);
+      } else {
+        addPublication(biblioid, title, year);
+      }
+
+    });
+
+    $('#delete-button').click(function(evt) {
+      console.log("delete ...");
+      var biblioid = $('#pub-biblioid-to-delete').val();
+      var key = $('#key-to-delete').val();
+
+      if (biblioid != '') {
+        deletePublicationFromBib(biblioid);
+      } else if (key != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (key == '' || isNaN(key))  {
+          displayActionFailure("Invalid key");
+          return;
+        }
+        key = Number(key);
+        deletePublication(key);
+      }
+    });
+
+    $('#clear-store-button').click(function(evt) {
+      clearObjectStore();
+    });
+
+    var search_button = $('#search-list-button');
+    search_button.click(function(evt) {
+      displayPubList();
+    });
+
+  }
+
+  openDb();
+  addEventListeners();
+
+})(); // Immediately-Invoked Function Expression (IIFE)
+</pre>
+
+<p>{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}</p>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<p>Uma leitura adicional para você encontrar mais informações.</p>
+
+<h3 id="Refências">Refências</h3>
+
+<ul>
+ <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li>
+ <li><a href="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome" title="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome">Using IndexedDB in chrome</a></li>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_JavaScript_Generators_in_Firefox">Using JavaScript generators in Firefox</a></li>
+ <li>IndexedDB <a class="link-https" href="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom%2FindexedDB%2F.*%5C.idl&amp;regexp=1" title="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom/indexedDB/.*\.idl&amp;regexp=1">interface files</a> in the Firefox source code</li>
+</ul>
+
+<h3 id="Guias_e_tutoriais">Guias e tutoriais</h3>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/" title="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with IndexedDB</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li>
+</ul>
diff --git a/files/pt-br/web/api/keyboardevent/index.html b/files/pt-br/web/api/keyboardevent/index.html
new file mode 100644
index 0000000000..d552857d3f
--- /dev/null
+++ b/files/pt-br/web/api/keyboardevent/index.html
@@ -0,0 +1,439 @@
+---
+title: KeyboardEvent
+slug: Web/API/KeyboardEvent
+tags:
+  - API
+  - DOM
+  - Evento
+  - Inteface
+  - Referencia
+translation_of: Web/API/KeyboardEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><code>Objetos do tipo <strong>KeyboardEvent</strong></code> descrevem a interação do usuário com o teclado. Cada evento descreve uma tecla; o tipo de evento (<code>keydown</code>, <code>keypress</code>, ou <code>keyup</code>) identifica qual tipo de ação foi executada.</p>
+
+<div class="note"><strong>Note:</strong> O <code>KeyboardEvent</code> indica o que está havendo com a tecla. Quando você precisar lidar com entrada de texto, use o evento <code><a href="/en-US/docs/DOM/DOM_event_reference/input" rel="custom">input</a> do </code>HTML5  . Por exemplo, se o usuário envia texto por meio de um sistema manuscrito como um tablet PC, eventos das teclas podem não ser disparados.</div>
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}</dt>
+ <dd>Cria um objeto do tipo <code>KeyboardEvent</code>.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Essa interface também herda métodos dos seus pais, {{domxref("UIEvent")}} e {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.getModifierState()")}}</dt>
+ <dd>Retorna um {{jsxref("Boolean")}} indicando se uma tecla, como <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd>, ou <kbd>Meta</kbd>, foi pressionada quando o evento foi criado.</dd>
+ <dt>{{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}}</dt>
+ <dd>Inicializa um objeto do tipo <code>KeyboardEvent</code> . isso foi apenas implementado por Gecko (outros usaram {{domxref("KeyboardEvent.initKeyboardEvent()")}}) e não deve mais ser usado. A forma moderna padrão é usar o construtor {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</dd>
+ <dt>{{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}}</dt>
+ <dd>Inicializa um objeto do tipo <code>KeyboardEvent</code> . Isso nunca foi implementado por Gecko (que usou {{domxref("KeyboardEvent.initKeyEvent()")}}) e não deve mais ser usado. A forma moderna padrão é usar o construtor  {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>Essa interface também herda métodos dos seus pais, {{domxref("UIEvent")}} e {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}</dt>
+ <dd>Retorna um {{jsxref("Boolean")}} que é <code>true</code> se a tecla <kbd>Alt</kbd> ( <kbd>Option</kbd> ou <kbd>⌥</kbd> no OS X) estava ativa quando o evento foi acionado.</dd>
+ <dt>{{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Retorna um {{domxref("DOMString")}} representando o valor da tecla em caractere. Se a tecla corresponde a um caractere exibível, esse valor é uma string Unicode não-vazia contendo aquele caractere. Se a tecla não possui uma representação exibível, ela é uma string vazia.
+ <div class="note"><strong>Nota:</strong> Se a tecla é usada como um macro que insere caracteres múltiplos, o valor desse atributo é a string inteira, não apenas o primeiro caractere.</div>
+
+ <div class="warning"><strong>Aviso:</strong> Isso foi removido dos Eventos DOM de nível 3. Isso é apenas suportado no IE.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the Unicode reference number of the key; this attribute is used only by the <code>keypress</code> event. For keys whose <code>char</code> attribute contains multiple characters, this is the Unicode value of the first character in that attribute. In Firefox 26 this returns codes for printable characters.
+ <div class="warning"><strong>Aviso:</strong> Este atributo esta depreciado; você deve usar <code>key</code> no lugar, se disponivel.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.code")}} {{Readonlyinline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} with the code value of the key represented by the event.</dd>
+ <dt>{{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> if the <kbd>Ctrl</kbd> key was active when the key event was generated.</dd>
+ <dt>{{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> if the event is fired between after <code>compositionstart</code> and before <code>compositionend</code>.</dd>
+ <dt>{{domxref("KeyboardEvent.key")}} {{Readonlyinline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the key value of the key represented by the event.</dd>
+ <dt>{{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing a system and implementation dependent numerical code identifying the unmodified value of the pressed key.
+ <div class="warning"><strong>Aviso:</strong> Este atributo esta depreciado; você deve usar <code>key</code> no lugar, se disponivel.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing a locale string indicating the locale the keyboard is configured for. This may be the empty string if the browser or device doesn't know the keyboard's locale.
+ <div class="note"><strong>Note:</strong> This does not describe the locale of the data being entered. A user may be using one keyboard layout while typing text in a different language.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.location")}}<a> {{Readonlyinline}}</a></dt>
+ <dd>Returns a {{jsxref("Number")}} representing the location of the key on the keyboard or other input device.</dd>
+ <dt>{{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> if the <kbd>Meta</kbd> (or <kbd>Command</kbd> on OS X) key was active when the key event was generated.</dd>
+ <dt>{{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> if the key is being held down such that it is automatically repeating.</dd>
+ <dt>{{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> if the <kbd>Shift</kbd> key was active when the key event was generated.</dd>
+ <dt>{{domxref("KeyboardEvent.which")}} {{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing a system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as <code>keyCode</code>.
+ <div class="warning"><strong>Aviso:</strong> Este atributo esta depreciado; você deve usar <code>key</code> no lugar, se disponivel.</div>
+ </dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<p>There are <code>keydown</code>, <code>keypress</code>, and <code>keyup</code> events. For most keys, Gecko dispatches a sequence of key events like this:</p>
+
+<ol>
+ <li>When the key is first depressed, the <code>keydown</code> event is sent.</li>
+ <li>If the key is not a modifier key, the <code>keypress</code> event is sent.</li>
+ <li>When the user releases the key, the <code>keyup</code> event is sent.</li>
+</ol>
+
+<h3 id="Special_cases">Special cases</h3>
+
+<p>Certain keys toggle the state of an LED indicator, such as Caps Lock, Num Lock, and Scroll Lock. On Windows and Linux, these keys dispatch only the <code>keydown</code> and <code>keyup</code> events. Note that on Linux, Firefox 12 and earlier also dispatched the <code>keypress</code> event for these keys.</p>
+
+<p>On Mac, however, Caps Lock dispatches only the <code>keydown</code> event due to a platform event model limitation. Num Lock had been supported on old MacBook (2007 model and older) but Mac hasn't supported Num Lock feature even on external keyboards in these days. On the old MacBook which has Num Lock key, Num Lock doesn't cause any key events. And Gecko supports Scroll Lock key if an external keyboard which has F14 is connected. However, it generates <code>keypress</code> event. This inconsistent behavior is a bug; see {{bug(602812)}}.</p>
+
+<h3 id="Auto-repeat_handling">Auto-repeat handling</h3>
+
+<p>When a key is pressed and held down, it begins to auto-repeat. This results in a sequence of events similar to the following being dispatched:</p>
+
+<ol>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li>&lt;&lt;repeating until the user releases the key&gt;&gt;</li>
+ <li><code>keyup</code></li>
+</ol>
+
+<p>This is what the DOM Level 3 specification says should happen. There are some caveats, however, as described below.</p>
+
+<h4 id="Auto-repeat_on_some_GTK_environments_such_as_Ubuntu_9.4">Auto-repeat on some GTK environments such as Ubuntu 9.4</h4>
+
+<p>In some GTK-based environments, auto-repeat dispatches a native key-up event automatically during auto-repeat, and there's no way for Gecko to know the difference between a repeated series of keypresses and an auto-repeat. On those platforms, then, an auto-repeat key will generate the following sequence of events:</p>
+
+<ol>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li>&lt;&lt;repeating until the user releases the key&gt;&gt;</li>
+ <li><code>keyup</code></li>
+</ol>
+
+<p>In these environments, unfortunately, there's no way for web content to tell the difference between auto-repeating keys and keys that are just being pressed repeatedly.</p>
+
+<h4 id="Auto-repeat_handling_prior_to_Gecko_4.0">Auto-repeat handling prior to Gecko 4.0</h4>
+
+<p>Before Gecko 4.0 {{geckoRelease('4.0')}}, keyboard handling was less consistent across platforms.</p>
+
+<dl>
+ <dt>Windows</dt>
+ <dd>Auto-repeat behavior is the same as in Gecko 4.0 and later.</dd>
+ <dt>Mac</dt>
+ <dd>After the initial keydown event, only keypress events are sent until the keyup event occurs; the inter-spaced keydown events are not sent.</dd>
+ <dt>Linux</dt>
+ <dd>The event behavior depends on the specific platform. It will either behave like Windows or Mac depending on what the native event model does.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<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;
+  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;
+&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('DOM3 Events', '#interface-KeyboardEvent', 'KeyboardEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The <code>KeyboardEvent</code> interface specification went through numerous draft versions, first under DOM Events Level 2 where it was dropped as no consensus arose, then under DOM Events Level 3. This led to the implementation of non-standard initialization methods, the early DOM Events Level 2 version, {{domxref("KeyboardEvent.initKeyEvent()")}} by Gecko browsers and the early DOM Events Level 3 version, {{domxref("KeyboardEvent.initKeyboardEvent()")}} by others. Both have been superseded by the modern usage of a constructor: {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</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>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>
+  <tr>
+   <td>constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.char</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.charCode</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.code</code></td>
+   <td colspan="5" rowspan="1">See Browser compatibility of {{domxref("KeyboardEvent.code")}}.</td>
+  </tr>
+  <tr>
+   <td><code>.isComposing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.key</code></td>
+   <td colspan="5" rowspan="1">See Browser compatibility of {{domxref("KeyboardEvent.key")}}.</td>
+  </tr>
+  <tr>
+   <td><code>.keyCode</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.locale</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.location</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.repeat</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("28.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.which</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.getModifierState()</code></td>
+   <td colspan="5" rowspan="1">See Browser compatibility of {{domxref("KeyboardEvent.getModifierState")}}</td>
+  </tr>
+  <tr>
+   <td><code>.initKeyboardEvent()</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatIE("9.0")}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("31.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.char</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.charCode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.code</code></td>
+   <td colspan="5" rowspan="1">See Browser compatibility of {{domxref("KeyboardEvent.code")}}.</td>
+  </tr>
+  <tr>
+   <td><code>.isComposing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>.key</code></td>
+   <td colspan="6">See Browser compatibility table of {{domxref("KeyboardEvent.key")}}.</td>
+  </tr>
+  <tr>
+   <td><code>.keyCode</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.locale</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.location</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.repeat</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("28.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.which</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>.getModifierState()</code></td>
+   <td colspan="5" rowspan="1">See Browser compatibility of {{domxref("KeyboardEvent.getModifierState")}}</td>
+  </tr>
+  <tr>
+   <td><code>.initKeyboardEvent()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The arguments of <code>initKeyboardEvent()</code> of WebKit and Blink's are different from the definition in DOM Level 3 Events. The method is: <code>initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyIndentifierArg, in number locationArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in boolean altGraphKeyArg)</code></p>
+
+<p>[2] Gecko won't support <code>initKeyboardEvent()</code> because supporting it completely breaks feature detection of web applications. See {{Bug(999645)}}.</p>
+
+<p>[3] The argument of <code>initKeyboardEvent()</code> of IE is different from the definition in DOM Level 3 Events. The method is: <code>initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyArg, in number locationArg, in DOMString modifierListArg, in boolean repeatArt, in DOMString locationArg)</code>. See <a href="http://msdn.microsoft.com/en-us/library/ie/ff975297%28v=vs.85%29.aspx">document of <code>initKeyboardEvent()</code> in MSDN</a>.</p>
+
+<p><a href="http://www.howtocreate.co.uk/tutorials/javascript/domevents#domevld1">[4]</a> Note that manually firing an event does <em>not</em> generate the default action associated with that event. For example, manually firing a key event does not cause that letter to appear in a focused text input. In the case of UI events, this is important for security reasons, as it prevents scripts from simulating user actions that interact with the browser itself.</p>
diff --git a/files/pt-br/web/api/location/assign/index.html b/files/pt-br/web/api/location/assign/index.html
new file mode 100644
index 0000000000..e1a1cf8609
--- /dev/null
+++ b/files/pt-br/web/api/location/assign/index.html
@@ -0,0 +1,120 @@
+---
+title: Location.assign()
+slug: Web/API/Location/assign
+tags:
+  - API
+  - HTML-DOM
+  - Location
+  - Referencia
+  - metodo
+translation_of: Web/API/Location/assign
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p>O método <code><strong>Location.assign()</strong></code> faz com que o navegador carregue o documento na URL especificada e a exiba na janela atual.</p>
+
+<p>Se a tatefa não poder ser executada por alguma violação de segurança, uma {{domxref("DOMException")}} do tipo <code>SECURITY_ERROR</code> será lançada. Isso acontece se a origem do script chamador do método for diferente da origem da página originalmente descrita no objeto {{domxref("Location")}}, geralmente quando o script está hospedado em um dominio diferente.</p>
+
+<p>Se a URL especificada for inválida, uma {{domxref("DOMException")}} do tipo <code>SYNTAX_ERROR</code> será lançada.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>location</em>.assign(<em>url</em>);
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><em>url</em></dt>
+ <dd>É uma {{domxref("DOMString")}} contendo a URL da página destino.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<pre class="brush: js">// Navega para a página do artigo Location.reload
+document.location.assign('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentários</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#dom-location-assign", "Location.assign()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sem alterações  no {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-assign", "Location.assign()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_Navegadores">Compatibilidade com Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</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>Característica</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>Suporte Básico</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>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A interface {{domxref("Location")}}.</li>
+ <li>Métodos Similares: {{domxref("Location.replace()")}} and {{domxref("Location.reload()")}}.</li>
+</ul>
diff --git a/files/pt-br/web/api/location/index.html b/files/pt-br/web/api/location/index.html
new file mode 100644
index 0000000000..027a8564ec
--- /dev/null
+++ b/files/pt-br/web/api/location/index.html
@@ -0,0 +1,184 @@
+---
+title: Location
+slug: Web/API/Location
+tags:
+  - API
+  - Interface
+  - Location
+translation_of: Web/API/Location
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>A interface <code>Location</code> representa a localização do objeto a qual ele está associado. Mudanças feitas na interface serão refletidas nos objetos relacionados a ela. Tanto a interface {{domxref("Document")}}, como a interface {{domxref("Window")}} , têm este vínculo com a inteface Location, acessível via {{domxref("Document.location")}} e {{domxref("Window.location")}} respectivamente.</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>A inteface <code>Location</code> não herda nenhuma propriedade, mas implementa as propriedades de </em><em>{{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtils.href")}}</dt>
+ <dd>É uma {{domxref("DOMString")}} que contém toda URL.</dd>
+ <dt>{{domxref("URLUtils.protocol")}}</dt>
+ <dd>É uma {{domxref("DOMString")}} que contém o esquema de protocolo da URL, incluindo o final ':'.</dd>
+ <dt>{{domxref("URLUtils.host")}}</dt>
+ <dd>É uma {{domxref("DOMString")}} que contém o <em>host</em>, que é o <em>hostname</em> seguido de ':' e a <em>port</em> da URL.</dd>
+ <dt>{{domxref("URLUtils.hostname")}}</dt>
+ <dd>É uma {{domxref("DOMString")}} que contém o domínio da URL.</dd>
+ <dt>{{domxref("URLUtils.port")}}</dt>
+ <dd>É uma {{domxref("DOMString")}} que contém o número da porta da URL.</dd>
+ <dt>{{domxref("URLUtils.pathname")}}</dt>
+ <dd>É uma {{domxref("DOMString")}} que contém <code>'/', como </code>caractere inicial<code>,</code> seguido do caminho da URL.</dd>
+ <dt>{{domxref("URLUtils.search")}}</dt>
+ <dd>É uma {{domxref("DOMString")}} que contém um <code>'?'</code> seguido dos parâmetros da URL.</dd>
+ <dt>{{domxref("URLUtils.hash")}}</dt>
+ <dd>É uma {{domxref("DOMString")}} que contém um <code>'#'</code> seguido do identificador de fragmento da URL.</dd>
+ <dt>{{domxref("URLUtils.username")}}</dt>
+ <dd>É uma {{domxref("DOMString")}} que contém o nome de usuário especificado antes do nome de domínio.</dd>
+ <dt>{{domxref("URLUtils.password")}}</dt>
+ <dd>É uma {{domxref("DOMString")}} que contém a senha especificada antes do nome de domínio.</dd>
+ <dt>{{domxref("URLUtils.origin")}} {{readOnlyInline}}</dt>
+ <dd>Retorna uma {{domxref("DOMString")}} que contém a forma canônica da origem do local especificado.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>A inteface <code>Location</code></em><em> não herda nenhum método, mas implementa os métodos de<em> {{domxref("URLUtils")}}</em>.</em></p>
+
+<dl>
+ <dt>{{domxref("Location.assign()")}}</dt>
+ <dd>Carrega o recurso na URL fornecida como parâmetro.</dd>
+ <dt>{{domxref("Location.reload()")}}</dt>
+ <dd>Recarrega o recurso a partir da URL atual. Seu único parâmetro opcional é um {{domxref("Boolean")}}, que, quando verdadeiro (<code>true)</code>, faz com que a página sempre seja recarregada a partir do servidor. Se for falso (<code>false)</code> ou não especificado,  o navegador pode recarregar a página a partir de seu cache.</dd>
+ <dt>{{domxref("Location.replace()")}}</dt>
+ <dd>Substitui o recurso atual pelo recurso presente na URL fornecida. A diferença entre o método <code>assign()</code> é que após usar <code>replace()</code> a página atual não será salva na sessão  {{domxref("History")}}, ou seja, o usuário não será capaz de usar o botão <em>voltar </em>para navegar até a página.</dd>
+ <dt>{{domxref("URLUtils.toString()")}}</dt>
+ <dd>Retorna uma {{domxref("DOMString")}} que contém toda URL. O método é um sinônimo para {{domxref("URLUtils.href")}}, embora não possa ser usado para modificar o valor.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Location")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Nenhuma mudança a partir {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_Navegadores">Compatibilidade entre Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> em <code>Windows.location</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("21")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> em todos objetos <code>location</code> (mas nos objetos Workers, que usam {{domxref("WorkerLocation")}})</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code> e <code>password</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26")}}</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>Funcionalidade</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> on <code>Windows.location</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("21")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> on all <code>location</code> objects (mas nos objetos Workers, que usam {{domxref("WorkerLocation")}})</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>username</code> e <code>password</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("26")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>Dois métodos que criam um objeto Location: {{domxref("Window.location")}} e {{domxref("Document.location")}}.</li>
+</ul>
diff --git a/files/pt-br/web/api/location/reload/index.html b/files/pt-br/web/api/location/reload/index.html
new file mode 100644
index 0000000000..24d990bbe8
--- /dev/null
+++ b/files/pt-br/web/api/location/reload/index.html
@@ -0,0 +1,114 @@
+---
+title: Location.reload()
+slug: Web/API/Location/reload
+tags:
+  - API
+  - HTML-DOM
+  - Localização
+  - Referencia
+  - metodo
+translation_of: Web/API/Location/reload
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p>O método <code><strong>Location.reload()</strong></code> recarrega a URL atual. Seu unico parâmetro opcional é um {{domxref("Boolean")}}, que, quando <code>true</code>, faz com que a página sempre seja recarregada do servidor. Se ele é <code>false</code> ou não estiver especificado, o navegador pode carregar ela do cache.</p>
+
+<p>Caso não seja possível recarregar por questões de violação de segurança, uma {{domxref("DOMException")}} do tipo <code>SECURITY_ERROR</code> é jogada. Isso acontece se a origem do script que chama o método é diferente da origem da página originalmente descrita pelo objeto {{domxref("Location")}}, usualmente quando o script é hosteado em um domínio diferente.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>object</em>.reload(<em>forcedReload</em>);
+</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<dl>
+ <dt><em>forcedReload</em> {{optional_inline}}</dt>
+ <dd>É uma flag {{domxref("Boolean")}}, que quando <code>true</code>, faz com que a página sempre seja recarregada do servidor, se é <code>false ou não for definido, </code>o navegador pode recarregar a página do cache.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<pre class="brush: js">// Recarrega a página atual sem usar o cache
+document.location.reload(true);</pre>
+
+<h2 id="Especificações">Especificações</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', "history.html#dom-location-reload", "Location.reload()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Nenhuma mudança do  {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-reload", "Location.reload()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</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="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A interface {{domxref("Location")}} que o método pertence.</li>
+ <li>Métodos similares: {{domxref("Location.assign()")}} e {{domxref("Location.replace()")}}.</li>
+</ul>
diff --git a/files/pt-br/web/api/location/search/index.html b/files/pt-br/web/api/location/search/index.html
new file mode 100644
index 0000000000..6cc17724d5
--- /dev/null
+++ b/files/pt-br/web/api/location/search/index.html
@@ -0,0 +1,55 @@
+---
+title: 'Location: search'
+slug: Web/API/Location/search
+tags:
+  - API
+  - Location
+  - Propriedade
+  - Search
+translation_of: Web/API/Location/search
+---
+<div>{{ApiRef("Location")}}</div>
+
+<p>A propriedade <strong><code>search</code></strong> da interface {{domxref("Location")}} é um texto de busca, também chamado de <em>query string</em> ou <em>querystring</em>; isso é, uma {{domxref("USVString")}} contendo um <code>'?'</code> seguido pelos parâmetros da URL.</p>
+
+<p>Os navegadores modernos fornecem o <code><a href="/en-US/docs/Web/API/URLSearchParams/get#Examples">URLSearchParams</a></code> e o <code><a href="/en-US/docs/Web/API/URL/searchParams#Examples">URL.searchParams</a></code> para facilitar a análise dos parâmetros da querystring.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.search;
+<em>object</em>.search = <em>string</em>;
+</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<pre class="brush: js">// Seleciona o elemento &lt;a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/Location.search?q=123"&gt;
+var anchor = document.getElementById("myAnchor");
+var queryString = anchor.search; // Retorna:'?q=123'
+
+// Análise adicional:
+let params = new URLSearchParams(queryString);
+let q = parseInt(params.get("q")<span class="kwd">); // é o número 123</span>
+</pre>
+
+<h2 id="Especificação">Especificação</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-location-search', 'search')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se deseja contribuir com os dados, por favor consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request.</div>
+
+<p>{{Compat("api.Location.search")}}</p>
diff --git a/files/pt-br/web/api/mediadevices/index.html b/files/pt-br/web/api/mediadevices/index.html
new file mode 100644
index 0000000000..83e3452f58
--- /dev/null
+++ b/files/pt-br/web/api/mediadevices/index.html
@@ -0,0 +1,251 @@
+---
+title: MediaDevices
+slug: Web/API/MediaDevices
+translation_of: Web/API/MediaDevices
+---
+<div>{{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">As interfaces <strong><code>MediaDevices</code></strong> proporcionam accesso aos dispositivos de entrada de midia conectados, como câmeras e microfones, bem como compartilhamento de tela. Essencialmente, isso te permite obter acesso a qualquer mídia gerada pelo hardware.</span></p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>As mesmas propriedades de {{domxref("EventTarget")}}.</em></p>
+
+<h3 id="Handlers" name="Handlers">Manipuladores de Evento</h3>
+
+<dl>
+ <dt>{{ domxref("MediaDevices.ondevicechange") }}</dt>
+ <dd>O manipulador de evento para o evento {{event("devicechange")}}. Esse evento é entregue ao objeto <code>MediaDevices</code> quando uma entrada de mídia ou dispositivo de saída é conectado ou removido do computador do usuário.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Mesmos métodos de {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("EventTarget.addEventListener()") }}</dt>
+ <dd>Registra um manipulador de eventos para um tipo específico de evento.</dd>
+ <dt>{{ domxref("MediaDevices.enumerateDevices()") }}</dt>
+ <dd>Obtém um array de informações sobre a entrada de midia e dispositivos de saída disponíveis no sistema.</dd>
+ <dt>{{domxref("MediaDevices.getSupportedConstraints()")}}</dt>
+ <dd>Retorna um objeto consoante com {{domxref("MediaTrackSupportedConstraints")}} indicando quais propriedades restritivas são suportadas na interface {{domxref("MediaStreamTrack")}}. Veja {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}} para aprender mais sobre restrições e como usá-las.</dd>
+ <dt>{{ domxref("MediaDevices.getUserMedia()") }}</dt>
+ <dd>Após a permissão do usuário (pedida através de um prompt), liga a câmera, microfone e/ou a tramissão de tela no sistema e fornece uma {{domxref("MediaStream")}} contendo uma faixa de vídeo e/ou áudio com a entrada.</dd>
+ <dt>{{ domxref("EventTarget.removeEventListener()") }}</dt>
+ <dd>Remove um escutador de evento.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush:js">'use strict';
+
+// Coloca as variáveis no escopo global para torná-las disponível para o Console do navegador.
+var video = document.querySelector('video');
+var constraints = window.constraints = {
+  audio: false,
+  video: true
+};
+var errorElement = document.querySelector('#errorMsg');
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(stream) {
+  var videoTracks = stream.getVideoTracks();
+  console.log('Got stream with constraints:', constraints);
+  console.log('Using video device: ' + videoTracks[0].label);
+  stream.onremovetrack = function() {
+    console.log('Stream ended');
+  };
+  window.stream = stream; // torna as variáveis disponíveis para o Console do navegador
+  video.srcObject = stream;
+})
+.catch(function(error) {
+  if (error.name === 'ConstraintNotSatisfiedError') {
+    errorMsg('A resolução ' + constraints.video.width.exact + 'x' +
+        constraints.video.width.exact + ' px não é suportada pelo seu dispositivo.');
+  } else if (error.name === 'PermissionDeniedError') {
+    errorMsg('As permissões para usar sua câmera e microfone não foram fornecidas. ' +
+      'Você precisa permitir o acesso da página aos seus dispositivos para ' +
+      'que a demo funcione.');
+  }
+  errorMsg('getUserMedia error: ' + error.name, error);
+});
+
+function errorMsg(msg, error) {
+  errorElement.innerHTML += '&lt;p&gt;' + msg + '&lt;/p&gt;';
+  if (typeof error !== 'undefined') {
+    console.error(error);
+  }
+}</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#mediadevices', 'MediaDevices')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade">Compatibilidade</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</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>Suporte Básico</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("36.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(30)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>enumerateDevices()</code></td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(38)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getSupportedConstraints()</code></td>
+   <td>{{CompatChrome(53)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(44)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(40)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Eventos <code>ondevicechange</code> e <code>devicechange</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(51)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Captura de áudio estéreo</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(55)}}</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>Recurso</th>
+   <th>Android Webview</th>
+   <th>Chrome para Android</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 para Android</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("36.0")}}</td>
+   <td>2.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(30)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>enumerateDevices()</code></td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(38)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getSupportedConstraints()</code></td>
+   <td>{{CompatChrome(53)}}</td>
+   <td>{{CompatChrome(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(50)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(40)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Eventos <code>ondevicechange</code> e <code>devicechange</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(51)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Captura de áudio estéreo</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] O suporte para o evento <code>devicechange</code> e para {{domxref("MediaDevices.ondevicechange")}} começou no Firefox 51, mas <em>somente pra Mac</em>, e desabilitado por padrão. Ele pode ser habilitado configurando a preferência <code>media.ondevicechange.enabled</code> para <code>true</code>. O suporte para esse evendo foi adicionado para Linux e Windows — ativado por padrão — a partir do Firefox 52.</p>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a>: A API desta interface faz parte..</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li>{{domxref("Navigator.mediaDevices")}}: Retorna uma referência para um objeto <code>MediaDevices</code> que pode ser usado para acessar dispositivos.</li>
+ <li><a href="https://github.com/chrisjohndigital/CameraCaptureJS">CameraCaptureJS:</a> Captura de vídeo e playback em HTML5 usando <em>MediaDevices</em> e a <em>MediaStream Recording API</em> (<a href="https://github.com/chrisjohndigital/CameraCaptureJS">código no GitHub</a>)</li>
+ <li><a href="https://github.com/chrisjohndigital/OpenLang">OpenLang</a>: Aplicação web de laboratório de linguagem de vídeo HTML5 usando <em>MediaDevices </em>e <em>MediaStream Recording API</em> para gravação de video (<a href="https://github.com/chrisjohndigital/OpenLang">código no GitHub</a>)</li>
+</ul>
diff --git a/files/pt-br/web/api/mediastreamtrack/index.html b/files/pt-br/web/api/mediastreamtrack/index.html
new file mode 100644
index 0000000000..33f62732dc
--- /dev/null
+++ b/files/pt-br/web/api/mediastreamtrack/index.html
@@ -0,0 +1,181 @@
+---
+title: MediaStreamTrack
+slug: Web/API/MediaStreamTrack
+translation_of: Web/API/MediaStreamTrack
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>A interface <strong><code>MediaStream</code></strong><strong> r</strong>epresenta uma stream de conteúdo de mídia. Uma stream consiste em várias <em>tracks</em>, como faixas de áudio e vídeo.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("MediaStreamTrack.enabled")}}</dt>
+ <dd>Is a Boolean value with a value of <code>true</code> if the track is enabled, that is allowed to render the media source stream; or <code>false</code> if it is disabled, that is not rendering the media source stream but silence and blackness. If the track has been disconnected, this value can be changed but has no more effect.</dd>
+ <dt>{{domxref("MediaStreamTrack.id")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing a unique identifier (GUID) for the track; it is generated by the browser.</dd>
+ <dt>{{domxref("MediaStreamTrack.kind")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} set to <code>"audio"</code> if the track is an audio track and to <code>"video"</code>, if it is a video track. It doesn't change if the track is deassociated from its source.</dd>
+ <dt>{{domxref("MediaStreamTrack.label")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing a user agent-assigned label that identifies the track source, as in <code>"internal microphone"</code>. The string may be left empty and is empty as long as no source has been connected. When the track is deassociated from its source, the label is not changed.</dd>
+ <dt>{{domxref("MediaStreamTrack.muted")}} {{readonlyInline}}</dt>
+ <dd>Returns a Boolean value with a value of <code>true</code> if the track is muted, <code>false</code> otherwise.</dd>
+ <dt>{{domxref("MediaStreamTrack.readonly")}} {{readonlyInline}}</dt>
+ <dd>Returns a Boolean value with a value of <code>true</code> if the track is readonly (such a video file source or a camera that settings can't be modified),<code>false</code> otherwise.</dd>
+ <dt>{{domxref("MediaStreamTrack.readyState")}} {{readonlyInline}}</dt>
+ <dd>Returns an enumerated value giving the status of the track.It takes one of the following values:
+ <ul>
+  <li><code>"live"</code> which indicates that an input is connected and does its best-effort in providing real-time data. In that case, the output of data can be switched on or off using the <code>MediaStreamTrack.enabled</code> attribute.</li>
+  <li><code>"ended"</code> which indicates that the input is not giving any more data and will never provide new data.</li>
+ </ul>
+ </dd>
+ <dt>{{domxref("MediaStreamTrack.remote")}} {{readonlyInline}}</dt>
+ <dd>Returns a boolean value with a value of <code>true</code> if the track is sourced by a {{domxref("RTCPeerConnection")}}, <code>false</code> otherwise.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("MediaStreamTrack.onstarted")}}</dt>
+ <dd>Is a {{domxref("EventHandler")}} containing the action to perform when an {{event("started")}} event is fired on the object, that is when a new {{domxref("MediaStreamTrack")}} object is added.</dd>
+ <dt>{{domxref("MediaStreamTrack.onmute")}}</dt>
+ <dd>Is a {{domxref("EventHandler")}} containing the action to perform when an {{event("mute")}} event is fired on the object, that is when the streaming is terminating.</dd>
+ <dt>{{domxref("MediaStreamTrack.onunmute")}}</dt>
+ <dd>Is a {{domxref("EventHandler")}} containing the action to perform when an {{event("unmute")}} event is fired on the object, that is when a  {{domxref("MediaStreamTrack")}} object is removed from it.</dd>
+ <dt>{{domxref("MediaStreamTrack.onoverconstrained")}}</dt>
+ <dd>Is a {{domxref("EventHandler")}} containing the action to perform when an {{event("overconstrained")}} event is fired on the object, that is when a  {{domxref("MediaStreamTrack")}} object is removed from it.</dd>
+ <dt>{{domxref("MediaStreamTrack.oneended")}}</dt>
+ <dd>Is a {{domxref("EventHandler")}} containing the action to perform when an {{event("ended_(MediaStream)", "ended")}} event is fired on the object, that is when a  {{domxref("MediaStreamTrack")}} object is removed from it.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("MediaStreamTrack.getConstraints()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("MediaStreamTrack.applyConstraints()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("MediaStreamTrack.getSettings()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("MediaStreamTrack.getCapabilities()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("MediaStreamTrack.clone()")}}</dt>
+ <dd> </dd>
+ <dt>{{domxref("MediaStreamTrack.stop()")}}</dt>
+ <dd>Stops playing the source associated to the track, both the source and the track are deassociated. The track state is set to <code>ended</code>.</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('Media Capture', '#mediastreamtrack', 'MediaStreamTrack')}}</td>
+   <td>{{Spec2('Media Capture')}}</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>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>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>stop()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(34)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>muted</code>, <code>onmuted</code>, <code>onunmuted</code>, <code>readonly</code>, <code>readyState</code>, <code>remote</code>, <code>onstarted</code>, <code>onended</code>, <code>onoverconstrained</code>, <code>appendConstraint()</code>, <code>applyConstraints()</code>, <code>constraints()</code>, <code>getConstraints()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</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</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>
+    <table class="compat-table">
+     <tbody>
+      <tr>
+       <td><code>stop()</code></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(34)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>muted</code>, <code>onmuted</code>, <code>onunmuted</code>, <code>readonly</code>, <code>readyState</code>, <code>remote</code>, <code>onstarted</code>, <code>onended</code>, <code>onoverconstrained</code>, <code>appendConstraint()</code>, <code>applyConstraints()</code>, <code>constraints()</code>, <code>getConstraints()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebRTC/MediaStream_API" title="/en-US/docs/WebRTC/MediaStream_API">Using the MediaStream API</a></li>
+</ul>
diff --git a/files/pt-br/web/api/messagechannel/index.html b/files/pt-br/web/api/messagechannel/index.html
new file mode 100644
index 0000000000..225416121f
--- /dev/null
+++ b/files/pt-br/web/api/messagechannel/index.html
@@ -0,0 +1,152 @@
+---
+title: MessageChannel
+slug: Web/API/MessageChannel
+translation_of: Web/API/MessageChannel
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>A interface <strong><code>MessageChannel</code></strong> da <a href="/en-US/docs/Web/API/Channel_Messaging_API">API Channel Messaging</a> nos permite criar um novo canal de mensagem e enviar os dados através de suas duas propriedades {{domxref("MessagePort")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("MessageChannel.port1")}} {{readonlyInline}}</dt>
+ <dd>Retorna port1 do canal.</dd>
+ <dt>{{domxref("MessageChannel.port2")}} {{readonlyInline}}</dt>
+ <dd>Retorna port2 do canal.</dd>
+</dl>
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("MessageChannel.MessageChannel", "MessageChannel()")}}</dt>
+ <dd>
+ <p>Retorna um novo objeto <code>MessageChannel</code> com dois novos objetos {{domxref("MessagePort")}}.</p>
+ </dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>No seguinte bloco de codigo, você pode ver um novo canal sendo criado usando o construtor {{domxref("MessageChannel.MessageChannel", "MessageChannel()")}}. Quando o {{HTMLElement("iframe")}} tiver carregado, nos passamos o {{domxref("MessageChannel.port2")}} para o {{HTMLElement("iframe")}} usando {{domxref("MessagePort.postMessage")}} juntamente com uma mensagem. O manipulador <code>handleMessage</code> então reponde à mensagem que foi enviada de volta do {{HTMLElement("iframe")}} (using {{domxref("MessagePort.onmessage")}}), colocando-o em um parágrafo.</p>
+
+<pre class="brush: js">var channel = new MessageChannel();
+var para = document.querySelector('p');
+
+var ifr = document.querySelector('iframe');
+var otherWindow = ifr.contentWindow;
+
+ifr.addEventListener("load", iframeLoaded, false);
+
+function iframeLoaded() {
+  otherWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
+}
+
+channel.port1.onmessage = handleMessage;
+function handleMessage(e) {
+  para.innerHTML = e.data;
+}   </pre>
+
+<p>Para um exemplo completo, veja nosso  <a class="external external-icon" href="https://github.com/mdn/dom-examples/tree/master/channel-messaging-basic">channel messaging basic demo</a> no Github (<a class="external external-icon" href="https://mdn.github.io/dom-examples/channel-messaging-basic/">rode online também</a> ).</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'web-messaging.html#message-channels','Message channels')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_os_navegadores">Compatibilidade entre os navegadores</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>Suporte Básico</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Disponivel em workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</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>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>4.4</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>Disponivel em workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li>
+</ul>
diff --git a/files/pt-br/web/api/messageport/index.html b/files/pt-br/web/api/messageport/index.html
new file mode 100644
index 0000000000..ae82cc0a79
--- /dev/null
+++ b/files/pt-br/web/api/messageport/index.html
@@ -0,0 +1,117 @@
+---
+title: MessagePort
+slug: Web/API/MessagePort
+tags:
+  - API
+  - Channel messaging
+  - HTML5
+  - Interface
+  - MessagePort
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/MessagePort
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>The <strong><code>MessagePort</code></strong> interface of the <a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> represents one of the two ports of a {{domxref("MessageChannel")}}, allowing messages to be sent from one port and listening out for them arriving at the other.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("EventTarget")}}</em></p>
+
+<dl>
+ <dt>{{domxref("MessagePort.postMessage","postMessage()")}}</dt>
+ <dd>Sends a message from the port, and optionally, transfers ownership of objects to other browsing contexts.</dd>
+ <dt>{{domxref("MessagePort.start","start()")}}</dt>
+ <dd>Starts the sending of messages queued on the port (only needed when using {{domxref("EventTarget.addEventListener")}}; it is implied when using {{domxref("MessagePort.onmessage")}}.)</dd>
+ <dt>{{domxref("MessagePort.close","close()")}}</dt>
+ <dd>Disconnects the port, so it is no longer active.</dd>
+</dl>
+
+<h2 id="Event_handlers">Event handlers</h2>
+
+<p><em>Inherits event handlers from its parent, {{domxref("EventTarget")}}</em></p>
+
+<dl>
+ <dt>{{domxref("MessagePort.onmessage","onmessage")}}</dt>
+ <dd>An {{domxref("EventListener")}} called when {{domxref("MessageEvent")}} of type <code>message</code> is fired on the port—that is, when the port receives a message.</dd>
+ <dt>{{domxref("MessagePort.onmessageerror","onmessageerror")}}</dt>
+ <dd>An {{domxref("EventListener")}} called when a {{domxref("MessageEvent")}} of type {{domxref("MessageError")}} is fired—that is, when it receives a message that cannot be deserialized.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt>{{domxref("MessagePort.message_event","message")}}</dt>
+ <dd>Fired when a <code>MessagePort</code> object receives a message.<br>
+ Also available via the {{domxref("MessagePort.onmessage","onmessage")}} property.</dd>
+ <dt>{{domxref("MessagePort.messageerror_event","messageerror")}}</dt>
+ <dd>Fired when a <code>MessagePort</code> object receives a message that can't be deserialized.<br>
+ Also available via the {{domxref("MessagePort.onmessageerror","onmessageerror")}} property.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>In the following example, you can see a new channel being created using the {{domxref("MessageChannel.MessageChannel","MessageChannel()")}} constructor.</p>
+
+<p>When the IFrame has loaded, we register an {{domxref("MessagePort.onmessage","onmessage")}} handler for {{domxref("MessageChannel.port1")}} and transfer {{domxref("MessageChannel.port2")}} to the IFrame using the {{domxref("window.postMessage")}} method along with a message.</p>
+
+<p>When a message is received back from the IFrame, the <code>onMessage</code> function simply outputs the message to a paragraph.</p>
+
+<pre>var channel = new MessageChannel();
+var output = document.querySelector('.output');
+var iframe = document.querySelector('iframe');
+
+// Wait for the iframe to load
+iframe.addEventListener("load", onLoad);
+
+function onLoad() {
+  // Listen for messages on port1
+  channel.port1.onmessage = onMessage;
+
+  // Transfer port2 to the iframe
+  iframe.contentWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
+}
+
+
+// Handle messages received on port1
+function onMessage(e) {
+  output.innerHTML = e.data;
+}
+</pre>
+
+<p>For a full working example, see our <a class="external external-icon" href="https://github.com/mdn/dom-examples/tree/master/channel-messaging-basic">channel messaging basic demo</a> on Github (<a class="external external-icon" href="https://mdn.github.io/dom-examples/channel-messaging-basic/">run it live too</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('HTML WHATWG', 'web-messaging.html#message-ports','Message ports')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.MessagePort")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li>
+</ul>
diff --git a/files/pt-br/web/api/messageport/postmessage/index.html b/files/pt-br/web/api/messageport/postmessage/index.html
new file mode 100644
index 0000000000..26e9ffbbc1
--- /dev/null
+++ b/files/pt-br/web/api/messageport/postmessage/index.html
@@ -0,0 +1,81 @@
+---
+title: MessagePort.postMessage()
+slug: Web/API/MessagePort/postMessage
+translation_of: Web/API/MessagePort/postMessage
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>O método <code><strong>postMessage()</strong></code> da interface {{domxref("MessagePort")}} envia uma mensagem da porta e opcionalmente transfere a propriedade do objeto para outros contexto de navegação.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">port.postMessage(message, transferList);</pre>
+
+<h3 id="Returns">Returns</h3>
+
+<p>Vazio.</p>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt>message</dt>
+ <dd>A mensagem que você quer enviar atravéz do canal. Esta mensagem pode ser de qualquer tipo de dados basico. Multiplos items podem ser enviados com diferentestes tipos de dados como em um <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>.</dd>
+ <dt>transferList {{optional_inline}}</dt>
+ <dd>{{domxref("Transferable")}} objects to be transferred — these objects have their ownership transferred to the receiving browsing context, so are no longer usable by the sending browsing context.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>In the following code block, you can see a new channel being created using the {{domxref("MessageChannel()", "MessageChannel.MessageChannel")}} constructor. When the IFrame has loaded, we pass {{domxref("MessageChannel.port2")}} to the IFrame using {{domxref("window.postMessage")}} along with a message. The <code>handleMessage</code> handler then responds to a message being sent back from the IFrame using <code>onmessage</code>, putting it into a paragraph — {{domxref("MessageChannel.port1")}} is listened to, to check when the message arrives.</p>
+
+<pre class="brush: js">var channel = new MessageChannel();
+var para = document.querySelector('p');
+
+var ifr = document.querySelector('iframe');
+var otherWindow = ifr.contentWindow;
+
+ifr.addEventListener("load", iframeLoaded, false);
+
+function iframeLoaded() {
+  otherWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
+}
+
+channel.port1.onmessage = handleMessage;
+function handleMessage(e) {
+  para.innerHTML = e.data;
+}   </pre>
+
+<p>For a full working example, see our <a class="external external-icon" href="https://github.com/mdn/dom-examples/tree/master/channel-messaging-basic">channel messaging basic demo</a> on Github (<a class="external external-icon" href="https://mdn.github.io/dom-examples/channel-messaging-basic/">run it live too</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('HTML WHATWG', 'web-messaging.html#dom-messageport-postmessage', 'postMessage()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.MessagePort.postMessage")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Channel_Messaging_API/Using_channel_messaging">Using channel messaging</a></li>
+</ul>
diff --git a/files/pt-br/web/api/mouseevent/clientx/index.html b/files/pt-br/web/api/mouseevent/clientx/index.html
new file mode 100644
index 0000000000..efeb585203
--- /dev/null
+++ b/files/pt-br/web/api/mouseevent/clientx/index.html
@@ -0,0 +1,149 @@
+---
+title: MouseEvent.clientX
+slug: Web/API/MouseEvent/clientX
+translation_of: Web/API/MouseEvent/clientX
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>O <strong><code>clientX</code></strong> é uma propriedade somente de leitura da interface {{domxref("MouseEvent")}} que fornece as coordenadas horizontais dentro da área do aplicativo do cliente em que o evento ocorreu (diferente das coordenadas dentro da página). Por exemplo, clicando no canto superior esquerdo da área do cliente sempre irá resultar em um evento de mouse com um valor <code>clientX</code> de 0, independentemente se a página foi rolada horizontalmente. Originalmente, essa propriedade era definida como o número inteiro <code>long</code>. O Módulo de Visualização CSSOM o redefiniu como a fração<code>double</code>. Veja a seção de compatibilidade do Navegador para detalhes.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>x</em> = <em>instanceOfMouseEvent</em>.clientX
+</pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Um número</p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;clientX/clientY example&lt;/title&gt;
+
+    &lt;script&gt;
+      function showCoords(evt){
+        alert(
+          "clientX value: " + evt.clientX + "\n" +
+          "clientY value: " + evt.clientY + "\n"
+        );
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body onmousedown="showCoords(event)"&gt;
+    &lt;p&gt;Para mostrar as coordenadas do mouse em qualquer lugar da página.&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View','#dom-mouseevent-clientx', 'clientX')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Redefine {{domxref("MouseEvent")}} de<code>long</code> para <code>double</code>. </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-clientX','MouseEvent.clientX')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Nenhuma mudança de {{SpecName('DOM2 Events')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.clientX')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>6</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>Redefinido de <code>long</code> para <code>double</code></td>
+   <td>{{CompatChrome(56)}}</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>Característica</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>Suporte básico</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>Redefinido de <code>long</code> para <code>double</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatChrome(56)}}</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">Veja também</h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+ <li>{{domxref("MouseEvent.clientY","clientY")}}</li>
+ <li>{{domxref("MouseEvent.screenX","screenX")}} / {{domxref("MouseEvent.screenY","screenY")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/mouseevent/clienty/index.html b/files/pt-br/web/api/mouseevent/clienty/index.html
new file mode 100644
index 0000000000..6333ab631c
--- /dev/null
+++ b/files/pt-br/web/api/mouseevent/clienty/index.html
@@ -0,0 +1,91 @@
+---
+title: MouseEvent.clientY
+slug: Web/API/MouseEvent/clientY
+tags:
+  - API
+  - CSSOM View
+  - Eventos de DOM
+  - Eventos de mouse
+  - Propriedade
+  - Somente Leitura
+translation_of: Web/API/MouseEvent/clientY
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p>A propriedade <strong><code>clientY</code></strong>  da interface {{domxref("MouseEvent")}} fornece a coordenada vertical do cliente dentro da aplicacão em que o evento ocorreu (ao contrário da coordenada que pertence a página).</p>
+
+<p>Por exemplo, clicando no topo da área do cliente sempre resultará num evento de mouse com um valor <code>0</code> de <code>clientY</code>, independente se a página está "escrollada" verticalmente.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>y</em> = <em>instanciaDeEventoDoMouse</em>.clientY
+</pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p><span style="background-color: #ffffff;">O valor retornado por essa propriedade é um valor flutuante </span><span style='background-color: rgba(220, 220, 220, 0.5); font-family: consolas,"Liberation Mono",courier,monospace;'>double</span> como foi redefinida pelo "CSSOM View Module". Originalmente esta propriedade era definida como um inteiro <code>long</code>. Veja a seção de compatibilidade de browsers para mais detalhes.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Este exemplo mostra as coordenadas do mouse quando você ativar o evento {{Event("mousemove")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Mova seu mouse para ver sua posicão.&lt;/p&gt;
+&lt;p id="screen-log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let screenLog = document.querySelector('#screen-log');
+document.addEventListener('mousemove', logKey);
+
+function logKey(e) {
+  screenLog.innerText = `
+    Screen X/Y: ${e.screenX}, ${e.screenY}
+    Client X/Y: ${e.clientX}, ${e.clientY}`;
+}</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View','#dom-mouseevent-clienty', 'clientY')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Redefine {{domxref("MouseEvent")}} de <code>long</code> para <code>double</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-MouseEvent-clientY','MouseEvent.clientY')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Sem mudanças vindas de {{SpecName('DOM2 Events')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.clientY')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_browser">Compatibilidade de browser</h2>
+
+<div class="hidden">Esta tabela de compatibilidade é gerada de dados estruturais. Se você quiser contribuir para os dados, visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos mande uma "pull request"</div>
+
+<p>{{Compat("api.MouseEvent.clientY")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+ <li>{{domxref("MouseEvent.clientX","clientX")}}</li>
+ <li>{{domxref("MouseEvent.screenX","screenX")}} / {{domxref("MouseEvent.screenY","screenY")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/mouseevent/index.html b/files/pt-br/web/api/mouseevent/index.html
new file mode 100644
index 0000000000..cce575dec6
--- /dev/null
+++ b/files/pt-br/web/api/mouseevent/index.html
@@ -0,0 +1,336 @@
+---
+title: MouseEvent
+slug: Web/API/MouseEvent
+tags:
+  - API
+  - DOM
+  - DOM Events
+  - Interface
+  - Precisa de Tradução
+  - Referencia
+  - TopicStub
+translation_of: Web/API/MouseEvent
+---
+<p><font><font>A interface </font></font><code><strong>MouseEvent</strong></code><font><font> representa eventos que ocorrem devido à interação do usuário com um dispositivo apontador (como um mouse). Eventos comuns usando esta interface incluem </font></font><code><a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Element/click_event">click</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event">dblclick</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseup_event">mouseup</a></code>, <code><a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Element/mousedown_event">mousedown</a></code>.</p>
+
+<p><span class="tlid-translation translation" lang="pt"><span title=""><strong><code>MouseEvent</code></strong> deriva de <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/UIEvent">UIEvent</a></code>, que por sua vez deriva de <code><a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Event">Event</a></code>.</span> <span title="">Embora o método <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent">MouseEvent.initMouseEvent()</a></code> seja mantido para compatibilidade com versões anteriores, a criação de um objeto <strong><code>MouseEvent</code></strong> deve ser feita usando o construtor <code>MouseEvent()</code>.</span></span></p>
+
+<p><font><font>Vários eventos mais específicos derivam de </font></font><strong><code>MouseEvent</code></strong><font><font> como:</font></font> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent">WheelEvent</a></code> e <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/DragEvent">DragEvent</a></code>.<br>
+  </p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt><strong><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent">MouseEvent()</a></code></strong></dt>
+ <dd><font><font>Cria um objeto </font></font><strong><code>MouseEvent</code></strong><font><font>.</font></font></dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em><font><font>Essa interface também herda propriedades de seus pais</font></font>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/UIEvent">UIEvent</a></code>  e <code><a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Event">Event</a></code>.</em></p>
+
+<dl>
+ <dt>
+ <p><strong><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey">MouseEvent.altKey</a></code></strong> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></p>
+ </dt>
+ <dd><font><font>Retorna </font></font><code>true</code><font><font>se a tecla </font></font><kbd>alt</kbd><font><font> estava pressionada quando o evento do mouse foi disparado.</font></font></dd>
+ <dt>
+ <p><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey">MouseEvent.button</a></code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></p>
+ </dt>
+ <dd><font><font>O número do botão que foi pressionado (se aplicável) quando o evento do mouse foi disparado.</font></font></dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button">MouseEvent.buttons</a></code><span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd>
+ <p><font><font>Os botões sendo pressionados (se houver) quando o evento do mouse foi disparado.</font></font></p>
+ </dd>
+ <dt><code><a href="https://developer.mozilla.org/pt-BR/docs/Web/API/MouseEvent/clientX">MouseEvent.clientX</a></code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed."><em>Read only</em> </span></dt>
+ <dd><font><font>A coordenada X do ponteiro do mouse em coordenadas locais (conteúdo <strong>DOM</strong>).</font></font></dd>
+ <dt><code><a href="https://developer.mozilla.org/pt-BR/docs/Web/API/MouseEvent/clientY">MouseEvent.clientY</a></code><span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd><font><font>A coordenada Y do ponteiro do mouse em coordenadas locais (conteúdo <strong>DOM</strong>).</font></font></dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/ctrlKey">MouseEvent.ctrlKey</a></code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd><font><font>Retorna </font></font><code>true</code><font><font> se a tecla </font></font><kbd>control</kbd><font><font> estava pressionada quando o evento do mouse foi disparado.</font></font></dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/metaKey">MouseEvent.metaKey</a></code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd><font><font>Retorna </font></font><code>true</code><font><font> se a tecla </font></font><kbd>meta</kbd><font><font> estava pressionada quando o evento do mouse foi disparado.</font></font></dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX">MouseEvent.movementX</a><span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd><font><font>A coordenada X do ponteiro do mouse em relação à posição do último evento </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event">mousemove</a></code> <font><font>.</font></font></dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementY">MouseEvent.movementY</a></code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd><font><font>A coordenada Y do ponteiro do mouse em relação à posição do último</font></font>  evento <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event">mousemove</a>.</dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX">MouseEvent.offsetX</a></code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only  </span>   </dt>
+ <dd><font><font>A coordenada X do ponteiro do mouse em relação à posição da borda de preenchimento do nó de destino.</font></font></dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetY">MouseEvent.offsetY</a></code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only  </span> </dt>
+ <dd><font><font>A coordenada Y do ponteiro do mouse em relação à posição da borda de preenchimento do nó de destino.</font></font></dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX">MouseEvent.pageX</a></code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd><font><font>A coordenada X do ponteiro do mouse em relação a todo o documento.</font></font></dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY">MouseEvent.pageY</a></code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd><font><font>A coordenada Y do ponteiro do mouse em relação a todo o documento.</font></font></dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/region">MouseEvent.region </a></code><span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd><font><font>Retorna o id da região afetada pelo evento. </font><font>Se nenhuma região atingida for afetada, </font></font><strong><code>null</code></strong><font><font> será retornado.</font></font></dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget">MouseEvent.relatedTarget </a></code><span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd>
+ <p><font><font>O destino secundário do evento, se houver.</font></font></p>
+ </dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenX">MouseEvent.screenX </a><span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd><font><font>A coordenada X do ponteiro do mouse em coordenadas globais (tela).</font></font></dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY">MouseEvent.screenY</a></code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd><font><font>A coordenada Y do ponteiro do mouse em coordenadas globais (tela).</font></font></dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/shiftKey">MouseEvent.shiftKey</a> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd><font><font>Retorna </font></font><code>true</code><font><font> se a tecla </font></font><kbd>shift</kbd><font><font> estava pressionada quando o evento do mouse foi disparado.</font></font></dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/which">MouseEvent.which</a> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd><font><font>O botão sendo pressionado quando o evento do mouse foi disparado.</font></font></dd>
+ <dt><code>MouseEvent.mozPressure </code><span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd><font><font>A quantidade de pressão aplicada a um dispositivo de toque ou tablet ao gerar o evento; </font><font>este valor varia entre </font></font><code>0.0</code><font><font> (pressão mínima) e </font></font><code>1.0</code><font><font> (pressão máxima).</font></font></dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/mozInputSource">MouseEvent.mozInputSource</a></code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dt></dt>
+ <dd>
+ <p><font><font>O tipo de dispositivo que gerou o evento (uma das constantes </font></font><code>MOZ_SOURCE_* </code> <font><font> listadas abaixo). </font><font>Isso permite, por exemplo, determinar se um evento de mouse foi gerado por um mouse real ou por um evento de toque (o que pode afetar o grau de precisão com que você interpreta as coordenadas associadas ao evento).</font></font></p>
+ </dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/webkitForce">MouseEvent.webkitForce</a></code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd><font><font>A quantidade de pressão aplicada ao clicar</font></font></dd>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/API/MouseEvent/clientX">MouseEvent.x</a><span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd><font><font>Alias ​​para </font></font><code><a href="https://developer.mozilla.org/pt-BR/docs/Web/API/MouseEvent/clientX">MouseEvent.clientX</a></code>.</dd>
+ <dt><code><a href="https://developer.mozilla.org/pt-BR/docs/Web/API/MouseEvent/clientY">MouseEvent.y</a></code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd><font><font>Alias ​​para </font></font><a href="https://developer.mozilla.org/pt-BR/docs/Web/API/MouseEvent/clientY">MouseEvent.clientY</a></dd>
+</dl>
+
+<h2 id="Constantes">Constantes</h2>
+
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/WEBKIT_FORCE_AT_MOUSE_DOWN">MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN</a></code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd><font><font>Força mínima necessária para um clique normal.</font></font></dd>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN">MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN</a></code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></dt>
+ <dd><font><font>Força mínima necessária para um clique de força</font></font></dd>
+</dl>
+
+<h2 id="Método">Método</h2>
+
+<p><em><font><font>Essa interface também herda métodos de seus pais</font></font></em><em>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/UIEvent">UIEvent</a></code> e <code><a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Event">Event</a></code>.</em></p>
+
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/getModifierState">MouseEvent.getModifierState()</a></code></dt>
+</dl>
+
+<dl>
+ <dd><font><font>Retorna o estado tual da tecla modificadora especificada. </font><font>Consulte </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState">KeyboardEvent.getModifierState</a></code><font><font><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState">()</a></code> para obter detalhes.</font></font></dd>
+</dl>
+
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent">MouseEvent.initMouseEvent()</a></code></dt>
+ <dd><font><font>Inicializa o valor de um </font></font><strong><code>MouseEvent</code></strong><font><font> criado. </font><font>Se o evento já foi despachado, este método não faz nada.</font></font></dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p><font><font>Este exemplo demonstra a simulação de um clique (que está gerando programaticamente um evento de clique) em uma caixa de seleção usando métodos <strong>DOM</strong>.</font></font></p>
+
+<pre class="brush: js notranslate">function simulateClick() {
+  var evt = new <a href="/en-US/docs/Web/API/MouseEvent">MouseEvent</a>("click", {
+    bubbles: true,
+    cancelable: true,
+    view: window
+  });
+  var cb = document.getElementById("checkbox"); //element to click on
+  var canceled = !cb.<a href="/en-US/docs/Web/API/EventTarget.dispatchEvent" rel="internal" title="en/DOM/element.dispatchEvent">dispatchEvent</a>(evt);
+  if(canceled) {
+    // A handler called preventDefault
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault
+    alert("not canceled");
+  }
+}
+document.getElementById("button").addEventListener('click', simulateClick);</pre>
+
+<pre class="brush: html notranslate">&lt;p&gt;&lt;label&gt;&lt;input type="checkbox" id="checkbox"&gt; Checked&lt;/label&gt;
+&lt;p&gt;&lt;button id="button"&gt;Click me&lt;/button&gt;</pre>
+
+<p>Clique no botão para ver como funciona a amostra:</p>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h2 id="Especificações"><font><font>Especificações</font></font></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('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
+   <td><span class="spec-WD"><font><font>Rascunho de trabalho</font></font></span></td>
+   <td><font><font>Redefine </font></font><strong><code>MouseEvent</code></strong><font><font> de longo para duplo. </font><font>Isto significa que um </font></font><strong><code>PointerEvent</code></strong><font><font> cuja </font></font><strong><code>pointerType</code></strong><font><font> é rato será uma de casal.</font></font></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td><font><font>Do </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;pto=aue&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=pt&amp;u=https://www.w3.org/TR/2014/WD-DOM-Level-3-Events-20140925/&amp;usg=ALkJrhgcVK660U2yEqol1korxl7KhBCvmA" hreflang="en" lang="en" rel="noopener" title="A especificação de 'Document Object Model (DOM) Nível 3 Events Specification'"><font><font>Document Object Model (DOM) Nível 3 Events Specification</font></font></a><font><font> , adicionado </font></font>propriedades <code>movementX</code><font><font> e </font></font><code>movementY</code><font><font>.</font></font></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td><font><font>A partir </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&amp;pto=aue&amp;rurl=translate.google.com&amp;sl=en&amp;sp=nmt4&amp;tl=pt&amp;u=https://www.w3.org/TR/2014/WD-DOM-Level-3-Events-20140925/&amp;usg=ALkJrhgcVK660U2yEqol1korxl7KhBCvmA" hreflang="en" lang="en" rel="noopener" title="A especificação de 'Document Object Model (DOM) Nível 3 Events Specification'"><font><font>do documento de modelo de objeto (DOM) Nível 3 Especificação de eventos</font></font></a><font><font> , adicionados </font></font><strong><code>offsetX</code></strong><font><font> e </font></font><strong><code>offsetY</code></strong><font><font>, </font></font><strong><code>pageX</code></strong><font><font> e </font></font><strong><code>pageY</code></strong><font><font>, </font></font><strong><code>x</code></strong><font><font>, e </font></font><strong><code>y</code></strong><font><font> propriedades. </font><font>Propriedades redefinidas de tela, página, cliente e coordenadas (x e y) a partir </font></font><strong><code>double</code></strong><font><font> de </font></font><strong><code>long</code></strong><font><font>.</font></font></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Em Document Object Model (DOM) Nível 2, especificação de eventos, adicionado ao construtor <strong><code>MouseEvent ()</code></strong>, o método <strong><code>getModifierState()</code></strong> e a propriedade de <strong><code>buttons</code></strong>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade do navegador</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>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.movementX","movementX")}}<br>
+    {{domxref("MouseEvent.movementY","movementY")}}</td>
+   <td>{{CompatChrome(37)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}} {{property_prefix("moz")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("MouseEvent.buttons", "buttons") }}</td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("MouseEvent.which", "which") }}</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+   <td>9.0</td>
+   <td>5.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.getModifierState()", "getModifierState()")}}</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatGeckoDesktop(15)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.mozPressure", "mozPressure")}} and {{domxref("MouseEvent.mozInputSource", "mozInputSource")}} {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</td>
+   <td>{{CompatChrome(45)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatGeckoDesktop(11)}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.region")}}</td>
+   <td>{{CompatChrome(51)}}<sup>[1]</sup></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatGeckoDesktop(32)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.offsetX")}}, and {{domxref("MouseEvent.offsetY")}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>9</td>
+   <td>{{CompatGeckoDesktop(40)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.screenX")}}, {{domxref("MouseEvent.screenY")}}, {{domxref("MouseEvent.clientX")}}, and {{domxref("MouseEvent.Y")}} are double instead of long.</td>
+   <td>{{CompatChrome(56)}}</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>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>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Requires enabling the <code>ExperimentalCanvasFeatures</code> flag.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<p>Seu pai direto, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/UIEvent">UIEvent</a></code>.<br>
+ <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent">PointerEvent</a></code>: Para eventos de ponteiro avançados, incluindo multitoque</p>
diff --git a/files/pt-br/web/api/mutationobserver/index.html b/files/pt-br/web/api/mutationobserver/index.html
new file mode 100644
index 0000000000..2ca0d03404
--- /dev/null
+++ b/files/pt-br/web/api/mutationobserver/index.html
@@ -0,0 +1,221 @@
+---
+title: MutationObserver
+slug: Web/API/MutationObserver
+translation_of: Web/API/MutationObserver
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><span style="font-family: consolas,monaco,andale mono,monospace;">MutationObserver</span> fornece aos desenvolvedores uma maneira de reagir a mudanças em um <a href="/en-US/docs/DOM">DOM</a>. Ele é concebido como um substituto para <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a> definido na especificação de eventos DOM nível 3.</p>
+
+<h2 id="Constructor" name="Constructor">Constructor</h2>
+
+<h3 id="MutationObserver" name="MutationObserver()"><code>MutationObserver()</code></h3>
+
+<p>Construtor para instanciar novos observadores de mutação do DOM.</p>
+
+<pre class="eval notranslate">MutationObserver(
+  function callback
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Parâmetros</h6>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>A função que será chamada em cada mutação do DOM. O observador irá chamar esta função com dois argumentos. O primeiro é um array de objetos, cada um do tipo <a href="#MutationRecord"><code>MutationRecord</code></a>. O segundo é a essa instância <span style="font-family: consolas,monaco,andale mono,monospace;">MutationObserver</span>.</dd>
+</dl>
+
+<h2 id="Instance_methods" name="Instance_methods">Métodos da instância</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#observe()">observe</a>( {{domxref("Node")}} target, <a href="#MutationObserverInit">MutationObserverInit</a> options );</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#disconnect()">disconnect</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>Array <a href="#takeRecords()">takeRecords</a>();</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="observe" name="observe()"><code>observe()</code></h3>
+
+<p>Registra a instância <span style="font-family: consolas,monaco,andale mono,monospace;">MutationObserver</span> para receber notificações das mutações do DOM no nó especificado.</p>
+
+<pre class="eval notranslate">void observe(
+  {{domxref("Node")}} target,
+  <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> options
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters"><strong style="font-size: 9px; font-weight: bold; line-height: 14.0699996948242px;">Parâmetros</strong></h6>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>O {{domxref("Node")}} no qual é observadas as mutações do DOM.</dd>
+ <dt><code>options</code></dt>
+ <dd>Um objeto <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> especifica quais mutações DOM devem ser reportadas.</dd>
+</dl>
+
+<div class="note">NOTA: Adicionar um observador para um elemento é como utilizar o addEventListener, se você observar o elemento várias vezes não faz diferença. Ou seja, se você observar um elemento duas vezes, o callback do observador não disparará duas vezes, nem você deverá executar duas vezes o disconnect(). Em outras palavras, uma vez que um elemento é observado, observá-lo novamento com a mesma instância do observador não fará nada. No entanto, se o objeto callback for diferente, ele, é claro, adicionará outro observador para isso.</div>
+
+<h3 id="disconnect" name="disconnect()"><code>disconnect()</code></h3>
+
+<p>Pára o rebimento de notificações das mutações do DOM na instância <code>MutationObserver.</code> O callback do observador não será invocado até que método <a href="#observe()"><code>observe()</code></a> seja novamente utilizado.</p>
+
+<pre class="eval notranslate">void disconnect();
+</pre>
+
+<h3 id="takeRecords" name="takeRecords()"><code>takeRecords()</code></h3>
+
+<p>Esvazia a fila de registro da instância <code>MutationObserver</code> e retorna o que estava nela.</p>
+
+<pre class="eval notranslate">Array takeRecords();
+</pre>
+
+<h6 id="Return_value" name="Return_value">Valor de retorno</h6>
+
+<p>Retorna um Array de <a href="#MutationRecord"><code>MutationRecord</code>s</a>.</p>
+
+<h2 id="MutationObserverInit" name="MutationObserverInit"><code>MutationObserverInit</code></h2>
+
+<p><code>MutationObserverInit</code> é um objeto que pode especificar as seguintes propriedades:</p>
+
+<div class="note">NOTA: No mínimo <code>childList</code>, <code>attributes</code>, ou <code>characterData</code> devem ser definidos como <code>true</code>. Caso contrário o erro "An invalid or illegal string was specified" é lançado.</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>childList</code></td>
+   <td>Defina como <code style="font-style: normal;">true</code> se adições e remoções dos elementos filho do nó alvo (incluindo nós de texto) devem ser observadas.</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>Defina como <code>true</code> se mutações dos atributos do alvo devem ser observadas.</td>
+  </tr>
+  <tr>
+   <td><code>characterData</code></td>
+   <td>Defina como <code>true</code> se mutações dos dados do alvo devem ser observadas.</td>
+  </tr>
+  <tr>
+   <td><code>subtree</code></td>
+   <td>Defina como <code>true</code> se mutações não apenas do alvo, mas também dos descendentes do alvo devem ser observadas.</td>
+  </tr>
+  <tr>
+   <td><code>attributeOldValue</code></td>
+   <td>Defina como <code>true</code> se <code>attributes</code> é definido como <code>true</code> e o valor do atributo do alvo antes da mutação precisa ser gravado.</td>
+  </tr>
+  <tr>
+   <td><code>characterDataOldValue</code></td>
+   <td>Defina como <code>true</code> se <code>characterData</code> é definido como <code>true</code> e os dados do alvo antes da mutação precisam ser gravados.</td>
+  </tr>
+  <tr>
+   <td><code>attributeFilter</code></td>
+   <td>Defina como um array de nomes locais de atributo (sem namespace) se nem todas mutações de atributo precisam ser observadas.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="MutationRecord" name="MutationRecord"><code>MutationRecord</code></h2>
+
+<p><code>MutationRecord</code> é um objeto que será passado para o callback do observador. Tem as seguintes propriedades:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td><code>String</code></td>
+   <td>Retorna <code>attributes</code> se a mutação foi a de um atributo, <code>characterData</code> se foi de um nó <code>CharacterData</code>, e <code>childList</code> se foi a mutação para uma árvore de nós.</td>
+  </tr>
+  <tr>
+   <td><code>target</code></td>
+   <td><code>{{domxref("Node")}}</code></td>
+   <td>Retorna o nó que a mutação afetou, dependendo do <code>type</code>. Para <code>attributes </code>é o elemento cujo atributo mudou. Para <code>characterData </code>é o nó <code>CharacterData</code>. Para <code>childList</code> é o nó cujos filhos mudaram.</td>
+  </tr>
+  <tr>
+   <td><code>addedNodes</code></td>
+   <td><code>{{domxref("NodeList")}}</code></td>
+   <td>Retorna os nós adicionados. Será uma <span style="font-family: courier new,andale mono,monospace;">NodeList</span> vazia se nenhum nó foi adicionado.</td>
+  </tr>
+  <tr>
+   <td><code>removedNodes</code></td>
+   <td><code>{{domxref("NodeList")}}</code></td>
+   <td>Retorna os nós removidos. Será uma <span style="font-family: courier new,andale mono,monospace;">NodeList</span> vazia se nenhum nó foi removido.</td>
+  </tr>
+  <tr>
+   <td><code>previousSibling</code></td>
+   <td><code>{{domxref("Node")}}</code></td>
+   <td>Retorna o irmão anterior dos nós adicionados ou removidos, ou <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td><code>nextSibling</code></td>
+   <td><code>{{domxref("Node")}}</code></td>
+   <td>Retorna o próximo irmão dos nós adicionados ou removidos, ou <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td><code>attributeName</code></td>
+   <td><code>String</code></td>
+   <td>Retorna o nome local do atributo modificado, ou <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td><code>attributeNamespace</code></td>
+   <td><code>String</code></td>
+   <td>Retorna o namespace do atributo modificado, ou <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td><code>oldValue</code></td>
+   <td><code>String</code></td>
+   <td>O valor retornado depende do <code>type</code>. Para <code>attributes</code>, é o valor do atributo modificado antes da troca. Para <code>characterData</code>, são os dados do nó modificado antes da troca. Para <code>childList </code>é <code>null</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example_usage" name="Example_usage">Exemplo de uso</h2>
+
+<p>O exemplo a seguir foi retirado <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">deste post</a>.</p>
+
+<pre class="brush: js notranslate">// seleciona o nó alvo
+var target = document.querySelector('#some-id');
+
+// cria uma nova instância de observador
+var observer = new MutationObserver(function(mutations) {
+  mutations.forEach(function(mutation) {
+    console.log(mutation.type);
+  });
+});
+
+// configuração do observador:
+var config = { attributes: true, childList: true, characterData: true };
+
+// passar o nó alvo, bem como as opções de observação
+observer.observe(target, config);
+
+// mais tarde você pode parar de observar
+observer.disconnect();
+</pre>
+
+<h2 id="Additional_reading" name="Additional_reading">Leitura adicional</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>
+ <li><a class="external" href="http://code.google.com/p/mutation-summary/" rel="freelink">The mutation summary library</a></li>
+ <li><a href="http://dom.spec.whatwg.org/#mutation-observers">The DOM standard</a> que define a interface do <code>MutationObserver</code></li>
+</ul>
+
+<h2 id="Compatibilidade_de_browser">Compatibilidade de browser</h2>
+
+<p>{{Compat("api.MutationObserver")}}</p>
diff --git a/files/pt-br/web/api/navigation_timing_api/index.html b/files/pt-br/web/api/navigation_timing_api/index.html
new file mode 100644
index 0000000000..d40f46ba45
--- /dev/null
+++ b/files/pt-br/web/api/navigation_timing_api/index.html
@@ -0,0 +1,153 @@
+---
+title: Navigation Timing
+slug: Web/API/Navigation_timing_API
+tags:
+  - Web Performance API
+translation_of: Web/API/Navigation_timing_API
+---
+<p>A <strong>API Navigation Timing</strong> fornece dados que podem ser usados para medir a performance de um website. Diferente de outros mecanismos baseados em Javascript que já foram usados para o mesmo propósito, esta API pode fornecer dados sobre a latência do começo ao fim que podem ser mais precisas e relevantes.</p>
+
+<p>O exemplo a seguir mostra como você pode medir o tempo de carregamento percebido:</p>
+
+<pre>function onLoad() {
+  var now = new Date().getTime();
+  var page_load_time = now - performance.timing.navigationStart;
+  console.log("Tempo de carregamento percebido pelo usuário: " + page_load_time);
+}
+</pre>
+
+<p>Existem muitos eventos medidos em milisegundos que podem ser acessados através da interface {{domxref("PerformanceTiming")}} interface. A lista de eventos na ordem em que ocorrem são:</p>
+
+<ul>
+ <li>navigationStart</li>
+ <li>unloadEventStart</li>
+ <li>unloadEventEnd</li>
+ <li>redirectStart</li>
+ <li>redirectEnd</li>
+ <li>fetchStart</li>
+ <li>domainLookupStart</li>
+ <li>domainLookupEnd</li>
+ <li>connectStart</li>
+ <li>connectEnd</li>
+ <li>secureConnectionStart</li>
+ <li>requestStart</li>
+ <li>responseStart</li>
+ <li>responseEnd</li>
+ <li>domLoading</li>
+ <li>domInteractive</li>
+ <li>domContentLoadedEventStart</li>
+ <li>domContentLoadedEventEnd</li>
+ <li>domComplete</li>
+ <li>loadEventStart</li>
+ <li>loadEventEnd</li>
+</ul>
+
+<p>O objeto <code>window.performance.navigation</code> guarda dois atributos que podem ser usados para saber se o carregamento da página é iniciada por um redirecionamento, pelo botão voltar/avançar ou pela URL mesmo.</p>
+
+<p>window.performance.navigation.type:</p>
+
+<table class="standard-table" style="font-size: 14px;">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Valor</th>
+   <th scope="col">Descrição</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a name="const_next"><code>TYPE_NAVIGATENEXT</code></a></td>
+   <td>0</td>
+   <td>Navegação iniciada pelo clique em um link, ou pela entrada da URL na barra de endereços, ou envio de formulário, ou inicializada através da operação de um script diferente que os usados por TYPE_RELOAD e TYPE_BACK_FORWARD como listado abaixo.</td>
+  </tr>
+  <tr>
+   <td><a name="const_next_no_duplicate"><code>TYPE_RELOAD</code></a></td>
+   <td>1</td>
+   <td>Navegação através da operação de recarregamento ou pelo método location.reload().</td>
+  </tr>
+  <tr>
+   <td><a name="const_prev"><code>TYPE_BACK_FORWARD</code></a></td>
+   <td>2</td>
+   <td>Navegação através de uma operação de histórico.</td>
+  </tr>
+  <tr>
+   <td><a name="const_prev_no_duplicate"><code>TYPE_UNDEFINED</code></a></td>
+   <td>255</td>
+   <td>Qualquer tipo de navegação não definida pelos valores acima.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>window.performance.navigation.redirectCount</code> indicará, se houver, quantos redirecionamentos aconteceram até que a página final seja alcançada.</p>
+
+<p>A API Navigation Timing pode ser usada para colher dados da performance do lado do cliente enviado para um servidor via XHR tanto quanto os dados medidos que eram muito dificultosos de medir de outras maneiras como o tempo de "descarga" de uma página anterior, tempo de look up do dominio, tempo total do window.onload total time, etc.</p>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Calculando o tempo total necessário para carregar uma página:</p>
+
+<pre>var perfData = window.performance.timing;
+var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
+</pre>
+
+<p>Calculando os tempos de resposta da requisição:</p>
+
+<pre>var connectTime = perfData.responseEnd - perfData.requestStart;</pre>
+
+<h3 id="Browser_Compatibility" name="Browser_Compatibility">Links</h3>
+
+<ul>
+ <li><a class="external" href="http://webtimingdemo.appspot.com/" title="http://webtimingdemo.appspot.com/">Test Page</a></li>
+ <li><a class="external" href="http://w3c-test.org/webperf/specs/NavigationTiming/" title="http://w3c-test.org/webperf/specs/NavigationTiming/">http://w3c-test.org/webperf/specs/NavigationTiming/</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/navigation-timing/" title="http://www.w3.org/TR/navigation-timing/">http://www.w3.org/TR/navigation-timing/</a></li>
+</ul>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibillidade de Navegadores</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>Suporte básico</td>
+   <td>6.0</td>
+   <td>{{ CompatGeckoDesktop("7") }}</td>
+   <td>9</td>
+   <td>15.0</td>
+   <td>8</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>Suporte básico</td>
+   <td>4.0</td>
+   <td>{{ CompatGeckoDesktop("15") }}</td>
+   <td>9</td>
+   <td>15.0</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/pt-br/web/api/navigator/battery/index.html b/files/pt-br/web/api/navigator/battery/index.html
new file mode 100644
index 0000000000..5ae9f207f4
--- /dev/null
+++ b/files/pt-br/web/api/navigator/battery/index.html
@@ -0,0 +1,40 @@
+---
+title: Navigator.battery
+slug: Web/API/Navigator/battery
+tags:
+  - API
+  - Battery API
+  - Propriedade
+translation_of: Web/API/Navigator/battery
+---
+<p>{{ ApiRef("Battery API") }}</p>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>O objeto <code>battery</code> fornece informações sobre o nível de carga da bateria do sistema; você pode também escutar eventos enviados por ele que fornecem atualizações sobre o status atual da carga. Isso implementa a <a href="/pt-BR/docs/WebAPI/Battery_Status" title="/pt-BR/docs/WebAPI/Battery_Status">Battery Status API</a>; consulte essa documentação para mais detalhes, um guia de utilização da API e códigos de exemplo.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var battery = window.navigator.battery;</pre>
+
+<h2 id="Valor">Valor</h2>
+
+<p><code>navigator.battery</code> é um objeto do tipo {{domxref("BatteryManager")}}.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Specifications")}}</p>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>
+
+<p>{{page("/pt-BR/docs/Web/API/BatteryManager","Browser_compatibility")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>the <a href="/pt-BR/docs/WebAPI/Battery_Status" title="/en-US/docs/WebAPI/Battery_Status">Battery Status API</a> article</li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Blog post - Using the Battery API</a></li>
+ <li><a class="external" href="http://davidwalsh.name/battery-api" title="http://davidwalsh.name/battery-api">David Walsh on the JavaScript Battery Api</a></li>
+ <li><a href="https://github.com/pstadler/battery.js" title="https://github.com/pstadler/battery.js">battery.js - a tiny cross-browser wrapper</a></li>
+</ul>
diff --git a/files/pt-br/web/api/navigator/cookieenabled/index.html b/files/pt-br/web/api/navigator/cookieenabled/index.html
new file mode 100644
index 0000000000..430471cb24
--- /dev/null
+++ b/files/pt-br/web/api/navigator/cookieenabled/index.html
@@ -0,0 +1,49 @@
+---
+title: Navigator.cookieEnabled
+slug: Web/API/Navigator/cookieEnabled
+translation_of: Web/API/Navigator/cookieEnabled
+---
+<p>{{ ApiRef("HTML DOM") }}</p>
+
+<p><span class="seoSummary"><code>navigator.cookieEnabled</code> retorna um valor <dfn>Booleano</dfn> que indica quando<em lang="en"> cookies</em> estão habilitados ou não.</span> A propriedade é de apenas leitura.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush: js">var cookieEnabled = navigator.cookieEnabled;
+</pre>
+
+<ul>
+ <li><code>cookieEnabled</code> é um <a href="/pt-BR/docs/Glossario/Booleano">Booleano</a>: <code>true</code> ou <code>false</code>.</li>
+</ul>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">if (!navigator.cookieEnabled) {
+  // The browser does not support or is blocking cookies from being set.
+}
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-navigator-cookieenabled", "Navigator.cookieEnabled")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>
+
+
+
+<p>{{Compat("api.Navigator.cookieEnabled")}}</p>
diff --git a/files/pt-br/web/api/navigator/devicememory/index.html b/files/pt-br/web/api/navigator/devicememory/index.html
new file mode 100644
index 0000000000..9b4a48aae5
--- /dev/null
+++ b/files/pt-br/web/api/navigator/devicememory/index.html
@@ -0,0 +1,39 @@
+---
+title: Navigator.deviceMemory
+slug: Web/API/Navigator/deviceMemory
+translation_of: Web/API/Navigator/deviceMemory
+---
+<p>{{SeeCompatTable}}{{APIRef("Device Memory")}}</p>
+
+<p>A propriedade de somente-leitura <strong><code>deviceMemory</code></strong> da interface {{domxref("navigator")}} retorna a quantidade de memória do dispositivo em gigabytes. Este valor é uma aproximação por arredondamento da potência mais próxima de 2 e dividindo este número por 1024.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>memory</em> = navigator.deviceMemory</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Um número de ponto flutuante.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Device Memory','#sec-device-memory-js-api','deviceMemory')}}</td>
+   <td>{{Spec2('Device Memory')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada de dados estruturados.. Se você quiser contribuir com dados, por favor vá a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um <em lang="en">pull request</em>.</div>
+
+<p>{{Compat("api.Navigator.deviceMemory")}}</p>
diff --git a/files/pt-br/web/api/navigator/geolocation/index.html b/files/pt-br/web/api/navigator/geolocation/index.html
new file mode 100644
index 0000000000..12cc9cbfbc
--- /dev/null
+++ b/files/pt-br/web/api/navigator/geolocation/index.html
@@ -0,0 +1,46 @@
+---
+title: Navigator.geolocation
+slug: Web/API/Navigator/geolocation
+translation_of: Web/API/Navigator/geolocation
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p>A propriedade de apenas leitura <strong><code>Navigator.geolocation</code></strong> retorna um objeto {{domxref("Geolocation")}} que disponibiliza acesso de conteúdo Web à localização do dispositivo. Isso permite que um Web site ou aplicativo ofereçam resultados customizados baseado na localização do usuário.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Por questão de segurança, quando uma página web tenta acessar as informações de localização, o usuário é notificado e lhe é perguntado se este garante permissão. Esteja alerta que cada navegador possui suas próprias políticas e métodos para requisitar permissão.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>geo</var> = <var>navigator</var>.geolocation
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Situação</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#navi-geo', 'Navigator.geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2>
+
+<p>{{Compat("api.Navigator.geolocation")}}</p>
+
+<p><span style="">Veja também</span></p>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Utilizar geolocalização</a></li>
+</ul>
diff --git a/files/pt-br/web/api/navigator/getusermedia/index.html b/files/pt-br/web/api/navigator/getusermedia/index.html
new file mode 100644
index 0000000000..4df2f528d4
--- /dev/null
+++ b/files/pt-br/web/api/navigator/getusermedia/index.html
@@ -0,0 +1,184 @@
+---
+title: navigator.getUserMedia
+slug: Web/API/Navigator/getUserMedia
+translation_of: Web/API/Navigator/getUserMedia
+---
+<p>{{APIRef("Media Capture and Streams")}}{{deprecated_header}}</p>
+
+<p>O método Navigator.getUserMedia() atualmente esta <em>deprecated </em>(obseleto), ele é responsavel por pedir a permissão do usuário para usar até 1 dispositivo de entrada de vídeo (como câmera, ou tela compartilhada) e até 1 dispositivo de entrada de áudio (como o microfone) como fonte para o stream de mídia (pode ser representado por uma instância <code>MediaStream</code>).</p>
+
+<p>Se o usuário der permissão, a MediaStream (o <em>track</em> do video e/ou audio) , é entregue ao <em>callback </em>de sucesso, se a permissão é negada, pode ser que não haja dispositivo compatível ou alguma condição de erro aconteceu, retornando o <em>callback </em>de erro com uma instancia do objeto   {{domxref("MediaStreamError")}} , com a descrição do erro que aconteceu, se o usuário não fizer nenhuma escolha, nenhum <em>callback </em>é retornado.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">navigator.getUserMedia ( permissoes, callbackSucesso, callbackErro );</pre>
+
+<p><strong>Exemplo</strong></p>
+
+<p>Este é um exemplo de uso da função getUserMedia() com prefixos específicos dos navegadores.</p>
+
+<pre class="brush: js">navigator.getMedia = ( navigator.getUserMedia ||
+                       navigator.webkitGetUserMedia ||
+                       navigator.mozGetUserMedia ||
+                       navigator.msGetUserMedia);
+
+navigator.getMedia (
+
+   // permissoes
+   {
+      video: true,
+      audio: true
+   },
+
+   // callbackSucesso
+   function(localMediaStream) {
+      var video = document.querySelector('video');
+      video.src = window.URL.createObjectURL(localMediaStream);
+      video.onloadedmetadata = function(e) {
+         // Faz algo com o vídeo aqui.
+      };
+   },
+
+   // callbackErro
+   function(err) {
+    console.log("O seguinte erro ocorreu: " + err);
+   }
+
+);</pre>
+
+<h2 id="Parâmetros">Parâmetros</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">parâmetro</th>
+   <th scope="col">Obrigatório/ <br>
+    Opcional </th>
+   <th scope="col">Descrição</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>permissoes</td>
+   <td>Obrigatório</td>
+   <td>Os tipos de mídia habilitados no objeto LocalMediaStream enviado para a callbackSucesso.</td>
+  </tr>
+  <tr>
+   <td>callbackSucesso</td>
+   <td>Obrigatório</td>
+   <td>A função da aplicação a ser invocada para receber o objeto LocalMediaStream.</td>
+  </tr>
+  <tr>
+   <td>callbackErro</td>
+   <td>Opcional</td>
+   <td>A função a ser invocada na aplicação se a chamada a getUserMedia falhar.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="permissoes">permissoes</h3>
+
+<p>O parâmetro permissoes é um objeto MediaStreamConstraints com dois membros do tipo Boolean: <code>video</code> e <code>audio</code>. Estes membros descrevem os tipos de mídia habilitados no objeto <a href="/en-US/docs/WebRTC/MediaStream_API#LocalMediaStream" title="WebRTC/MediaStream_API#LocalMediaStream">LocalMediaStream</a>. Pelo menos um destes membros deve ser especificado para que o argumento seja validado. Se um membro especificado não for suportado pelo navegador, a função getUserMedia invocará a callbackErro com o erro NOT_SUPPORTED_ERROR. Se o navegador não puder encontrar nenhuma fonte de mídia com o tipo especificado, a função getUserMedia invocará a callbackErro com o erro MANDATORY_UNSATISFIED_ERR.</p>
+
+<p>Se o valor de um membro não estiver especificado no objeto, o valor padrão deste membro será falso. Veja como configurar o objeto permissoes para obter tanto áudio como vídeo:</p>
+
+<pre>{ video: true, audio: true }</pre>
+
+<h3 id="callbackSucesso">callbackSucesso</h3>
+
+<p>A função getUserMedia invocará a função especificada em callbackSucesso com o objeto <a href="/en-US/docs/WebRTC/MediaStream_API#LocalMediaStream" title="WebRTC/MediaStream_API#LocalMediaStream">LocalMediaStream</a> que contém a fonte de mídia. Você pode associar este objeto com o elemento apropriado e trabalhar com ele, como mostrado no exemplo a seguir:</p>
+
+<pre>function(localMediaStream) {
+   var video = document.querySelector('video');
+   video.src = window.URL.createObjectURL(localMediaStream);
+   video.onloadedmetadata = function(e) {
+      // Faz algo com o vídeo aqui.
+   };
+},</pre>
+
+<h3 id="callbackErro">callbackErro</h3>
+
+<p>A função getUserMedia invocará a função especificada em callbackErro com um argumento <code>code</code>. Os códigos de erro são descritos abaixo:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Erro</th>
+   <th scope="col">Descrição</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>PERMISSION_DENIED </td>
+   <td>O usuário não permitiu acesso a um dispositivo de mídia necessário para essa operação. </td>
+  </tr>
+  <tr>
+   <td>NOT_SUPPORTED_ERROR </td>
+   <td>Uma mídia especificada não é suportada pelo navegador.</td>
+  </tr>
+  <tr>
+   <td>MANDATORY_UNSATISFIED_ERROR </td>
+   <td>Nenhuma fonte de mídia do tipo especificado foi encontrada.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Stream API </td>
+   <td>21{{property_prefix("webkit")}} </td>
+   <td>20{{property_prefix("moz")}} </td>
+   <td>{{CompatNo}} </td>
+   <td>12</td>
+   <td>{{CompatUnknown}} </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Stream API </td>
+   <td>{{CompatNo}} </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}} </td>
+   <td>12</td>
+   <td>{{CompatNo}} </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><span style="line-height: 1.5em;">Atualmente, usar o WebRTC para acessar a câmera de vídeo é suportado nos navegadores Chrome, Opera e Firefox 20.</span></p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a> - a página introdutória a API</li>
+ <li><a href="/en-US/docs/WebRTC/MediaStream_API" title="WebRTC/MediaStream_API">MediaStream API</a> - a API para objetos de fonte de mídia</li>
+ <li><a href="/en-US/docs/WebRTC/taking_webcam_photos" title="WebRTC/taking_webcam_photos">Taking webcam photos</a> - um tutorial sobre como usar a getUserMedia()</li>
+</ul>
diff --git a/files/pt-br/web/api/navigator/index.html b/files/pt-br/web/api/navigator/index.html
new file mode 100644
index 0000000000..6ef2055b7a
--- /dev/null
+++ b/files/pt-br/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/pt-br/web/api/navigator/share/index.html b/files/pt-br/web/api/navigator/share/index.html
new file mode 100644
index 0000000000..ce6640ada2
--- /dev/null
+++ b/files/pt-br/web/api/navigator/share/index.html
@@ -0,0 +1,87 @@
+---
+title: Navigator.share()
+slug: Web/API/Navigator/share
+translation_of: Web/API/Navigator/share
+---
+<div>{{APIRef("HTML DOM")}}{{securecontext_header}}</div>
+
+<p>O método <code><strong>navigator.share()</strong></code> da API de compartilhamento da Web chama o mecanismo de compartilhamento nativo do dispositivo.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var sharePromise = navigator.share(<var>data</var>);
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code><var>data</var></code></dt>
+ <dd>Um objeto que contém dados para compartilhar. Pelo menos um dos seguintes campos deve ser especificado. As opções disponíveis são:</dd>
+</dl>
+
+<ul>
+ <li><code>url</code>: Um {{domxref ("USVString")}} representando uma URL a ser compartilhada.</li>
+ <li><code>text</code>: Um {{domxref ("USVString")}} representando texto a ser compartilhado.</li>
+ <li><code>title</code>: Um {{domxref ("USVString")}} representando o título a ser compartilhado.</li>
+</ul>
+
+<dl>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Um {{domxref ("Promise")}} que será cumprido assim que um usuário concluir uma ação de compartilhamento (geralmente o usuário escolheu um aplicativo para compartilhar). Ele rejeitará imediatamente se o parâmetro de dados não estiver especificado corretamente e também rejeitará se o usuário cancelar o compartilhamento.</p>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Em nosso teste de <a href="https://mdn.github.io/dom-examples/web-share/">compartilhamento na Web</a> (<a href="https://github.com/mdn/dom-examples/blob/master/web-share/index.html">consulte o código-fonte</a>), há um botão que, quando clicado, invoca a API de compartilhamento na Web para compartilhar o URL da MDN. O JavaScript fica assim:</p>
+
+<pre class="brush: js">const shareData = {
+  title: 'MDN',
+  text: 'Aprenda desenvolvimento web no MDN!',
+  url: 'https://developer.mozilla.org',
+}
+
+const btn = document.querySelector('button');
+const resultPara = document.querySelector('.result');
+
+// Deve ser acionado algum tipo de "ativação do usuário"
+btn.addEventListener('click', async () =&gt; {
+  try {
+    await navigator.share(shareData)
+  } catch(err) {
+    resultPara.textContent = 'Error: ' + e
+  }
+  resultPara.textContent = 'MDN compartilhado com sucesso!'
+});</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Web Share API','#share-method','share()')}}</td>
+   <td>{{Spec2('Web Share API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
+
+
+
+<p>{{Compat("api.Navigator.share")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref('navigator.canShare', 'navigator.canShare()')}}</li>
+</ul>
diff --git a/files/pt-br/web/api/navigatorid/index.html b/files/pt-br/web/api/navigatorid/index.html
new file mode 100644
index 0000000000..c56f1e1b81
--- /dev/null
+++ b/files/pt-br/web/api/navigatorid/index.html
@@ -0,0 +1,120 @@
+---
+title: NavigatorID
+slug: Web/API/NavigatorID
+translation_of: Web/API/NavigatorID
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>The <code><strong>NavigatorID</strong></code> interface contains methods and properties related to the identity of the browser.</p>
+
+<p>There is no object of type <code>NavigatorID</code>, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The <code>NavigatorID</code></em><em> interface doesn't inherit any property.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{deprecated_inline}}</dt>
+ <dd>Always returns <code>'Mozilla'</code>, on any browser. This property is kept only for compatibility purpose.</dd>
+ <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>Returns the official name of the browser. Do not rely on this property to return the correct value.</dd>
+ <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>Returns the version of the browser as a string. Do not rely on this property to return the correct value.</dd>
+ <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>Returns a string representing the platform of the browser. Do not rely on this property to return the correct value.</dd>
+ <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{deprecated_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>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The </em><em><code>NavigatorID</code></em><em> interface doesn't inherit any method.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline()}}</dt>
+ <dd>Always returns <code>false</code>. JavaScript taint/untaint functions were removed in JavaScript 1.2. This method is only kept for compatibility purpose</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', '#navigatorid', 'NavigatorID')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Added the <code>appCodeName</code> property and the <code>taintEnabled()</code> method,  for compatibility purpose.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatorid', 'NavigatorID')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial specification.</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 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>The {{domxref("Navigator")}} and {{domxref("WorkerNavigator")}} interfaces that implement it.</li>
+</ul>
diff --git a/files/pt-br/web/api/navigatorid/platform/index.html b/files/pt-br/web/api/navigatorid/platform/index.html
new file mode 100644
index 0000000000..590d9bd515
--- /dev/null
+++ b/files/pt-br/web/api/navigatorid/platform/index.html
@@ -0,0 +1,63 @@
+---
+title: NavigatorID.platform
+slug: Web/API/NavigatorID/platform
+tags:
+  - API
+  - DOM
+  - DOM_0
+  - Gecko
+  - HTML5
+  - Propriedade
+  - Referencia
+  - Referência(2)
+translation_of: Web/API/NavigatorID/platform
+---
+<p>{{ ApiRef("HTML DOM") }}</p>
+
+<p>Retorna uma string representando a plataforma do navegador. A especificação permite aos navegadores retornar sempre strings vazias, portanto não se utilize dessa propriedade para obter resultados confiáveis.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="eval"><em>plataforma </em>= <em>navigator</em>.platform
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Uma {{domxref("DOMString")}} identificando a plataforma na qual o navegador está sendo executado, ou uma string vazia se o browser se negar a (ou for incapaz de) identificar a plataforma. <code>plataforma</code> é uma string que pode estar vazia ou representar a plataforma na qual o navegador está sendo executado.</p>
+
+<p><span style="font-size: 14px; line-height: 1.5;">Por exemplo: "<code>MacIntel</code>", "<code>Win32</code>", "<code>FreeBSD i386</code>", "<code>WebTV OS</code>"</span></p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush: js">console.log(navigator.platform);</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Na maioria dos browsers, incluindo Chrome, Edge e Firefox 63 em diante, <code>NavegatorID.platform</code> retorna <code>"Win32"</code>, mesmo que o browser seja executado em uma versão 64-bit do Windows. No Internet Explorer e em versões do Firefox anteriores à versão 63, a propriedade ainda retorna <code>"Win64"</code>.</p>
+
+<p>No Firefox, a preferência <code>general.platform.override</code> pode ser usada para sobrepor o valor de retorno padrão dessa propriedade.</p>
+
+<h2 id="Specification" name="Specification">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-navigator-platform', 'NavigatorID.platform')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade">Compatibilidade</h2>
+
+
+
+<p>{{Compat("api.NavigatorID.platform")}}</p>
diff --git a/files/pt-br/web/api/navigatorid/useragent/index.html b/files/pt-br/web/api/navigatorid/useragent/index.html
new file mode 100644
index 0000000000..c5e6211724
--- /dev/null
+++ b/files/pt-br/web/api/navigatorid/useragent/index.html
@@ -0,0 +1,89 @@
+---
+title: NavigatorID.userAgent
+slug: Web/API/NavigatorID/userAgent
+tags:
+  - API
+  - Descontinuado
+  - Propriedade
+  - Referencia
+  - Somente Leitura
+translation_of: Web/API/NavigatorID/userAgent
+---
+<p>{{ApiRef("HTML DOM")}}</p>
+
+<p>A propriedade read-only (apenas leitura) <code><strong>NavigatorID.userAgent</strong></code> retorna a string do agente do usuário (user agent) para o browser atual.</p>
+
+<div class="note">
+<p> A especifícação demanda que os navegadores forneçam, nessa propriedade, a menor quantidade de informações posssível. Nunca assuma que o valor dessa propriedade permanecerá o mesmo em verções futuras de um mesmo navegador. Tente não utiliza-la, ou ultileze-a somente para verções presentes ou passadas de um navegador. Novos navegadores podem utilizar-se do mesmo agente do usuário, ou parte dele, que navegadores mais aintigos: não existe qualquer garantia de que o agente do navegador é de fato o enunciado por essa propriedade.<br>
+ <br>
+ Além disso, tenha em mente que os usuários do navegador podem manipular o valor dessa propriedade caso queiram (UA spoofing).</p>
+</div>
+
+<p>A idenficação de browsers baseada na detecção de sua string de agente de usuário <strong>não é confiável</strong> e <strong>não é recomendável</strong>, pois a string de agente de usuário pode ser configurada pelo usuário. Por exemplo:</p>
+
+<ul>
+ <li>No Firefox, você pode alterar a preferência <code>general.useragent.override</code> em <code>about:config</code>. Algumas extenções do Firefox fazem isso. No entanto, isso altera somente o header HTTP que é enviado ao servidor, não afetando a detecção de browser efetuada por código JavaScript.</li>
+ <li>O Opera 6+ permite aos usuários configurar a string de identificação do browser através de um menu.</li>
+ <li>O Microsoft Internet Explorer faz uso de registros do Windows.</li>
+ <li>O Safari e o iCab permitem aos usuários alterar, através de um menu, a string de agente do usuário para os valores predefinidos do Internet Explorer ou Netscape.</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var <var>au</var> = window.navigator.userAgent;
+</pre>
+
+<h3 id="Value" name="Value">Valor</h3>
+
+<p><code>au</code> guarda o valor da string de agente de usuário do browser atual.</p>
+
+<p>A string de agente de usuário é contruida em uma estrutura formal que pode ser decomposta em diferentes informações. Cada uma dessas informações é provinda de outras propriedades de <code>window.navigator</code>, que também podem ser configuradas pelo usuário. Navegadores baseados na engine Gecko seguem a seguinte estrutura:</p>
+
+<pre>ageteDeUsuário = códigoDoNomeDoAplicativo/versãoDoAplicativo número (Plataforma; Segurança; OS-ou-CPU;
+Localização; rv: número-da-verção-de-revisão) produto/produtoSub
+Nome-do-Aplicativo versão-do-Nome-do-Aplicativo
+</pre>
+
+<h2 id="Example" name="Example">Examplo</h2>
+
+<pre class="brush:js">alert(window.navigator.userAgent)
+// alerta "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1"
+</pre>
+
+<ul>
+</ul>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-navigator-useragent', 'NavigatorID.userAgent')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade">Compatibilidade</h2>
+
+
+
+<p>{{Compat("api.NavigatorID.userAgent")}}</p>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Gecko_user_agent_string_reference">Referência da string de agente usuário no Gecko</a></li>
+ <li><a href="/pt-BR/docs/Using_Web_Standards_in_your_Web_Pages/Developing_cross-browser_and_cross-platform_pages" title="Using_Web_Standards_in_your_Web_Pages/Developing_cross-browser_and_cross-platform_pages">Browser identification (aka "browser sniffing"): not best, not reliable approach</a></li>
+ <li><a href="/pt-BR/docs/Browser_Detection_and_Cross_Browser_Support#Limit_the_use_of_User_Agent_String_based_Detection" title="Browser_Detection_and_Cross_Browser_Support#Limit_the_use_of_User_Agent_String_based_Detection">Limit the use of User Agent String based Detection</a></li>
+ <li><a href="/pt-BR/docs/Browser_Detection_and_Cross_Browser_Support#Use_feature_oriented_object_detection" title="Browser_Detection_and_Cross_Browser_Support#Use_feature_oriented_object_detection">Use feature oriented object detection</a></li>
+ <li><a href="http://www.gtalbot.org/DHTMLSection/ListAllAttributesAndMethodsOfObjects.html">Demo interativa das probriadades do navegador</a></li>
+</ul>
diff --git a/files/pt-br/web/api/navigatorlanguage/index.html b/files/pt-br/web/api/navigatorlanguage/index.html
new file mode 100644
index 0000000000..7d6b0751e7
--- /dev/null
+++ b/files/pt-br/web/api/navigatorlanguage/index.html
@@ -0,0 +1,148 @@
+---
+title: NavigatorLanguage
+slug: Web/API/NavigatorLanguage
+tags:
+  - API
+  - HTML-DOM
+  - NeedsTranslation
+  - No Interface
+  - Reference
+  - TopicStub
+translation_of: Web/API/NavigatorLanguage
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><code><strong>NavigatorLanguage</strong></code> contains methods and properties related to the language of the navigator.</p>
+
+<p>There is no object of type <code>NavigatorLanguage</code>, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The <code>NavigatorLanguage</code></em><em> interface doesn't inherit any property.</em></p>
+
+<dl>
+ <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>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The </em><em><code>NavigatorLanguage</code></em><em> interface neither implements, nor inherit any method.</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('HTML WHATWG', '#navigatorlanguage', 'NavigatorLanguage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Since the {{SpecName('HTML5 W3C')}} snapshot, the <code>languages</code> property has been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatorlanguage', 'NavigatorLanguage')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial specification; snapshot of  an early version{{SpecName('HTML WHATWG')}}.</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><code>languages</code></td>
+   <td>37</td>
+   <td>{{CompatGeckoDesktop("32")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35")}}</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</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>languages</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}} </td>
+   <td>{{CompatGeckoMobile("32")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("35")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("Navigator")}} interface that implements it.</li>
+</ul>
diff --git a/files/pt-br/web/api/navigatorlanguage/language/index.html b/files/pt-br/web/api/navigatorlanguage/language/index.html
new file mode 100644
index 0000000000..c29fe80ac0
--- /dev/null
+++ b/files/pt-br/web/api/navigatorlanguage/language/index.html
@@ -0,0 +1,131 @@
+---
+title: NavigatorLanguage.language
+slug: Web/API/NavigatorLanguage/language
+translation_of: Web/API/NavigatorLanguage/language
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>A propriedade <strong><code>NavigatorLanguage.language</code></strong> retorna uma string representando a língua de preferência do usuário, normalmente a língua da interface do navegador.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>lang</em> = navigator.language
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Uma {{domxref("DOMString")}} <em><code>lang</code></em> armazena a string representando a língua como definida em <a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP 47</a>. Exemplos de códigos de línguas válidos incluem "en", "en-US", "fr", "fr-FR", "es-ES", etc.</p>
+
+<p>Atente-se que no Safari no macOS e iOS antes da versão 10.2, o código do país é retornado em caixa baixa: "en-us", "fr-fr" etc.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">if (window.navigator.language != 'en') {
+  doLangSelect(window.navigator.language);
+}
+</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">Comentários</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5.1', '#dom-navigator-language', 'NavigatorLanguage.language') }}</td>
+   <td>{{ Spec2('HTML5.1') }}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</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>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("5.0")}}<sup>[3]</sup></td>
+   <td>11.0<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35")}}</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>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Retorna a língua da interface do browser, não o valor do <a href="/en-US/docs/Web/HTTP/Headers">HTTP header</a> <code>Accept-Language</code> .</p>
+
+<p>[2] Antes do Gecko 2.0 {{geckoRelease("2.0")}}, o valor dessa propriedade também fazia parte da string de user agent, como reportado em {{domxref("window.navigator.userAgent", "navigator.userAgent")}}.</p>
+
+<p>[3] Começando no Gecko 5.0 {{geckoRelease("5.0")}}, o valor dessa propriedade é baseado no valor do <a href="/en-US/docs/Web/HTTP/Headers">HTTP header</a> <code>Accept-Language</code>.</p>
+
+<p>[4] As propriedades (não padronizadas) mais próximas disponíveis são <code><a href="http://msdn.microsoft.com/en-us/library/ie/ms534713.aspx">userLanguage</a></code> e <code><a href="http://msdn.microsoft.com/en-us/library/ie/ms533542.aspx">browserLanguage</a></code>.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("NavigatorLanguage.languages", "navigator.languages")}}</li>
+ <li>{{domxref("navigator")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/navigatoronline/index.html b/files/pt-br/web/api/navigatoronline/index.html
new file mode 100644
index 0000000000..6e5118c62b
--- /dev/null
+++ b/files/pt-br/web/api/navigatoronline/index.html
@@ -0,0 +1,134 @@
+---
+title: NavigatorOnLine
+slug: Web/API/NavigatorOnLine
+tags:
+  - API
+  - HTML-DOM
+translation_of: Web/API/NavigatorOnLine
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>A interface <code><strong>NavigatorOnLine</strong></code> contém métodos e propriedades relacionados ao status de conectividade do navegador.</p>
+
+<p>Não há objetosdo tipo <code>NavigatorOnLine</code>, mas há outras interfaces, como {{domxref("Navigator")}} ou {{domxref("WorkerNavigator")}} que o implementa.</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>A interface <code>NavigatorOnLine</code></em><em> não herda nenhuma propriedade.</em></p>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt>
+ <dd>Retorna um {{domxref("Boolean")}} indicando se o browser está online.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>A interface <strong><code>NavigatorOnLine</code></strong> não implementa nem herda nenhum método.</em></p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Nenhuma mudança desde a ultima atualização, do {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot do {{SpecName('HTML WHATWG')}} com sua especificação inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(29)}}</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>Característica</th>
+   <th>Android</th>
+   <th>Chrome para 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>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on {{domxref("WorkerNavigator")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(29)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>A interface {{domxref("Navigator")}} que o implementa.</li>
+ <li><a href="/en-US/docs/Web/API/NavigatorOnLine/Online_and_offline_events">Eventos online e offline.</a></li>
+</ul>
diff --git a/files/pt-br/web/api/navigatoronline/online/index.html b/files/pt-br/web/api/navigatoronline/online/index.html
new file mode 100644
index 0000000000..acaed23e82
--- /dev/null
+++ b/files/pt-br/web/api/navigatoronline/online/index.html
@@ -0,0 +1,91 @@
+---
+title: Navigator.onLine
+slug: Web/API/NavigatorOnLine/onLine
+tags:
+  - API
+  - DOM Reference
+  - NavigatorOnLine
+  - Offline
+  - Online
+  - Propriedade
+  - Referencia
+translation_of: Web/API/NavigatorOnLine/onLine
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Retorna o estado da conexão do navegador. A propriedade retorna um valor booleano, com <code>true</code> significando online e <code>false</code> significando offline. A propriedade envia atualizações assim que a capacidade do navegador de se conectar a rede muda. A atualização ocorre quando o usuário entra em um link ou quando algum script faz uma requisição a uma página remota. Exemplo, a propriedade deve retornar <code>false</code> quando usuários clicam em links assim que perderem suas conexões com a internet.</p>
+
+<p>Navegadores implementam esta propriedade de formas diferentes.</p>
+
+<p>No Chrome e Safari, caso o navegador não for capaz de se conectar a uma rede local (LAN) ou a um roteador, ele está offline; em todas as outras condições, retorna <code>true</code>. Utilizar essa propriedade para determinar que o navegador está offline seja sempre que o navegador retornar <code>false</code> como valor pode gerar falsos positivos, em casos em que o computador está executando um software de virtualização que tem adaptadores de ethernet virtuais que sempre estão "conectados." ou quando o computador estiver conectado ao roteador e este estiver sem internet. <u>Se você realmente quer determinar o estado da conexão do navegador, você deve desenvolver meios adicionais para esta verificação</u>. Para aprender mais, veja o artigo do HTML5 Rocks, <a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html"> Working Off the Grid</a>.</p>
+
+<p>No Firefox e Internet Explorer, mudar o navegador para o modo offline envia um valor <code>false</code>. Até o Firefox 41, todas as outras condições retornam um valor <code>true</code>; desde o Firefox 41, no OS X e Windows, o valor seguirá a conectividade real da rede.</p>
+
+<p>Você pode ver mudanças no estado da rede escutando os eventos <a href="/en-US/docs/Web/API/document.ononline"><code>window.ononline</code></a> e <a href="/en-US/docs/Web/API/document.onoffline"><code>window.onoffline</code></a>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>online</em> = <em>window</em>.navigator.onLine;
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p><code>online</code> é um booleano <code>true</code> ou <code>false</code>.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Veja <a href="http://html5-demos.appspot.com/static/navigator.onLine.html"> um exemplo ao-vivo</a>.</p>
+
+<p>Para verificar se você está online, chame <code>window.navigator.onLine</code>, como no exemplo abaixo:</p>
+
+<pre class="brush: js">if (navigator.onLine) {
+  console.log('online');
+} else {
+  console.log('offline');
+}</pre>
+
+<p>Caso o navegador não suporta o exemplo de <code>navigator.onLine</code> acima, ele sempre retornará <code>false</code>/<code>undefined</code>.</p>
+
+<p>Para ver mudanças no estado da rede, use <code><a href="/en-US/docs/DOM/element.addEventListener">addEventListener</a></code> para escutar os eventos em <code>window.online</code> e <code>window.offline</code>, como no exemplo abaixo:</p>
+
+<pre class="brush: js">window.addEventListener('offline', function(e) { console.log('offline'); });
+
+window.addEventListener('online', function(e) { console.log('online'); });
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "browsers.html#dom-navigator-online", "navigator.onLine")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2>
+
+
+
+<p>{{Compat("api.NavigatorOnLine.onLine")}}</p>
+
+<h2 id="Notas">Notas</h2>
+
+<p>Veja <a href="/en-US/docs/Online_and_offline_events">s eventos Online/Offline</a> para descrições mais detalhadas desta propriedade assim como novas funcionalidades offline introduzidas no Firefox 3.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html">HTML5 Rocks: Working Off the Grid With HTML5 Offline</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/offline/whats-offline/">HTML5 Rocks: "Offline": What does it mean and why should I care?</a></li>
+ <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/">Mozilla Blog: Offline Web Applications</a></li>
+</ul>
diff --git a/files/pt-br/web/api/navigatoronline/online_and_offline_events/index.html b/files/pt-br/web/api/navigatoronline/online_and_offline_events/index.html
new file mode 100644
index 0000000000..e12a1fc649
--- /dev/null
+++ b/files/pt-br/web/api/navigatoronline/online_and_offline_events/index.html
@@ -0,0 +1,99 @@
+---
+title: Eventos on-line e off-line
+slug: Web/API/NavigatorOnLine/Online_and_offline_events
+translation_of: Web/API/NavigatorOnLine/Online_and_offline_events
+---
+<p>IAlguns navegadores utilizam <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">Online/Offline events</a> relacionados à <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WHATWG Web Applications 1.0 specification</a>.</p>
+
+<h3 id="Overview" name="Overview">Introdução</h3>
+
+<p>Para criar um bom aplicativo off-line, primeiramente é necessário que você saiba quando o aplicativo está off-line. Consequentemente, você também precisará saber quando seu aplicativo retorna ao estado on-line novamente, ou seja, os eventos são:</p>
+
+<ol>
+ <li>Você precisa saber quando o usuário está on-line novamente, assim você pode sincronizar novamente com o servidor.</li>
+ <li>Você precisa saber quando o usuário está off-line, então você deverá agendar os acessos ao servidor para mais tarde.</li>
+</ol>
+
+<p>Este é o processo que os eventos on-line/off-line ajudam a facilitar.</p>
+
+<p>Seu aplicativo também poderá precisar estabelecer que certos documentos deverão ser mantidos em um cache off-line. Você pode saber mais sobre isso no artigo <a href="/en/Offline_resources_in_Firefox" title="en/Offline_resources_in_Firefox">Offline resources in Firefox</a>.</p>
+
+<h3 id="API" name="API">API</h3>
+
+<h4 id="navigator.onLine" name="navigator.onLine"><code>navigator.onLine</code></h4>
+
+<p><code><a href="/en/DOM/window.navigator.onLine" title="en/DOM/window.navigator.onLine">navigator.onLine</a></code> é uma propriedade que mantém valores <code>true</code>/<code>false</code> (<code>true</code> para on-line, <code>false</code> para off-line). Esta propriedade é atualizada quando o usuário entra em "Modo Off-line" clicando no item de menu correspondente (Arquivo -&gt; Modo Off-line).</p>
+
+<p>Essa propriedade também deverá ser atualizada toda vez que o navegador perde a conexão com a Internet. De acordo com a especificação:</p>
+
+<blockquote cite="http://www.whatwg.org/specs/web-apps/current-work/#offline">A propriedade <code>navigator.onLine</code> deve retornar false se o usuário clicar num link ou se um aplicativo tentar contatar uma página remota e não estiver conectado à Internet ou se o navegador souber que a tentativa irá falhar por qualquer motivo...</blockquote>
+
+<p>O Firefox 2 atualiza esta propriedade quando se entra em Modo Off-line ou sai do mesmo e também quando a conexão com a Internet é perdida ou reestabelecida no Windows e no Linux.</p>
+
+<p>Essa propriedade existiu em versões mais antigas do Firefox e do Internet Explorer (a especificação acima foi baseada nestas implementações anteriores), então você pode começar a utilizá-la imediatamente. A auto-detecção de estado de rede foi implementada no Firefox 2.</p>
+
+<h4 id=".22online.22_and_.22offline.22_events" name=".22online.22_and_.22offline.22_events">Eventos "<code>on-line</code>" e "<code>off-line</code>"</h4>
+
+<p>O <a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_developers">Firefox 3</a> implementou dois novos eventos: "<code>on-line</code>" e "<code>off-line</code>". Estes dois eventos são chamados na tag <code>&lt;body&gt;</code> de cada página quando o navegador muda entre os modos on e off-line. Também, esses eventos são propagados a partir do <code>document.body</code>, para <code>document</code>, terminando em <code>window</code>. Ambos eventos não podem ser interrompidos (você não pode prevenir que o usuário fique on-line ou off-line).</p>
+
+<p>Você pode resgistrar <em>listeners</em> para esses eventos em caminhos conhecidos:</p>
+
+<ul>
+ <li>usando <code><a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">addEventListener</a></code> em <code>window</code>, <code>document</code>, ou <code>document.body</code></li>
+ <li>configurando propriedades <code>.ononline</code> ou <code>.onoffline</code> em <code>document</code> ou <code>document.body</code> para um objeto <code>Function</code> em JavaScript. (<strong>Obs.:</strong> <code>window.ononline</code> ou <code>window.onoffline</code> não funcionarão por questões de compatibilidade.)</li>
+ <li>especificando atributos <code>ononline="..."</code> or <code>onoffline="..."</code>  na tag <code>&lt;body&gt;</code> do HTML.</li>
+</ul>
+
+<h3 id="Example" name="Example">Example</h3>
+
+<p>Há <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">a simple test case</a> que você pode rodar para ver como esses eventos funcionam. XXX Quando os testes para isso forem criados, redirecione para eles e atualize este exemplo -nickolay</p>
+
+<pre class="brush: html"> &lt;!doctype html&gt;
+ &lt;html&gt;
+ &lt;head&gt;
+   &lt;script&gt;
+     function updateOnlineStatus(msg) {
+       var status = document.getElementById("status");
+       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
+       status.setAttribute("class", condition);
+       var state = document.getElementById("state");
+       state.innerHTML = condition;
+       var log = document.getElementById("log");
+       log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
+     }
+     function loaded() {
+       updateOnlineStatus("load");
+       document.body.addEventListener("offline", function () {
+         updateOnlineStatus("offline")
+       }, false);
+       document.body.addEventListener("online", function () {
+         updateOnlineStatus("online")
+       }, false);
+     }
+   &lt;/script&gt;
+   &lt;style&gt;...&lt;/style&gt;
+ &lt;/head&gt;
+ &lt;body onload="loaded()"&gt;
+   &lt;div id="status"&gt;&lt;p id="state"&gt;&lt;/p&gt;&lt;/div&gt;
+   &lt;div id="log"&gt;&lt;/div&gt;
+ &lt;/body&gt;
+ &lt;/html&gt;
+</pre>
+
+<h3 id="References" name="References">Notas</h3>
+
+<p>Se a API não estiver implementada no navegador, você pode usar outros sinais para detectar quando se está off-line, inclusive receber <a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-appcache">AppCache error events</a> e <a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-xml-http-request">responses from XMLHttpRequest</a>.</p>
+
+<h3 id="References" name="References">Referências</h3>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">'Online/Offline events' section from the WHATWG Web Applications 1.0 Specification</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">The bug tracking online/offline events implementation in Firefox</a> and a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">follow-up</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">A simple test case</a></li>
+ <li><a class="external" href="http://ejohn.org/blog/offline-events/">An explanation of Online/Offline events</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> em hacks.mozilla.org - mostra um aplicativo off-line e explica como funciona.</li>
+</ul>
+
+<p>{{ HTML5ArticleTOC() }}</p>
+
+<p>{{ languages( { "es": "es/Eventos_online_y_offline", "fr": "fr/\u00c9v\u00e8nements_online_et_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }}</p>
diff --git a/files/pt-br/web/api/navigatorplugins/index.html b/files/pt-br/web/api/navigatorplugins/index.html
new file mode 100644
index 0000000000..ddcc629eb8
--- /dev/null
+++ b/files/pt-br/web/api/navigatorplugins/index.html
@@ -0,0 +1,69 @@
+---
+title: NavigatorPlugins
+slug: Web/API/NavigatorPlugins
+tags:
+  - API
+  - DOM
+  - Experimental
+  - HTML
+  - Interface
+  - Navigation
+  - NavigatorPlugins
+  - Plugins
+  - Reference
+translation_of: Web/API/NavigatorPlugins
+---
+<p>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</p>
+
+<p>O <code><strong>NavigatorPlugins</strong></code> {{Glossary("mixin")}}<span class="tlid-translation translation" lang="pt"><span title=""> adiciona na interface do {{domxref ("Navigator")}} métodos e propriedades para descobrir e interagir com plugins instalados no navegador.</span></span></p>
+
+<p> </p>
+
+<h2 id="Propriedades"><span class="tlid-translation translation" lang="pt"><span title="">Propriedades</span></span></h2>
+
+<dl>
+ <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd><span class="tlid-translation translation" lang="pt"><span title="">Retorna um {{domxref ("MimeTypeArray")}} listando os tipos MIME suportados pelo navegador.</span></span></dd>
+ <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd><span class="tlid-translation translation" lang="pt"><span title="">Retorna um {{domxref ("PluginArray")}} listando os plugins instalados no</span></span> <span class="tlid-translation translation" lang="pt"><span title="">navegador</span></span>.</dd>
+</dl>
+
+<h2 id="Métodos"><span class="tlid-translation translation" lang="pt"><span title="">Métodos</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">A interface NavigatorPlugins</span></span><em> <code>NavigatorPlugins</code></em><span class="tlid-translation translation" lang="pt"><span title=""> não herda nenhum método.</span></span></p>
+
+<dl>
+ <dt>{{domxref("NavigatorPlugins.javaEnabled", "NavigatorPlugins.javaEnabled()")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd><span class="tlid-translation translation" lang="pt"><span title="">Retorna uma flag {{domxref ("Boolean")}} indicando se o navegador do host tem o Java ativo ou não.</span></span></dd>
+</dl>
+
+<h2 id="Especificações"><span class="tlid-translation translation" lang="pt"><span title="">Especificações</span></span></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><span class="tlid-translation translation" lang="pt"><span title="">Especificação</span></span></th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#navigatorplugins', 'NavigatorPlugins')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td><span class="tlid-translation translation" lang="pt"><span title="">Definição inicial.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegador_compativeis">Navegador compativeis</h2>
+
+
+
+<p>{{Compat("api.NavigatorPlugins")}}</p>
+
+<h2 id="Veja_também"><span class="tlid-translation translation" lang="pt"><span title="">Veja também</span></span></h2>
+
+<ul>
+ <li><span class="tlid-translation translation" lang="pt"><span title="">A interface {{domxref ("Navigator")}} é a que a implementa.</span></span></li>
+</ul>
diff --git a/files/pt-br/web/api/navigatorplugins/javaenabled/index.html b/files/pt-br/web/api/navigatorplugins/javaenabled/index.html
new file mode 100644
index 0000000000..29aba43a52
--- /dev/null
+++ b/files/pt-br/web/api/navigatorplugins/javaenabled/index.html
@@ -0,0 +1,54 @@
+---
+title: NavigatorPlugins.javaEnabled()
+slug: Web/API/NavigatorPlugins/javaEnabled
+tags:
+  - API
+  - Example
+  - Method
+  - Reference
+translation_of: Web/API/NavigatorPlugins/javaEnabled
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Este método indica se o navegador atual tem o Java ativo ou não.</span></span></p>
+
+<h2 id="Syntax" name="Syntax"><span class="tlid-translation translation" lang="pt"><span title="">Sintaxe</span></span></h2>
+
+<pre class="eval"><em>result</em> = window.navigator.javaEnabled()
+</pre>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="eval">if (window.navigator.javaEnabled()) {
+   // browser has java
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">O valor de retorno para este método indica se a preferência que controla o Java está ativado ou desativado - não se o navegador oferece suporte ao Java, em geral</span></span>.</p>
+
+<h2 id="Especificações"><span class="tlid-translation translation" lang="pt"><span title="">Especificações</span></span></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Esécificações</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-navigator-javaenabled', 'NavigatorPlugins.javaEnabled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td><span class="tlid-translation translation" lang="pt"><span title="">Definição inicial</span></span>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegadores_compativeis"><span class="tlid-translation translation" lang="pt"><span title="">Navegadores compativeis</span></span></h2>
+
+
+
+<p>{{Compat("api.NavigatorPlugins.javaEnabled")}}</p>
diff --git a/files/pt-br/web/api/node/appendchild/index.html b/files/pt-br/web/api/node/appendchild/index.html
new file mode 100644
index 0000000000..dbca22a3f2
--- /dev/null
+++ b/files/pt-br/web/api/node/appendchild/index.html
@@ -0,0 +1,56 @@
+---
+title: Node.appendChild
+slug: Web/API/Node/appendChild
+translation_of: Web/API/Node/appendChild
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<h2 id="Summary" name="Summary">Resumo</h2>
+
+<p>Adiciona um nó ao final da lista de filhos de um nó pai especificado. Se o nó já existir no documento, ele é removido de seu nó pai atual antes de ser adicionado ao novo pai.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var filho = <em>elemento</em>.appendChild(<em>filho</em>);</pre>
+
+<ul>
+ <li><code>elemento</code> é o <a href="/pt-BR/docs/DOM/element" title="/en-US/docs/DOM/element">elemento</a> pai.</li>
+ <li><code>filho</code> é o nó a ser adicionado como filho de <code>elemento</code>. Também é devolvido.</li>
+</ul>
+
+<h2 id="Descrição">Descrição</h2>
+
+<p>O método <code>appendChild</code> devolve uma referência ao nó adicionado.</p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:js">// Cria um novo elemento de parágrafo e adiciona-o ao final do documento
+var p = document.createElement("p");
+document.body.appendChild(p);</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Se <code>filho</code> é uma referência a um nó existente no documento, <code>appendChild</code> vai movê-lo de sua posição atual para a nova posição (i.e, não é necessário remover o nó de seu pai atual antes de adicioná-lo a outro nó).</p>
+
+<p>Isso também significa que um nó não pode estar em dois lugares do documento ao mesmo tempo. Assim, se o nó já tem um pai, ele é primeiro removido para, <em>só então</em>, ser adicionado na nova posição.</p>
+
+<p>Você pode usar o método {{domxref("Node.cloneNode")}} para criar uma cópia do nó antes de adicioná-lo ao novo pai. (Note que cópias feitas com o método <code>cloneNode</code> <strong>não </strong>serão mantidas sincronizadas automaticamente)</p>
+
+<p>Este método não permite mover nós entre documentos diferentes. Se você quiser adicionar um nó de um documento diferente (por exemplo para mostrar o resultado de uma requisição AJAX), você precisa primeiro usar o método {{domxref("document.importNode")}}.</p>
+
+<p><code>appendChild()</code> é um dos métodos fundamentais da programação para a web usando o DOM. O método <code>appendChild()</code> insere um novo nó na estrutura do DOM de um documento, e é a segunda parte do processo criar-e-adicionar tão importante na construção de páginas web programaticamente.</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107" title="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107">DOM Level 3 Core: appendChild</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Ver também</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild")}}</li>
+ <li>{{domxref("Node.replaceChild")}}</li>
+ <li>{{domxref("Node.insertBefore")}}</li>
+ <li>{{domxref("Node.hasChildNodes")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/node/baseuri/index.html b/files/pt-br/web/api/node/baseuri/index.html
new file mode 100644
index 0000000000..fe376eac67
--- /dev/null
+++ b/files/pt-br/web/api/node/baseuri/index.html
@@ -0,0 +1,82 @@
+---
+title: Node.baseURI
+slug: Web/API/Node/baseURI
+translation_of: Web/API/Node/baseURI
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Resumo">Resumo</h2>
+</div>
+
+<p>A propriedade somente leitura <code><strong>Node.baseURI</strong></code> retorna a URL base absoluta de um nó.</p>
+
+<p>A URL base é usada para <a href="http://developers.whatwg.org/urls.html#resolving-urls">resolver </a>URLs relativas quando o navegador precisa obter uma URL absoluta, por exemplo, quando processa o atributo <code>src</code> do elemento HTML  {{HTMLElement("img")}} ou o atributo <code><a href="/pt-BR/docs/XLink">xlink</a>:href</code> do XML.</p>
+
+<p>No caso comum, a URL base é simplesmente a localização do documento, mas ela pode ser afetada por vários fatores, incluindo o elemento {{HTMLElement("base")}} em HTML e o atributo <a href="/pt-BR/docs/XML/xml:base">xml:base</a> em XML.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>baseURI</em> = <em>node</em>.baseURI;
+</pre>
+
+<ul>
+ <li><code>baseURI</code> é uma {{ domxref("DOMString") }} que representa a URL base do {{domxref("Node")}} especificado. Pode ser <code>null</code> caso não consiga obter uma URL absoluta.</li>
+ <li><code><em>node</em>.baseURI</code> é somente leitura.</li>
+ <li><code><em>node</em>.baseURI</code> pode mudar com o tempo (ver abaixo).</li>
+</ul>
+
+<h2 id="Details" name="Details">Detalhes</h2>
+
+<h3 id="A_URL_base_de_um_documento">A URL base de um documento</h3>
+
+<p>É a URL base de um <em>documento</em> padrão ao endereço do documento ( como exibido pelo navegador e disponível em {{domxref("window.location")}} ), mas pode mudar o padrão:</p>
+
+<ul>
+ <li>Quando uma tag HTML {{HTMLElement("base")}} é encontrada no documento;</li>
+ <li>Quando esse é um novo documento creado dinamicamente.</li>
+</ul>
+
+<p>Veja a <a href="http://developers.whatwg.org/urls.html#base-urls">seção URLs base do padrão HTML</a> para mais detalhes.</p>
+
+<p>Você pode usar <code><em>{{domxref("document")}}</em>.baseURI</code>  para obter a URL base de um documento. Note que a obtenção da URL base para um documento pode retornar diferentes URLs ao longo do tempo se as tags {{HTMLElement("base")}} ou a localização do documento mudarem.</p>
+
+<h3 id="A_URL_base_de_um_elemento">A URL base de um elemento</h3>
+
+<p>A URL base de um elemento em HTML é, normalmente,  igual  a URL base do documento onde o nó está.</p>
+
+<p>Se o documento contém atributos <code><a href="/en-US/docs/XML/xml:base">xml:base</a></code> ( que você não deve fazer em documento HTML), o <code><em>element</em>.baseURI</code> recebe os atributos <code>xml:base dos elementos pai </code>into account when computing the base URL. Veja <a href="/en-US/docs/XML/xml:base">xml:base</a> para mais detalhes.</p>
+
+<p>Você pode usar <code><em>{{domxref("element")}}</em>.baseURI</code> para obter a URL base de um elemento.</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<table class="spectable standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName( "DOM WHATWG", "#dom-node-baseuri", "baseURI" ) }}</td>
+   <td>{{ Spec2( "DOM WHATWG" ) }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName( "DOM3 Core", "core.html#Node3-baseURI", "baseURI" ) }}</td>
+   <td>{{ Spec2( "DOM3 Core" ) }}</td>
+   <td>Introduzida</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<ul>
+ <li>Elemento {{HTMLElement("base")}} (HTML)</li>
+ <li>Atributo <code><a href="/pt-BR/docs/XML/xml:base">xml:base</a></code> (Documentos XML)</li>
+ <li>{{domxref("Node.baseURIObject")}} – uma variante desta API para complementos da Mozilla e código interno. Retorna a URL base como uma {{interface("nsIURI")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/node/childnodes/index.html b/files/pt-br/web/api/node/childnodes/index.html
new file mode 100644
index 0000000000..f89acb5d8c
--- /dev/null
+++ b/files/pt-br/web/api/node/childnodes/index.html
@@ -0,0 +1,66 @@
+---
+title: Node.childNodes
+slug: Web/API/Node/childNodes
+translation_of: Web/API/Node/childNodes
+---
+<div>
+<div>{{ApiRef("DOM")}}</div>
+</div>
+
+<p>A propriedade somente leitura <code><strong>Node.childNodes</strong></code> retorna uma <em>coleção viva</em> de nós filhos de um dado elemento.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var <var>listaNos</var> = noReferencia.childNodes;
+</pre>
+
+<p><var>listaNos é uma coleção ordenada de objetos node que são filhos do elemento corrente. Se o elemento não tem filhos, então listaNos não contém nenhum nó.</var></p>
+
+<p>A listaNos é uma variável que armazena a lista de nós de childNodes. O tipo dessa lista é {{domxref("NodeList")}}.</p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:js">// parg é uma referência de objeto a um elemento &lt;p&gt;
+
+if (parg.hasChildNodes()) {
+  // Primeiramente verificamos se o objeto não está vazio, se o objeto tem nós filhos
+  var filhos= parg.childNodes;
+
+  for (var i = 0; i &lt; filhos.length; i++) {
+    // fazer algo com cada filho em filhos[i]
+    // NOTE: A lista é viva - adicionar ou remover filhos altera a lista
+  }
+}</pre>
+
+<hr>
+<pre class="brush:js">// Esta é uma forma para remover todos os filhos de um nó
+// box é uma referência de objeto para um elemento com filhos
+
+while (box.firstChild) {
+    // A lista é VIVA, então ela re-indexará a cada chamada
+    box.removeChild(box.firstChild);
+}</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Os itens na coleção de nós são objetos, não strings. Para recuperar dados dos objetos dos nós, você deve usar suas propriedades (e.g.,  <code>noReferencia.childNodes[1].nodeName</code> para recuperar o nome, etc.).</p>
+
+<p>O objeto <code>document</code> tem 2 filhos: a declaração Doctype declaration e o elemento raiz, tipicamente referido como <code>documentElement</code>. (Em documentos (X)HTML este é o elemento <code>HTML</code>)</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1451460987">W3C DOM 2 Core: childNodes</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1451460987">W3C DOM 3 Core: childNodes</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">W3C DOM 3 NodeList interface</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Veja também</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/pt-br/web/api/node/clonenode/index.html b/files/pt-br/web/api/node/clonenode/index.html
new file mode 100644
index 0000000000..fd62b8099d
--- /dev/null
+++ b/files/pt-br/web/api/node/clonenode/index.html
@@ -0,0 +1,175 @@
+---
+title: Node.cloneNode()
+slug: Web/API/Node/cloneNode
+tags:
+  - API
+  - DOM
+  - Precisa de compatibilidade entre Browsers
+  - Referencia
+  - Referência DOM
+  - metodo
+translation_of: Web/API/Node/cloneNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>O método <strong><code>Node.cloneNode()</code></strong> duplica um elemento node (nó) da estrutura de um documento DOM. Ele retorna um clone do elemento para o qual foi invocado.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em><var>dupNode</var></em> = <em><var>node</var></em>.cloneNode(<em><var>deep</var></em>);
+</pre>
+
+<dl>
+ <dt><em>node</em></dt>
+ <dd>O elemento node (nó) a ser clonado 'duplicado'.</dd>
+ <dt><em>dupNode</em></dt>
+ <dd>O novo elemento node (nó) resultado da clonagem do elemento node.</dd>
+ <dt><em>deep {{optional_inline}} [1]</em></dt>
+ <dd>true se os elementos filhos do nó que está sendo clonado devem ser clonados juntos, ou false para clonar apenas o nó específico dispensando, assim, qualquer elemento DOM filho. Veja os exemplos abaixo.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Nota:</strong> Na especificação do DOM4 (implementado no Gecko 13.0 {{geckoRelease(13)}}), o argumento <code>deep</code> é opcional. Se omitido, por padrão, o método age como se o valor de deep fosse setado como true durante a sua execução.   Para criação de clones superficiais, o argumento <code>deep</code> deve ser setado como <code>false</code>.</p>
+
+<p>Este comportamento foi alterado na última especificação. Se omitido o argumento deep, o método irá interpretar o valor de deep como se fosse false. Embora ele continue opcional, é recomendado que você sempre observe o argumento deep para fins de compatibilidade anterior e posterior. Com o Gecko 28.0 {{geckoRelease(28)}}), foi advertido aos desenvolvedores para não omitirem o argumento. Iniciado com o Gecko 29.0 {{geckoRelease(29)}}), um clone superficial é o padrão ao invés de um clone aprofundado.</p>
+</div>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">&lt;div id="paragrafos"&gt;
+    &lt;p&gt;Texto parágrafo&lt;/p&gt;
+&lt;/div&gt;
+
+//Obtém o elemento div
+var div_p = document.getElementById("paragrafos");
+
+//Obtém o primeiro filho do elemento div
+var p = div_p.firstChild;
+
+//Clona o elemento, no caso, um parágrafo
+var p_clone = p.cloneNode(true);
+
+//Adiciona o clone do elemento &lt;p&gt; ao elemento &lt;div&gt;
+div_p.appendChild(p_clone);
+
+</pre>
+
+<h2 id="Notas">Notas</h2>
+
+<p>A clonagem de um elemento node copia todos os seus atributos e valores. Porém, não tem o mesmo comportamento em relação aos "event listeners".</p>
+
+<p>O elmento node resultante da ação de clonagem não faz parte da estruturam DOM do documento até que ele seja adicionado utilizando o método appendChild() ou outro similar, conforme exemplo acima.</p>
+
+<p>Se o argumento (deep) for setado como false, os nós filhos do elemento node clonado não serão clonados juntos, assim como os respectivos textos.</p>
+
+<p>Se o argumento (deep) for setado como true, os nós filhos, toda a árvore DOM do elemento clonado, será clonada junto.</p>
+
+<div class="warning"><strong>Cuidado:</strong> <code>cloneNode()</code> pode duplicar IDs em um documento.</div>
+
+<p>Se o elemento node (nó) clonado tiver uma ID e o novo elemento node resultante da clonagem for ser inserido no mesmo documento, a ID de um dos nós deve ser alterada para que observem o princípio de unicidade. Em outras palavras, um mesmo documento não pode ter elementos com IDs iguais. Se for o caso de trabalhar com manipulação de elementos DOM através do atributo "name", tome cuidado em observá-lo.</p>
+
+<p>Clonagem de node (nó)  para um documento diferente, use o seguinte método: {{domxref("Document.importNode()")}}.</p>
+
+<h2 id="Specificações">Specificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentários</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Definição Inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browsers">Compatibilidade de Browsers</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>(deep)</code> como parâmetro opcional</td>
+   <td>
+    <p>{{CompatVersionUnknown}}<sup>[1]</sup></p>
+   </td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}<sup>[1]</sup></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>(deep)</code> como parâmetro opcional</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Valor padrão para o argumento (<code>deep)</code> é <code>false</code>.</p>
diff --git a/files/pt-br/web/api/node/contains/index.html b/files/pt-br/web/api/node/contains/index.html
new file mode 100644
index 0000000000..e468ac6bd3
--- /dev/null
+++ b/files/pt-br/web/api/node/contains/index.html
@@ -0,0 +1,98 @@
+---
+title: Node.contains
+slug: Web/API/Node/contains
+translation_of: Web/API/Node/contains
+---
+<div>
+<div>{{ApiRef("DOM")}}</div>
+</div>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>Indica se um nó é um descendente de um dado nó.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">node.contains( otherNode )
+</pre>
+
+<ul>
+ <li><code>node</code> é o nó que está sendo comparado.</li>
+ <li><code>otherNode</code> é o nó contra o qual está sendo comparado.</li>
+</ul>
+
+<p>O valor de retorno é <code>true</code> se <code>otherNode</code> é um descendente de um nó ou o próprio nó. Caso contrário o valor de retorno é <code>false</code>.</p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<p>Esta função verifica se um elemento está no corpo da página. As <code>contains</code> is inclusive and determining if the body contains itself isn't the intention of <code>isInPage</code> this case explicitly returns <code>false</code>.</p>
+
+<pre class="brush:js">function isInPage(node) {
+  return (node === document.body) ? false : document.body.contains(node);
+}</pre>
+
+<ul>
+ <li><code>node</code> é o nó <span id="result_box" lang="pt"><span class="hps">que</span> <span class="hps">desejamos verificar</span> se está <span class="hps">no</span> </span><code>&lt;body&gt;</code>.</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>Recurso</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>5.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5.2.2 <a href="https://code.google.com/p/doctype-mirror/wiki/ArticleNodeContains" title="https://code.google.com/p/doctype-mirror/wiki/ArticleNodeContains">[1]</a><a href="https://github.com/okfn/annotator/blob/master/src/range.coffee#L366" title="https://github.com/okfn/annotator/blob/master/src/range.coffee#L366">[2]</a></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/domcore/#dom-node-contains" title="http://www.w3.org/TR/domcore/#dom-node-contains">DOM Level 4: contains</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Ver também</h2>
+
+<ul>
+ <li>{{domxref("Node.hasChildNodes")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/node/entendendo_o_uso_do_método_appendchild-javascript/index.html b/files/pt-br/web/api/node/entendendo_o_uso_do_método_appendchild-javascript/index.html
new file mode 100644
index 0000000000..a05abeae88
--- /dev/null
+++ b/files/pt-br/web/api/node/entendendo_o_uso_do_método_appendchild-javascript/index.html
@@ -0,0 +1,55 @@
+---
+title: Entendendo o uso do método appendChild em javascript
+slug: Web/API/Node/Entendendo_o_uso_do_método_AppendChild-javascript
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<h2 id="Summary" name="Summary">Resumo</h2>
+
+<p>Adiciona um nó ao final da lista de filhos de um nó pai especificado. Se o nó já existir no documento, ele é removido de seu nó pai atual antes de ser adicionado ao novo pai.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var filho = <em>elemento</em>.appendChild(<em>filho</em>);</pre>
+
+<ul>
+ <li><code>elemento</code> é o <a href="/pt-BR/docs/DOM/element" title="/en-US/docs/DOM/element">elemento</a> pai.</li>
+ <li><code>filho</code> é o nó a ser adicionado como filho de <code>elemento</code>. Também é devolvido.</li>
+</ul>
+
+<h2 id="Descrição">Descrição</h2>
+
+<p>O método <code>appendChild</code> devolve uma referência ao nó adicionado.</p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:js">// Cria um novo elemento de parágrafo e adiciona-o ao final do documento
+var p = document.createElement("p");
+document.body.appendChild(p);</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Se <code>filho</code> é uma referência a um nó existente no documento, <code>appendChild</code> vai movê-lo de sua posição atual para a nova posição (i.e, não é necessário remover o nó de seu pai atual antes de adicioná-lo a outro nó).</p>
+
+<p>Isso também significa que um nó não pode estar em dois lugares do documento ao mesmo tempo. Assim, se o nó já tem um pai, ele é primeiro removido para, <em>só então</em>, ser adicionado na nova posição.</p>
+
+<p>Você pode usar o método {{domxref("Node.cloneNode")}} para criar uma cópia do nó antes de adicioná-lo ao novo pai. (Note que cópias feitas com o método <code>cloneNode</code> <strong>não </strong>serão mantidas sincronizadas automaticamente)</p>
+
+<p>Este método não permite mover nós entre documentos diferentes. Se você quiser adicionar um nó de um documento diferente (por exemplo para mostrar o resultado de uma requisição AJAX), você precisa primeiro usar o método {{domxref("document.importNode")}}.</p>
+
+<p><code>appendChild()</code> é um dos métodos fundamentais da programação para a web usando o DOM. O método <code>appendChild()</code> insere um novo nó na estrutura do DOM de um documento, e é a segunda parte do processo criar-e-adicionar tão importante na construção de páginas web programaticamente.</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107" title="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107">DOM Level 3 Core: appendChild</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Ver também</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild")}}</li>
+ <li>{{domxref("Node.replaceChild")}}</li>
+ <li>{{domxref("Node.insertBefore")}}</li>
+ <li>{{domxref("Node.hasChildNodes")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/node/firstchild/index.html b/files/pt-br/web/api/node/firstchild/index.html
new file mode 100644
index 0000000000..ab177549a8
--- /dev/null
+++ b/files/pt-br/web/api/node/firstchild/index.html
@@ -0,0 +1,66 @@
+---
+title: Node.firstChild
+slug: Web/API/Node/firstChild
+tags:
+  - API
+  - DOM
+  - Node
+  - Node.firstChild
+translation_of: Web/API/Node/firstChild
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p><code><strong>Node.firstChild</strong></code> é uma propriedade do tipo somente leitura que retorna o node (nó) do primeiro elemento filho de uma árvore DOM ou null no caso do elemento não ter filhos (children). </p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>var childNode</em> = <em>node</em>.firstChild;
+</pre>
+
+<p><strong>node:</strong> elemento node (nó pai) de referência para busca do seu primeiro filho (firstChild) considerada a estrutura DOM.</p>
+
+<p><strong>childNode:</strong> elemento node (nó filho) considerado como primeiro filho (firstChild) de node (pai).</p>
+
+<h2 id="Descrição">Descrição</h2>
+
+<p>childNode é uma referência para o primeiro filho (node) de uma estrutura DOM, um node (nó) que não tem filhos retornará null.</p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<p>Este exemplo demonstra o uso do firstChild e como os espaços em branco "whitespace" de um node (nó) podem interferir. </p>
+
+<pre class="brush:html">&lt;p id="para-01"&gt;
+  &lt;span&gt;First span&lt;/span&gt;
+&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  console.log(p01.firstChild.nodeName);
+&lt;/script&gt;</pre>
+
+<p>No exemplo acima, o console.log() deverá exibir '#text' porque o nó de texto inserido mantém espaços em branco 'whitespace' entre a tag &lt;p id="para-01"&gt; e a tag &lt;span&gt;. Qualquer espaço em branco poderá causar '#text'.</p>
+
+<div class="note">
+<p>"Tabs" também podem causar esse comportamento.</p>
+</div>
+
+<p>Se os espaços em branco for removidos do código, o '#text' não será mais considerado e a tag &lt;span&gt; se tornará o primeiro filho firstChild do parágrafo, conforme exemplo abaixo.</p>
+
+<pre class="brush:html">&lt;p id="para-01"&gt;&lt;span&gt;First span&lt;/span&gt;&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  console.log(p01.firstChild.nodeName)
+&lt;/script&gt;
+</pre>
+
+<p>Agora o console.log() irá exibir 'SPAN'.</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM nível 1 Core: firstChild</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM nível 2 Core: firstChild</a></li>
+</ul>
diff --git a/files/pt-br/web/api/node/index.html b/files/pt-br/web/api/node/index.html
new file mode 100644
index 0000000000..8b265cdbd5
--- /dev/null
+++ b/files/pt-br/web/api/node/index.html
@@ -0,0 +1,303 @@
+---
+title: Node
+slug: Web/API/Node
+translation_of: Web/API/Node
+---
+<div>{{Apiref("DOM")}}</div>
+
+<p><strong><code>Node</code></strong> é uma interface da qual diversos tipos do DOM herdam, e que permite que esses tipos sejam tratados de forma similar, por exemplo, herdando os mesmos métodos ou sendo testados da mesma forma.<br>
+ <br>
+ Todos os tipos a seguir herdam essa interface e seus métodos e propriedades (apesar de que alguns podem devolver <code>null</code> em casos particulares em que o método ou a propriedade não são relevantes; ou lançar uma exceção quando adicionando um filho a um tipo de nó que não pode ter filhos): {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("Attr")}}, {{domxref("CharacterData")}} (do qual {{domxref("Text")}}, {{domxref("Comment")}}, e {{domxref("CDATASection")}} herdam), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<p> </p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>Herda propriedades de seus pais, {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt>
+ <dd>Retorna uma {{domxref("DOMString")}} representando o URL base do nó. O conceito de URL base muda de uma linguagem para outra; no HTML, ela corresponde ao protocolo, ao nome de domínio e a estrutura de diretório; tudo isso até a última <code>'/'</code>.</dd>
+ <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}</dt>
+ <dd>Retorna um objeto {{ Interface("nsIURI") }}, representando o URL base do nó. <em>(Indisponível para conteúdo Web)</em></dd>
+ <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt>
+ <dd>Retorna um objeto {{domxref("NodeList")}} "vivo" contendo todos os filhos deste nó. Dizer que um objeto {{domxref("NodeList")}} é vivo significa que se houver alguma mudança em um dos filhos deste nó, o objeto {{domxref("NodeList")}} é automaticamente atualizado com tais mudanças.</dd>
+ <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt>
+ <dd>Retorna um {{domxref("Node")}} representando o primeiro filho direto do nó ou <code>null</code>, caso o nó não tenha nenhum filho.</dd>
+ <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt>
+ <dd>Retorna um {{domxref("Node")}} representando o último filho direto do elemento ou <code>null</code>, caso o elemento não tenha nenhum filho.</dd>
+ <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt>
+ <dd>Retorna um {{domxref("Node")}} representando o próximo elemento na árvore ou <code>null</code>, caso tal nó não exista.</dd>
+ <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt>
+ <dd>Retorna uma {{domxref("DOMString")}} contendo o nome do elemento, do <code>Node</code>. A estrutura do nome irá mudar conforme o tipo do elemento. Veja as diferenças na documentação do método {{domxref("Node.nodeName")}}.  </dd>
+ <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}</dt>
+ <dd>Uma interface {{ Interface("nsIPrincipal") }} representando o nó principal.</dd>
+ <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt>
+ <dd>Retorna um <code>unsigned short</code> representando o tipo do nodo. Valores possíveis são:</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nome</th>
+   <th scope="col">Valor</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>ELEMENT_NODE</code></td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td><code>ATTRIBUTE_NODE</code></td>
+   <td>2</td>
+  </tr>
+  <tr>
+   <td><code>TEXT_NODE</code></td>
+   <td>3</td>
+  </tr>
+  <tr>
+   <td><code>CDATA_SECTION_NODE</code></td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td><code>ENTITY_REFERENCE_NODE</code></td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td><code>ENTITY_NODE</code></td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td><code>PROCESSING_INSTRUCTION_NODE</code></td>
+   <td>7</td>
+  </tr>
+  <tr>
+   <td><code>COMMENT_NODE</code></td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_NODE</code></td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_TYPE_NODE</code></td>
+   <td>10</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_FRAGMENT_NODE</code></td>
+   <td>11</td>
+  </tr>
+  <tr>
+   <td><code>NOTATION_NODE</code></td>
+   <td>12</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{domxref("Node.nodeValue")}}</dt>
+ <dd>Retorna / Define o valor do nó atual</dd>
+ <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt>
+ <dd>Retorna o {{domxref("Document")}} qual esse nó pertence. Se o nó em si é um documento, retorna <code>null</code>.</dd>
+ <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt>
+ <dd>Retorna um {{domxref("Node")}} que é pai desse nó. Se não existe tal nó, como, por exemplo, se esse nó é o topo da árvore ou se ele não participa de uma árvore, essa propriedade retorna <code>null</code>.</dd>
+ <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt>
+ <dd>Retorna um {{domxref("Node")}} representando o último nó em uma árvore ou <code>null</code> se não existe tal nodo.</dd>
+ <dt>{{domxref("Node.textContent")}}</dt>
+ <dd>Retorna / Define o conteúdo textual de um elemento e de todos os seus descendentes.<br>
+ <br>
+  </dd>
+</dl>
+
+<h3 id="Propriedades_descontinuadas">Propriedades descontinuadas</h3>
+
+<dl>
+ <dt>{{domxref("Node.rootNode")}} {{readOnlyInline}} {{deprecated_inline}}</dt>
+ <dd>Retorna um objeto {{domxref("Node")}} representando o nó mais alto em uma árvore, ou o nó atual, se ele for o mais alto da árvore. Isso foi substituído por {{domxref("Node.getRootNode()")}}.</dd>
+ <dt>
+ <h3 id="Propriedades_obsoletas">Propriedades obsoletas</h3>
+ </dt>
+ <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Retorna um {{domxref("DOMString")}} representando a parte local do nome qualificado de um elemento.
+ <div class="note">
+ <p><strong>Nota:</strong> No Firefox 3.5 e nas versões anteriores, a propriedade coloca em caixa alta o nome local de elementos HTML (mas não elementos XHTML). Em versões posteriores, isso não acontece, então a propriedade está em caixa baixa para ambos HTML e XHTML. {{gecko_minversion_inline("1.9.2")}}</p>
+ </div>
+ </dd>
+ <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>O espaço de nomes URI desse nó, ou <code>null</code> se não estiver no espaço de nomes.
+ <div class="note">
+ <p><strong>Nota:</strong> No Firefox 3.5 e nas versões anteriores, elementos HTML estão no espaço de nomes. Em versões posteriores, elementos HTML estão em <code><a class="linkification-ext external" href="https://www.w3.org/1999/xhtml/" style="outline: 1px dotted; outline-offset: 0px;" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml/</a></code>, nas árvores HTML e XML. {{gecko_minversion_inline("1.9.2")}}</p>
+ </div>
+ </dd>
+ <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>É um {{domxref("DOMString")}} representando o espaço de nomes do nó, ou <code>null</code> se nenhum prefixo é especificado.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p> </p>
+
+<ul>
+ <li>{{domxref("Node.appendChild")}}</li>
+ <li>{{domxref("Node.cloneNode")}}</li>
+ <li>{{domxref("Node.compareDocumentPosition")}}</li>
+ <li>{{domxref("Node.contains")}}</li>
+ <li>{{domxref("Node.getFeature")}} {{obsolete_inline("7.0")}}</li>
+ <li>{{domxref("Node.getUserData")}} {{obsolete_inline("22.0")}}</li>
+ <li>{{domxref("Node.hasAttributes")}} {{obsolete_inline("22.0")}}</li>
+ <li>{{domxref("Node.hasChildNodes")}}</li>
+ <li>{{domxref("Node.insertBefore")}}</li>
+ <li>{{domxref("Node.isDefaultNamespace")}}</li>
+ <li>{{domxref("Node.isEqualNode")}}</li>
+ <li>{{domxref("Node.isSameNode")}} {{deprecated_inline("9.0")}} {{obsolete_inline("10.0")}}</li>
+ <li>{{domxref("Node.isSupported")}} {{obsolete_inline("22.0")}}</li>
+ <li>{{domxref("Node.lookupPrefix")}}</li>
+ <li>{{domxref("Node.lookupNamespaceURI")}}</li>
+ <li>{{domxref("Node.normalize")}}</li>
+ <li>{{domxref("Node.removeChild")}}</li>
+ <li>{{domxref("Node.replaceChild")}}</li>
+ <li>{{domxref("Node.setUserData")}} {{obsolete_inline("22.0")}}</li>
+</ul>
+
+<p> </p>
+
+<h2 id="Constantes">Constantes</h2>
+
+<p>Veja também {{domxref("Node.nodeType")}}</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Nome</th>
+   <th>Valor</th>
+  </tr>
+  <tr>
+   <td><code>ELEMENT_NODE</code></td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td><code>ATTRIBUTE_NODE</code></td>
+   <td>2</td>
+  </tr>
+  <tr>
+   <td><code>TEXT_NODE</code></td>
+   <td>3</td>
+  </tr>
+  <tr>
+   <td><code>DATA_SECTION_NODE</code></td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td><code>ENTITY_REFERENCE_NODE</code></td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td><code>ENTITY_NODE</code></td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td><code>PROCESSING_INSTRUCTION_NODE</code></td>
+   <td>7</td>
+  </tr>
+  <tr>
+   <td><code>COMMENT_NODE</code></td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_NODE</code></td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_TYPE_NODE</code></td>
+   <td>10</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_FRAGMENT_NODE</code></td>
+   <td>11</td>
+  </tr>
+  <tr>
+   <td><code>NOTATION_NODE</code></td>
+   <td>12</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_DISCONNECTED</code></td>
+   <td>0x01</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_PRECEDING</code></td>
+   <td>0x02</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_FOLLOWING</code></td>
+   <td>0x04</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_CONTAINS</code></td>
+   <td>0x08</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_CONTAINED_BY</code></td>
+   <td>0x10</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</code></td>
+   <td>0x20</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemplos_de_código">Exemplos de código</h2>
+
+<h3 id="Recuperar_todos_os_nós_filhos">Recuperar todos os nós filhos</h3>
+
+<p>A função a seguir percorre todos os nós filhos de um nó recursivamente e executa uma função de callback em cada um deles (e no nó pai também).</p>
+
+<pre class="brush: js">function DOMComb (oParent, oCallback) {
+  if (oParent.hasChildNodes()) {
+    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
+      DOMComb(oNode, oCallback);
+    }
+  }
+  oCallback.call(oParent);
+}</pre>
+
+<h4 id="Sintaxe">Sintaxe</h4>
+
+<pre>DOMComb(parentNode, callbackFunction);</pre>
+
+<h4 id="Descrição">Descrição</h4>
+
+<p>Percorre todos os nós filhos de <code>parentNode</code> recursivamente e o próprio <code>parentNode</code> e executa a <code>callbackFunction</code> em cada um deles como <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a>.</p>
+
+<h4 id="Parâmetros">Parâmetros</h4>
+
+<dl>
+ <dt><code>parentNode</code></dt>
+ <dd>O nó pai (<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code><code><strong> </strong>do tipo <strong>Node</strong></code>).</dd>
+ <dt><code>callbackFunction</code></dt>
+ <dd>A função de callback (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd>
+</dl>
+
+<h4 id="Exemplo_de_uso">Exemplo de uso</h4>
+
+<p>O exemplo a seguir envia para a função <code>console.log</code> o conteúdo textual do body:</p>
+
+<pre class="brush: js">function imprimeConteudo () {
+  if (this.nodeValue) { console.log(this.nodeValue); }
+}
+
+onload = function () {
+  DOMComb(document.body, imprimeConteudo);
+};</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1950641247">DOM Level 1 Core: Node interface</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1950641247">DOM Level 2 Core: Node interface</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1950641247">DOM Level 3 Core: Node interface</a></li>
+ <li><a href="http://dom.spec.whatwg.org/#interface-node" title="http://dom.spec.whatwg.org/#interface-node">DOM Standard: Node Interface</a></li>
+</ul>
diff --git a/files/pt-br/web/api/node/innertext/index.html b/files/pt-br/web/api/node/innertext/index.html
new file mode 100644
index 0000000000..1ab5e81027
--- /dev/null
+++ b/files/pt-br/web/api/node/innertext/index.html
@@ -0,0 +1,86 @@
+---
+title: Node.innerText
+slug: Web/API/Node/innerText
+translation_of: Web/API/HTMLElement/innerText
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p><code><strong>Node.innerText</strong></code> é uma propriedade que representa o conteúdo textual "renderizado" de um nó e seus descendentes. Usada como <a href="/pt-BR/docs/">getter</a>, retorna de maneira aproximada o texto que o usuário obteria caso tivesse selecionado o conteúdo e copiado para a área de transferência. Este recurso fora introduzido originalmente pelo Internet Explorer, mas foi oficialmente especificado no padrão HTML apenas em 2016, sendo adotado por todos os principais navegadores a partir de então.</p>
+
+<p>{{domxref("Node.textContent")}} é uma alternativa similar, embora existam diferenças significativas entre as duas.</p>
+
+<h2 id="Especificação">Especificação</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Introduzida, baseado no <a href="https://github.com/rocallahan/innerText-spec">rascunho da especifição de innerText</a>. Ver <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> e <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> para histórico.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>4</td>
+   <td>{{ CompatGeckoDesktop(45) }}</td>
+   <td>6</td>
+   <td>9.6 (provavelmente antes)</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>2.3 (provavelmente antes)</td>
+   <td>{{ CompatGeckoMobile(45) }}</td>
+   <td>10 (provavelmente antes)</td>
+   <td>12</td>
+   <td>4.1 (provavelmente antes)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+ <li>{{domxref("Element.innerHTML")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/node/insertbefore/index.html b/files/pt-br/web/api/node/insertbefore/index.html
new file mode 100644
index 0000000000..d556885be7
--- /dev/null
+++ b/files/pt-br/web/api/node/insertbefore/index.html
@@ -0,0 +1,152 @@
+---
+title: Node.insertBefore
+slug: Web/API/Node/insertBefore
+translation_of: Web/API/Node/insertBefore
+---
+<div>
+<div>{{ApiRef("DOM")}}</div>
+</div>
+
+<p>O método <strong><code>Node.insertBefore()</code> </strong>insere um nó antes do nó de referência como um filho de um nó pai especificado. Se o filho especificado for uma referência a um nó existente no documento, <code>insertBefore()</code> o moverá de sua posição atual para a nova posição (não há necessidade de remover o nó de seu nó pai antes de anexá-lo a outro nó).</p>
+
+<p>Isso significa que um nó não pode estar em dois pontos do documento simultaneamente. Portanto, se o nó já tiver um pai, o nó será removido pela primeira vez e inserido na nova posição. O {{domxref("Node.cloneNode()")}} pode ser usado para fazer uma cópia do nó antes de anexá-lo ao novo pai. Note que as cópias feitas com <code>cloneNode()</code> não serão automaticamente mantidas em sincronia.</p>
+
+<p> </p>
+
+<p>Se o nó de referência for <code>null</code>, o nó especificado será incluído no final da lista de filhos do nó pai especificado.</p>
+
+<p>Se o filho especificado for um {{domxref("DocumentFragment")}}, todo o conteúdo do <code>DocumentFragment</code> será movido para a lista de filhos do nó pai especificado.</p>
+
+<p> </p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>elementoInserido</em> = <em>elementoPai</em>.insertBefore(<em>novoElemento</em>, <em>elementoDeReferencia</em>);
+</pre>
+
+<p> </p>
+
+<ul>
+ <li><code>elementoInserido</code> O nó sendo inserido, que é <code>novoElemento</code></li>
+ <li><code>elementoPai</code> Pai do nó recentemente inserido.</li>
+ <li><code>novoElemento</code> O nó a ser inserido.</li>
+ <li><code>elementoDeReferencia</code> O nó antes do qual o <code>novoElemento</code> será inserido.</li>
+</ul>
+
+<p> </p>
+
+<p>Se <var>elementoDeReferencia</var> for <code>null</code>, <var>novoElemento</var> será inserido no fim da lista de nós filhos.</p>
+
+<div class="blockIndicator note">
+<p><code>elementoDeReferencia</code> não é um parâmetro opcional - você deve passar explicitamente um <code>Node</code> ou <code>null</code>. Deixar de fornecer ou passar valores inválidos pode <a href="https://code.google.com/p/chromium/issues/detail?id=419780">ter comportamento diferente</a> em diferentes versões de navegadores.</p>
+</div>
+
+<p> </p>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>O valor retornado é o filho incluído, exceto quando <code>newNode</code> é um {{domxref("DocumentFragment")}}, caso em que o {{domxref("DocumentFragment")}} vazio é retornado.</p>
+
+<p> </p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:html">&lt;div id="elementoPai"&gt;
+  &lt;span id="elementoFilho"&gt;foo bar&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+// Cria um novo elemento &lt;span&gt; vazio
+var sp1 = document.createElement("span");
+
+// Guarda a <span style="line-height: normal;">referência</span><span style="line-height: normal;"> do elemento atraś do qual nos queremos inserir o novo elemento</span>
+var sp2 = document.getElementById("<span style="line-height: normal;">elementoFilho</span><span style="line-height: normal;">");</span>
+// Guarda a referência do elemento pai
+var divPai = sp2.parentNode;
+
+// Insere o novo elemento no DOM antes de sp2
+<span style="line-height: normal;">divPai</span>.insertBefore(sp1, sp2);
+&lt;/script&gt;
+</pre>
+
+<p>Não existe um método <code>insertAfter</code>. Mas ele pode ser emulado combinando o método <code>insertBefore</code> com <code><a href="/en-US/docs/DOM/Node.nextSibling" title="DOM/Node.nextSibling">nextSibling</a></code>.</p>
+
+<p>No exemplo anterior, <code>sp1</code> poderia ser inserido após <code>sp2</code> desta forma:</p>
+
+<pre><code>divPai.insertBefore(sp1, sp2.nextSibling);</code></pre>
+
+<p>Se <code>sp2</code> não possuir um próximo nó, significa que ele deve ser o último filho — <code>sp2.nextSibling</code> retorna <code>null</code>, e <code>sp1</code> é inserido ao fim da  da lista de nós filhos (logo após sp2).</p>
+
+<h2 id="Example2" name="Example2">Exemplo 2</h2>
+
+<p>Inserir um elemento antes do primeiro nó filho, usando a propriedade <a href="/en-US/docs/DOM/Node.firstChild" title="Node.firstChild">firstChild</a>.</p>
+
+<pre class="brush:js">// Guarda a referêncis do elemento no quela nóe queremos inserir o novo nó
+var elementoPai = document.getElementById('<span style="line-height: normal;">elementoPai</span><span style="line-height: normal;">');</span>
+// Guarda a referência do primeiro filho
+var primeiroFilho = elementoPai.firstChild;
+
+// Cria um novo elemento
+var novoElemento = document.createElement("div");
+
+// Insere o novo elemento antes do primeiro filho
+elementoPai.insertBefore(novoElemento, primeiroFilho);
+</pre>
+
+<p>Quando o elemento não possui o primeiro filho, então <code>firstChild</code> é <code>null</code>. O elemento ainda será inserido no pai, mas após o último filho. Pois se o elemento pai não possui primeiro filho, ele também não possui o último filho. Conseqüentemente, o novo elemento será o único elemento após a inserção.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade de navegadores</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</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>Funcionalidade</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-952280727">insertBefore</a></li>
+</ul>
diff --git a/files/pt-br/web/api/node/isconnected/index.html b/files/pt-br/web/api/node/isconnected/index.html
new file mode 100644
index 0000000000..52aee94508
--- /dev/null
+++ b/files/pt-br/web/api/node/isconnected/index.html
@@ -0,0 +1,118 @@
+---
+title: Node.isConnected
+slug: Web/API/Node/isConnected
+translation_of: Web/API/Node/isConnected
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>A propriedade somente-leitura <strong><code>isConnected</code></strong> da interface {{domxref("Node")}} retorna um boleano indicando se um nó está conectado (direta ou indiretamente) ao contexto do objeto, por exemplo o objeto {{domxref("Document")}} no caso da DOM normal, ou o {{domxref("ShadowRoot")}} no caso de uma shadow DOM.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox notranslate">var <em>isItConnected</em> = <em>nodeObjectInstance</em>.isConnected</pre>
+
+<h3 id="Retorno">Retorno</h3>
+
+<p>Um {{domxref("Boolean")}} que é <code>true</code> se o nó está conectado ao contexto relevante do objeto, e <code>false</code> se não está.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Standard_DOM">Standard DOM</h3>
+
+<p>Um exemplo em um DOM padrão:</p>
+
+<pre class="brush: js notranslate">let test = document.createElement('p');
+console.log(test.isConnected); // Returns false
+document.body.appendChild(test);
+console.log(test.isConnected); // Returns true
+</pre>
+
+<h3 id="Shadow_DOM">Shadow DOM</h3>
+
+<p>Um exemplo em um Shadow DOM:</p>
+
+<pre class="brush: js notranslate">// Cria um raíz Shadow
+var shadow = this.attachShadow({mode: 'open'});
+
+// Cria um CSS para aplicar a Shadow DOm
+var style = document.createElement('style');
+console.log(style.isConnected); // retorna false
+
+style.textContent = `
+.wrapper {
+  position: relative;
+}
+
+.info {
+  font-size: 0.8rem;
+  width: 200px;
+  display: inline-block;
+  border: 1px solid black;
+  padding: 10px;
+  background: white;
+  border-radius: 10px;
+  opacity: 0;
+  transition: 0.6s all;
+  positions: absolute;
+  bottom: 20px;
+  left: 10px;
+  z-index: 3
+}
+`;
+
+// Anexa a estilização criada a Shadow DOM.
+
+shadow.appendChild(style);
+console.log(style.isConnected); // retorna true</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Node.isConnected pode ser polyfilled com o seguinte código para IE10 e EdgeHTML:</p>
+
+<pre class="notranslate">/*
+ * Node.isConnected polyfill para IE and EdgeHTML
+ * 2020-02-04
+ *
+ * Por Eli Grey, https://eligrey.com
+ * Domínio Público.
+ * NENHUMA GARANTIA É EXPRESSADA OU IMPLÍCITA. USE AO SEU PRÓPRIO RISCO.
+ */
+
+if (!('isConnected' in Node.prototype)) {
+  Object.defineProperty(Node.prototype, 'isConnected', {
+    get() {
+      return (
+        !this.ownerDocument ||
+        !(
+          this.ownerDocument.compareDocumentPosition(this) &amp;
+          this.DOCUMENT_POSITION_DISCONNECTED
+        )
+      );
+    },
+  });
+}</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentários</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-node-isconnected','isConnected')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definição Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<div>
+
+
+<p>{{Compat("api.Node.isConnected")}}</p>
+</div>
diff --git a/files/pt-br/web/api/node/lastchild/index.html b/files/pt-br/web/api/node/lastchild/index.html
new file mode 100644
index 0000000000..3bfccdafb0
--- /dev/null
+++ b/files/pt-br/web/api/node/lastchild/index.html
@@ -0,0 +1,34 @@
+---
+title: Node.lastChild
+slug: Web/API/Node/lastChild
+tags:
+  - API
+  - DOM
+  - Elements
+  - lastChild
+translation_of: Web/API/Node/lastChild
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Node.lastChild</strong></code> é uma propriedade do tipo somente leitura (read-only) que retorna o último elemento filho (node) de uma estrutura DOM. Se seu parentNode for um Element, ele retornará um Element node, um text node, ou um comment node. Retornará null se o elemento de referência não tiver elementos filhos child. É extremamente recomendável que você conheça a estrutura DOM para um melhor aprendizado e entendimento.</p>
+
+<h2 id="Syntax_and_Values" name="Syntax_and_Values">Syntax</h2>
+
+<pre class="syntaxbox">var last_child = element.lastChild
+</pre>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush: js">// Obtém um elemento &lt;ul&gt;
+var ul = document.getElementById('lista');
+
+// Obtém o último &lt;li&gt; pertencente a estrutura &lt;ul&gt; obtida
+var li_last = ul.lastChild;
+</pre>
+
+<h2 id="Specification" name="Specification">Specificações</h2>
+
+<ul>
+ <li>{{Spec("http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB", "DOM nível 2: lastChild", "REC")}}</li>
+ <li>{{Spec("http://dom.spec.whatwg.org/#dom-node-lastchild", "DOM padrão: lastChild")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/node/nextsibling/index.html b/files/pt-br/web/api/node/nextsibling/index.html
new file mode 100644
index 0000000000..5bdb2b888e
--- /dev/null
+++ b/files/pt-br/web/api/node/nextsibling/index.html
@@ -0,0 +1,66 @@
+---
+title: Node.nextSibling
+slug: Web/API/Node/nextSibling
+translation_of: Web/API/Node/nextSibling
+---
+<div>
+<div>{{ApiRef("DOM")}}</div>
+</div>
+
+<h2 id="Summary" name="Summary">Resumo</h2>
+
+<p>Retorna o nó seguinte ao especificado dentro do lista de filhos do seu pai({{domxref("Node.childNodes","childNodes")}}), ou <code>null</code> se o nó especificado for o último nó da lista.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>proximoNo</var> = <var>no</var>.nextSibling
+</pre>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:html">&lt;div id="div-01"&gt;Aqui esta a div-01&lt;/div&gt;
+&lt;div id="div-02"&gt;Aqui esta a div-02&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+var el = document.getElementById('div-01').nextSibling;
+
+document.write('&lt;p&gt;Nós irmãos de div-01&lt;/p&gt;&lt;ol&gt;');
+
+while (el) {
+  document.write('&lt;li&gt;' + el.nodeName + '&lt;/li&gt;');
+  el = el.nextSibling;
+}
+
+document.write('&lt;/ol&gt;');
+&lt;/script&gt;
+
+/**************************************************
+     O seguinte texto será escrito na página quando ela carregar:
+
+     Nós irmãos de div-01
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+      5. P
+      6. OL
+**************************************************/
+</pre>
+
+<p><span style="line-height: 1.5;">No exemplo acima, pode ser visto que nós </span><code style="font-size: 14px;">#text</code><span style="line-height: 1.5;"> são inseridos no DOM onde espaços em branco aparecem na marcação entre as tags (ex.: após o fechamento da tag de um elemento e antes da abertura da próxima tag). Nenhum espaço em branco é criado entre  elementos inseridos pelo comando </span><code style="font-size: 14px;">document.write</code><span style="line-height: 1.5;">.</span></p>
+
+<p>A possível inclusão de nós de texto no DOM deve ser permitida quando navegar pelo mesmo usando <code>nextSibling</code>.</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a></li>
+</ul>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Element.nextElementSibling")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/node/parentnode/index.html b/files/pt-br/web/api/node/parentnode/index.html
new file mode 100644
index 0000000000..e68aef8eca
--- /dev/null
+++ b/files/pt-br/web/api/node/parentnode/index.html
@@ -0,0 +1,116 @@
+---
+title: Node.parentNode
+slug: Web/API/Node/parentNode
+tags:
+  - API
+  - DOM
+  - Node
+  - ParentNode
+translation_of: Web/API/Node/parentNode
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p><code><strong>Node.parentNode</strong></code> é uma propriedade DOM somente leitura que retorna o nó (node) parente de um Node referenciado na árvore DOM. É extremamente aconselhável que você conheça a estrutura DOM para um melhor estudo e aprendizado.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>parentNode</em> = <em>node</em>.parentNode
+</pre>
+
+<p><code>parentNode</code> é o node parente do node referenciado. O parente de um elemento é um Element node, um Document node, ou um DocumentFragment node. Será muito complicado entender tudo isso sem conhecer a estrutura DOM e seus Elements.</p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:js">// Exemplo de como obter um elemento pai
+parente = node.parentNode; // Retorna o elemento pai
+
+// Obtém o primeiro &lt;li&gt; de uma lista
+var li = document.getElementsById('li-first');
+// A partir do &lt;li&gt; obtido, obtém o element &lt;ul&gt;
+var ul = li.parentNode;
+
+// Estrutura com parágrafos dentro de uma div
+var p = document.getElementsByTagName('p');
+var div = p[0].parentNode;
+
+if (node.parentNode) {
+  // remove um node da árvore (estrutura) DOM, a menos que
+  // ele já não exista não estrutura
+  node.parentNode.removeChild(node);
+}</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p><code>Document</code> e<code> DocumentFragment</code> <a href="/en-US/docs/DOM/Node.nodeType" title="DOM/Node.nodeType">nodes</a> nunca podem ter um node parent, sendo assim <code>parentNode</code> sempre retornará <code>null</code>. Também retornará null se o node já tiver sido criado e não ainda não estiver anexado à estrutura DOM.</p>
+
+<h2 id="Compatibilidade_entre_Browsers">Compatibilidade entre Browsers</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>0.2</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>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification"> </h2>
+
+<h2 id="Specification" name="Specification">Specificações</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM nível 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 nível 3 Core: Node.parentNode</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Veja também</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.previousSibling")}}</li>
+ <li>{{Domxref("Node.removeChild")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/node/previoussibling/index.html b/files/pt-br/web/api/node/previoussibling/index.html
new file mode 100644
index 0000000000..ad5a88c16c
--- /dev/null
+++ b/files/pt-br/web/api/node/previoussibling/index.html
@@ -0,0 +1,46 @@
+---
+title: Node.previousSibling
+slug: Web/API/Node/previousSibling
+translation_of: Web/API/Node/previousSibling
+---
+<div>
+<div>{{ApiRef("DOM")}}</div>
+</div>
+
+<h2 id="Summary" name="Summary">Resumo</h2>
+
+<p>Retorna o nó que precede o nó especificado na lista de <a href="/en-US/docs/Web/API/Node.childNodes" style="line-height: 1.5;" title="DOM/Node.childNodes">childNodes</a> do nó pai, retorna null se o nó especificado é o primeiro desta lista.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>previousNode</var> = <em>node</em>.previousSibling;
+</pre>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:js">// &lt;a&gt;&lt;b1 id="b1"/&gt;&lt;b2 id="b2"/&gt;&lt;/a&gt;
+
+alert(document.getElementById("b1").previousSibling); // null
+alert(document.getElementById("b2").previousSibling.id); // "b1"
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<div><p>Navegador baseados na engine Gecko inserem nós de texto no documento para representar espaços em branco na marcação do fonte.
+    Portanto um nó obtido, por exemplo, usando <a href="/pt-BR/docs/Web/API/Node/firstChild" title="Node.firstChild é uma propriedade do tipo somente leitura que retorna o node (nó) do primeiro elemento filho de uma árvore DOM ou null no caso do elemento não ter filhos (children)."><code>Node.firstChild</code></a> ou <a href="/pt-BR/docs/Web/API/Node/previousSibling" title="Retorna o nó que precede o nó especificado na lista de childNodes do nó pai, retorna null se o nó especificado é o primeiro desta lista."><code>Node.previousSibling</code></a> pode fazer referência a um
+    espaço em banco ao invés do elemento que o autor pretendia obter.</p>
+
+    <p>Veja <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>
+    Para mais informações.
+    </p></div>
+
+<p>Para navegar no sentido contrário da lista de nós filhos use <a href="/en-US/docs/Web/API/Node.nextSibling" style="line-height: 1.5;" title="DOM/Node.nextSibling">Node.nextSibling</a>.</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li>
+</ul>
diff --git a/files/pt-br/web/api/node/removechild/index.html b/files/pt-br/web/api/node/removechild/index.html
new file mode 100644
index 0000000000..9eb927294d
--- /dev/null
+++ b/files/pt-br/web/api/node/removechild/index.html
@@ -0,0 +1,72 @@
+---
+title: Node.removeChild
+slug: Web/API/Node/removeChild
+translation_of: Web/API/Node/removeChild
+---
+<div>
+<div>{{ApiRef("DOM")}}</div>
+</div>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>Remove um nó filho do DOM. Devolve o nó removido.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>var filhoRemovido</em> = <em>elemento</em>.removeChild(<em>filho</em>);
+<em>elemento</em>.removeChild(<em>filho</em>);
+</pre>
+
+<ul>
+ <li><code>filho</code> é o nó filho a ser removido do DOM.</li>
+ <li><code>elemento</code> é o nó pai de <code>filho</code>.</li>
+ <li><code>filhoRemovido</code> contém uma referência ao nó filho removido. <code>filhoRemovido</code> === <code>filho</code>.</li>
+</ul>
+
+<p>O nó filho removido ainda existe em memória, mas não é mais parte do DOM. Você pode reutilizar o nó removido mais tarde no seu código por meio da referência <code>filhoRemovido</code>.</p>
+
+<p>Se <code>filho</code> não for um filho do nó <code>elemento</code>, o método lança uma exceção. Isto também acontecerá se <code>filho</code> era, de fato, um filho de <code>elemento</code> no momento da chamada, mas foi removido por um manipulador de eventos invocado enquanto o elemento estava sendo removido (por exemplo, blur).</p>
+
+<h2 id="Example" name="Example">Exemplos</h2>
+
+<pre>&lt;!--Código HTML de exemplo--&gt;
+
+&lt;div id="topo" align="center"&gt;
+  &lt;div id="interno"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush:js">// Removendo um elemento específico quando se conhece seu pai
+var d = document.getElementById("topo");
+var d_interno = document.getElementById("interno");
+var noRemovido = d.removeChild(d_interno);
+</pre>
+
+<pre class="brush:js">// Removendo um elemento específico sem precisar especificar seu pai
+var no = document.getElementById("interno");
+if (no.parentNode) {
+  no.parentNode.removeChild(no);
+}
+</pre>
+
+<pre class="brush:js">// Removendo todos os nós filhos de um elemento
+var elemento = document.getElementById("topo");
+while (elemento.firstChild) {
+  elemento.removeChild(elemento.firstChild);
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Node.replaceChild")}}</li>
+ <li>{{domxref("Node.parentNode")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/node/replacechild/index.html b/files/pt-br/web/api/node/replacechild/index.html
new file mode 100644
index 0000000000..e6d78e3121
--- /dev/null
+++ b/files/pt-br/web/api/node/replacechild/index.html
@@ -0,0 +1,69 @@
+---
+title: Node.replaceChild
+slug: Web/API/Node/replaceChild
+translation_of: Web/API/Node/replaceChild
+---
+<div>
+<div>{{ApiRef("DOM")}}</div>
+</div>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>Substitui o elemento filho especificado por outro.</p>
+
+<p><strong style="font-size: 2.142857142857143rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Sintaxe</strong></p>
+
+<pre class="syntaxbox"><em>replacedNode</em> = <em>parentNode</em>.replaceChild(<em>newChild</em>, <em>oldChild</em>);
+</pre>
+
+<ul>
+ <li><code>newChild</code> é o novo elemento que será inserido no lugar do <code>oldChild</code>. Se já existir no DOM, será removido primeiro para depois ser inserido.</li>
+ <li><code>oldChild</code> é o elemento existente que será substituído.</li>
+ <li><code>replacedNode</code> é elemento substituído. É o mesmo elemento que <span style="font-family: 'Courier New','Andale Mono',monospace;">oldChild.</span></li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:js">// &lt;div&gt;
+//  &lt;span id="childSpan"&gt;foo bar&lt;/span&gt;
+// &lt;/div&gt;
+
+// Cria um novo elemento vazio
+// sem ID, atributos ou conteúdo
+var sp1 = document.createElement("span");
+
+// Adiciona um ID 'newSpan' para o elemento
+sp1.setAttribute("id", "newSpan");
+
+// Adiciona contéudo para o elemento
+var sp1_content = document.createTextNode("new replacement span element.");
+
+// Coloca o conteúdo no elemento
+sp1.appendChild(sp1_content);
+
+// Procura o elemento que será substituído
+var sp2 = document.getElementById("childSpan");
+var parentDiv = sp2.parentNode;
+
+// Substituí o elemento que já existe (sp2) por o novo elemento (sp1)
+parentDiv.replaceChild(sp1, sp2);
+
+// resultado:
+// &lt;div&gt;
+//   &lt;span id="newSpan"&gt;new replacement span element.&lt;/span&gt;
+// &lt;/div&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core: replaceChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-785887307">DOM Level 3 Core: replaceChild</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/node/textcontent/index.html b/files/pt-br/web/api/node/textcontent/index.html
new file mode 100644
index 0000000000..0fb3c38bdb
--- /dev/null
+++ b/files/pt-br/web/api/node/textcontent/index.html
@@ -0,0 +1,138 @@
+---
+title: Node.textContent
+slug: Web/API/Node/textContent
+tags:
+  - API
+  - DOM
+  - Property
+translation_of: Web/API/Node/textContent
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div></div>
+
+<p>A propriedade <code><strong>textContent</strong></code> da interface {{domxref("Node")}} representa o conteúdo de texto de um nó e dos seus descendentes.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> <code>textContent</code> e {{domxref("HTMLElement.innerText")}} são facilmente confundidos, mas <a href="#Differences_from_innerText">os dois possuem importantes diferenças entre sí.</a></p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush: js">var <em>text</em> = <em>Node</em>.textContent;
+<em>Node</em>.textContent = <em>string</em>;
+</pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Uma <code>String</code> ou <code>null</code></p>
+
+<h2 id="Descrição">Descrição</h2>
+
+<p>Ao obter valores desta propriedade:</p>
+
+<ul>
+ <li>Se o nó for um <a href="/en-US/docs/DOM/document">document</a>, um <a href="/en-US/docs/Glossary/Doctype">DOCTYPE</a>, ou uma <a href="/en-US/docs/Web/API/Notation">notation</a>, o <code>textContent</code> retornará <code>null</code>. (Para se obter todo o texto e os <a href="/en-US/docs/Web/API/CDATASection">dados CDATA</a> do documento inteiro, você poderá usar <code><a href="/en-US/docs/DOM/document.documentElement">document.documentElement</a>.textContent</code>.)</li>
+ <li>Se o nó for uma <a href="/en-US/docs/Web/API/CDATASection">seção CDATA</a>, comentário, <a href="/en-US/docs/Web/API/ProcessingInstruction">instrução de processamento</a>, ou um <a href="/en-US/docs/Web/API/Document/createTextNode">text node</a>, o  <code>textContent</code> retornará o texto dentro do nó, i.e., o {{domxref("Node.nodeValue")}}.</li>
+ <li>Para outros tipos de nó, o <code>textContent</code> retornará a concatenação <code>textContent</code> de cada nó filho, exceto comentários e instruções de processamento. Essa é uma string vazia se o nó não tiver filhos.</li>
+</ul>
+
+<p>Definir valores <code>textContent</code> em um nó, remove todos os nós filhos e os substituem por um único nó de texto cujo o valor é a string inserida.</p>
+
+<h3 id="Diferenças_para_o_innerText">Diferenças para o innerText</h3>
+
+<p>Não fique confuso pelas diferenças entre o <code>Node.textContent</code> e o {{domxref("HTMLElement.innerText")}}. Apesar dos nomes parecerem similares, eles possuem importantes diferenças:</p>
+
+<ul>
+ <li><code>textContent</code> obtém o conteúdo de todos os elementos, incluindo os elementos {{HTMLElement("script")}} e {{HTMLElement("style")}}. por outro lado, o <code>innerText</code> mostra apenas os elementos para "leitura humana".</li>
+ <li><code>textContent</code> retorna todos os elementos de um nó. Por outro lado, o  <code>innerText</code> é ciente da estilização e não retorna elementos de texto "escondidos". Além disso, como o <code>innerText</code> leva em consideração os estilos CSS, a leitura do valor de <code>innerText</code> dispara um  {{glossary("reflow")}} para assegurar a atualização dos estilos computados. (Reflows podem ser computacionalmente caros, e devem ser evitados quando for possível.)</li>
+ <li>ao contrário do <code>textContent</code>, alterar o <code>innerText</code> no Internet Explorer (versão 11 e anteriores) remove os nós filhos do elemento e, <em>destroi permanentemente</em> todos os nós de texto descendentes. Isso torna impossível inserir novamente os nós em qualquer outro elemento ou no mesmo elemento.</li>
+</ul>
+
+<h3 id="Diferenças_para_o_innerHTML">Diferenças para o innerHTML</h3>
+
+<p>O {{domxref("Element.innerHTML")}} retorna HTML, Como seu próprio nome indica. As vezes as pessoas usam o <code>innerHTML</code> para obter ou escrever textos dentro de um elemento, mas o <code>textContent</code> possui melhor performance pois seus valores não são analisados como HTML. Além do mais, utilizar <code>textContent</code> pode prevenir <a href="/en-US/docs/Glossary/Cross-site_scripting">ataques XSS</a>.</p>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Dado o seguinte fragmento HTML:</p>
+
+<pre class="brush: html">&lt;div id="divA"&gt;Isto é&lt;span&gt;algum&lt;/span&gt; texto!&lt;/div&gt;</pre>
+
+<p>... Você pode usar <code>textContent</code> para obter o conteúdo de texto do elemento:</p>
+
+<pre class="brush: js">let text = document.getElementById('divA').textContent;
+// Agora a variável de texto é: 'Isto é algum texto!'</pre>
+
+<p>... Ou definir o conteúdo de texto do elemento:</p>
+
+<pre class="brush: js">document.getElementById('divA').textContent = 'Este texto é diferente!';
+// O HTML de divA agora é:
+// &lt;div id="divA"&gt;Este texto é diferente!&lt;/div&gt;
+</pre>
+
+<h2 id="Polyfill_para_o_IE8">Polyfill para o IE8</h2>
+
+<pre class="brush: js">// Fonte: 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",
+     // Passando innerText ou innerText.get diretamente não funciona,
+     // Função wrapper(que envolve) é necessária.
+     {
+       get: function() {
+         return innerText.get.call(this);
+       },
+       set: function(s) {
+         return innerText.set.call(this, s);
+       }
+     }
+   );
+  })();
+}
+</pre>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden"><a href="https://github.com/mdn/browser-compat-data">Estamos convertendo nossos dados de compatibilidade para o formato JSON.</a> Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. <a href="https://developer.mozilla.org/pt-BR/docs/MDN/Contribute/Structures/Compatibility_tables"> Descubra como você pode ajudar!</a></div>
+
+<p>{{Compat("api.Node.textContent")}}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="spectable 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','#dom-node-textcontent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Sem alterações 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>Introduzida</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.innerText")}}</li>
+ <li>{{domxref("Element.innerHTML")}}</li>
+ <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">More on differences between <code>innerText</code> and <code>textContent</code></a> (blog post)</li>
+</ul>
diff --git a/files/pt-br/web/api/nodefilter/index.html b/files/pt-br/web/api/nodefilter/index.html
new file mode 100644
index 0000000000..7aaa6fb99b
--- /dev/null
+++ b/files/pt-br/web/api/nodefilter/index.html
@@ -0,0 +1,163 @@
+---
+title: NodeFilter
+slug: Web/API/NodeFilter
+translation_of: Web/API/NodeFilter
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div>Uma interface <strong><code>NodeFilter</code></strong>  representa um objeto usado para filtrar os nós (elementos), em uma iteração {{ domxref("NodeIterator") }} ou  {{ domxref("TreeWalker") }}. Essas interfaces não conhecem nada sobre o DOM ou sobre como percorrer ou atravessar, elementos; elas apenas sabem como avaliar se um único nó atende aos requisitos do filtro fornecido ou não.</div>
+
+<div> </div>
+
+<div class="note">
+<p>O navegador não fornece nenhum objeto que implemente essa interface. É esperado que o desenvolvedor escreva tal objeto, utilizando o método <code>acceptNode()</code> conforme as suas necessidades, podendo mesclar com objetos do tipo {{domxref("TreeWalker")}} ou {{domxref("NodeIterator")}}  em sua implementação.. </p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Essa interface não implementa, nem herda, nenhuma propriedade.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Essa interface não herda nenhum método.</em></p>
+
+<dl>
+ <dt>{{domxref("NodeFilter.acceptNode()")}}</dt>
+ <dd>Returns an <code>unsigned short</code> that will be used to tell if a given {{domxref("Node")}} must be accepted or not by the {{ domxref("NodeIterator") }} or {{ domxref("TreeWalker") }} iteration algorithm. This method is expected to be written by the user of a <code>NodeFilter</code>. Possible return values are:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Constant</td>
+    <td class="header">Description</td>
+   </tr>
+   <tr>
+    <td><code>FILTER_ACCEPT</code></td>
+    <td>Value returned by the {{ domxref("NodeFilter.acceptNode()") }} method when a node should be accepted.</td>
+   </tr>
+   <tr>
+    <td><code>FILTER_REJECT</code></td>
+    <td>Value to be returned by the {{ domxref("NodeFilter.acceptNode()") }} method when a node should be rejected. For {{ domxref("TreeWalker") }}, child nodes are also rejected. For {{ domxref("NodeIterator") }}, this flag is synonymous with FILTER_SKIP.</td>
+   </tr>
+   <tr>
+    <td><code>FILTER_SKIP</code></td>
+    <td>Value to be returned by {{ domxref("NodeFilter.acceptNode()") }} for nodes to be skipped by the {{ domxref("NodeIterator") }} or {{ domxref("TreeWalker") }} object. The children of skipped nodes are still considered. This is treated as "skip this node but not its children".</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+  // Node to use as root
+  document.getElementById('someId'),
+
+  // Only consider nodes that are text nodes (nodeType 3)
+  NodeFilter.SHOW_TEXT,
+
+  // Object containing the function to use for the acceptNode method
+  // of the NodeFilter
+    { acceptNode: function(node) {
+      // Logic to determine whether to accept, reject or skip node
+      // In this case, only accept nodes that have content
+      // other than whitespace
+      if ( ! /^\s*$/.test(node.data) ) {
+        return NodeFilter.FILTER_ACCEPT;
+      }
+    }
+  },
+  false
+);
+
+// Show the content of every non-empty text node that is a child of root
+var node;
+
+while ((node = nodeIterator.nextNode())) {
+  alert(node.data);
+}
+</pre>
+
+<h2 id="Specification" name="Specification">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('DOM WHATWG', '#interface-nodefilter', 'NodeFilter')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeFilter', 'NodeFilter')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</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>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.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</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 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>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related interfaces: {{domxref("TreeWalker")}}, {{domxref("NodeIterator")}}.</li>
+</ul>
diff --git a/files/pt-br/web/api/nodelist/index.html b/files/pt-br/web/api/nodelist/index.html
new file mode 100644
index 0000000000..d20d2978a9
--- /dev/null
+++ b/files/pt-br/web/api/nodelist/index.html
@@ -0,0 +1,155 @@
+---
+title: NodeList
+slug: Web/API/NodeList
+tags:
+  - API
+  - DOM
+  - Interface
+  - NodeList
+translation_of: Web/API/NodeList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Objetos <strong><code>NodeList</code></strong> são coleções de nodos semelhantes aos objetos retornados pelos métodos {{domxref("Node.childNodes")}} e {{domxref("document.querySelectorAll()")}}.</p>
+
+<div class="note">
+<p>Apesar de <code>NodeList</code> não ser um <code>Array</code>, é possível ser iterada usando o método <code>forEach()</code>. Muitos navegadores antigos ainda não implementaram este método.</p>
+</div>
+
+<p>Em alguns casos, <code>NodeList</code> é uma <em>coleção viva</em>, ou seja, toda alteração feita no {{ Glossary("DOM") }} reflete nos elementos da coleção. Por exemplo, {{ domxref("Node.childNodes") }} é uma coleção viva:</p>
+
+<pre class="brush: js">var parent = document.getElementById('parent');
+var child_nodes = parent.childNodes;
+console.log(child_nodes.length); // let's assume "2"
+parent.appendChild(document.createElement('div'));
+console.log(child_nodes.length); // should output "3"
+</pre>
+
+<p>Já em outros casos <code>NodeList</code> é um <em>coleção estática</em>, significando que toda alteração subsequente ao {{ Glossary("DOM") }} não afeta o conteúdo da coleção. {{domxref("document.querySelectorAll()")}} é um exemplo de método que retorna uma <code>NodeList</code> estática.</p>
+
+<p>É aconselhável lembrar dessa distinção quando for escolher como iterar sobre os itens de uma <code>NodeList</code>, e como você faz o <em>cache</em> do tamanho dessa lista.</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("NodeList.length")}}</dt>
+ <dd>A quantidade de nodos na <code>NodeList</code>.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("NodeList.item()")}}</dt>
+ <dd>Retorna um item da lista pelo índice, ou <code>null</code> se o índice for inválido; pode ser usado como uma alternativa a <code>nodeList[idx]</code> (que retorna  <code>undefined</code> quando <code>idx</code> é inválido).</dd>
+ <dt>{{domxref("NodeList.entries()")}}</dt>
+ <dd>Retorna um {{jsxref("Iteration_protocols","iterador")}} que permite passar por todos os pares chave/valor contidos no objeto.</dd>
+ <dt>{{domxref("NodeList.forEach()")}}</dt>
+ <dd>Executa uma função recebida uma vez para cada elemento no <code>NodeList</code>.</dd>
+ <dt>{{domxref("NodeList.keys()")}}</dt>
+ <dd>Retorna um {{jsxref("Iteration_protocols","iterador")}} que permite passar por todas as chaves dos pares chave/valor contidos no objeto.</dd>
+ <dt>{{domxref("NodeList.values()")}}</dt>
+ <dd>Retorna um {{jsxref("Iteration_protocols","iterador")}} que permite passar por todos os valores dos pares chave/valor contidos no objeto.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>É possivel iterar sobre os items de um <code>NodeList</code> usando:</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; myNodeList.length; ++i) {
+  var item = myNodeList[i];  // Calling myNodeList.item(i) isn't necessary in JavaScript
+}
+</pre>
+
+<p>Não caia na tentação de usar <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> ou <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/for_each...in">for each...in</a> para enumerar os items de uma lista, já que também serão enumeradas as propriedades <code>length</code> e <code>item</code> da <code>NodeList</code>, o que causará erros se o seu script assumir que processará apenas objetos {{ domxref("element") }}. Não esquecendo que <code>for..in</code> <strong>não</strong> garante a iteração nas propriedades de forma ordenada.</p>
+
+<p><code><a href="/pt-BR/docs/JavaScript/Reference/Statements/for...of" title="/en-US/docs/JavaScript/Reference/Statements/for...of">for...of</a></code> iterará sobre os objetos da <code>NodeList</code> de maneira correta:</p>
+
+<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' );
+for (var item of list) {
+  item.checked = true;
+}</pre>
+
+<p>Navegadores modernos suportam métodos de iteração, {{ domxref("NodeList.forEach()", "forEach()") }}, bem como {{ domxref("NodeList.entries()", "entries()") }}, {{ domxref("NodeList.values()", "values()") }}, e {{ domxref("NodeList.keys()", "keys()") }}</p>
+
+<p>Há também um jeito compatível com o Internet Explorer de usar {{ jsxref("Array.forEach()", "Array.prototype.forEach") }} para iteração.</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">NodeList prototype</h2>
+
+<p>Você também pode adicionar protótipos para <code>NodeList</code>:</p>
+
+<pre class="brush: js">var elements = document.querySelectorAll(".suggestions");
+
+NodeList.prototype.addEventListener = function(event, func) {
+    this.forEach(function(content, item) {
+       content.addEventListener(event, func);
+    });
+}
+
+function log() {
+    console.log(this, " was clicked");
+}
+
+elements.addEventListener("click", log);
+//or
+elements.addEventListener("click", function() {
+    console.log(this, "  awas clicked");
+});
+// output from both will be <em>element </em>was clicked the element would be HTML Element</pre>
+
+<p>Para mais informações sobre forEach veja {{ jsxref("Array.forEach()", "Array.prototype.forEach") }}.</p>
+
+<h2 id="Specifications" name="Specifications">Especificações</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-nodelist', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#interface-nodelist', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM4') }}</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>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_nos_navegadores">Compatibilidade nos navegadores</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.NodeList")}}</p>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/pt-br/web/api/notificacoes/index.html b/files/pt-br/web/api/notificacoes/index.html
new file mode 100644
index 0000000000..9103aac190
--- /dev/null
+++ b/files/pt-br/web/api/notificacoes/index.html
@@ -0,0 +1,217 @@
+---
+title: Notificações
+slug: Web/API/notificacoes
+tags:
+  - API
+  - Interface
+  - Notificações
+translation_of: Web/API/Notification
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p>A interface da <a href="/en-US/docs/Web/API/Notifications_API">API de Notificações</a> é usada para configurar e exibir notificações  na área de trabalho do usuário. A aparência e algumas funcionalidades específicas das notificações variam entre as plataformas mas geralmente eles fornecem uma forma assíncrona de prover informações para o usuário.</p>
+
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("Notification.Notification", "Notification()")}}</dt>
+ <dd>Cria uma nova instancia do objeto {{domxref('Notification')}}.</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<h3 id="Propriedades_estáticas">Propriedades estáticas</h3>
+
+<p>Estas propriedades estão disponíveis apenas no próprio objeto  <code>Notification</code>.</p>
+
+<dl>
+ <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt>
+ <dd>
+ <div id="gt-src-tools">
+ <div id="gt-src-tools-l"></div>
+ </div>
+
+ <div id="gt-input-tool">
+ <div id="tts_button">Uma sequência de caracteres que representa a permissão atual para exibir notificações. Valor possíveis são: "denied" (o usuário se recusa a ter notificações exibidas), "granted" (o usuário aceita ter notificações exibidas) ou "default" (a escolha do usuário é desconhecido e, portanto, o navegador irá agir como se o valor foram negados).</div>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Propriedades_da_instância">Propriedades da instância</h3>
+
+<p>Estas propriedades estão disponíveis apenas em instâncias do objeto <code>Notification</code>.</p>
+
+<dl>
+ <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt>
+ <dd>Retorna o título da notificação conforme foi definido no parâmetro opções do construtor.</dd>
+ <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt>
+ <dd>A direção do texto da notificação, conforme especificado no parâmetro opções do construtor.</dd>
+ <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt>
+ <dd>
+ <div id="gt-src-tools">
+ <div id="tts_button">O código de idioma da notificação, conforme especificado no parâmetro opções do construtor.</div>
+ </div>
+ </dd>
+ <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt>
+ <dd>O corpo(mensagem) da notificação, conforme especificado no parâmetro opções do construtor.</dd>
+ <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt>
+ <dd>O ID da notificação (se houver), conforme especificado no parâmetro opções do construtor.</dd>
+ <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt>
+ <dd>A URL da imagem usada como um ícone da notificação, conforme especificado no parâmetro opções do construtor.</dd>
+ <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt>
+ <dd>Retorna um clone estruturado de dados da notificação.</dd>
+ <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt>
+ <dd>
+ <div id="gt-src-tools">
+ <div id="tts_button">Especifica se a notificação deve ser silenciosa, ou seja, sons ou vibrações não devem ser emitidos, independentemente das configurações do dispositivo.</div>
+ </div>
+ </dd>
+</dl>
+
+<h4 id="Propriedades_não_suportadas">Propriedades não suportadas</h4>
+
+<p>As propriedades a seguir estão listados na especificação mais up-to-date, mas não são suportadas em quaisquer navegadores ainda. É aconselhável manter a verificação de volta regularmente para ver se o status destes actualiza, e deixe-nos saber se você encontrar qualquer informações desatualizadas.</p>
+
+<dl>
+ <dt>{{domxref("Notification.noscreen")}} {{readonlyinline}}</dt>
+ <dd>
+ <div id="gt-src-tools">
+ <div id="tts_button">Especifica se o disparo notificação deve permitir que a tela do dispositivo ou não.</div>
+ </div>
+ </dd>
+ <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt>
+ <dd>
+ <div id="gt-src-tools">
+ <div id="tts_button">Especifica se o usuário deve ser notificado após uma nova notificação substitui um antigo.</div>
+ </div>
+ </dd>
+ <dt>{{domxref("Notification.sound")}} {{readonlyinline}}</dt>
+ <dd>Especifica um recurso de som para reproduzir durante o disparo da notificação, em vez do som de notificação do sistema padrão.</dd>
+ <dt>{{domxref("Notification.sticky")}} {{readonlyinline}}</dt>
+ <dd>Especifica se a notificação deve ser "fixa", ou seja, não facilmente eliminável pelo usuário.</dd>
+ <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt>
+ <dd>Especifica um padrão de vibração para dispositivos com hardware de vibração.</dd>
+</dl>
+
+<h4 id="Manipuladores_de_Eventos">Manipuladores de Eventos</h4>
+
+<dl>
+ <dt>{{domxref("Notification.onclick")}}</dt>
+ <dd>O manipulador para o evento {{event("click")}} é acionado cada vez que o usuário clica sobre a notificação.</dd>
+ <dt>{{domxref("Notification.onerror")}}</dt>
+ <dd>O manipulador para o evento {{event("error")}} é acionado quando a notificação encontra um erro.</dd>
+</dl>
+
+<h4 id="Manipuladores_Obsoletos">Manipuladores Obsoletos</h4>
+
+<p>Os seguintes manipuladores de eventos ainda são suportados, conforme listado na seção {{anch("browser compatibility")}}. Estes serão listados abaixo, mas não são listados na especificação atual. Saiba que eles são obsoletos, e pode parar de funcionar em versões futuras do navegador.</p>
+
+<dl>
+ <dt>{{domxref("Notification.onclose")}}</dt>
+ <dd>Manipulador do evento {{event("close")}} é acionado quando a notificação é fechada.</dd>
+ <dt>{{domxref("Notification.onshow")}}</dt>
+ <dd>Manipulador do evento {{event("show")}}. é acionado quando a notificação é exibida.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<h3 id="Métodos_Estáticos">Métodos Estáticos</h3>
+
+<p>Estes métodos estão disponíveis apenas no próprio objeto <code>Notification</code>.</p>
+
+<dl>
+ <dt>{{domxref("Notification.requestPermission()")}}</dt>
+ <dd>
+ <div id="gt-src-tools">
+ <div id="tts_button">Solicita a permissão do usuário para exibir notificações.</div>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Métodos_de_instância">Métodos de instância</h3>
+
+<p>Estas propriedades estão disponíveis apenas no objeto Notification ou através do seu <code><a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a></code>. O objeto de notificação também herda a interface {{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("Notification.close()")}}</dt>
+ <dd>Programaticamente fecha uma notificação.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Leve em conta este HTML básico:</p>
+
+<pre class="brush: html notranslate">&lt;button onclick="notifyMe()"&gt;Notifique me!&lt;/button&gt;</pre>
+
+<p>É possível enviar uma notificação da seguinte forma - aqui nós apresentamos um conjunto bastante detalhado e completo de código que você pode usar se você quiser verificar primeiro se as notificações são suportados, em seguida, verifique se a permissão foi concedida para a origem atual para enviar notificações, em seguida, solicitar permissão, se necessário, antes, em seguida, enviar uma notificação.</p>
+
+<pre class="brush: js notranslate">function notifyMe() {
+  // Verifica se o browser suporta notificações
+  if (!("Notification" in window)) {
+    alert("Este browser não suporta notificações de Desktop");
+  }
+
+  // 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('Exemplo', '100%', 30)}}</p>
+
+<p>Em muitos casos, você não precisa estar presente detalhado. Por exemplo, na nosso <a href="http://mdn.github.io/emogotchi/">Emogotchi demo</a> (<a href="https://github.com/mdn/emogotchi">veja o código fonte</a>), basta simlesmente executar {{domxref("Notification.requestPermission")}} independentemente de se certificar de que pode obter permissão para enviar notificações:</p>
+
+<pre class="brush: js notranslate">Notification.requestPermission();</pre>
+
+<p>Em seguida executar um simples <code>spawnNotification()</code> quando queremos disparar uma notificação — este é passado argumentos para especificar o, ícone corpo e título que queremos, então ele cria as opções necessárias objeto e dispara a notificação usando o construtor {{domxref("Notification.Notification","Notification()")}}.</p>
+
+<pre class="brush: js notranslate">function spawnNotification(corpo,icone,titulo) {
+  var opcoes = {
+      body: corpo,
+      icon: icone
+  }
+  var n = new Notification(titulo,opcoes);
+}</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_dos_Navegadores">Compatibilidade dos Navegadores</h2>
+
+
+
+<p>{{Compat("api.Notification")}}</p>
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Usando a API de Notificações</a></li>
+</ul>
diff --git a/files/pt-br/web/api/notificationaction/index.html b/files/pt-br/web/api/notificationaction/index.html
new file mode 100644
index 0000000000..a7cb904ac5
--- /dev/null
+++ b/files/pt-br/web/api/notificationaction/index.html
@@ -0,0 +1,79 @@
+---
+title: NotificationAction
+slug: Web/API/NotificationAction
+translation_of: Web/API/NotificationAction
+---
+<div>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</div>
+
+<p><span class="seoSummary">A interface <code>NotificationAction</code> de <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> é usada para representar botões de ação que o usuário pode clicar para intergair com as notificações. As aparências e as funcionalidades específicas dos botões variam entre plataformas, mas geralmente providenciam maneiras de mostrar ações assincronamente ao usuário, em forma de notificações.</span></p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<h3 id="Propriedades_de_instância">Propriedades de instância</h3>
+
+<p>Essas propriedades estão disponíveis somente para instâncias do objeto <code>Notification</code>.</p>
+
+<dl>
+ <dt>{{domxref("NotificationAction.action")}} {{readonlyinline}}</dt>
+ <dd>O nome da ação, que pode ser usado para identificar a ação clicada, similiar a <a href="/en-US/docs/Web/API/Element/name">input names</a>.</dd>
+ <dt>{{domxref("NotificationAction.title")}} {{readonlyinline}}</dt>
+ <dd>Uma string descrevendo a ação que sera mosrada ao usuário.</dd>
+ <dt>{{domxref("NotificationAction.icon")}} {{readonlyinline}}</dt>
+ <dd>O URL da imagem usado para representar a notificação quando não houver espaço suficiente para mostrar a propria notificação.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Notifications can fire {{Event("notificationclick")}} events on the {{domxref("ServiceWorkerGlobalScope")}}.</p>
+
+<p>Here a service worker shows a notification with a single "Archive" action, allowing users to perform this common task from the notification without having to open the website. The user can also click the main body of the notification to open their inbox instead.</p>
+
+<pre class="brush: js">self.registration.showNotification("New mail from Alice", {
+  actions: [
+    {
+      action: 'archive',
+      title: 'Archive'
+    }
+  ]
+});
+
+self.addEventListener('notificationclick', function(event) {
+  event.notification.close();
+  if (event.action === 'archive') {
+    // Archive action was clicked
+    archiveEmail();
+  } else {
+    // Main body of notification was clicked
+    clients.openWindow('/inbox');
+  }
+}, 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('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Notification")}}</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/pt-br/web/api/offlineaudiocontext/index.html b/files/pt-br/web/api/offlineaudiocontext/index.html
new file mode 100644
index 0000000000..2e0c205feb
--- /dev/null
+++ b/files/pt-br/web/api/offlineaudiocontext/index.html
@@ -0,0 +1,150 @@
+---
+title: OfflineAudioContext
+slug: Web/API/OfflineAudioContext
+translation_of: Web/API/OfflineAudioContext
+---
+<div>{{APIRef("Web Audio API")}}</div>
+
+<div>A interface <code>OfflineAudioContext</code> é uma interface {{domxref("AudioContext")}} que representa um gráfico de processament de áudio construido a partir de conexões entre {{domxref("AudioNode")}}s. Em contraste com o padrão {{domxref("AudioContext")}}, um <code>OfflineAudioContext</code> não processa o áudio para o hardware do dispositivo; Em vez disso, ele gera, o mais rápido possível, e exibe o resultado para um {{domxref("AudioBuffer")}}.</div>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("OfflineAudioContext.OfflineAudioContext()")}}</dt>
+ <dd>Cria uma nova instância <code>OfflineAudioContext</code>.</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>Também herda propriedades da sua entidade paterna, {{domxref("BaseAudioContext")}}.</em></p>
+
+<dl>
+ <dt>{{domxref('OfflineAudioContext.length')}} {{readonlyinline}}</dt>
+ <dd>
+ <p>Um número inteiro que representa o tamanho do buffer em quadros de amostra.</p>
+ </dd>
+</dl>
+
+<h3 id="Manipuladores_de_Eventos">Manipuladores de Eventos</h3>
+
+<dl>
+ <dt>{{domxref("OfflineAudioContext.oncomplete")}}</dt>
+ <dd>É uma chamada {{domxref("EventHandler")}} quando o processamento é encerrado, é quando o evento {{event("complete")}}  - do tipo {{domxref("OfflineAudioCompletionEvent")}} - é gerado, após a versão baseada em eventos do {{domxref("OfflineAudioContext.startRendering()")}} é usada.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Também herda métodos da interface paterna, {{domxref("BaseAudioContext")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("OfflineAudioContext.resume()")}}</dt>
+ <dd>
+ <p>Programa uma suspensão da progressão do tempo no contexto de áudio no horário especificado e retorna uma promessa.</p>
+ </dd>
+ <dt>{{domxref("OfflineAudioContext.suspend()")}}</dt>
+ <dd>
+ <p>Agende uma suspensão da progressão do tempo no contexto de áudio no horário especificado e retorna uma promessa.</p>
+ </dd>
+ <dt>{{domxref("OfflineAudioContext.startRendering()")}}</dt>
+ <dd>
+ <p>Inicia a renderização do áudio, levando em consideração as conexões atuais e as mudanças programadas atuais. Esta página abrange a versão baseada em eventos e a versão baseada em promessas.</p>
+ </dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Nesse exemplo, declaramos um ambos {{domxref("AudioContext")}} e um <code>OfflineAudioContext</code> objeto. Nós usamos o <code>AudioContext</code> para carregar uma faixa de áudio via XHR ({{domxref("AudioContext.decodeAudioData")}}), então o <code>OfflineAudioContext</code> para renderizar o áudio em um {{domxref("AudioBufferSourceNode")}} e reproduzir a trilha. Depois que o gráfico de áudio off-line estiver configurado, você deve renderizá-lo para {{domxref("AudioBuffer")}} usando {{domxref("OfflineAudioContext.startRendering")}}.</p>
+
+<p>Quando a 'promise' <code>startRendering()</code> é resolvida, a renderização foi concluída e a saída <code>AudioBuffer</code> é retornada fora da 'promise.</p>
+
+<p>Neste ponto, criamos outro contexto de áudio, criamos um {{domxref("AudioBufferSourceNode")}} dentro dele e configuramos o buffer para ser igual à promessa <code>AudioBuffer</code>. Isso é jogado como parte de um gráfico de áudio padrão simples.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Para um exemplo de trabalho, veja nosso <a href="https://mdn.github.io/webaudio-examples/offline-audio-context-promise/">offline-audio-context-promise</a> Github repo (veja o <a href="https://github.com/mdn/webaudio-examples/tree/master/offline-audio-context-promise">código fonte</a> também.)</p>
+</div>
+
+<pre class="brush: js">// define o contexto de áudio online e offline
+
+var audioCtx = new AudioContext();
+var offlineCtx = new OfflineAudioContext(2,44100*40,44100);
+
+source = offlineCtx.createBufferSource();
+
+// usa XHR para carregar uma faixa de áudio, e
+// decodeAudioData para decodificar e OfflineAudioContext para renderizar
+
+function getData() {
+  request = new XMLHttpRequest();
+
+  request.open('GET', 'viper.ogg', true);
+
+  request.responseType = 'arraybuffer';
+
+  request.onload = function() {
+    var audioData = request.response;
+
+    audioCtx.decodeAudioData(audioData, function(buffer) {
+      myBuffer = buffer;
+      source.buffer = myBuffer;
+      source.connect(offlineCtx.destination);
+      source.start();
+      //source.loop = true;
+      offlineCtx.startRendering().then(function(renderedBuffer) {
+        console.log('Rendering completed successfully');
+        var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        var song = audioCtx.createBufferSource();
+        song.buffer = renderedBuffer;
+
+        song.connect(audioCtx.destination);
+
+        play.onclick = function() {
+          song.start();
+        }
+      }).catch(function(err) {
+          console.log('Rendering failed: ' + err);
+          // Nota: A promessa deve rejeitar quando o StartRendering é chamado uma segunda vez em um OfflineAudioContext
+      });
+    });
+  }
+
+  request.send();
+}
+
+// Run getData to start the process off
+
+getData();</pre>
+
+<h2 id="Especificações">Especificações</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 Audio API', '#OfflineAudioContext', 'OfflineAudioContext')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_NavegadoresBrowser">Compatibilidade de Navegadores/Browser</h2>
+
+<div>
+<div class="hidden">
+<p>A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, verifique <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pedido de 'pull'.</p>
+</div>
+
+<p>{{Compat("api.OfflineAudioContext")}}</p>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Usando a API de áudio da Web</a></li>
+</ul>
diff --git a/files/pt-br/web/api/page_visibility_api/index.html b/files/pt-br/web/api/page_visibility_api/index.html
new file mode 100644
index 0000000000..1fc2222ad0
--- /dev/null
+++ b/files/pt-br/web/api/page_visibility_api/index.html
@@ -0,0 +1,209 @@
+---
+title: Page Visibility API
+slug: Web/API/Page_Visibility_API
+tags:
+  - DOM
+  - Intermediário
+  - Tutoriais
+  - Visibilidade
+translation_of: Web/API/Page_Visibility_API
+---
+<p id="Summary">{{DefaultAPISidebar("Page Visibility API")}}</p>
+
+<p><span class="seoSummary">A <strong>API de visibilidade de página</strong> deixa você saber quando uma página da web está visível ou em foco.</span> Com a navegação em abas, existem razões para que quaisquer páginas da web que estejam sendo executadas em segundo plano e não visíveis para o usuário. Quando o usuário minimiza a página ou muda para outra aba, a API envia um evento {{event("visibilitychange")}} informando o estado de visibilidade da página. Você pode detectar o evento e realizar algumas ações ou modificar o seu comportamento. Por exemplo, se a sua aplicação web estiver reproduzindo um video, ela pode pausar durante o momento que o usuário estiver olhando para outra aba, e reproduz novamente quando o usuário retorna para a aba. O usuário não perde nenhuma parte do video e pode continuar assistindo.</p>
+
+<h3 id="Benefícios">Benefícios</h3>
+
+<p>A API é particularmente util para economizar recursos dando aos desenvolvedores a oportunidade de não realizar tarefas desnecessárias quando a página não está visível.</p>
+
+<h3 id="Casos_de_uso">Casos de uso</h3>
+
+<p>Alguns exemplos:</p>
+
+<ul>
+ <li>Um site tem um carrossel de imagens que não devem avançar para  o próximo slide a não ser que o usuário esteja visualizando a página.</li>
+ <li>Uma aplicação mostrando um painel de informações não quer fazer requizições de atualizações ao servidor quando a página não estiver visível.</li>
+ <li>Uma página quer detectar quando está sendo prerenderizada para poder contar o número de visualizações de forma mais precisa.</li>
+</ul>
+
+<p>Desenvolvedores têm historicamente usado alternativas de se detectar isto. Por exemplo, registrando um handler onblur/onfocus na janela te ajuda a saber quando a sua página não é a ativa, mas isto não te diz se a sua página não está visível para o usuário. Já a API de Visibilidade de Página faz isto. (Quando comparada com a técnica de registrar handlers de onblur/onfocus na janela, uma diferencia chave é que a página <em>não</em> fica escondida quando outra janela é ativada e a janela do navegador perde o foco. A página só fica escondida quando o usuário troca para uma aba diferente ou minimiza a janela do navegador.)</p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<p>Veja <a href="http://daniemon.com/tech/webapps/page-visibility/">exemplo em caso real</a> (video com som).</p>
+
+<p>O exemplo, que pausa o video quando você troca para outra aba e volta a reproduzir quando você retorna, foi criado com o seguinte código:</p>
+
+<pre class="brush: js">// Configura o nome da propriedade hidden e o evento de mudança para visibilidade
+var hidden, visibilityChange;
+if (typeof document.hidden !== "undefined") { // Suporte para Opera 12.10 e Firefox 18 em diante
+  hidden = "hidden";
+  visibilityChange = "visibilitychange";
+} else if (typeof document.mozHidden !== "undefined") {
+  hidden = "mozHidden";
+  visibilityChange = "mozvisibilitychange";
+} else if (typeof document.msHidden !== "undefined") {
+  hidden = "msHidden";
+  visibilityChange = "msvisibilitychange";
+} else if (typeof document.webkitHidden !== "undefined") {
+  hidden = "webkitHidden";
+  visibilityChange = "webkitvisibilitychange";
+}
+
+var videoElement = document.getElementById("videoElement");
+
+// Se a página está escondida, pausa o video;
+// Se a página está visível, reproduz o video
+function handleVisibilityChange() {
+  if (document[hidden]) {
+    videoElement.pause();
+  } else {
+    videoElement.play();
+  }
+}
+
+// Alerta se o navegador não suporta addEventListener ou a API de visibilidade da página
+if (typeof document.addEventListener === "undefined" ||
+  typeof <code class="language-js">document<span class="punctuation token">[</span>hidden<span class="punctuation token">]</span></code> === "undefined") {
+  alert("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
+} else {
+  // Manipula o evento de mudança da visibilidade da página
+  document.addEventListener(visibilityChange, handleVisibilityChange, false);
+
+  // Reverte para o favicon existente para o site quando a página é fechada;
+  // caso contrário, o favicon continua como paused.png
+  window.addEventListener("unload", function(){
+    favicon.change("/favicon.ico");
+  }, false);
+
+  // Quando o video é pausado, configura o favicon.
+  // Isso mostra a imagem paused.png
+  videoElement.addEventListener("pause", function(){
+    favicon.change("images/paused.png");
+  }, false);
+
+  // Quando o video é reproduzido, configura o favicon.
+  videoElement.addEventListener("play", function(){
+    favicon.change("images/playing.png");
+  }, false);
+
+  // Configura o título da aba com o tempo atual do video
+  videoElement.addEventListener("timeupdate", function(){
+    document.title = Math.floor(videoElement.currentTime) + " segundo(s)";
+  }, false);
+}
+</pre>
+
+<h2 id="Visão_geral_das_propriedades">Visão geral das propriedades</h2>
+
+<h3 id="document.hidden_Somented_leitura"><code>document.hidden</code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Somented leitura </span></h3>
+
+<p>Retorna <code>true</code> se a página está escondida para o usuário, caso contrário, retorna <code>false</code>.</p>
+
+<h3 id="document.visibilityState_Somente_leitura"><code>document.visibilityState</code> <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Somente leitura </span></h3>
+
+<p>É a <code>cadeia de caracteres que denota a visibilidade do documento</code>. Possíveis valores:</p>
+
+<ul>
+ <li><code>visible</code> : o conteúdo da página pode estar parcialmente visível. Na prática, isso significa que a página é a aba ativa de uma janela não minimizada.</li>
+ <li><code>hidden</code> : o conteúdo da página não está visível para o usuário. Na prática, isso significa que o documento está em uma aba inativa, em uma janela minimizada, ou o sistema operacional está com a tela travada.</li>
+ <li><code>prerender</code> : o conteúdo da página está sendo prerenderizado e não está visível para o usuário(considerado como escondida para motivos de <code>document.hidden</code>). O documento pode começar neste estado, mas nunca mudar dele para algum outro. Nota: a compatibilidade com navegadores é opcional.</li>
+ <li><code>unloaded</code> : a página está sendo removida da memória(a aba ou janela está sendo fechada). Nota: a compatibilidade com navegadores é opcional</li>
+</ul>
+
+<pre class="brush: js">//startSimulation e pauseSimulation definidas em outro lugar
+function handleVisibilityChange() {
+  if (document.hidden) {
+    pauseSimulation();
+  } else  {
+    startSimulation();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+</pre>
+
+<h2 id="Example" name="Example">Nota</h2>
+
+<p>Os estados de visibilidade de {{HTMLElement("iframe")}} são os mesmos do documento pai. Esconder o iframe com propriedades CSS não ativa os eventos de visibilidade nem muda o estado do documento do conteúdo.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Page Visibility API')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>13 {{property_prefix("webkit")}}<br>
+    33</td>
+   <td>{{CompatGeckoDesktop(10)}} {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop(18)}}</td>
+   <td>10</td>
+   <td>12.10[1]</td>
+   <td>7</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>4.4 {{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoMobile(10)}} {{property_prefix("moz")}}<br>
+    {{CompatGeckoMobile(18)}}</td>
+   <td>10</td>
+   <td>12.10[1]</td>
+   <td>7</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Não ativa o evento <code><a href="/en-US/docs/Web/Events/visibilitychange">visibilitychange</a></code> quando a janela do navegador é minimizada, nem configura <code>hidden</code> como <code>true</code>.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>Descrição da <a href="http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx">API de Visibilidade de Página</a> do IEBlog.</li>
+ <li>Descrição da <a href="http://code.google.com/chrome/whitepapers/pagevisibility.html" title="http://code.google.com/chrome/whitepapers/pagevisibility.html">API de visibilidade de Página</a> do Google</li>
+</ul>
diff --git a/files/pt-br/web/api/parentnode/childelementcount/index.html b/files/pt-br/web/api/parentnode/childelementcount/index.html
new file mode 100644
index 0000000000..dea1fed6cd
--- /dev/null
+++ b/files/pt-br/web/api/parentnode/childelementcount/index.html
@@ -0,0 +1,98 @@
+---
+title: ParentNode.childElementCount
+slug: Web/API/ParentNode/childElementCount
+tags:
+  - Child
+  - DOM
+  - JavaScript
+  - ParentNode
+translation_of: Web/API/ParentNode/childElementCount
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p>A propriedade <code><strong>ParentNode.childElementCount</strong></code>, do tipo "somente leitura" (read-only), tem como retorno um <code>unsigned long</code> que representa q quantidade de elementos filhos de um outro determinado elemento.</p>
+
+<div class="note">
+<p>Essa propriedade foi inicialmente definida na interface pura {{domxref("ElementTraversal")}}. Como essa interface continha dois conjuntos distintos de propriedades, sendo uma destinada para {{domxref("Node")}} que tem filhos, e outra destinada para aqueles que são filhos de fato, essas propriedades foram movidas para duas interfaces puras distintas: {{domxref("ParentNode")}} e {{domxref("ChildNode")}}. Nesse caso, <code>childElementCount</code> foi movido para {{domxref("ParentNode")}}.  Essa é uma alteração bastante técnica que não deve afetar a compatibilidade.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <var>count</var> = <em>node</em>.childElementCount;
+</pre>
+
+<dl>
+ <dt><code>count</code></dt>
+ <dd>variável que recebe o valor retornado pelo método, sendo esse valor do tipo <code>unsigned long</code> (simplesmente um número inteiro).</dd>
+ <dt><code>node</code></dt>
+ <dd>Objeto que representa {{domxref("Document")}}, {{domxref("DocumentFragment")}}, ou {{domxref("Element")}}.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush:js">var foo = document.getElementById('foo');
+if (foo.childElementCount &gt; 0) {
+  // Faz algo
+}
+</pre>
+
+<h2 id="Utilizando_Polyfill_no_IE8_IE9_e_Safari">Utilizando Polyfill no IE8, IE9 e Safari</h2>
+
+<p>Essa propriedade não é suportada em versões anteriores ao IE9. Já no IE9 ou Safari, não será suportada somente por Objetos de <code>Document</code> e <code>DocumentFragment</code>.</p>
+
+<pre class="brush:js">;(function(constructor) {
+  if (constructor &amp;&amp;
+      constructor.prototype &amp;&amp;
+      constructor.prototype.childElementCount == null) {
+    Object.defineProperty(constructor.prototype, 'childElementCount', {
+      get: function() {
+        var i = 0, count = 0, node, nodes = this.childNodes;
+        while (node = nodes[i++]) {
+          if (node.nodeType === 1) count++;
+        }
+        return count;
+      }
+    });
+  }
+})(window.Node || window.Element);
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentários</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-childelementcount', 'ParentNode.childElementCount')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Divide a interface <code>ElementTraversal</code> entre {{domxref("ChildNode")}} e <code>ParentNode</code>. Esse método é definido ao final.<br>
+    {{domxref("Document")}} e {{domxref("DocumentFragment")}} implementam essas novas interfaces.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>
+    <p>Adicionada sua definição inicial à interface pura do <code>ElementTraversal</code> e use-a em {{domxref("Element")}}.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<div class="hidden">A tabela de compatibilidade exibida nessa página é gerada por uma estrutura de dados. Se você quiser contribuir com esses dados, por favor confira o link a seguir: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie uma pull request.</div>
+
+<p>{{Compat("api.ParentNode.childElementCount")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("ParentNode")}} e {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Diferentes tipos de Objetos implementando as interfaces puras: {{domxref("Document")}}, {{domxref("Element")}}, e {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/pt-br/web/api/parentnode/children/index.html b/files/pt-br/web/api/parentnode/children/index.html
new file mode 100644
index 0000000000..755cff62a5
--- /dev/null
+++ b/files/pt-br/web/api/parentnode/children/index.html
@@ -0,0 +1,131 @@
+---
+title: ParentNode.children
+slug: Web/API/ParentNode/children
+translation_of: Web/API/ParentNode/children
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code><strong>Node.children</strong></code> é uma propriedade exclusivamente de leitura que retorna uma coleção {{domxref("HTMLCollection")}} dos elementos filhos do <code>nó</code>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre>var <em>elList</em> = elementNodeReference.children; </pre>
+
+<p><code><var>elList</var></code> é uma {{ domxref("HTMLCollection") }}, que é uma lista ordenada de uma coleção de elementos do DOM que são filhos do <code>elementNodeReference</code>. Se não existir nenhum elemento filho, o <code>elList</code> não terá elemento algum sua propriedade <code>length</code> será 0.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">// pEl é uma referência à um elemento &lt;p&gt;
+var elementChildren = pEl.children;
+for (var i = 0; i &lt; elementChildren.length; i++) {
+    console.log(elementChildren[i].tagName);
+    // NOTE: elementChildren é uma lista viva, adicionar ou remover filhos de pEl
+    // mudará instantaneamente o valor retornado por elementChildren
+}
+</pre>
+
+<h2 id="Especificação">Especificação</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</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 (on {{domxref("Element")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0 [1]</td>
+   <td>38.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("SVGElement")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</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</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 6, 7 e 8 suportaram esse método, mas erroneamente incluiam nós de {{domxref("Comment")}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>As interfaces de {{domxref("ParentNode")}} e {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Tipos de objetos implementando esta interface: {{domxref("Document")}}, {{domxref("Element")}}, e {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/pt-br/web/api/parentnode/index.html b/files/pt-br/web/api/parentnode/index.html
new file mode 100644
index 0000000000..ac2ca6c4ba
--- /dev/null
+++ b/files/pt-br/web/api/parentnode/index.html
@@ -0,0 +1,163 @@
+---
+title: ParentNode
+slug: Web/API/ParentNode
+tags:
+  - API
+  - DOM
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/API/ParentNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>The <code><strong>ParentNode</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have children.</p>
+
+<p><code>ParentNode</code> is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("Document")}}, and {{domxref("DocumentFragment")}} objects.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{ domxref("ParentNode.children") }} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Returns a live {{domxref("HTMLCollection")}} containing all objects of type {{domxref("Element")}} that are children of this <code>ParentNode</code>.</dd>
+ <dt>{{ domxref("ParentNode.firstElementChild") }} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Element")}} that is the first child of this <code>ParentNode</code>, or <code>null</code> if there is none.</dd>
+ <dt>{{ domxref("ParentNode.lastElementChild") }} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Element")}} that is the last child of this <code>ParentNode</code>, or <code>null</code> if there is none.</dd>
+ <dt>{{ domxref("ParentNode.childElementCount") }} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Returns an <code>unsigned long</code> giving the amount of children that the object has.</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>
+</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', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. The <code>firstElementChild</code>, <code>lastElementChild</code>, and <code>childElementCount</code> properties are now defined on the latter.<br>
+    The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.<br>
+    Added the <code>children</code> property.<br>
+    Added the <code>append()</code> and <code>prepend()</code> 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 use it on {{domxref("Element")}}.</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 (on {{domxref("Element")}})</td>
+   <td>{{CompatChrome(1.0)}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0 [1]</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatChrome(29.0)}}</td>
+   <td>{{CompatGeckoDesktop(25)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>append()</code> and <code>prepend()</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatOpera(39)}}</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 Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(25)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>append()</code> and <code>prepend()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatGeckoMobile(49)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(39)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 6, 7 and 8 supported it, but erroneously returns {{domxref("Comment")}} nodes as part of the results.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("ChildNode")}} pure interface.</li>
+ <li>
+  <div class="syntaxbox">Object types implementing this pure interface: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/pt-br/web/api/parentnode/queryselector/index.html b/files/pt-br/web/api/parentnode/queryselector/index.html
new file mode 100644
index 0000000000..0e719e1a73
--- /dev/null
+++ b/files/pt-br/web/api/parentnode/queryselector/index.html
@@ -0,0 +1,101 @@
+---
+title: ParentNode.querySelector()
+slug: Web/API/ParentNode/querySelector
+tags:
+  - PrecisaDeExemplo
+  - Projeto
+  - Referencia
+  - Seletores
+  - metodo
+translation_of: Web/API/ParentNode/querySelector
+---
+<p>{{APIRef("DOM")}}{{Draft}}</p>
+
+<p>O {{DOMxRef("ParentNode")}} mixin define o <code><strong>querySelector()</strong></code> método como retornar um {{DOMxRef("Element")}} representando o primeiro elemento que corresponde ao grupo especificado de seletores que são descendentes do objeto no qual o método foi chamado.</p>
+
+<p>Se você precisar de todos os elementos correspondentes à lista de seletores, use{{DOMxRef("ParentNode.querySelectorAll", "querySelectorAll()")}} instead.</p>
+
+<div class="blockIndicator note">
+<p>Nota: Este método é implementado como {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}} e {{DOMxRef("Element.querySelector()")}}.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>element</var> = <em>parentNode</em>.querySelector(<var>selectors</var>);
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>selectors</code></dt>
+ <dd>Um {{DOMxRef("DOMString")}} contendo um ou mais seletores para comparar. Essa sequência deve ser um válido <a href="/en-US/docs/Web/CSS/CSS_Selectors">lista de seletores compostos</a> suportado pelo navegador; se não for, um <code>SyntaxError</code> exceção é lançada. Veja <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Localizando elementos DOM usando seletores</a> para obter mais informações sobre o uso de seletores para identificar elementos. Vários seletores podem ser especificados, separando-os usando vírgulas.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Os caracteres que não fazem parte da sintaxe CSS padrão devem ser escapados usando um caractere de barra invertida. Como o JavaScript também usa escape de backspace, deve-se tomar cuidado especial ao escrever literais de string usando esses caracteres. Veja {{anch("Escaping special characters")}} Para maiores informações.</p>
+</div>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>O primeiro {{DOMxRef("Element")}} que corresponda a pelo menos um dos seletores ou <code>null</code> se esse elemento não for encontrado.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Se o especificado <code>selectors</code> inclua um <a href="/en-US/docs/Web/CSS/Pseudo-elements">CSS pseudo-elemento</a>, o valor retornado é sempre <code>null</code>.</p>
+</div>
+
+<h3 id="Exceções">Exceções</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>A sintaxe do especificado <code>selectors</code> string não é válida.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Padrão de vida</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>Sem alteração</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Definição inicial</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Definição original</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de recebimento.</div>
+
+<p>{{Compat("api.ParentNode.querySelector")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Localizando elementos DOM usando seletores</a></li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector">Snippets de código para  <code>querySelector()</code></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Seletores de atributos</a> no guia CSS</li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Seletores de atributos </a>na MDN Área de Aprendizagem</li>
+ <li>Seu método está disponível como {{DOMxRef("Element.querySelector()")}}, {{DOMxRef("Document.querySelector()")}}, and {{DOMxRef("DocumentFragment.querySelector()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/path2d/index.html b/files/pt-br/web/api/path2d/index.html
new file mode 100644
index 0000000000..65f626f8f6
--- /dev/null
+++ b/files/pt-br/web/api/path2d/index.html
@@ -0,0 +1,82 @@
+---
+title: Path2D
+slug: Web/API/Path2D
+tags:
+  - Canvas
+  - Compatibilidade
+  - Interface
+  - JavaScript
+  - Métodos
+  - Pacote 2D
+  - Path2D
+  - Referencia
+translation_of: Web/API/Path2D
+---
+<div>{{APIRef("Canvas API")}} {{SeeCompatTable}}</div>
+
+<p>A <strong><code>Path2D</code></strong> interface da API Canvas 2D é usada para declarar caminhos que são usados ​​posteriormente em objetos {{domxref("CanvasRenderingContext2D")}}. Os métodos de caminho da interface CanvasRenderingContext2D também estão presentes nessa interface e permitem criar caminhos que você pode reter e reproduzir conforme necessário em uma tela.</p>
+
+<h2 id="Construtores">Construtores</h2>
+
+<dl>
+ <dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt>
+ <dd><code>Path2D</code> construtor. Cria um novo objeto <code>Path2D</code>.</dd>
+</dl>
+
+<h2 id="Metodos">Metodos</h2>
+
+<dl>
+ <dt>{{domxref("Path2D.addPath()")}}</dt>
+ <dd>Adiciona um caminho ao caminho atual.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.closePath", "Path2D.closePath()")}}</dt>
+ <dd>Faz com que o ponto da caneta retorne ao início do sub-caminho atual. Ele tenta desenhar uma linha reta desde o ponto atual até o início. Se a forma já foi fechada ou tem apenas um ponto, essa função não faz nada.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.moveTo()", "Path2D.moveTo()")}}</dt>
+ <dd>Move o ponto inicial de um novo subcaminho para as coordenadas (x, y).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineTo()", "Path2D.lineTo()")}}</dt>
+ <dd>Conecta o último ponto no subcaminho às coordenadas x, y com uma linha reta.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()", "Path2D.bezierCurveTo()")}}</dt>
+ <dd>Adiciona uma curva cúbica de Bézier ao caminho. Requer três pontos. Os dois primeiros pontos são pontos de controle e o terceiro é o ponto final. O ponto de partida é o último ponto no caminho atual, que pode ser alterado usando moveTo () antes de criar a curva Bézier.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()", "Path2D.quadraticCurveTo()")}}</dt>
+ <dd>Adiciona uma curva quadrática de Bézier ao caminho atual.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arc()", "Path2D.arc()")}}</dt>
+ <dd>Adiciona um arco ao caminho que é centralizado na posição (x, y) com raio r iniciando em startAngle e terminando em endAngle indo na direção dada no sentido anti-horário (padrão no sentido horário).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arcTo()", "Path2D.arcTo()")}}</dt>
+ <dd>Adiciona um arco ao caminho com os pontos de controle e raio dados, conectados ao ponto anterior por uma linha reta.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.ellipse()", "Path2D.ellipse()")}}</dt>
+ <dd>Adiciona uma elipse ao caminho que é centralizado na posição (x, y) com os raios radiusX e radiusY começando em startAngle e terminando em endAngle indo na direção determinada no sentido anti-horário (padrão no sentido horário).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.rect()", "Path2D.rect()")}}</dt>
+ <dd>Cria um caminho para um retângulo na posição (x, y) com um tamanho determinado por <em>width</em> e <em>height</em>.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Especificações</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', "scripting.html#dom-path2d", "Path2D")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_o_Navegador">Compatibilidade com o Navegador</h2>
+
+<div>
+
+
+<p>{{Compat("api.Path2D")}}</p>
+</div>
+
+<h2 id="Veja_também">Veja também:</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/performance/index.html b/files/pt-br/web/api/performance/index.html
new file mode 100644
index 0000000000..28e3a63c06
--- /dev/null
+++ b/files/pt-br/web/api/performance/index.html
@@ -0,0 +1,138 @@
+---
+title: Performance
+slug: Web/API/Performance
+tags:
+  - API
+  - Interface
+  - Navigation Timing
+  - NeedsTranslation
+  - Performance
+  - Reference
+  - TopicStub
+  - Web Performance
+translation_of: Web/API/Performance
+---
+<div>{{APIRef("High Resolution Time")}}</div>
+
+<p>The <strong><code>Performance</code></strong> interface represents timing-related performance information for the given page.</p>
+
+<p>An object of this type can be obtained by calling the {{domxref("Window.performance")}} read-only attribute.</p>
+
+<div class="note">
+<p><strong><em>Note</em>: </strong>This interface and its members are available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>, except where indicated below. Note that some available parts of the interface are not yet documented (see the <a href="http://www.w3.org/TR/performance-timeline/#sec-window.performance-attribute">Performance Timeline</a> and <a href="http://www.w3.org/TR/user-timing/#extensions-performance-interface">User Timing</a> specs for more details.) Also note that performance markers and measures are per context. If you create a mark on the main thread (or other worker), you cannot see it in a worker thread, and vice versa.</p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The <code>Performance</code> interface doesn't inherit any properties.</em></p>
+
+<dl>
+ <dt>{{domxref("Performance.navigation")}} {{readonlyInline}}</dt>
+ <dd>Is a {{domxref("PerformanceNavigation")}} object representing the type of navigation that occurs in the given browsing context, like the amount of redirections needed to fetch the resource. Not available in workers.</dd>
+ <dt>{{domxref("Performance.onframetimingbufferfull")}}</dt>
+ <dd>TBD</dd>
+ <dt>{{domxref("Performance.onresourcetimingbufferfull")}}</dt>
+ <dd>Is an {{domxref("EventTarget")}} which is a callback that will be called when the {{event("resourcetimingbufferfull")}} event is fired.</dd>
+ <dt>{{domxref("Performance.timing")}} {{readonlyInline}}</dt>
+ <dd>Is a {{domxref("PerformanceTiming")}} object containing latency-related performance information. Not available in workers.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em><em>The <code>Performance</code> interface doesn't inherit any </em>method</em>.</p>
+
+<dl>
+ <dt>{{domxref("Performance.clearFrameTimings()")}}</dt>
+ <dd>TBD</dd>
+ <dt>{{domxref("Performance.clearMarks()")}}</dt>
+ <dd>Removes the given <em>mark</em> from the browser's performance entry buffer.</dd>
+ <dt>{{domxref("Performance.clearMeasures()")}}</dt>
+ <dd>Removes the given <em>measure</em> from the browser's performance entry buffer.</dd>
+ <dt>{{domxref("Performance.clearResourceTimings()")}}</dt>
+ <dd>Removes all {{domxref("PerformanceEntry","performance entries")}} with a {{domxref("PerformanceEntry.entryType","entryType")}} of "<code>resource</code>" from the browser's performance data buffer.</dd>
+ <dt>{{domxref("Performance.getEntries()")}}</dt>
+ <dd>Returns a list of {{domxref("PerformanceEntry")}} objects based on the given <em>filter</em>.</dd>
+ <dt>{{domxref("Performance.getEntriesByName()")}}</dt>
+ <dd>Returns a list of {{domxref("PerformanceEntry")}} objects based on the given <em>name</em> and <em>entry type</em>.</dd>
+ <dt>{{domxref("Performance.getEntriesByType()")}}</dt>
+ <dd>Returns a list of {{domxref("PerformanceEntry")}} objects of the given <em>entry type</em>.</dd>
+ <dt>{{domxref("Performance.mark()")}}</dt>
+ <dd>Creates a {{domxref("DOMHighResTimeStamp","timestamp")}} in the browser's <em>performance entry buffer</em> with the given name.</dd>
+ <dt>{{domxref("Performance.measure()")}}</dt>
+ <dd>Creates a named {{domxref("DOMHighResTimeStamp","timestamp")}} in the browser's performance entry buffer between two specified marks (known as the <em>start mark</em> and <em>end mark</em>, respectively).</dd>
+ <dt>{{domxref("Performance.now()")}}</dt>
+ <dd>Returns a {{domxref("DOMHighResTimeStamp")}} representing the amount of milliseconds elapsed since a reference instant.</dd>
+ <dt>{{domxref("Performance.setFrameTimingBufferSize()")}}</dt>
+ <dd>TBD</dd>
+ <dt>{{domxref("Performance.setResourceTimingBufferSize()")}}</dt>
+ <dd>Sets the browser's resource timing buffer size to the specified number of "<code>resource</code>" {{domxref("PerformanceEntry.entryType","type")}} {{domxref("PerformanceEntry","performance entry")}} objects.</dd>
+ <dt>{{domxref("Performance.toJSON()")}}</dt>
+ <dd>Is a jsonizer returning a json object representing the <code>Performance</code> object.</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('Highres Time Level 2', '#the-performance-interface', 'toJSON()')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+   <td>Defines <code>toJson()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#the-performance-interface', 'Performance')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Defines <code>now()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance')}}</td>
+   <td>{{Spec2('Navigation Timing')}}</td>
+   <td>Defines <code>timing</code> and <code>navigation</code> properties.</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>Changes <code>getEntries()</code> interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Performance Timeline', '#sec-window.performance-attribute', 'Performance extensions')}}</td>
+   <td>{{Spec2('Performance Timeline')}}</td>
+   <td>Defines <code>getEntries()</code>, <code>getEntriesByType()</code> and <code>getEntriesByName()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Resource Timing', '#extensions-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('Resource Timing')}}</td>
+   <td>Defines <code>clearResourceTimings()</code> and <code>setResourceTimingBufferSize()</code> methods and the <code>onresourcetimingbufferfull</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing Level 2', '#extensions-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('User Timing Level 2')}}</td>
+   <td>Clarifies <code>mark()</code>, <code>clearMark()</code>, <code>measure()</code> and <code>clearMeasure()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('User Timing', '#extensions-performance-interface', 'Performance extensions')}}</td>
+   <td>{{Spec2('User Timing')}}</td>
+   <td>Defines <code>mark()</code>, <code>clearMark()</code>, <code>measure()</code> and <code>clearMeasure()</code> methods.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('<span style="line-height: 1.5;">Frame Timing', '#extensions-performance-interface','Performance extensions')}}</span></td>
+   <td>{{Spec2('User Timing')}}</td>
+   <td>Defines <code>clearFrameTimings()</code>, <code>setFrameTimingBufferSize()</code>, and <code>onframetimingbufferfull</code> methods.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.Performance")}}</p>
+</div>
+</div>
diff --git a/files/pt-br/web/api/performance/now/index.html b/files/pt-br/web/api/performance/now/index.html
new file mode 100644
index 0000000000..b6539ebebe
--- /dev/null
+++ b/files/pt-br/web/api/performance/now/index.html
@@ -0,0 +1,160 @@
+---
+title: performance.now()
+slug: Web/API/Performance/now
+translation_of: Web/API/Performance/now
+---
+<div>{{APIRef("High Resolution Timing")}}</div>
+
+<p>O método <code><strong>performance.now()</strong></code> retorna {{domxref("DOMHighResTimeStamp")}}, medido em milisegundos, com precisão de cinco milésimos de milissegundo (5 microsegundos).</p>
+
+<p>O valor retornado representa o tempo decorrido desde o <strong>time origin </strong>(the {{domxref("PerformanceTiming.navigationStart")}} property). Em um web worker, o tempo inicial é o momento em que o contexto da execução(e.g. thread ou processo) é criado. Em uma janela, é o tempo em que o usuário iniciou a navegação neste documento. Tenha em mente que:</p>
+
+<ul>
+ <li>Em workers dedicados criados do {{domxref("Window")}}, o valor neste worker será inferior a <code>performance.now()</code> na window que gerou este worker. Normalmente é o mesmo que <code>t0</code> no contexto principal, mas esse valor foi alterado.</li>
+ <li>Em shared workers ou service workers, o valor do worker pode ser maior em relação ao contexto principal poir estas janelas podem ser criadas depois destes workers.</li>
+</ul>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>t</em> = performance.now();</pre>
+
+<h2 id="Exemplo">Exemplo</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>Unlike other timing data available to JavaScript (for example <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now"><code>Date.now</code></a>), the timestamps returned by <code>Performance.now()</code> are not limited to one-millisecond resolution. Instead, they represent times as floating-point numbers with up to microsecond precision.</p>
+
+<p>Also unlike <code>Date.now()</code>, the values returned by <code>Performance.now() </code>always increase at a constant rate, independent of the system clock (which might be adjusted manually or skewed by software like NTP). Otherwise, <code>performance.timing.navigationStart + performance.now() </code>will be approximately equal to<code> Date.now()</code>.</p>
+
+<h2 id="Especificações">Especificações</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="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</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("20.0")}} {{property_prefix("webkit")}}<br>
+    {{CompatChrome("24.0")}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("15.0")}}</td>
+   <td>10.0</td>
+   <td>{{CompatOpera("15.0")}}</td>
+   <td>{{CompatSafari("8.0")}}</td>
+  </tr>
+  <tr>
+   <td>on Web workers</td>
+   <td>{{CompatChrome("33")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("34.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>now()</code> in a dedicated worker is now separate from the main context's <code>now()</code>.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("45.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>Android Webview</th>
+   <th>Edge</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>{{CompatAndroid("4.0")}}</td>
+   <td>{{CompatChrome("25.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}</td>
+   <td>10.0</td>
+   <td>{{CompatNo}}</td>
+   <td>9</td>
+   <td>{{CompatChrome("25.0")}}</td>
+  </tr>
+  <tr>
+   <td>on Web workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("34.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>now()</code> in a dedicated worker is now separate from the main context's <code>now()</code>.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("45.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Windows versions of Chrome 20 through 33 return <code>performance.now()</code> only to millisecond precision.</p>
+
+<h2 id="Veja_também">Veja também</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/pt-br/web/api/performance/tojson/index.html b/files/pt-br/web/api/performance/tojson/index.html
new file mode 100644
index 0000000000..2dac99f0f5
--- /dev/null
+++ b/files/pt-br/web/api/performance/tojson/index.html
@@ -0,0 +1,61 @@
+---
+title: Performance.toJSON()
+slug: Web/API/Performance/toJSON
+translation_of: Web/API/Performance/toJSON
+---
+<div>{{APIRef("High Resolution Timing")}}</div>
+
+<p>O método <strong><code>toJSON()</code></strong> da interface {{domxref("Performance")}} é um serializador padrão: Ele retorna uma representação em JSON das propriedades do objeto performance.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">minhaPerf = performance.toJSON()
+</pre>
+
+<h3 id="Argumentos">Argumentos</h3>
+
+<dl>
+ <dt>Nenhum</dt>
+ <dd> </dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<dl>
+ <dt>minhaPerf</dt>
+ <dd>Um objeto JSON que é a serialização do objeto {{domxref("Performance")}}.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">var js;
+js = window.performance.toJSON();
+console.log("json = " + JSON.stringify(js));
+</pre>
+
+<h2 id="Especificações">Especificações</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', '#the-performance-interface', 'toJSON() serializer')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+   <td>Define <code>toJson()</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.Performance.toJSON")}}</p>
+</div>
+</div>
diff --git a/files/pt-br/web/api/positionoptions/index.html b/files/pt-br/web/api/positionoptions/index.html
new file mode 100644
index 0000000000..5e7012e976
--- /dev/null
+++ b/files/pt-br/web/api/positionoptions/index.html
@@ -0,0 +1,109 @@
+---
+title: PositionOptions
+slug: Web/API/PositionOptions
+translation_of: Web/API/PositionOptions
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<div> </div>
+
+<div>A interface <code><strong>PositionOptions</strong></code> consiste em um objeto que contém propriedades opcionais para passar como um parâmetro de {{domxref("Geolocation.getCurrentPosition()")}} e {{domxref("Geolocation.watchPosition()")}}.</div>
+
+<div> </div>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>A interface <code>PositionOptions</code> não herda </em><em><em>qualquer propriedade</em></em>.</p>
+
+<dl>
+ <dt>{{domxref("PositionOptions.enableHighAccuracy")}}</dt>
+ <dd>É um {{domxref("Boolean")}} que indica se a aplicação deve receber os melhores (mais exatos) resultados possíveis. Se o valor for <code>true </code>e o dispositivo puder disponibilizar uma posição mais exata, ele o fará. Note que isto pode resultar em respostas mais lentas ou aumentar o consumo de bateria. (GPS em um dispositivo mobile). Se o valor for <code>false, </code>o dispositivo toma a liberdade de salvar os recursos respondendo mais rapidamente e/ou utilizando menos bateria. Default: <code>false</code></dd>
+ <dt>{{domxref("PositionOptions.timeout")}}</dt>
+ <dd>É um valor <code>long </code>positivo que representa o tamanho máximo do tempo (em milissegundos) que o dispositivo deve levar para retornar uma posição. O valor default é <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>, o que significa que <code>getCurrentPosition() </code>não terá retorno até que a posição esteja disponível.</dd>
+ <dt>{{domxref("PositionOptions.maximumAge")}}</dt>
+ <dd>É um valor <code>long </code>positivo indicando o valor máximo em milissegundos de uma possível posição em cache aceitável para retornar. Se o valor for <code>0</code>, significa que o dispositivo não deve utilizar uma posição em cache e deve tentar obter a posição atual real. Se o valor for <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> o dispositivo deve retornar uma posição em cache, independente de seu tempo de expiração. Default: 0.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p>A interface <code>PositionOptions</code>  não implementa ou herda nenhum método.</p>
+
+<h2 id="Especificações">Especificações</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('Geolocation', '#positionoptions', 'PositionOptions')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegadores_compatíveis">Navegadores compatíveis</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>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>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>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Usando geolocation</a></li>
+ <li>A interface {{domxref("Geolocation")}} que utiliza <code><strong>PositionOptions</strong></code>.</li>
+</ul>
diff --git a/files/pt-br/web/api/processinginstruction/index.html b/files/pt-br/web/api/processinginstruction/index.html
new file mode 100644
index 0000000000..94fdff0a2f
--- /dev/null
+++ b/files/pt-br/web/api/processinginstruction/index.html
@@ -0,0 +1,39 @@
+---
+title: ProcessingInstruction
+slug: Web/API/ProcessingInstruction
+tags:
+  - API
+  - DOM
+translation_of: Web/API/ProcessingInstruction
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">Uma <strong>ProcessingInstruction (Instrução de Processamento)</strong> incorpora instruções específicas de aplicações em <a href="/pt-BR/docs/XML_introduction">XML</a> que pode ser ignorada por outras aplicações que não as reconhece. Mesmo se um processador XML ignora as instruções de processamento, irá dá-los um lugar no DOM. </span></p>
+
+<p>Uma instrução de processamento é diferente de uma <a href="/pt-BR/docs/XML/XML_Declaration">declaração XML</a>, que fornece informação sobre o documento como por exemplo codificação de caracteres, e pode somente aparecer como o primeiro item em um documento.</p>
+
+<p>Instruções de processamento definidas por usuário não podem começar com <code>'xml'</code>, pois estes são reservados (como <code><a href="/pt-BR/docs/XML/xml-stylesheet">&lt;?xml-stylesheet ?&gt;</a>)</code>.</p>
+
+<p>Instruções de processamento herdam métodos e propriedades do <code><a href="/pt-BR/docs/Web/API/Node">Node</a></code>. </p>
+
+<p>{{InheritanceDiagram(700,70)}}</p>
+
+<h3 id="Attributes" name="Attributes">Atributos</h3>
+
+<ul>
+ <li>alvo (DOMString) - depois do <code>&lt;?</code> e antes do <em><a href="/pt-BR/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">whitespace</a></em> separando-o de <code>data</code>. </li>
+ <li>dado (DOMString) - primeiro caractere <em>whitespace</em> brancodepois de <code>target</code> e antes de <code>?&gt;</code> </li>
+</ul>
+
+<h3 id="Specification" name="Specification">Especificações</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1004215813">DOM Level 1 Core: ProcessingInstruction interface</a></li>
+</ul>
+
+<h3 id="See_also" name="See_also">Veja também</h3>
+
+<ul>
+ <li><a href="/en/DOM/document.createProcessingInstruction">document.createProcessingInstruction</a></li>
+ <li><a href="/pt-BR/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">whitespace no DOM</a></li>
+</ul>
diff --git a/files/pt-br/web/api/pushmanager/index.html b/files/pt-br/web/api/pushmanager/index.html
new file mode 100644
index 0000000000..12c2452bae
--- /dev/null
+++ b/files/pt-br/web/api/pushmanager/index.html
@@ -0,0 +1,187 @@
+---
+title: PushManager
+slug: Web/API/PushManager
+tags:
+  - API
+  - API de armazenamento
+  - Experimental
+  - Interface
+  - Referencia
+  - Service Workers
+  - Subir dados
+translation_of: Web/API/PushManager
+---
+<p>{{SeeCompatTable}}{{ApiRef("Push API")}}</p>
+
+<p><font><font>A </font></font><code>PushManager</code><font><font>interface da </font></font><a href="/en-US/docs/Web/API/Push_API"><font><font>API Push</font></font></a><font><font> fornece uma maneira de receber notificações de servidores de terceiros, bem como solicitar URLs para notificações push.</font></font></p>
+
+<p><font><font>Essa interface é acessada através da propriedade {{domxref ("ServiceWorkerRegistration.pushManager")}}.</font></font></p>
+
+<div class="note">
+<p><strong><font><font>Nota</font></font></strong><font><font> : Esta interface substitui a funcionalidade anteriormente oferecida pela interface obsoleta {{domxref ("PushRegistrationManager")}}.</font></font></p>
+</div>
+
+<h2 id="Propriedades"><font><font>Propriedades</font></font></h2>
+
+<dl>
+ <dt><font><font>{{domxref ("PushManager.supportedContentEncodings")}}</font></font></dt>
+ <dd><font><font>Retorna uma série de codificações de conteúdo suportadas que podem ser usadas para criptografar a carga útil de uma mensagem push.</font></font></dd>
+</dl>
+
+<h2 id="Métodos"><font><font>Métodos</font></font></h2>
+
+<dl>
+ <dt><font><font>{{domxref ("PushManager.getSubscription ()")}}</font></font></dt>
+ <dd><font><font>Recupera uma assinatura de envio existente. </font><font>Retorna uma {{jsxref ("Promise")}} que resolve um objeto {{domxref ("PushSubscription")}} contendo detalhes de uma assinatura existente. </font><font>Se não existe uma subscrição existente, isso resolve um </font></font><code>null</code><font><font>valor.</font></font></dd>
+ <dt><font><font>{{domxref ("PushManager.permissionState ()")}}</font></font></dt>
+ <dd><font><font>Retorna uma {{jsxref ( "Promise")}} que resolve para o estado de permissão do atual {{domxref ( "PushManager")}}, que será um dos </font></font><code>'granted'</code><font><font>, </font></font><code>'denied'</code><font><font>ou </font></font><code>'prompt'</code><font><font>.</font></font></dd>
+ <dt><font><font>{{domxref ("PushManager.subscribe ()")}}</font></font></dt>
+ <dd><font><font>Assine um serviço push. </font><font>Retorna uma {{jsxref ("Promise")}} que resolve um objeto {{domxref ("PushSubscription")}} contendo detalhes de uma inscrição de envio. </font><font>Uma nova assinatura de envio é criada se o trabalhador de serviço atual não tiver uma assinatura existente.</font></font></dd>
+</dl>
+
+<h3 id="Métodos_depreciados"><font><font>Métodos depreciados</font></font></h3>
+
+<dl>
+ <dt><font><font>{{domxref ("PushManager.hasPermission ()")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>Retorna uma {{jsxref ( "Promise")}} que resolve para o </font></font><code>PushPermissionStatus</code><font><font>do webapp requerente, que será um dos </font></font><code>granted</code><font><font>, </font></font><code>denied</code><font><font>ou </font></font><code>default</code><font><font>. </font><font>Substituído por {{domxref ("PushManager.permissionState ()")}}.</font></font></dd>
+ <dt><font><font>{{domxref ("PushManager.register ()")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>Assina uma assinatura de envio. </font><font>Substituído por {{domxref ("PushManager.subscribe ()")}}.</font></font></dd>
+ <dt><font><font>{{domxref ("PushManager.registrations ()")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>Recupera as assinaturas de envio existentes. </font><font>Substituído por {{domxref ("PushManager.getSubscription ()")}}.</font></font></dd>
+ <dt><font><font>{{domxref ("PushManager.unregister ()")}} {{deprecated_inline}}</font></font></dt>
+ <dd><font><font>Anula e exclui um ponto final de assinatura especificado. </font><font>Na API atualizada, uma assinatura não está registrada chamando o método {{domxref ("PushSubscription.unsubscribe ()")}}.</font></font></dd>
+</dl>
+
+<h2 id="Exemplo"><font><font>Exemplo</font></font></h2>
+
+<pre><code>this.onpush = function(event) {
+  console.log(event.data);
+  // From here we can write the data to IndexedDB, send it to any open
+  // windows, display a notification, etc.
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.subscriptionId);
+        console.log(pushSubscription.endpoint);
+        // The push subscription details needed by the application
+        // server are now available, and can be sent to it using,
+        // for example, an XMLHttpRequest.
+      }, function(error) {
+        // During development it often helps to log errors to the
+        // console. In a production environment it might make sense to
+        // also report information about errors back to the
+        // application server.
+        console.log(error);
+      }
+    );
+  });</code></pre>
+
+<h2 id="Especificações"><font><font>Especificações</font></font></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font><font>Especificação</font></font></th>
+   <th scope="col"><font><font>Status</font></font></th>
+   <th scope="col"><font><font>Comentário</font></font></th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Push API','#pushmanager-interface','PushManager')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td><font><font>Definição inicial.</font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_navegador"><font><font>Compatibilidade do navegador</font></font></h2>
+
+<div><font><font>{{CompatibilityTable}}</font></font></div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><font><font>Característica</font></font></th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th><font><font>Firefox (Gecko)</font></font></th>
+   <th><font><font>Internet Explorer</font></font></th>
+   <th><font><font>Ópera</font></font></th>
+   <th><font><font>Safari (WebKit)</font></font></th>
+  </tr>
+  <tr>
+   <td><font><font>Suporte básico</font></font></td>
+   <td>{{CompatChrome(42)}}</td>
+   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
+   <td><font><font>{{CompatGeckoDesktop (44.0)}} </font></font><sup><font><font>[1]</font></font></sup></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatOpera (29)}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+  </tr>
+  <tr>
+   <td><code>supportedContentEncodings</code><font><font> propriedade</font></font></td>
+   <td><font><font>{{CompatChrome (60)}}</font></font></td>
+   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatOpera (47)}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><font><font>Característica</font></font></th>
+   <th><font><font>Android Webview</font></font></th>
+   <th><font><font>Chrome para Android</font></font></th>
+   <th>Edge</th>
+   <th><font><font>Firefox Mobile (Gecko)</font></font></th>
+   <th><font><font>SO Firefox</font></font></th>
+   <th><font><font>IE Mobile</font></font></th>
+   <th><font><font>Opera Mobile</font></font></th>
+   <th><font><font>Safari Mobile</font></font></th>
+  </tr>
+  <tr>
+   <td><font><font>Suporte básico</font></font></td>
+   <td><font><font>{{CompatChrome (42)}}</font></font></td>
+   <td><font><font>{{CompatChrome (42)}}</font></font></td>
+   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
+   <td><font><font>{{CompatGeckoMobile (48)}} </font></font><sup><font><font>[2]</font></font></sup></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatOperaMobile (29)}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+  </tr>
+  <tr>
+   <td><code>supportedContentEncodings</code><font><font> propriedade</font></font></td>
+   <td><font><font>{{CompatChrome (60)}}</font></font></td>
+   <td><font><font>{{CompatChrome (60)}}</font></font></td>
+   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
+   <td><font><font>{{CompatUnknown}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+   <td><font><font>{{CompatOperaMobile (47)}}</font></font></td>
+   <td><font><font>{{CompatNo}}</font></font></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li><font><font>[1] Push (e </font></font><a href="/en-US/docs/Web/API/Service_Worker_API"><font><font>Service Workers</font></font></a><font><font> ) foram desativados no </font></font><a href="https://www.mozilla.org/en-US/firefox/organizations/"><font><font>Firefox 45 e 52 Extended Support Releases</font></font></a><font><font> (ESR.)</font></font></li>
+ <li><font><font>[2] Push foi ativado por padrão no Firefox para Android versão 48.</font></font></li>
+</ul>
+
+<h2 id="Veja_também"><font><font>Veja também</font></font></h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Push_API"><font><font>API de envio</font></font></a></li>
+ <li><font><font><a href="/en-US/docs/Web/API/Service_Worker_API">API do Worker Service</a></font></font> </li>
+</ul>
diff --git a/files/pt-br/web/api/randomsource/getrandomvalues/index.html b/files/pt-br/web/api/randomsource/getrandomvalues/index.html
new file mode 100644
index 0000000000..7e54e933ed
--- /dev/null
+++ b/files/pt-br/web/api/randomsource/getrandomvalues/index.html
@@ -0,0 +1,116 @@
+---
+title: RandomSource.getRandomValues()
+slug: Web/API/RandomSource/getRandomValues
+translation_of: Web/API/Crypto/getRandomValues
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>O método <code><strong>RandomSource.getRandomValues()</strong></code> permite que você obtenha valores criptográficos <span class="st">randômicos</span>. O array passado como parametro é preenchido com números <span class="st">randômicos</span> (<span class="st">randômicos</span> no sentido criptográfico).</p>
+
+<p>Para garantir performance suficiente, as implementações não estão usando um gerador de número <span class="st">randômico</span> de verdade, mas estão usando um gerador de número pseudo-<span class="st">randômico</span> alimentado com um valor com {{Glossary("entropia")}} suficiente. Os PRNG (pseudo-random number generator - gerador de número pseudo-<span class="st">randômico</span>) usados diferem de uma implementação para a outra, mas são adequadas para usos criptográficos. As implementações precisam ter um valor de alimentação com entropia suficiente, como uma fonte de entropia a nível de sistema.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>cryptoObj</em>.getRandomValues(<em>typedArray</em>);</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><em>typedArray</em></dt>
+ <dd>É uma {{jsxref("TypedArray")}} de números inteiros, que pode ser {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}}, ou {{jsxref("Uint32Array")}}. Todos os elementos no array serão sobrescristos com números randômicos.</dd>
+</dl>
+
+<h3 id="Exceções">Exceções</h3>
+
+<ul>
+ <li>Um {{exception("QuotaExceededError")}} {{domxref("DOMException")}} é enviado se o tamanho da requisição for maior que 65536 bytes.</li>
+</ul>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">/* assumindo que window.crypto.getRandomValues está disponível */
+
+var array = new Uint32Array(10);
+window.crypto.getRandomValues(array);
+
+console.log("Seus números da sorte são:");
+for (var i = 0; i &lt; array.length; i++) {
+    console.log(array[i]);
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}</td>
+   <td>{{Spec2('Web Crypto API')}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegadores_compatíveis">Navegadores compatíveis</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>11.0 {{ webkitbug("22049") }}</td>
+   <td>21.0</td>
+   <td>11.0</td>
+   <td>15.0</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>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>23.0</td>
+   <td>21.0</td>
+   <td>11.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{ domxref("Window.crypto") }} to get a {{domxref("Crypto")}} object.</li>
+ <li>{{jsxref("Math.random")}}, a non-cryptographic source of random numbers.</li>
+</ul>
diff --git a/files/pt-br/web/api/randomsource/index.html b/files/pt-br/web/api/randomsource/index.html
new file mode 100644
index 0000000000..8678075371
--- /dev/null
+++ b/files/pt-br/web/api/randomsource/index.html
@@ -0,0 +1,108 @@
+---
+title: RandomSource
+slug: Web/API/RandomSource
+tags:
+  - API
+  - Interface
+  - RandomSource
+  - Referencia
+  - Web Crypto API
+translation_of: Web/API/Crypto/getRandomValues
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p><strong><code>RandomSource</code></strong> representa uma fonte criptografada segura de números aleatórios. É disponível via objeto {{domxref("Crypto")}} do objeto global: {{domxref("Window.crypto")}} em páginas Web, {{domxref("WorkerGlobalScope.crypto")}} em trabalhadores.</p>
+
+<p><code>RandomSource</code> não é uma interface e nenhum objeto deste tipo pode ser criado.</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em><code>RandomSource</code> não define ou herda nenhuma propriedade.</em></p>
+
+<dl>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt>
+ <dd>Completa o {{ domxref("ArrayBufferView") }} com valores aleatoriamente criptografados.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Crypto API', '#dfn-RandomSource')}}</td>
+   <td>{{Spec2('Web Crypto API')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>11.0 {{ webkitbug("22049") }}</td>
+   <td>{{CompatGeckoDesktop(21)}} [1]</td>
+   <td>11.0</td>
+   <td>15.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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>Suporte básico</td>
+   <td>{{ CompatNo() }}</td>
+   <td>23</td>
+   <td>{{CompatGeckoMobile(21)}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Apesar da <code>RandomSource</code> estar disponível apenas a partir da versão Firefox 26, ela já estava implementada na versão Firefox 21.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{ domxref("Window.crypto") }} para conseguir um objeto {{domxref("Crypto")}}.</li>
+ <li>{{jsxref("Math.random")}}, uma fonte de números aleatórios não criptografados.</li>
+</ul>
diff --git a/files/pt-br/web/api/request/index.html b/files/pt-br/web/api/request/index.html
new file mode 100644
index 0000000000..3c29999829
--- /dev/null
+++ b/files/pt-br/web/api/request/index.html
@@ -0,0 +1,167 @@
+---
+title: Request
+slug: Web/API/Request
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Fetch API
+  - Requisições
+  - request
+translation_of: Web/API/Request
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>A interface <strong><code>Request</code></strong> da <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> representa uma requisição de recursos.</p>
+
+<p>Você pode criar um novo objeto <code>Request</code> usando o construtor {{domxref("Request.Request()")}}, porém é mais provável que você encontre um objeto <code>Request</code> que seja retornado como resultado de outra operação de API, como um service worker {{domxref("FetchEvent.request")}}.</p>
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("Request.Request()")}}</dt>
+ <dd>Cria um novo objeto <code>Request</code>.</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("Request.method")}} {{readonlyInline}}</dt>
+ <dd>Contém o método da requisição (<code>GET</code>, <code>POST</code> etc.)</dd>
+ <dt>{{domxref("Request.url")}} {{readonlyInline}}</dt>
+ <dd>Contém a URL da requisição.</dd>
+ <dt>{{domxref("Request.headers")}} {{readonlyInline}}</dt>
+ <dd>Contém o objeto {{domxref("Headers")}} associado à requisição.</dd>
+ <dt>{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}</dt>
+ <dd>Contém o contexto da requisição (ex., <code>audio</code>, <code>image</code>, <code>iframe</code> etc.)</dd>
+ <dt>{{domxref("Request.referrer")}} {{readonlyInline}}</dt>
+ <dd>Contém a referência da requisição (ex., <code>client</code>).</dd>
+ <dt>{{domxref("Request.referrerPolicy")}} {{readonlyInline}}</dt>
+ <dd>Contém a política de referência da requisição (ex., <code>no-referrer</code>).</dd>
+ <dt>{{domxref("Request.mode")}} {{readonlyInline}}</dt>
+ <dd>Contém o modo da requisição (ex., <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, <code>navigate</code>.)</dd>
+ <dt>{{domxref("Request.credentials")}} {{readonlyInline}}</dt>
+ <dd>Contém a credencial da requisição (Ex., <code>omit</code>, <code>same-origin</code>, <code>include</code>).</dd>
+ <dt>{{domxref("Request.redirect")}} {{readonlyinline}}</dt>
+ <dd>Contém o modo de como os redirecionamentos serão tratados. Pode ser: <code>follow</code>, <code>error</code> ou <code>manual</code>.</dd>
+ <dt>{{domxref("Request.integrity")}} {{readonlyInline}}</dt>
+ <dd>Contém o valor da <a href="/en-US/docs/Web/Security/Subresource_Integrity">subresource integrity</a> da requisição (ex., <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</dd>
+ <dt>{{domxref("Request.cache")}} {{readonlyInline}}</dt>
+ <dd>Contém o modo de cache da requisição (ex., <code>default</code>, <code>reload</code>, <code>no-cache</code>).</dd>
+</dl>
+
+<p><code>Request</code> implementa {{domxref("Body")}}, então também possui as seguintes propriedades disponíveis:</p>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>Um simples "getter" para ler o conteúdo do corpo através da interface {{domxref("ReadableStream")}}.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>Armazena um {{domxref("Boolean", "Booleano")}} que declara se o corpo da requisição já foi utilizado em uma resposta.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("Request.clone()")}}</dt>
+ <dd>Cria uma cópia atual do objeto <code>Request</code>.</dd>
+</dl>
+
+<p><code>Request</code> implementa {{domxref("Body")}}, então também possui os seguintes métodos disponíveis:</p>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Retorna um objeto do tipo promise que resolve um {{domxref("ArrayBuffer")}} com a representação do corpo da requisição.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Retorna um objeto do tipo promise que resolve um {{domxref("Blob")}} com a representação do corpo da requisição.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Retorna um objeto do tipo promise que resolve um {{domxref("FormData")}} com a representação do corpo da requisição.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Retorna um objeto do tipo promise que resolve um {{domxref("JSON")}} com a representação do corpo da requisição.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Retorna um objeto do tipo promise que resolve um {{domxref("USVString")}} (texto) com a representação do corpo da requisição.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Nota</strong>: Os métodos de {{domxref("Body")}}  só poderão ser executadas apenas uma vez; As chamadas subsequentes serão resolvidas com strings/ArrayBuffers vazias.</p>
+</div>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>No exemplo a seguir, nós criamos uma nova requisição utilizando o construtor <code>Request()</code> (para um arquivo de imagem no mesmo diretório do código) e, em seguida, nos retorna alguns valores das propriedades da requisição:</p>
+
+<pre class="brush: js">const myRequest = new Request('http://localhost/flowers.jpg');
+
+const myURL = myRequest.url; // http://localhost/flowers.jpg
+const myMethod = myRequest.method; // GET
+const myCred = myRequest.credentials; // omit
+</pre>
+
+<p>Você poderá, então, solicitar uma nova requisição passando o objeto <code>Request</code> como parâmetro para a chamada {{domxref("GlobalFetch.fetch()")}}, por exemplo:</p>
+
+<pre class="brush: js">fetch(myRequest)
+  .then(response =&gt; response.blob())
+  .then(blob =&gt; {
+    myImage.src = URL.createObjectURL(blob);
+  });</pre>
+
+<p>No exemplo a seguir, nós criamos uma nova requisição utilizando o construtor <code>Request()</code> com alguns valores iniciais e contendo o corpo para APIs que precisam processar essas informações:</p>
+
+<pre class="brush: js">const myRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'});
+
+const myURL = myRequest.url; // http://localhost/api
+const myMethod = myRequest.method; // POST
+const myCred = myRequest.credentials; // omit
+const bodyUsed = myRequest.bodyUsed; // true
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> O tipo do corpo poderá ser apenas: {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} ou {{domxref("ReadableStream")}}. Para adicionar um objeto JSON ao corpo, é necessário converter esse objeto para string.</p>
+</div>
+
+<p>Você poderá, então, solicitar uma nova requisição passando o objeto <code>Request</code> como parâmetro para a chamada {{domxref("GlobalFetch.fetch()")}}, por exemplo, e poderá capturar a resposta da seguinte forma:</p>
+
+<pre class="brush: js">fetch(myRequest)
+  .then(response =&gt; {
+    if (response.status === 200) {
+      return response.json();
+    } else {
+      throw new Error('Ops! Houve um erro em nosso servidor.');
+    }
+  })
+  .then(response =&gt; {
+    console.debug(response);
+    // ...
+  }).catch(error =&gt; {
+    console.error(error);
+  });</pre>
+
+<h2 id="Especificações">Especificações</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','#request-class','Request')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entres_navegadores">Compatibilidade entres navegadores</h2>
+
+
+
+<p>{{Compat("api.Request")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <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/pt-br/web/api/request/request/index.html b/files/pt-br/web/api/request/request/index.html
new file mode 100644
index 0000000000..ac46f16fd3
--- /dev/null
+++ b/files/pt-br/web/api/request/request/index.html
@@ -0,0 +1,155 @@
+---
+title: Request()
+slug: Web/API/Request/Request
+translation_of: Web/API/Request/Request
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>O construtor <code><strong>Request()</strong></code> cria um novo objeto {{domxref("Request")}}.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var myRequest = new Request(input[, init]);</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><em>input</em></dt>
+ <dd>Define o recurso que você deseja buscar. Isso pode ser:
+ <ul>
+  <li>Um {{domxref("USVString")}} contendo o URL direto do recurso que você deseja buscar.</li>
+  <li>Um objeto {{domxref("Request")}}, criando efetivamente uma cópia. Observe as seguintes atualizações comportamentais para reter a segurança e, ao mesmo tempo, tornar o construtor menos propenso a gerar exceções:
+   <ul>
+    <li>Se esse objeto existir em outra origem para a chamada do construtor, o {{domxref("Request.referrer")}} será removido.</li>
+    <li>Se esse objeto tiver um {{domxref("Request.mode")}} de navegação, o valor do modo será convertido para a mesma origem.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt><em>init</em> {{optional_inline}}</dt>
+ <dd>Um objeto de opções contendo quaisquer configurações personalizadas que você deseja aplicar à solicitação. As opções possíveis são:
+ <ul>
+  <li><code>method</code>: O método de request, ex: <code>GET</code>, <code>POST</code>.</li>
+  <li><code>headers</code>: Quaisquer cabeçalhos que você deseja adicionar à sua solicitação, contidos em um objeto {{domxref("Headers")}} ou em um objeto literal com valores de {{domxref("ByteString")}}.</li>
+  <li><code>body</code>: Qualquer corpo que você deseja adicionar à sua solicitação: isso pode ser um {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}}, ou objeto {{domxref("ReadableStream")}}. Observe que uma solicitação usando o método GET ou HEAD não pode ter um corpo.</li>
+  <li><code>mode</code>: <span class="tlid-translation translation"><span title="">O modo que você deseja usar para a solicitação, por exemplo:</span></span> <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, or <code>navigate</code>. O padrão é <code>cors</code>. No Chrome o padrão é <code>no-cors</code> antes do Chrome 47 e <code>same-origin</code> do Chrome 47 em diante.</li>
+  <li><code>credentials</code>: As credenciais de solicitação que você deseja usar para a solicitação: <code>omit</code>, <code>same-origin</code>, ou <code>include</code>. O padrão é <code>omit</code>. No Chrome o padrão é <code>same-origin</code> antes do Chrome 47 e <code>include</code> do Chrome 47 em diante.</li>
+  <li><code>cache</code>: O <a href="/en-US/docs/Web/API/Request/cache">cache mode</a>  <span class="tlid-translation translation"><span title="">que você deseja usar para a solicitação.</span></span></li>
+  <li><code>redirect</code>: O modo de redirecionamento para usar: <code>follow</code>, <code>error</code>, or <code>manual</code>. No Chrome o padrão é <code>follow</code> (antes do Chrome 47 foi padronizado <code>manual</code>).</li>
+  <li><code>referrer</code>: Um {{domxref("USVString")}} especificando <code>no-referrer</code>, <code>client</code>, ou uma URL. O padrão é <code>client</code>.</li>
+  <li><code>integrity</code>: Contém o <a href="/en-US/docs/Web/Security/Subresource_Integrity">valor de integridade do sub-recurso</a> da solicitação (exemplo: <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Erros">Erros</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tipo</th>
+   <th scope="col">Descrição</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>Desde <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>Request()</code> lançará um TypeError se o URL tiver credenciais, tal como http://user:password@example.com.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Em nosso <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request-with-init">exemplo Fetch Request </a>(veja <a href="http://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) nós criamos um novo objeto <code>Request</code> usando o construtor, <span class="tlid-translation translation"><span title="">em seguida, busque-o usando uma chamada </span></span>{{domxref("GlobalFetch.fetch")}}. Como estamos buscando uma imagem, executamos o {{domxref("Body.blob")}} na resposta para fornecer o tipo MIME adequado para que ela seja manipulada corretamente. Em seguida, criamos uma URL do objeto e a exibimos em um 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>Em nosso <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request-with-init">Fetch Request with init example</a> (veja <a href="http://mdn.github.io/fetch-examples/fetch-request-with-init/">Fetch Request init live</a>) nós fazemos a mesma coisa, exceto que passamos em um objeto init quando invocamos <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',myInit);
+
+fetch(myRequest).then(function(response) {
+  ...
+});</pre>
+
+<p><span class="tlid-translation translation"><span title="">Observe que você também pode passar o objeto init para a chamada </span></span><code>fetch</code><span class="tlid-translation translation"><span title=""> para obter o mesmo efeito, por exemplo:</span></span></p>
+
+<pre class="brush: js">fetch(myRequest,myInit).then(function(response) {
+  ...
+});</pre>
+
+<p>Você também pode usar um literal de objeto como <code>headers</code> em <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>
+
+<p><span class="tlid-translation translation"><span title="">Você também pode passar um objeto {{domxref ("Request")}} para o construtor</span></span> <code>Request() </code><span class="tlid-translation translation"><span title="">para criar uma cópia do Request (isso é semelhante a chamar o método {{domxref("Request.clone", "clone()")}}</span> <span title="">.)</span></span></p>
+
+<div class="codehilite" style="background: #f0f3f3;">
+<pre style="line-height: 125%;">var copy = new Request(myRequest);
+</pre>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Este último uso é provavelmente útil apenas em <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a>.</p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-request','Request()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você quiser contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span class="tlid-translation translation"><span title="">e envie-nos um</span></span> pull request.</div>
+
+<p>{{Compat("api.Request.Request")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <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/pt-br/web/api/response/index.html b/files/pt-br/web/api/response/index.html
new file mode 100644
index 0000000000..554edd15db
--- /dev/null
+++ b/files/pt-br/web/api/response/index.html
@@ -0,0 +1,130 @@
+---
+title: Response
+slug: Web/API/Response
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Fetch API
+  - Interface
+  - Reference
+  - Referencia
+  - Response
+  - Resposta
+translation_of: Web/API/Response
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>A interface <strong><code>Response</code></strong> da <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> representa a resposta para uma requisição.</p>
+
+<p>Você pode criar um novo objeto <code>Response</code> usando o construtor {{domxref("Response.Response()")}}, porém é mais provável você encontrar um objeto Response sendo retornado como o resultado de uma outra operação da API, por exemplo um service worker {{domxref("Fetchevent.respondWith")}}, ou um simples {{domxref("GlobalFetch.fetch()")}}.</p>
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("Response.Response","Response()")}}</dt>
+ <dd>Cria um novo objeto <code>Response</code>.</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("Response.headers")}} {{readonlyinline}}</dt>
+ <dd>Contém o objeto {{domxref("Headers")}} associado à resposta.</dd>
+ <dt>{{domxref("Response.ok")}} {{readonlyinline}}</dt>
+ <dd>Contém um valor booleano indicando se a resposta foi bem sucedida ("status" no intervalo 200-299) ou não.</dd>
+ <dt>{{domxref("Response.redirected")}} {{ReadOnlyInline}}</dt>
+ <dd>Indica se a resposta é ou não o resultado de um redirecionamento; isto é, sua lista de URL tem mais de uma entrada.</dd>
+ <dt>{{domxref("Response.status")}} {{readonlyinline}}</dt>
+ <dd>Contém o código de "status" da resposta (ex., <code>200</code> para um sucesso).</dd>
+ <dt>{{domxref("Response.statusText")}} {{readonlyinline}}</dt>
+ <dd>Contém a mensagem de "status" correspondente ao código de "status" (ex., <code>OK</code> para <code>200</code>).</dd>
+ <dt>{{domxref("Response.type")}} {{readonlyinline}}</dt>
+ <dd>Contém o tipo da resposta (ex., <code>basic</code>, <code>cors</code>).</dd>
+ <dt>{{domxref("Response.url")}} {{readonlyinline}}</dt>
+ <dd>Contém a URL de resposta.</dd>
+ <dt>{{domxref("Response.useFinalURL")}}</dt>
+ <dd>Contém um valor boleano indicando se essa é a URL final da resposta.</dd>
+</dl>
+
+<p><code>Response</code> implementa {{domxref("Body")}}, por isso também tem as seguintes propriedades disponíveis:</p>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>Um simples "getter" para ler do conteúdo do corpo através da interface {{domxref("ReadableStream")}}.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>Armazena um {{domxref("Boolean")}} que indica se o corpo já foi utilizado em uma resposta.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("Response.clone()")}}</dt>
+ <dd>Cria uma cópia do objeto <code>Response</code>.</dd>
+ <dt>{{domxref("Response.error()")}}</dt>
+ <dd>Retorna um novo objeto <code>Response</code> associado a um erro de rede.</dd>
+ <dt>{{domxref("Response.redirect()")}}</dt>
+ <dd>Cria uma nova resposta com uma URL diferente.</dd>
+</dl>
+
+<p><code>Response</code> implementa {{domxref("Body")}}, por isso também tem as seguintes propriedades disponíveis:</p>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Recebe um "stream" {{domxref("Response")}} e lê até a conclusão. Retorna uma "promise" que resolve com um  {{domxref("ArrayBuffer")}}.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Recebe um "stream" {{domxref("Response")}} e lê até a conclusão. Retorna uma "promise" que resolve com um {{domxref("Blob")}}.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Recebe um "stream" {{domxref("Response")}} e lê até a conclusão. Retorna uma "promise" que resolve com um objeto {{domxref("FormData")}}.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Recebe um "stream" {{domxref("Response")}} e lê até a conclusão. Retorna uma "promise" que resolve com o resultado do parseamento do texto do corpo como {{jsxref("JSON")}}.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Recebe um "stream" {{domxref("Response")}} e lê até a conclusão. Retorna uma "promise" que resolve com um {{domxref("USVString")}} (texto).</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Em nosso <a href="https://github.com/mdn/fetch-examples/tree/master/basic-fetch">exemplo básico fetch</a> (<a href="http://mdn.github.io/fetch-examples/basic-fetch/">executar exemplo live</a>) nós usamos uma simples chamada <code>fetch()</code> para pegar uma imagem e exibi-la em uma tag {{htmlelement("img")}}. A chamada <code>fetch()</code> retorna uma "promise", que resolve com o objeto <code>Response</code> associado com o recurso da operação "fetch". Você irá notar que como estamos solicitando uma imagem, nós precisamos executar {{domxref("Body.blob")}} ({{domxref("Response")}} implementa o "body") para dar à resposta seu tipo MIME correto.</p>
+
+<pre class="brush: js">var myImage = document.querySelector('.my-image');
+fetch('flowers.jpg').then(function(response) {
+  return response.blob();
+}).then(function(blob) {
+  var objectURL = URL.createObjectURL(blob);
+  myImage.src = objectURL;
+});</pre>
+
+<p>Você também pode usar o construtor {{domxref("Response.Response()")}} para criar seu objeto <code>Response</code> personalizado:</p>
+
+<pre class="brush: js">var myResponse = new Response();</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#response-class','Response')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_Navegadores">Compatibilidade entre Navegadores</h2>
+
+
+
+<p>{{Compat("api.Response")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <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/pt-br/web/api/rtccertificate/index.html b/files/pt-br/web/api/rtccertificate/index.html
new file mode 100644
index 0000000000..a0ecf39c65
--- /dev/null
+++ b/files/pt-br/web/api/rtccertificate/index.html
@@ -0,0 +1,47 @@
+---
+title: RTCCertificate
+slug: Web/API/RTCCertificate
+tags:
+  - API
+  - Comunicação em tempo-real
+  - Interface
+  - RTCCertificate
+  - Refenrência
+  - WebRTC
+translation_of: Web/API/RTCCertificate
+---
+<p>{{APIRef("WebRTC")}}</p>
+
+<p>A interface da <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a> fornece um objeto representando um certificado que uma {{domxref("RTCPeerConnection")}} usa para autênticar.</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("RTCCertificate.expires")}} {{readonlyinline}}</dt>
+ <dd>Retorna a data de expiração do certificado.</dd>
+</dl>
+
+<h2 id="Especificação">Especificação</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebRTC 1.0')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<div>
+<div class="hidden">A tabela de compatibilidade nessa página é gerada a partir de dados estruturados. Se você deseja contribuir com os dados, por favor dê uma olhada em <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pull request.</div>
+
+<p>{{Compat("api.RTCCertificate")}}</p>
+</div>
diff --git a/files/pt-br/web/api/rtcdatachannel/index.html b/files/pt-br/web/api/rtcdatachannel/index.html
new file mode 100644
index 0000000000..27514ba598
--- /dev/null
+++ b/files/pt-br/web/api/rtcdatachannel/index.html
@@ -0,0 +1,130 @@
+---
+title: RTCDataChannel
+slug: Web/API/RTCDataChannel
+tags:
+  - Compatibilidade
+  - Navegadores
+  - Referencia
+translation_of: Web/API/RTCDataChannel
+---
+<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
+
+<p>A interface RTCDataChannel representa um canal de rede que pode ser usado para transferências bidirecionais de dados arbitrários de ponto a ponto. Todo canal de dados está associado a {{domxref("RTCPeerConnection")}}, e cada conexão de pares pode ter até um máximo teórico de 65,534 canais de dados (o limite real pode variar de navegador para navegador).</p>
+
+<p>Para criar um canal de dados e pedir a um ponto remoto para se juntar a você, chame os metodos {{domxref("RTCPeerConnection")}}'s {{domxref("RTCPeerConnection.createDataChannel", "createDataChannel()")}}.  O interlocutor que está sendo convidado a trocar dados recebe um evento {{event("datachannel")}} (que possui o tipo {{domxref("RTCDataChannelEvent")}}) para informá-lo de que o canal de dados foi adicionado à conexão.</p>
+
+<p>{{InterfaceOverview("WebRTC")}}</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">var pc = new RTCPeerConnection();
+var dc = pc.createDataChannel("my channel");
+
+dc.onmessage = function (event) {
+  console.log("received: " + event.data);
+};
+
+dc.onopen = function () {
+  console.log("datachannel open");
+};
+
+dc.onclose = function () {
+  console.log("datachannel close");
+};
+</pre>
+
+<h2 id="Specifications" name="Specifications">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('WebRTC 1.0', '#idl-def-RTCDataChannel', 'RTCDataChannel') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Especificação inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatGeckoDesktop(22) }} [1]</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatUnknown }}</td>
+  </tr>
+  <tr>
+   <td><code>onbufferedamountlow</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatOpera(43)}}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android Webview</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>{{CompatChrome(29)}}</td>
+   <td>{{CompatChrome(29)}}</td>
+   <td>{{ CompatGeckoMobile(22) }} [1]</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+  <tr>
+   <td><code>onbufferedamountlow</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(43)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] A interface é chamada DataChannel e não RTCDataChannel no Firefox. No entanto, uma ligação foi implementada desde o Firefox 24 para que qualquer um dos nomes funcione.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+</ul>
diff --git a/files/pt-br/web/api/rtcicetransport/index.html b/files/pt-br/web/api/rtcicetransport/index.html
new file mode 100644
index 0000000000..008822d95c
--- /dev/null
+++ b/files/pt-br/web/api/rtcicetransport/index.html
@@ -0,0 +1,91 @@
+---
+title: RTCIceTransport
+slug: Web/API/RTCIceTransport
+tags:
+  - API
+  - Audio
+  - Interface
+  - RTCIceTransport
+  - Referencia
+  - Video
+  - WebRTC
+  - WebRTC API
+  - rtc
+translation_of: Web/API/RTCIceTransport
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary">A interface <code><strong>RTCIceTransport</strong></code> fornece informação a respeito da camada de transporte {{Glossary("ICE")}} na qual os dados estão sendo enviados e recebidos.</span> Isso é particulamente útil se você precisa acessar as informações de estado da conexão.</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>A interface <code>RTCIceTransport</code> herda propriedades de sua interface pai, {{domxref("EventTarget")}}. ele também oferta as seguintes propriedades:</em></p>
+
+<dl>
+ <dt>{{domxref("RTCIceTransport.component", "component")}} {{ReadOnlyInline}}</dt>
+ <dd>O componente ICE que esta sendo usado pela transporte. O valor é uma das strings do {{domxref("RTCIceTransport")}} tipo enumerável: <code>{{Glossary("RTP", '"RTP"')}}</code> ou <code>"RTSP"</code>.</dd>
+ <dt>{{domxref("RTCIceTransport.gatheringState", "gatheringState")}} {{ReadOnlyInline}}</dt>
+ <dd>O {{domxref("DOMString")}} indica em qual estado de recolhimento o agente ICE esta atualmente. O valor é um dos incluidos no {{domxref("RTCIceGathererState")}} tipo enumerável: <code>"new"</code>, <code>"gathering"</code>, ou <code>"complete"</code>.</dd>
+ <dt>{{domxref("RTCIceTransport.role", "role")}} {{ReadOnlyInline}}</dt>
+ <dd>Retorna uma {{domxref("DOMString")}} cujo valor é um membro do tipo enumerável {{domxref("RTCIceRole")}}: <code>"controlling"</code> ou <code>"controlled"</code>; Isso indica se o agente ICE é aquele que toma a decisão final quanto ao par candidato a ser usado ou não.</dd>
+ <dt>{{domxref("RTCIceTransport.state", "state")}} {{ReadOnlyInline}}</dt>
+ <dd>O {{domxref("DOMString")}} indica qual o atual estado do agente ICE. O valor do <code>state</code> pode ser usado para determinar se o agente ICE fez uma conecxão inicial usando uma par de candidatos viável (<code>"connected"</code>), fez a seleção final do par de candidatos (<code>"completed"</code>), ou em um estado de erro (<code>"failed"</code>), além de outros estados. Veja o tipo enumerável {{domxref("RTCIceTransportState")}} para uma lista completa de estados.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Também inclui métodos da interface pai {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("RTCIceTransport.getLocalCandidates", "getLocalCandidates()")}}</dt>
+ <dd>Retorna um array de objetos {{domxref("RTCIceCandidate")}}, cada descrevendo um dos candidatos ICE que foram reunidos para o dispositivo local até o momento. Esses são os mesmos candidatos que já foram enviados para o peer remoto, enviando um evento {{event("icecandidate")}} ao {{domxref("RTCPeerConnection")}} para transmissão.</dd>
+ <dt>{{domxref("RTCIceTransport.getLocalParameters", "getLocalParameters()")}}</dt>
+ <dd>Retorna o objeto {{domxref("RTCIceParameters")}} descrevendo o parâmetro ICE estabelecido através de uma ligação ao método {{domxref("RTCPeerConnection.setLocalDescription()")}}. Retorna <code>null</code> se os parâmetros ainda não foram recebidos.</dd>
+ <dt>{{domxref("RTCIceTransport.getRemoteCandidates", "getRemoteCandidates()")}}</dt>
+ <dd>Retorna um array de objetos {{domxref("RTCIceCandidate")}}, um para cada candidato do dispositivo remoto, que foram recebidos pelo local final da {{domxref("RTCPeerConnection")}} e entrega ao ICE através da chamada {{domxref("RTCPeerConnection.addIceCandidate()", "addIceCandidate()")}}.</dd>
+ <dt>{{domxref("RTCIceTransport.getRemoteParameters", "getRemoteParameters()")}}</dt>
+ <dd>Retorna um objeto {{domxref("RTCIceParameters")}} contendo os parâmetros ICE para o dispositivo remoto, como definido por uma chamada para {{domxref("RTCPeerConnection.setRemoteDescription()")}}. Se <code>setRemoteDescription()</code> não foi chamada ainda, o retorno será <code>null</code>.</dd>
+ <dt>{{domxref("RTCIceTransport.getSelectedCandidatePair", "getSelectedCandidatePair()")}}</dt>
+ <dd>Retorna um objeto {{domxref("RTCIceCandidatePair")}} que identifica os dois candidatos — um para cada conexão — que foram selecionados até o momento. É possível que um par melhor sejá encontrado e selecionado posteriormente; Se você precisar acompanhar isso, veja o evento {{event("selectedcandidatepairchange")}}. Se nenhum par de candidatos foi selecionado ainda o valor retornado será <code>null</code>.</dd>
+</dl>
+
+<h2 id="Eventos">Eventos</h2>
+
+<p>Escute esses eventos usando {{domxref("EventTarget.addEventListener", "addEventListener()")}} ou atribuindo um <em>event listener</em> para <code>on<em>eventname</em></code> propriedade dessa interface.</p>
+
+<dl>
+ <dt>{{domxref("RTCIceTransport.gatheringstatechange_event", "gatheringstatechange")}}</dt>
+ <dd>Enviado ao objeto {{domxref("RTCIceTransport")}} para indicar que o valor da propriedade {{domxref("RTCIceTransport.gatheringState", "gatheringState")}} foi alterado, indicando uma mudança no processo de negociação de candidatos ICE deste transporte.<br>
+ Também esta disponível através da propriedade <em>event handler </em>{{domxref("RTCIceTransport.ongatheringstatechange", "ongatheringstatechange")}}.</dd>
+ <dt>{{domxref("RTCIceTransport.selectedcandidatepairchange_event", "selectedcandidatepairchange")}}</dt>
+ <dd><code>Enviado para o RTCIceTransport</code> quando um novo, melhor par de candidatos foi selecionado para descrever a conectividade entre os dois peers. Isso pode ocorrer durante a negotiação ou a renegociação, incluindo depois de um ICE restart, que reusa os objetos <code>RTCIceTransport</code> existentes. O par de candidatos atuais pode ser obtido usando {{domxref("RTCIceTransport.getSelectedCandidatePair", "getSelectedCandidatePair()")}}.<br>
+ Também esta disponível através da propriedade <em>event handler </em>{{domxref("RTCIceTransport.onselectedcandidatepairchange", "onselectedcandidatepairchange")}}.</dd>
+ <dt>{{domxref("RTCIceTransport.statechange_event", "statechange")}}</dt>
+ <dd>Enviado par a instancia do <code>RTCIceTransport</code> quando o valor da propriedade {{domxref("RTCIceTransport.state", "state")}} foi alterada, indicando que o processo de recolhimento ICE mudou de estado.<br>
+ Também esta disponível através da propriedade <em>event handler </em> {{domxref("RTCIceTransport.onstatechange", "onstatechange")}}.</dd>
+</dl>
+
+<h2 id="Especificação">Especificação</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebRTC 1.0', '#dom-rtcicetransport', 'RTCIceTransport')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Definição initial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<div>
+<div class="hidden">A tabela de compatibilidade nesta página é gerada por meio de dados estruturados. Se você deseja contribuir com os dados, por favor dê uma olhada em  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos um pull request.</div>
+
+<p>{{Compat("api.RTCIceTransport")}}</p>
+</div>
diff --git a/files/pt-br/web/api/rtcpeerconnection/connectionstate/index.html b/files/pt-br/web/api/rtcpeerconnection/connectionstate/index.html
new file mode 100644
index 0000000000..102b310ecd
--- /dev/null
+++ b/files/pt-br/web/api/rtcpeerconnection/connectionstate/index.html
@@ -0,0 +1,64 @@
+---
+title: RTCPeerConnection.connectionState
+slug: Web/API/RTCPeerConnection/connectionState
+translation_of: Web/API/RTCPeerConnection/connectionState
+---
+<p>{{APIRef("WebRTC")}}</p>
+
+<p>A propriedade <strong><code>connectionState</code></strong> do tipo somente leitura da interface {{domxref("RTCPeerConnection")}} indica o estado atual da conexão em par, devolvendo um valor em string específicado por um enum {{domxref("RTCPeerConnection")}}.</p>
+
+<p>Quando o valor da propriedade muda, o evento {{event("connectionstatechange")}} é enviado para a intância {{domxref("RTCPeerConnection")}}.</p>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>connectionState</em> = <em>RTCPeerConnection</em>.connectionState;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>O estado atual da conexão, como um valor do enum <code><a href="#RTCPeerConnectionState_enum">RTCPeerConnectionState</a></code>.</p>
+
+<p>{{page("/en-US/docs/Web/API/RTCPeerConnection", "RTCPeerConnectionState enum", 0, 1)}}</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var pc = new RTCPeerConnection(configuration);
+
+/* ... */
+
+var connectionState = pc.connectionState;</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('WebRTC 1.0', '#widl-RTCPeerConnection-connectionState', 'RTCPeerConnection.connectionState') }}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection.connectionState")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></li>
+ <li>{{domxref("RTCPeerConnection")}}</li>
+ <li>{{event("connectionstatechange")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li>
+</ul>
diff --git a/files/pt-br/web/api/rtcpeerconnection/index.html b/files/pt-br/web/api/rtcpeerconnection/index.html
new file mode 100644
index 0000000000..b7cd9c92fb
--- /dev/null
+++ b/files/pt-br/web/api/rtcpeerconnection/index.html
@@ -0,0 +1,360 @@
+---
+title: RTCPeerConnection
+slug: Web/API/RTCPeerConnection
+translation_of: Web/API/RTCPeerConnection
+---
+<div>{{APIRef('WebRTC')}}</div>
+
+<p><span class="seoSummary">A interface <strong><code>RTCPeerConnection</code></strong> cria uma conexão WebRTC entre um computador local e um ponto remoto. Esta interface fornece métodos que possibilitam a conexão a um ponto remoto, mantendo e monitorando a conexão, e fechando-a quando não for mais necessária.</span></p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<p>{{InterfaceOverview("WebRTC")}}</p>
+
+<h3 id="Método_obsoleto">Método obsoleto</h3>
+
+<p>O método a seugir está obsoleto há muito tempo e nunca foi implementado nos principais navegadores.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.createDTMFSender()")}} {{obsolete_inline}}</dt>
+ <dd>Cria um novo {{domxref("RTCDTMFSender")}},associado ao específico {{domxref("MediaStreamTrack")}}, que irá permitir enviar {{Glossary("DTMF")}} sinal de telefone pela conexão</dd>
+</dl>
+
+<h2 id="Eventos">Eventos</h2>
+
+<p>Monitore esses eventos utilizando {{domxref("EventTarget.addEventListener", "addEventListener()")}} ou atribuindo um ouvinte de evento à propriedade oneventname dessa interface.</p>
+
+
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.connectionstatechange_event", "connectionstatechange")}}</dt>
+ <dd>Enviado ao objeto RTCPeerConnection quando o status de conectividade geral do RTCPeerConnection é alterado.<br>
+ Também disponível através da propriedade do manipulador de eventos {{domxref ("RTCPeerConnection.onconnectionstatechange", "onconnectionstatechange")}}.</dd>
+</dl>
+
+
+
+
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.datachannel_event", "datachannel")}}</dt>
+ <dd>Sent to the <code>RTCPeerConnection</code> object when the remote peer adds an {{domxref("RTCDataChannel")}} to the connection.<br>
+ Also available through the {{domxref("RTCPeerConnection.ondatachannel", "ondatachannel")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}}</dt>
+ <dd>Sent to the object when a new ICE candidate arrives during negotiation.<br>
+ Also available using the {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.iceconnectionstatechange_event", "iceconnectionstatechange")}}</dt>
+ <dd>Sent to the <code>RTCPeerConnection</code> when the state of the ICE connection changes, such as when it disconnects.<br>
+ Also available using the {{domxref("RTCPeerConnection.oniceconnectionstatechange", "oniceconnectionstatechange")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}}</dt>
+ <dd>Sent to the <code>RTCPeerConnection</code> when it's time to perform ICE negotiation. This can happen both when first opening a connection as well as any time it's necessary to adapt to changing network conditions.<br>
+ Also available using the {{domxref("RTCPeerConnection.onnegotiationneeded", "onnegotiationneeded")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}}</dt>
+ <dd>Sent to the peer connection to request that the specified candidate be transmitted to the remote peer.<br>
+ Also available through the {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}}</dt>
+ <dd>Sent to the <code>RTCPeerConnection</code> when negotiation or renegotiation of the ICE connection needs to be performed. The receiver should respond by creating an offer and sending it to the other peer.<br>
+ Also available as the {{domxref("RTCPeerConnection.onnegotiationneeded", "onnegotiationneeded")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.signalingstatechange_event", "signalingstatechange")}}</dt>
+ <dd>The <code>signalingstatechange</code> event is sent to the <code>RTCPeerConnection</code> when the connection's ICE signaling state changes.<br>
+ Also available through the {{domxref("RTCPeerConnection.onsignalingstatechange", "onsignalingstatechange")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.track_event", "track")}}</dt>
+ <dd>The <code>track</code> event is sent after a new track has been added to one of the {{domxref("RTCRtpReceiver")}} instances which comprise the connection.<br>
+ Available as the {{domxref("RTCPeerConnection.ontrack", "ontrack")}} event handler property.</dd>
+</dl>
+
+<h3 id="Obsolete_events">Obsolete events</h3>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.addstream_event", "addstream")}} {{obsolete_inline}}</dt>
+ <dd>Sent when a new {{domxref("MediaStream")}} has been added to the connection. Instead of watching for this obsolete event, you should watch each for {{domxref("RTCPeerConnection.track_event", "track")}} events; one is sent for each {{domxref("MediaStreamTrack")}} added to the connection.<br>
+ Available as the {{domxref("RTCPeerConnection.onaddstream", "onaddstream")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.identityresult_event", "identityresult")}} {{obsolete_inline}}</dt>
+ <dd>In old versions of the WebRTC specification, this event was used to indicate that an identity assertion is available. Now, you should instead wait for a the promise returned by {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} to resolve with an identity.<br>
+ Also available using the {{domxref("RTCPeerConnection.onidentityresult", "onidentityresult")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.idpassertionerror_event", "idpassertionerror")}} {{obsolete_inline}}</dt>
+ <dd>In old versions of the WebRTC specification, this event was used to indicate that an error occurred while attempting to generate an identity assertion. Now, you should instead wait for a the promise returned by {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} to be rejected with an error.<br>
+ Also available as the {{domxref("RTCPeerConnection.onidpassertionerror", "onidpinsertionerror")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.idpvalidationerror_event", "idpvalidationerror")}} {{obsolete_inline}}</dt>
+ <dd>In old versions of the WebRTC specification, this event was used to indicate that an error occurred while attempting to validate an identity assertion. Now, you should instead wait for a the promise returned by {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} to be rejected with an error.<br>
+ Also available using the {{domxref("RTCPeerConnection.onpeeridentity", "onpeerdentity")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.peeridentity_event", "peeridentity")}} {{obsolete_inline}}</dt>
+ <dd>In old versions of the WebRTC specification, this event was used to deliver a received identity. Now, you should instead wait for a the promise returned by {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} to resolve with an identity.</dd>
+ <dt>{{domxref("RTCPeerConnection.removestream_event", "removestream")}} {{obsolete_inline}}</dt>
+ <dd>Sent to the <code>RTCPeerConnection</code> when a {{domxref("MediaStream")}} is removed from the connection. Instead of watching for this obsolete event, you should watch each stream for {{domxref("MediaStream.removetrack_event", "removetrack")}} events on each stream within the <code>RTCPeerConnection</code>.<br>
+ Also available as the {{domxref("RTCPeerConnection.onremovestream", "onaddstream")}} event handler property.</dd>
+</dl>
+
+<h2 id="Constants">Constants</h2>
+
+<h3 id="RTCBundlePolicy_enum">RTCBundlePolicy enum</h3>
+
+<p>The <code>RTCBundlePolicy</code> enum defines string constants which are used to request a specific policy for gathering ICE candidates if the remote peer isn't compatible with the <a href="https://webrtcstandards.info/sdp-bundle/">SDP BUNDLE standard</a> for bundling multiple media streams on a single transport link.</p>
+
+<div class="note">
+<p><strong>Note:</strong> In technical terms, a BUNDLE lets all media flow between two peers flow across a single <strong>5-tuple</strong>; that is, from the same IP and port on one peer to the same IP and port on the other peer, using the same transport protocol.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constant</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"balanced"</code></td>
+   <td>On BUNDLE-aware connections, the ICE agent should gather candidates for all of the media types in use (audio, video, and data). Otherwise, the ICE agent should only negotiate one audio and video track on separate transports.</td>
+  </tr>
+  <tr>
+   <td><code>"max-compat"</code></td>
+   <td>The ICE agent should gather candidates for each track, using separate transports to negotiate all media tracks for connections which aren't BUNDLE-compatible.</td>
+  </tr>
+  <tr>
+   <td><code>"max-bundle"</code></td>
+   <td>The ICE agent should gather candidates for just one track. If the connection isn't BUNDLE-compatible, then the ICE agent should negotiate just one media track.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCIceConnectionState_enum">RTCIceConnectionState enum</h3>
+
+<p>The <code>RTCIceConnectionState</code> enum defines the string constants used to describe the current state of the ICE agent and its connection to the ICE server (that is, the {{Glossary("STUN")}} or {{Glossary("TURN")}} server).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constant</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>The ICE agent is gathering addresses or is waiting to be given remote candidates through calls to {{domxref("RTCPeerConnection.addIceCandidate()")}} (or both).</td>
+  </tr>
+  <tr>
+   <td><code>"checking"</code></td>
+   <td>The ICE agent has been given one or more remote candidates and is checking pairs of local and remote candidates against one another to try to find a compatible match, but has not yet found a pair which will allow the peer connection to be made. It's possible that gathering of candidates is also still underway.</td>
+  </tr>
+  <tr>
+   <td><code>"connected"</code></td>
+   <td>A usable pairing of local and remote candidates has been found for all components of the connection, and the connection has been established. It's possible that gathering is still underway, and it's also possible that the ICE agent is still checking candidates against one another looking for a better connection to use.</td>
+  </tr>
+  <tr>
+   <td><code>"completed"</code></td>
+   <td>The ICE agent has finished gathering candidates, has checked all pairs against one another, and has found a connection for all components.</td>
+  </tr>
+  <tr>
+   <td><code>"failed"</code></td>
+   <td>The ICE candidate has checked all candidates pairs against one another and has failed to find compatible matches for all components of the connection. It is, however, possible that the ICE agent did find compatible connections for some components.</td>
+  </tr>
+  <tr>
+   <td><code>"disconnected"</code></td>
+   <td>Checks to ensure that components are still connected failed for at least one component of the {{domxref("RTCPeerConnection")}}. This is a less stringent test than <code>"failed"</code> and may trigger intermittently and resolve just as spontaneously on less reliable networks, or during temporary disconnections. When the problem resolves, the connection may return to the <code>"connected"</code> state.</td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code></td>
+   <td>The ICE agent for this {{domxref("RTCPeerConnection")}} has shut down and is no longer handling requests.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCIceGatheringState_enum">RTCIceGatheringState enum</h3>
+
+<p>The <code>RTCIceGatheringState</code> enum defines string constants which reflect the current status of ICE gathering, as returned using the {{domxref("RTCPeerConnection.iceGatheringState")}} property. You can detect when this value changes by watching for an event of type {{event("icegatheringstatechange")}}.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constant</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>The peer connection was just created and hasn't done any networking yet.</td>
+  </tr>
+  <tr>
+   <td><code>"gathering"</code></td>
+   <td>The ICE agent is in the process of gathering candidates for the connection.</td>
+  </tr>
+  <tr>
+   <td><code>"complete"</code></td>
+   <td>The ICE agent has finished gathering candidates. If something happens that requires collecting new candidates, such as a new interface being added or the addition of a new ICE server, the state will revert to "gathering" to gather those candidates.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCIceTransportPolicy_enum">RTCIceTransportPolicy enum</h3>
+
+<p>The <code>RTCIceTransportPolicy</code> enum defines string constants which can be used to limit the transport policies of the ICE candidates to be considered during the connection process.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constant</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"all"</code></td>
+   <td>All ICE candidates will be considered.</td>
+  </tr>
+  <tr>
+   <td><code>"public" </code>{{obsolete_inline}}</td>
+   <td>Only ICE candidates with public IP addresses will be considered. <em>Removed from the specification's May 13, 2016 working draft.</em></td>
+  </tr>
+  <tr>
+   <td><code>"relay"</code></td>
+   <td>Only ICE candidates whose IP addresses are being relayed, such as those being passed through a TURN server, will be considered.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCPeerConnectionState_enum">RTCPeerConnectionState enum</h3>
+
+<p>The <code>RTCPeerConnectionState</code> enum defines string constants which describe states in which the <code>RTCPeerConnection</code> may be. These values are returned by the {{domxref("RTCPeerConnection.connectionState", "connectionState")}} property. This state essentially represents the aggregate state of all ICE transports (which are of type {{domxref("RTCIceTransport")}} or {{domxref("RTCDtlsTransport")}}) being used by the connection.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constant</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>At least one of the connection's ICE transports ({{domxref("RTCIceTransport")}}s or {{domxref("RTCDtlsTransport")}}s) are in the <code>"new"</code> state, and none of them are in one of the following states: <code>"connecting"</code>, <code>"checking"</code>, <code>"failed"</code>, or <code>"disconnected"</code>, <em>or</em> all of the connection's transports are in the <code>"closed"</code> state.</td>
+  </tr>
+  <tr>
+   <td><code>"connecting"</code></td>
+   <td>One or more of the ICE transports are currently in the process of establishing a connection; that is, their <code>RTCIceConnectionState</code> is either <code>"checking"</code> or <code>"connected"</code>, and no transports are in the <code>"failed"</code> state. <strong>&lt;&lt;&lt; Make this a link once I know where that will be documented</strong></td>
+  </tr>
+  <tr>
+   <td><code>"connected"</code></td>
+   <td>Every ICE transport used by the connection is either in use (state <code>"connected"</code> or <code>"completed"</code>) or is closed (state <code>"closed"</code>); in addition, at least one transport is either <code>"connected"</code> or <code>"completed"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"disconnected"</code></td>
+   <td>At least one of the ICE transports for the connection is in the <code>"disconnected"</code> state and none of the other transports are in the state <code>"failed"</code>, <code>"connecting"</code>, or <code>"checking"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"failed"</code></td>
+   <td>One or more of the ICE transports on the connection is in the <code>"failed"</code> state.</td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code></td>
+   <td>
+    <p>The <code>RTCPeerConnection</code> is closed.</p>
+
+    <p>This value was in the <a href="#RTCSignalingState_enum"><code>RTCSignalingState</code> enum</a> (and therefore found by reading the value of the {{domxref("RTCPeerConnection.signalingState", "signalingState")}}) property until the May 13, 2016 draft of the specification.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCRtcpMuxPolicy_enum">RTCRtcpMuxPolicy enum</h3>
+
+<p>The <code>RTCRtcpMuxPolicy</code> enum defines string constants which specify what ICE candidates are gathered to support non-multiplexed RTCP. <strong>&lt;&lt;&lt;add a link to info about multiplexed RTCP.</strong></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constant</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"negotiate"</code></td>
+   <td>Instructs the ICE agent to gather both {{Glossary("RTP")}} and {{Glossary("RTCP")}} candidates. If the remote peer can multiplex RTCP, then RTCP candidates are multiplexed atop the corresponding RTP candidates. Otherwise, both the RTP and RTCP candidates are returned, separately.</td>
+  </tr>
+  <tr>
+   <td><code>"require"</code></td>
+   <td>Tells the ICE agent to gather ICE candidates for only RTP, and to multiplex RTCP atop them. If the remote peer doesn't support RTCP multiplexing, then session negotiation fails.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCSignalingState_enum">RTCSignalingState enum</h3>
+
+<p>The <code>RTCSignalingState</code> enum specifies the possible values of {{domxref("RTCPeerConnection.signalingState")}}, which indicates where in the process of signaling the exchange of offer and answer the connection currently is.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constant</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"stable"</code></td>
+   <td>There is no ongoing exchange of offer and answer underway. This may mean that the {{domxref("RTCPeerConnection")}} object is new, in which case both the {{domxref("RTCPeerConnection.localDescription", "localDescription")}} and {{domxref("RTCPeerConnection.remoteDescription", "remoteDescription")}} are <code>null</code>; it may also mean that negotiation is complete and a connection has been established.</td>
+  </tr>
+  <tr>
+   <td><code>"have-local-offer"</code></td>
+   <td>The local peer has called {{domxref("RTCPeerConnection.setLocalDescription()")}}, passing in SDP representing an offer (usually created by calling {{domxref("RTCPeerConnection.createOffer()")}}), and the offer has been applied successfully.</td>
+  </tr>
+  <tr>
+   <td><code>"have-remote-offer"</code></td>
+   <td>The remote peer has created an offer and used the signaling server to deliver it to the local peer, which has set the offer as the remote description by calling {{domxref("RTCPeerConnection.setRemoteDescription()")}}.</td>
+  </tr>
+  <tr>
+   <td><code>"have-local-pranswer"</code></td>
+   <td>The offer sent by the remote peer has been applied and an answer has been created (usually by calling {{domxref("RTCPeerConnection.createAnswer()")}}) and applied by calling {{domxref("RTCPeerConnection.setLocalDescription()")}}. This provisional answer describes the supported media formats and so forth, but may not have a complete set of ICE candidates included. Further candidates will be delivered separately later.</td>
+  </tr>
+  <tr>
+   <td><code>"have-remote-pranswer"</code></td>
+   <td>A provisional answer has been received and successfully applied in response to an offer previously sent and established by calling <code>setLocalDescription()</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code> {{obsolete_inline}}</td>
+   <td>
+    <p>A conexão é fechada.</p>
+
+    <div class="note">
+    <p><strong>Note:</strong> This value moved into the <a href="#RTCPeerConnectionState_enum"><code>RTCPeerConnectionState</code> enum</a> in the May 13, 2016 draft of the specification, as it reflects the state of the <code>RTCPeerConnection</code>, not the signaling connection. You now detect a closed connection by checking for {{domxref("RTCPeerConnection.connectionState", "connectionState")}} to be <code>"closed"</code> instead.</p>
+    </div>
+   </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('WebRTC 1.0', '#interface-definition', 'RTCPeerConnection')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js">https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple">http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple</a></li>
+ <li><a href="https://github.com/chrisjohndigital/TutorRoom">TutorRoom</a>: Node.js HTML5 video capture, peer-to-peer video and filesharing application (<a href="https://github.com/chrisjohndigital/TutorRoom">source on GitHub</a>)</li>
+</ul>
diff --git a/files/pt-br/web/api/seleção/index.html b/files/pt-br/web/api/seleção/index.html
new file mode 100644
index 0000000000..9cac677942
--- /dev/null
+++ b/files/pt-br/web/api/seleção/index.html
@@ -0,0 +1,206 @@
+---
+title: Seleção
+slug: Web/API/Seleção
+tags:
+  - API
+  - Experimental
+  - Interface
+  - Referencia
+  - Seleção
+translation_of: Web/API/Selection
+---
+<div>{{ ApiRef("DOM") }}{{SeeCompatTable}}</div>
+
+<p>Um objeto <code><strong>Selection</strong></code> representa um intervalo do texto selecionado pelo usuário ou a posição atual do cursor. Para obter o objeto Selection para inspecionar ou modificar, use {{DOMxRef("Window.getSelection()")}}.</p>
+
+<p>O usuário pode fazer a seleção da esquerda para a direita (na orientação do documento) ou da direita para a esquerta (orientação inversa do documento). O atributo <strong>anchor (âncora)</strong> é onde o usuário iniciou a seleção e o atributo <strong>focus (foco)</strong> é onde o usuário terminou a seleção. Se você fizer a seleção utilizando um mouse no desktop, o <em>anchor</em> é definido onde você pressionou o botão do mouse e o <em>focus</em> é definido onde você soltou o botão do mouse. <em>Anchor</em> e <em>focus</em> não devem ser confundidos com a posição inicial e final da seleção, pois o <em>anchor</em> pode ser definido antes do <em>focus</em> ou vice versa, dependendo da direção em que você fez sua seleção.</p>
+
+<h2 id="Properties" name="Properties">Propriedades</h2>
+
+<dl>
+ <dt>{{DOMxRef("Selection.anchorNode")}}{{ReadOnlyInline}}</dt>
+ <dd>Retorna o {{DOMxRef("Node")}} onde a seleção começou.</dd>
+ <dt>{{DOMxRef("Selection.anchorOffset")}}{{ReadOnlyInline}}</dt>
+ <dd>Retorna um número representando o deslocamento do anchor dentro do elemento Se o elemento for do tipo text node, o número retornado será o número de caracteres no elemento que precedem o anchor (clique inicial da seleção). Se o elemento for do tipo element (qualquer tag html que não seja text node), o número retornado será o número de nós filhos do elemento que precedem o anchor.</dd>
+ <dt>{{DOMxRef("Selection.focusNode")}}{{ReadOnlyInline}}</dt>
+ <dd>Retorna o {{DOMxRef("Node")}} onde a seleção termina.</dd>
+ <dt>{{DOMxRef("Selection.focusOffset")}}{{ReadOnlyInline}}</dt>
+ <dd>Retorna um número representando o deslocamento do focus dentro do elemento Se o elemento for do tipo text node, o número retornado será o número de caracteres no elemento que precedem o focus (posição onde o mouse foi solto). Se o elemento for do tipo element (qualquer tag html que não seja text node), o número retornado será o número de nós filhos do elemento que precedem o focus.</dd>
+ <dt>{{DOMxRef("Selection.isCollapsed")}}{{ReadOnlyInline}}</dt>
+ <dd>Retorna um valor booleano indicando se o início e o final da seleção são a mesma posição, ou seja, começou e terminou no mesmo lugar.</dd>
+ <dt>{{DOMxRef("Selection.rangeCount")}}{{ReadOnlyInline}}</dt>
+ <dd>Retorna no número de intervalos da seleção.</dd>
+ <dt>{{DOMxRef("Selection.type")}}{{ReadOnlyInline}}</dt>
+ <dd>Retorna um {{DOMxRef("DOMString")}} descrevento o tipo da seleção atual.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Métodos</h2>
+
+<dl>
+ <dt>{{DOMxRef("Selection.addRange()")}}</dt>
+ <dd>Um objeto {{DOMxRef("Range")}} que será adicionado na seleção.</dd>
+ <dt>{{DOMxRef("Selection.collapse()")}}</dt>
+ <dd>Colapsa a seleção atual em um único ponto.</dd>
+ <dt>{{DOMxRef("Selection.collapseToEnd()")}}</dt>
+ <dd>Colapsa a seleção para o final do último intervalo na seleção.</dd>
+ <dt>{{DOMxRef("Selection.collapseToStart()")}}</dt>
+ <dd>Colapsa a seleção para o início do primeiro intervalo na seleção.</dd>
+ <dt>{{DOMxRef("Selection.containsNode()")}}</dt>
+ <dd>Indica se um certo nó é parte da seleção.</dd>
+ <dt>{{DOMxRef("Selection.deleteFromDocument()")}}</dt>
+ <dd>Apaga o conteúdo da seleção do documento.</dd>
+ <dt>{{DOMxRef("Selection.empty()")}}</dt>
+ <dd>Remove todos os intervalos da seleção. Este é um apelido para <code>removeAllRanges()</code> — Veja {{DOMxRef("Selection.removeAllRanges()")}} para mais detalhes.</dd>
+ <dt>{{DOMxRef("Selection.extend()")}}</dt>
+ <dd>Move o focus (final da seleção) para um ponto específico.</dd>
+ <dt>{{DOMxRef("Selection.getRangeAt()")}}</dt>
+ <dd>Retorna um objeto {{DOMxRef("Range")}} represetando um dos intervalos atualmente selecionados.</dd>
+ <dt>{{DOMxRef("Selection.modify()")}}{{Non-standard_Inline}}</dt>
+ <dd>Altera a seleção atual.</dd>
+ <dt>{{DOMxRef("Selection.removeRange()")}}</dt>
+ <dd>Remove um intervalo da seleção.</dd>
+ <dt>{{DOMxRef("Selection.removeAllRanges()")}}</dt>
+ <dd>Remove todos os intervalos da seleção.</dd>
+ <dt>{{DOMxRef("Selection.selectAllChildren()")}}</dt>
+ <dd>Adiciona todos os filhos do nó especificado para a seleção.</dd>
+ <dt>{{DOMxRef("Selection.setBaseAndExtent()")}}</dt>
+ <dd>Define que a seleção será um intervalo incluindo todos ou partes dos dois nós DOM especificados, e qualquer conteúdo entre esses nós.</dd>
+ <dt>{{DOMxRef("Selection.setPosition()")}}</dt>
+ <dd>Colapsa a seleção atual para um único ponto. Este é um apelido para <code>collapse()</code> — Veja {{DOMxRef("Selection.collapse()")}} para mais detalhes.</dd>
+ <dt>{{DOMxRef("Selection.toString()")}}</dt>
+ <dd>Retorna uma string atualmente representada pelo objeto selection, i.e. o texto atualmente selecionado.</dd>
+</dl>
+
+<h2 id="Notas">Notas</h2>
+
+<h3 id="Representação_da_seleção_em_formato_de_String">Representação da seleção em formato de String</h3>
+
+<p>Chamando a função {{DOMxRef("Selection.toString()")}} retorna o texto selecionado, e.g.:</p>
+
+<pre class="brush: js">var selObj = window.getSelection();
+window.alert(selObj);
+</pre>
+
+<p>Perceba que usando um objeto selection como argumento de <code>window.alert</code> executará o metodo <code>toString</code> automaticamente.</p>
+
+<h3 id="Multiplos_intervalos_em_uma_seleção">Multiplos intervalos em uma seleção</h3>
+
+<p>Um objeto selection representa os {{DOMxRef("range","intervalos")}} que o usuário selecionou.<br>
+ Normalmente é apenas um intervalo, acessado da seguinte forma:</p>
+
+<div style="overflow: hidden;">
+<pre class="brush:js">var selObj = window.getSelection();
+var range  = selObj.getRangeAt(0);</pre>
+</div>
+
+<ul>
+ <li><code>selObj</code> é um objeto selection</li>
+ <li><code>range</code> é um objeto {{DOMxRef("Range")}}</li>
+</ul>
+
+<p>Como consta nas <a href="http://www.w3.org/TR/selection-api/#h_note_15">Especificações da API de seleção</a>, a API foi inicialmente criada pela Netscape e usados multiplos intervalos, por instância, para permitir ao usuário selecionar uma coluna de uma {{HTMLElement("table")}}. Outros navegadores como Gecko não implementaram multiplos intervalos, e a especificação exige que a seleção sempre tenha um único intervalo.</p>
+
+<h3 id="Seleção_e_foco_de_input">Seleção e foco de input</h3>
+
+<p>Seleção e foco de input (indicado por {{DOMxRef("Document.activeElement")}}) tem uma relação complexa, que depende do navegador. Para um código compatível com vários navegadores, o melhor é manter os códigos separados.</p>
+
+<p>O Safari e o Chrome (ao contrário do Firefox) historicamente foca no elemento contendo a seleção quando a seleção é modificada programaticamente, mas isto pode mudar no futuro (veja <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=14383">W3C bug 14383</a> e {{WebKitBug("38696")}}).</p>
+
+<h3 id="Comportamento_da_API_de_Seleção_em_termos_de_edição_e_alterações_de_foco_do_host">Comportamento da API de Seleção em termos de edição e alterações de foco do host</h3>
+
+<p>A API de Seleção tem um comportamento comum (i.e. compartilhado entre navegadores) que define como o comportamento do foco muda para <strong>elemento editável</strong>, após alguns desses métodos serem executados.</p>
+
+<p>Os comportamentos são que um elemento editado recebe o foco se anteriormente a seleção estiver fora dele, então um método da API de seleção é executado e causa uma nova seleção que será feita em um único intervalo dentro do elemento sendo editado. O foco então é movido para o final do elemento.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Os métodos da API de seleção, move o foco apenas para o elemento sendo editado, não para outro elemento que pode receber o foco (e.g. {{HTMLElement("a")}}).</p>
+</div>
+
+<p>O comportamento acima é aplicado para as seleções feitas usando os seguintes métodos:</p>
+
+<ul>
+ <li>{{DOMxRef("Selection.collapse()")}}</li>
+ <li>{{DOMxRef("Selection.collapseToStart()")}}</li>
+ <li>{{DOMxRef("Selection.collapseToEnd()")}}</li>
+ <li>{{DOMxRef("Selection.extend()")}}</li>
+ <li>{{DOMxRef("Selection.selectAllChildren()")}}</li>
+ <li>{{DOMxRef("Selection.addRange()")}}</li>
+ <li>{{DOMxRef("Selection.setBaseAndExtent()")}}</li>
+</ul>
+
+<p>e quando o intervalo é modificado usando os seguintes métodos:</p>
+
+<ul>
+ <li>{{DOMxRef("Range.setStart()")}}</li>
+ <li>{{DOMxRef("Range.setEnd()")}}</li>
+ <li>{{DOMxRef("Range.setStartBefore()")}}</li>
+ <li>{{DOMxRef("Range.setStartAfter()")}}</li>
+ <li>{{DOMxRef("Range.setEndBefore()")}}</li>
+ <li>{{DOMxRef("Range.setEndAfter()")}}</li>
+ <li>{{DOMxRef("Range.collapse()")}}</li>
+ <li>{{DOMxRef("Range.selectNode()")}}</li>
+ <li>{{DOMxRef("Range.selectNodeContents()")}}</li>
+</ul>
+
+<h3 id="Glossary" name="Glossary">Glossário</h3>
+
+<p>Outras palavras chaves usadas nesta seção.</p>
+
+<dl>
+ <dt>anchor</dt>
+ <dd>O anchor de uma seleção é o ponto inicial da seleção. Quando a seleção é feita com um mouse, é onde o botão do mouse é inicialmente pressionado. Quando o usuário altera a seleção usando o mouse ou teclado, o anchor não move.</dd>
+ <dt>Elemento editável</dt>
+ <dd>Um elemento editável — i.e. um elemento HTML com o atributo {{htmlattrxref("contenteditable")}} definido, ou o HTML filho de um documento estiver com o {{DOMxRef("Document.designMode", "designMode")}} habilitado.</dd>
+ <dt>foco de uma seleção</dt>
+ <dd>O foco da seleção é o ponto final da seleção. Quando feita a seleção com um mouse, o focus é onde o botão do mouse foi solto. Quando o usuário muda a seleção usando o mouse ou teclado, o focus é o final da seleção que move. <strong>Nota:</strong> Não é o mesmo que o elemento selecionado do documento, como retornado em {{DOMxRef("document.activeElement")}}.</dd>
+ <dt>intervalo</dt>
+ <dd>Um intervalo é uma parte contínua do documento. Um intervalo pode conter nós inteiros ou partes de nós, como uma parte de um text node. Um usuário normalmente irá selecionar um único intervalo por vez, mas é possível que o usuário selecione multiplos intervalos (e.g. usando a tecla Control). Um intervalo pode ser obtido de uma seleção como um objeto {{DOMxRef("range")}}. Um objeto de intervalo pode ser criado no DOM e programaticamente adicionada ou removida de uma seleção.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</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("Selection API", "#selection-interface", "Seleção")}}</td>
+   <td>{{Spec2("Selection API")}}</td>
+   <td>A especificação da API de Seleção é baseada na especificação da API de edição HTML e focada na funcionalidade relacionada à seleção.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML Editing", "#selection", "Seleção")}}</td>
+   <td>{{Spec2("HTML Editing")}}</td>
+   <td>Definição incial (antiga).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de navegadores</h2>
+
+
+
+<p>{{Compat("api.Selection")}}</p>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li>{{DOMxRef("Window.getSelection")}}, {{DOMxRef("Document.getSelection")}}, {{DOMxRef("Range")}}</li>
+ <li>Selection-related events: {{Event("selectionchange")}} and {{Event("selectstart")}}</li>
+ <li>HTML inputs provide simpler helper APIs for working with selection (see {{DOMxRef("HTMLInputElement.setSelectionRange()")}})</li>
+ <li>{{DOMxRef("Document.activeElement")}}, {{DOMxRef("HTMLElement.focus()")}}, and {{DOMxRef("HTMLElement.blur()")}}</li>
+</ul>
+
+<h2 id="Notas_da_Gecko">Notas da Gecko</h2>
+
+<ul>
+ <li>Gecko/Firefox provide additional features, available to chrome (internal and add-on) code only. These are defined in {{Interface("nsISelectionPrivate")}}.</li>
+ <li>Mozilla source code: {{Source("dom/webidl/Selection.webidl")}}</li>
+ <li>{{DOMxRef("Selection.selectionLanguageChange()")}}{{Obsolete_Inline("gecko29")}} used to be exposed to the web content until Firefox 29</li>
+</ul>
+
+<dl>
+</dl>
diff --git a/files/pt-br/web/api/sensor/index.html b/files/pt-br/web/api/sensor/index.html
new file mode 100644
index 0000000000..afc91f60d5
--- /dev/null
+++ b/files/pt-br/web/api/sensor/index.html
@@ -0,0 +1,89 @@
+---
+title: Sensor
+slug: Web/API/Sensor
+tags:
+  - API
+  - Generic Sensor API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Sensor
+  - Sensor APIs
+  - Sensors
+  - TopicStub
+translation_of: Web/API/Sensor
+---
+<div>{{APIRef("Generic Sensor API")}}</div>
+
+<p><span class="seoSummary">The <strong><code>Sensor</code></strong> interface of the the <a href="/docs/Web/API/Sensor_APIs">Sensor APIs</a> is the base class for all the other sensor interfaces. This interface cannot be used directly. Instead it provides properties, event handlers, and methods accessed by interfaces that inherit from it.</span></p>
+
+<p>If a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. This is not something that would ever be shown to a user. See {{httpheader('Feature-Policy')}} for implementation instructions.</p>
+
+<h2 id="Interfaces_based_on_Sensor">Interfaces based on Sensor</h2>
+
+<p>Below is a list of interfaces based on the Sensor interface.</p>
+
+<div class="index">
+<ul>
+	<li>{{domxref('Accelerometer')}}</li>
+	<li>{{domxref('AmbientLightSensor')}}</li>
+	<li>{{domxref('Gyroscope')}}</li>
+	<li>{{domxref('LinearAccelerationSensor')}}</li>
+	<li>{{domxref('Magnetometer')}}</li>
+	<li>{{domxref('OrientationSensor')}}</li>
+</ul>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+	<dt>{{domxref('Sensor.activated')}} {{readonlyinline}}</dt>
+	<dd>Returns a {{jsxref("Boolean")}} indicating whether the sensor is active.</dd>
+	<dt>{{domxref('Sensor.hasReading')}} {{readonlyinline}}</dt>
+	<dd>Returns a {{jsxref("Boolean")}} indicating whether the sensor has a reading.</dd>
+	<dt>{{domxref('Sensor.timestamp')}} {{readonlyinline}}</dt>
+	<dd>Returns the time stamp of the latest sensor reading.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+	<dt>{{domxref('Sensor.onerror')}}</dt>
+	<dd>Called when an error occurs on one of the child interfaces of the <code>Sensor</code> interface.</dd>
+	<dt>{{domxref('Sensor.onreading')}}</dt>
+	<dd>Called when a reading is taken on one of the child interfaces of the Sensor interface.</dd>
+	<dt>{{domxref('Sensor.onactivate')}}</dt>
+	<dd>Called when one of the Sensor interface's becomes active.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+	<dt>{{domxref('Sensor.start()')}}</dt>
+	<dd>Activates one of the sensors based on <code>Sensor</code>.</dd>
+	<dt>{{domxref('Sensor.stop()')}}</dt>
+	<dd>Deactivates one of the sensors based on <code>Sensor</code>.</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('Generic Sensor','#the-sensor-interface','Sensor')}}</td>
+			<td>{{Spec2('Generic Sensor')}}</td>
+			<td>Initial definition.</td>
+		</tr>
+	</tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Sensor")}}</p>
diff --git a/files/pt-br/web/api/server-sent_events/index.html b/files/pt-br/web/api/server-sent_events/index.html
new file mode 100644
index 0000000000..4a7f8eb1b7
--- /dev/null
+++ b/files/pt-br/web/api/server-sent_events/index.html
@@ -0,0 +1,79 @@
+---
+title: Server-sent events
+slug: Web/API/Server-sent_events
+tags:
+  - API
+  - NeedsTranslation
+  - Overview
+  - SSE
+  - Server-sent events
+  - TopicStub
+translation_of: Web/API/Server-sent_events
+---
+<p>{{DefaultAPISidebar("Server Sent Events")}}</p>
+
+<p>Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as <em><a href="/en-US/docs/DOM/event">Events</a> + data</em> inside the web page.</p>
+
+<h2 id="Concepts_and_usage">Concepts and usage</h2>
+
+<p>To learn how to use server-sent events, see our article <a href="/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events">Using server-sent events</a>.</p>
+
+<h2 id="Interfaces" name="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("EventSource")}}</dt>
+ <dd>Defines all the features that handle connecting to a server, receiving events/data, errors, closing a connection, etc.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<ul>
+ <li><a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP</a></li>
+</ul>
+
+<h2 id="Specification">Specification</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', '#server-sent-events', 'Server-sent events')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<h3 id="Tools" name="Tools">Tools</h3>
+
+<ul>
+ <li><a href="https://github.com/EventSource/eventsource">EventSource polyfill for Node.js</a></li>
+ <li>Remy Sharp’s <a class="link-https" href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource polyfill</a></li>
+ <li>Yaffle’s <a class="link-https" href="https://github.com/Yaffle/EventSource" title="https://github.com/Yaffle/EventSource">EventSource polyfill</a></li>
+ <li>Rick Waldron’s <a class="link-https" href="https://github.com/rwldrn/jquery.eventsource">jquery plugin</a></li>
+ <li>intercooler.js <a href="http://intercoolerjs.org/docs.html#sse">declarative SSE support</a></li>
+</ul>
+
+<h3 id="Related_Topics" name="Related_Topics">Related Topics</h3>
+
+<ul>
+ <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a></li>
+ <li><a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li>
+ <li><a href="/en-US/docs/WebSockets" title="WebSockets">WebSockets</a></li>
+</ul>
+
+<h3 id="Other_resources">Other resources</h3>
+
+<ul>
+ <li>A <a href="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/" title="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/">Twitter like application</a> powered by server-sent events and <a class="link-https" href="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline" title="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends timeline">its code on Github</a>.</li>
+ <li><a href="http://dsheiko.com/weblog/html5-and-server-sent-events" title="http://dsheiko.com/weblog/html5-and-server-sent-events">HTML5 and Server-sent events</a></li>
+ <li><a href="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html" title="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html">Server-sent events using Asp.Net</a></li>
+</ul>
diff --git a/files/pt-br/web/api/server-sent_events/using_server-sent_events/index.html b/files/pt-br/web/api/server-sent_events/using_server-sent_events/index.html
new file mode 100644
index 0000000000..1a7b084ab6
--- /dev/null
+++ b/files/pt-br/web/api/server-sent_events/using_server-sent_events/index.html
@@ -0,0 +1,189 @@
+---
+title: Using server-sent events
+slug: Web/API/Server-sent_events/Using_server-sent_events
+translation_of: Web/API/Server-sent_events/Using_server-sent_events
+---
+<p>{{DefaultAPISidebar("Server Sent Events")}}</p>
+
+<div class="summary">
+<p>É fácil desenvolver um aplicativo Web que usa <a href="/en-US/docs/Web/API/Server-sent_events">server-sent events</a>. Você precisára de um pouco de código no servidor para transmitir eventos para o front-end, mas o código do lado do cliente funciona quase de forma idêntica aos <a href="/en-US/docs/Web/API/WebSockets_API">websockets</a> em questão de tratamento de eventos recebidos. Essa é uma conexão unidirecional, portanto você não pode enviar eventos de um cliente para um servidor.</p>
+</div>
+
+<h2 id="Receiving_events_from_the_server">Receiving events from the server</h2>
+
+<p>The server-sent event API is contained in the {{domxref("EventSource")}} interface; to open a connection to the server to begin receiving events from it, create a new <code>EventSource</code> object with the URL of a script that generates the events. For example:</p>
+
+<pre class="brush: js notranslate">const evtSource = new EventSource("ssedemo.php");</pre>
+
+<p>If the event generator script is hosted on a different origin, a new <code>EventSource</code> object should be created with both the URL and an options dictionary. For example, assuming the client script is on <code>example.com</code>:</p>
+
+<pre class="brush: js notranslate">const evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } );</pre>
+
+<p>Once you've instantiated your event source, you can begin listening for messages from the server by attaching a handler for the {{event("message")}} event:</p>
+
+<pre class="brush: js notranslate">evtSource.onmessage = function(event) {
+  const newElement = document.createElement("li");
+  const eventList = document.getElementById("list");
+
+  newElement.innerHTML = "message: " + event.data;
+  eventList.appendChild(newElement);
+}
+</pre>
+
+<p>This code listens for incoming messages (that is, notices from the server that do not have an <code>event</code> field on them) and appends the message text to a list in the document's HTML.</p>
+
+<p>You can also listen for events with <code>addEventListener()</code>:</p>
+
+<pre class="brush: js notranslate">evtSource.addEventListener("ping", function(event) {
+  const newElement = document.createElement("li");
+  const time = JSON.parse(event.data).time;
+  newElement.innerHTML = "ping at " + time;
+  eventList.appendChild(newElement);
+});
+</pre>
+
+<p>This code is similar, except that it will be called automatically whenever the server sends a message with the <code>event</code> field set to "ping"; it then parses the JSON in the <code>data</code> field and outputs that information.</p>
+
+<div class="blockIndicator warning">
+<p>When <strong>not used over HTTP/2</strong>, SSE suffers from a limitation to the maximum number of open connections, which can be specially painful when opening various tabs as the limit is <em>per browser</em> and set to a very low number (6). The issue has been marked as "Won't fix" in <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=275955" rel="noreferrer">Chrome</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=906896" rel="noreferrer">Firefox</a>. This limit is per browser + domain, so that means that you can open 6 SSE connections across all of the tabs to <code>www.example1.com</code> and another 6 SSE connections to <code>www.example2.com.</code> (from <a href="https://stackoverflow.com/a/5326159/1905229">Stackoverflow</a>). When using HTTP/2, the maximum number of simultaneous <em>HTTP streams</em> is negotiated between the server and the client (defaults to 100).</p>
+</div>
+
+<h2 id="Sending_events_from_the_server">Sending events from the server</h2>
+
+<p>The server-side script that sends events needs to respond using the MIME type <code>text/event-stream</code>. Each notification is sent as a block of text terminated by a pair of newlines. For details on the format of the event stream, see {{ anch("Event stream format") }}.</p>
+
+<p>The {{Glossary("PHP")}} code for the example we're using here follows:</p>
+
+<pre class="brush: php notranslate">date_default_timezone_set("America/New_York");
+header("Cache-Control: no-cache");
+header("Content-Type: text/event-stream");
+
+$counter = rand(1, 10);
+while (true) {
+  // Every second, send a "ping" event.
+
+  echo "event: ping\n";
+  $curDate = date(DATE_ISO8601);
+  echo 'data: {"time": "' . $curDate . '"}';
+  echo "\n\n";
+
+  // Send a simple message at random intervals.
+
+  $counter--;
+
+  if (!$counter) {
+    echo 'data: This is a message at time ' . $curDate . "\n\n";
+    $counter = rand(1, 10);
+  }
+
+  ob_end_flush();
+  flush();
+  sleep(1);
+}
+</pre>
+
+<p>The code above generates an event every second, with the event type "ping". Each event's data is a JSON object containing the ISO 8601 timestamp corresponding to the time at which the event was generated. At random intervals, a simple message (with no event type) is sent.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find a full example that uses the code shown in this article on GitHub — see <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
+</div>
+
+<h2 id="Error_handling">Error handling</h2>
+
+<p>When problems occur (such as a network timeout or issues pertaining to <a href="/en-US/docs/HTTP/Access_control_CORS" title="/en-US/docs/HTTP/Access_control_CORS">access control</a>), an error event is generated. You can take action on this programmatically by implementing the <code>onerror</code> callback on the <code>EventSource</code> object:</p>
+
+<pre class="brush: js notranslate">evtSource.onerror = function(err) {
+  console.error("EventSource failed:", err);
+};
+</pre>
+
+<h2 id="Closing_event_streams">Closing event streams</h2>
+
+<p>By default, if the connection between the client and server closes, the connection is restarted. The connection is terminated with the <code>.close()</code> method.</p>
+
+<pre class="notranslate">evtSource.close();</pre>
+
+<h2 id="Event_stream_format">Event stream format</h2>
+
+<p>The event stream is a simple stream of text data which must be encoded using <a href="/en-US/docs/Glossary/UTF-8">UTF-8</a>. Messages in the event stream are separated by a pair of newline characters. A colon as the first character of a line is in essence a comment, and is ignored.</p>
+
+<div class="note"><strong>Note:</strong> The comment line can be used to prevent connections from timing out; a server can send a comment periodically to keep the connection alive.</div>
+
+<p>Each message consists of one or more lines of text listing the fields for that message. Each field is represented by the field name, followed by a colon, followed by the text data for that field's value.</p>
+
+<h3 id="Fields">Fields</h3>
+
+<p>Each message received has some combination of the following fields, one per line:</p>
+
+<dl>
+ <dt><code>event</code></dt>
+ <dd>A string identifying the type of event described. If this is specified, an event will be dispatched on the browser to the listener for the specified event name; the website source code should use <code>addEventListener()</code> to listen for named events. The <code>onmessage</code> handler is called if no event name is specified for a message.</dd>
+ <dt><code>data</code></dt>
+ <dd>The data field for the message. When the <code>EventSource</code> receives multiple consecutive lines that begin with <code>data:</code>, <a href="http://www.w3.org/TR/eventsource/#dispatchMessage">it will concatenate them</a>, inserting a newline character between each one. Trailing newlines are removed.</dd>
+ <dt><code>id</code></dt>
+ <dd>The event ID to set the <a href="/en/Server-sent_events/EventSource" title="en/Server-sent events/EventSource"><code>EventSource</code></a> object's last event ID value.</dd>
+ <dt><code>retry</code></dt>
+ <dd>The reconnection time to use when attempting to send the event. This must be an integer, specifying the reconnection time in milliseconds. If a non-integer value is specified, the field is ignored.</dd>
+</dl>
+
+<p>All other field names are ignored.</p>
+
+<div class="note"><strong>Note:</strong> If a line doesn't contain a colon, the entire line is treated as the field name with an empty value string.</div>
+
+<h3 id="Examples">Examples</h3>
+
+<h4 id="Data-only_messages">Data-only messages</h4>
+
+<p>In the following example, there are three messages sent. The first is just a comment, since it starts with a colon character. As mentioned previously, this can be useful as a keep-alive if messages may not be sent regularly.</p>
+
+<p>The second message contains a data field with the value "some text". The third message contains a data field with the value "another message\nwith two lines". Note the newline special character in the value.</p>
+
+<pre class="notranslate">: this is a test stream
+
+data: some text
+
+data: another message
+data: with two lines
+</pre>
+
+<h4 id="Named_events">Named events</h4>
+
+<p>This example sends some named events. Each has an event name specified by the <code>event</code> field, and a <code>data</code> field whose value is an appropriate JSON string with the data needed for the client to act on the event. The <code>data</code> field could, of course, have any string data; it doesn't have to be JSON.</p>
+
+<pre class="notranslate">event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+
+event: userdisconnect
+data: {"username": "bobby", "time": "02:34:23"}
+
+event: usermessage
+data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."}
+</pre>
+
+<h4 id="Mixing_and_matching">Mixing and matching</h4>
+
+<p>You don't have to use just unnamed messages or typed events; you can mix them together in a single event stream.</p>
+
+<pre class="notranslate">event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+data: Here's a system message of some kind that will get used
+data: to accomplish some task.
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}</pre>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<h3 id="EventSource"><code>EventSource</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.EventSource")}}</p>
+</div>
+</div>
diff --git a/files/pt-br/web/api/service_worker_api/index.html b/files/pt-br/web/api/service_worker_api/index.html
new file mode 100644
index 0000000000..05ae2f90c8
--- /dev/null
+++ b/files/pt-br/web/api/service_worker_api/index.html
@@ -0,0 +1,322 @@
+---
+title: API do Service Worker
+slug: Web/API/Service_Worker_API
+translation_of: Web/API/Service_Worker_API
+---
+<p>{{ServiceWorkerSidebar}} </p>
+
+<p class="summary">Essencialmente, um <em>service worker</em> se comporta como um servidor <em>proxy</em> situado entre uma aplicação web, o navegador e a rede (quando esta estiver disponível). Eles servem, dentre outras coisas, para possibilitar a criação de experiências <em>offline</em> eficientes, interceptar requisições de rede – agindo adequadamente de acordo com o <em>status</em> atual da conexão – e atualizar os <em>assets</em> que residem no servidor. Service workers também permitem o acesso às APIs de <em>push notification</em> e <em>background sync</em>. </p>
+
+<h2 id="Service_worker_-_Conceitos_e_uso">Service worker - Conceitos e uso</h2>
+
+<p>Um <em>service worker</em> é um tipo especial de <em><a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Worker">worker</a></em> baseado em eventos, o qual é registrado para um determinado <em>path</em> e origem. Na prática, ele é um arquivo JavaScript que pode controlar as páginas do site ao qual ele está associado, interceptando e modificando requisições e a navegação em si. Ele também faz <em>cache</em> dos recursos trafegados de maneira bastante granular, visando oferecer controle total sobre como a sua aplicação se comporta em determinadas situações (o exemplo mais óbvio, naturalmente, é quando não há conexão de rede disponível).</p>
+
+<p>Assim como outros tipos de <em>worker</em>, um <em>service worker</em> é executado em um contexto isolado. Dessa forma, não tem acesso ao DOM e roda em uma thread completamente separada, sendo incapaz de realizar operações blocantes. Service workers foram projetados para ser totalmente assíncronos; como consequência disso, não permitem o acesso a APIs como <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/XMLHttpRequest/Requisicoes_sincronas_e_assincronas#Synchronous_request">XHR síncrono</a> e <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Window/Window.localStorage">localStorage</a>.  </p>
+
+<p>Por questões de segurança, <em>service workers</em> funcionam apenas em sites servidos via HTTPS. A possibilidade de modificar requisições em um domínio desprotegido contra ataques do tipo <a href="https://developer.mozilla.org/en-US/docs/Glossary/MitM">man-in-the-middle</a> seria desastrosa. No Firefox, é vetado o acesso à API de <em>service workers</em> para sites abertos no <a href="https://support.mozilla.org/pt-BR/kb/navegacao-privativa-use-firefox-sem-historico">Modo de navegação privativa</a>.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Os service workers superaram tentativas anteriores de resolver problemas semelhantes, como o <a href="http://alistapart.com/article/application-cache-is-a-douchebag">AppCache</a>. Há uma explicação simples para eles terem sido bem-sucedidos: Service workers <strong>não</strong> tentam adivinhar o que você está tentando fazer e, muito menos, deixam de funcionar caso não tenham adivinhado corretamente. Pelo contrário, você tem o controle milimétrico de tudo.    </p>
+</div>
+
+<div class="note">
+<p><strong>Nota:</strong> Service workers fazem uso intenso de <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise">promessas</a>, uma vez que eles têm de esperar por respostas assíncronas para, após retornadas, poderem executar a ação apropriada (de sucesso ou erro). A arquitetura de promessas é ideal para esse tipo de cenário.</p>
+</div>
+
+<p> </p>
+
+<h3 id="Registrando">Registrando</h3>
+
+<p>O registro inicial de um <em>service worker</em> é feito através do método {{domxref("ServiceWorkerContainer.register()")}}. Se bem-sucedido, seu <em>service worker</em> será descarregado no cliente e então ocorrerá a tentativa de instalação/ativação para as URLs acessadas pelo usuário sob a origem registrada ou, caso deseje, apenas dentro de um subconjunto limitado por você.</p>
+
+<h3 id="Download_instalação_e_ativação">Download, instalação e ativação</h3>
+
+<p>Nesse estágio, seu service worker seguirá o seguinte ciclo de vida:</p>
+
+<ol>
+ <li>Download</li>
+ <li>Instalação</li>
+ <li>Ativação</li>
+</ol>
+
+<p>Quando o usuário acessa pela primeira vez um site ou página controlado por um service worker, ele é descarregado imediatamente.</p>
+
+<p>Após isso, serão feitos novos downloads em intervalos de aproximadamente 24 horas. O download <strong>pode</strong> ocorrer mais frequentemente, mas ele <strong>precisa</strong> ser feito a cada 24 horas para prevenir que scripts ruins sejam um problema por períodos muito extensos. </p>
+
+<p>A tentativa de instalação é feita sempre que o arquivo descarregado é identificado como novo – seja por diferir dos <em>service workers</em> pré-existentes (é feita uma comparação binária nessa etapa) ou por ser o primeiro descoberto para a página ou site em questão.</p>
+
+<p>Na primeira vez que um <em>service worker</em> é disponibilizado, é feita a tentativa de instalação. Se bem-sucedida, ele é ativado.</p>
+
+<p>Se, por outro lado, já existe um <em>service worker</em> pré-instalado para uma página ou site e for disponibilizada uma nova versão, ela será descarregada, mas não imediatamente ativada. Isso é chamado de <strong><em>worker</em> em espera</strong>. Só será efetuada a ativação da versão atualizada quando não houver mais páginas utilizando a anterior. Após isso, ele passa a ser o <strong><em>worker</em> ativo</strong>. Caso necessário, é possível pular a etapa de espera com o método {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}}. Em seguida, o novo worker ativo pode reivindicar as páginas existentes usando {{domxref("Clients.claim()")}}. </p>
+
+<p>Você pode adicionar um <em>listener</em> para o evento {{domxref("InstallEvent")}}. Uma ação padrão, quando esse evento é disparado, é preparar o seu <em>service worker</em> para ser utilizado (por exemplo: criado um cache usando a API de storage nativa e armazenando nela os <em>assets</em> que você quer que permaneçam disponíveis caso a aplicação fique <em>offline</em>).</p>
+
+<p>Há também o evento <code>activate</code>. O momento em que ele é disparado é geralmente o ideal para limpar caches antigos e outras coisas associadas com a versão anterior do seu <em>service worker</em>.</p>
+
+<p>Seu service worker pode responder a requisições usando o {{domxref("FetchEvent")}}. Você pode manipular a resposta a essas requisições da maneira que quiser, através do método {{domxref("FetchEvent.respondWith")}}.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Como <code>oninstall<font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #fff3d4; font-size: 18px;"> e </span></font></code><code>onactivate</code> podem demorar a serem concluídos, a especificação de <em>service workers</em> disponibiliza um método <a href="https://developer.mozilla.org/en-US/docs/Web/API/ExtendableEvent/waitUntil">waitUntil</a>. Ele recebe como parâmetro uma <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise">promessa</a>, notificando o navegador que há trabalho em andamento até que aquela promessa seja resolvida. O navegador, portanto, não deverá encerrar o service worker durante esse período de espera. </p>
+</div>
+
+<p>Para um tutorial completo, mostrando como construir seu primeiro exemplo do zero, leia <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Service_Worker_API/Using_Service_Workers">Usando Service Workers</a>.</p>
+
+<h2 id="Outras_ideias_de_usos_possíveis">Outras ideias de usos possíveis</h2>
+
+<ul>
+ <li>Sincronização de dados em <em>background</em></li>
+ <li>Responder a requisições de recursos a partir de outras origens</li>
+ <li>Receber de forma centralizada atualizações para dados de cálculo mais custoso, como geolocalização ou giroscópio, de forma a permitir que múltiplas páginas façam uso de um único conjunto de dados.</li>
+ <li>No lado do cliente, fazer compilação e gerenciamento de dependências para CoffeeScript, LESS, módulos CommonJS/AMD, entre outros.  </li>
+ <li><em>Hooks</em> para serviços em <em>background</em>.</li>
+ <li>Templates customizados com base em certos padrões de URL.</li>
+ <li>Melhorias de performance como, por exemplo, fazer o pré-carregamento de recursos que o usuário provavelmente irá precisar a curto prazo, como as próximas fotos de um álbum.</li>
+</ul>
+
+<p>No futuro, service workers serão capazes de fazer várias outras coisas úteis para a plataforma web, deixando-a mais próxima de <em>apps</em> nativos em.</p>
+
+<p>É interessante mencionar que outras especificações podem e irão passar a usar o contexto de service workers, por exemplo:</p>
+
+<ul>
+ <li><a href="https://github.com/WICG/BackgroundSync">Sincronização em background</a>: Iniciar um service worker mesmo quando não há usuários no site, de forma que o cache possa ser atualizado;</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API">Reagir a mensagens push</a>: Iniciar um service worker para enviar uma mensagem aos usuários dizendo que há conteúdo novo disponível;</li>
+ <li>Reagir a uma data/hora específica;</li>
+ <li>Entrar em uma <a href="https://en.wikipedia.org/wiki/Geo-fence">geo-fence</a>.</li>
+</ul>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("Cache")}}</dt>
+ <dd>Representa o armazenamento para os pares de objeto {{domxref("Request")}} e {{domxref("Response")}}, os quais são cacheados como parte do ciclo de vida do {{domxref("ServiceWorker")}}.</dd>
+ <dt>{{domxref("CacheStorage")}}</dt>
+ <dd>Representa o armazenamento para objetos {{domxref("Cache")}}. Ele disponibiliza um diretório-mestre com todos os caches nomeados que um {{domxref("ServiceWorker")}} pode acessar, mantendo o mapeamento de nomes para os objetos {{domxref("Cache")}} correspondentes.</dd>
+ <dt>{{domxref("Client")}}</dt>
+ <dd>Representa o escopo do cliente de um <em>service worker</em>. Um cliente pode ser um documento no contexto de um navegador ou um {{domxref("SharedWorker")}}, o qual é controlado por um <em>worker</em> ativo.</dd>
+ <dt>{{domxref("Clients")}}</dt>
+ <dd>Representa o container para uma lista de objetos {{domxref("Client")}}. É a principal forma de acessar os clientes na origem atual para o <em>service worker</em> ativo.</dd>
+ <dt>{{domxref("ExtendableEvent")}}</dt>
+ <dd>Estende a vida dos eventos <code>install</code> e <code>activate</code> disparados no {{domxref("ServiceWorkerGlobalScope")}}, como parte do ciclo de vida do <em>service worker</em>. Isso garante que qualquer evento funcional (como o {{domxref("FetchEvent")}}) não seja despachado para o {{domxref("ServiceWorker")}} até que ele conclua as ações em andamento, como por exemplo: atualizar esquemas de banco de dados, apagar caches defasados, etc.</dd>
+ <dt>{{domxref("ExtendableMessageEvent")}}</dt>
+ <dd>O objeto de evento do {{event("message_(ServiceWorker)","message")}}, o qual é disparado em um <em>service worker </em>(quando uma mensagem de canal é recebida no {{domxref("ServiceWorkerGlobalScope")}} a partir de outro contexto) — estende o tempo de vida desses eventos.</dd>
+ <dt>{{domxref("FetchEvent")}}</dt>
+ <dd>O parâmetro recebido no <em>handler</em>  {{domxref("ServiceWorkerGlobalScope.onfetch")}}. O <code>FetchEvent</code> representa uma ação de descarregamento que é despachada no {{domxref("ServiceWorkerGlobalScope")}} de um  {{domxref("ServiceWorker")}}. Ele contém informações sobre a requisição e a resposta resultante, além de disponibilizar o método {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}}, o qual nos permite devolver uma resposta customizada para a página que está sendo controlada.</dd>
+ <dt>{{domxref("InstallEvent")}}</dt>
+ <dd>O parâmetro recebido no <em>handler</em>  {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}}. A interface <code>InstallEvent</code> representa uma ação de instalação que é despachada no {{domxref("ServiceWorkerGlobalScope")}} de um  {{domxref("ServiceWorker")}}. Como deriva do {{domxref("ExtendableEvent")}}, ele assegura que eventos funcionais, como o {{domxref("FetchEvent")}}, não sejam despachados durante a instalação. </dd>
+ <dt>{{domxref("NavigationPreloadManager")}}</dt>
+ <dd>Disponibiliza métodos para gerenciar o pré-carregamento de recursos com um <em>service worker.</em> </dd>
+ <dt>{{domxref("Navigator.serviceWorker")}}</dt>
+ <dd>Retornar um objeto {{domxref("ServiceWorkerContainer")}}, o qual permite accesso ao registro, remoção, atualização e comunicação com os objetos {{domxref("ServiceWorker")}} para o <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">documento associado</a>.</dd>
+ <dt>{{domxref("NotificationEvent")}}</dt>
+ <dd>O parâmetro recebido no <em>handler</em>  {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}}. A interface <code>NotificationEvent</code> representa um evento de <em>click</em> em uma notificação que é despachado no {{domxref("ServiceWorkerGlobalScope")}} de um {{domxref("ServiceWorker")}}.</dd>
+ <dt>{{domxref("ServiceWorker")}}</dt>
+ <dd>Representa um <em>service worker</em>. Diferentes contextos de navegação (ex: páginas, <em>workers</em>, etc.) podem ser associados com o mesmo objeto <code>ServiceWorker</code>.</dd>
+ <dt>{{domxref("ServiceWorkerContainer")}}</dt>
+ <dd>Disponibiliza um objeto representando o service worker como uma unidade global no ecossistema de rede, incluindo métodos para registrar, desregistrar e atualizar <em>service workers</em>, além de poder acessar o status de cada <em>worker</em> e seus registros.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope")}}</dt>
+ <dd>Representa o contexto de execução global de um <em>service worker</em>.</dd>
+ <dt>{{domxref("ServiceWorkerMessageEvent")}} {{deprecated_inline}}</dt>
+ <dd>Representa uma mensagem enviada a um {{domxref("ServiceWorkerGlobalScope")}}. <strong>Vale ressaltar que essa interface está defasada em navegadores modernos. As mensagens de <em>service worker</em> agora usam a interface {{domxref("MessageEvent")}} para manter consistência com outras funcionalidades de messageria da web.</strong></dd>
+ <dt>{{domxref("ServiceWorkerRegistration")}}</dt>
+ <dd>Representa o registro de um <em>service worker</em>.</dd>
+ <dt>{{domxref("ServiceWorkerState")}} {{experimental_inline}}</dt>
+ <dd>Associado com o estado do <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker" title="The ServiceWorker interface of the ServiceWorker API provides a reference to a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same service worker, each through a unique ServiceWorker object."><code>ServiceWorker</code></a>.</dd>
+ <dt>{{domxref("SyncEvent")}} {{non-standard_inline}}</dt>
+ <dd>
+ <p>A interface SyncEvent representa uma ação de sincronização que é despachada no {{domxref("ServiceWorkerGlobalScope")}} de um ServiceWorker. </p>
+ </dd>
+ <dt>{{domxref("SyncManager")}} {{non-standard_inline}}</dt>
+ <dd>Disponibiliza uma interface para registrar e listar registros de sincronização.</dd>
+ <dt>{{domxref("WindowClient")}}</dt>
+ <dd>Representa o escopo de um cliente de <em>service worker</em> que é um documento em um contexto de navegador, o qual é controlado por um <em>worker</em> ativo. Esse é um tipo especial de objeto {{domxref("Client")}}, como alguns métodos e propriedades adicionais disponíveis.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Navegador">Compatibilidade de Navegador</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Recurso</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>Suporte básico</td>
+   <td>{{CompatChrome(40)}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[2]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>24</td>
+   <td>{{ CompatNo() }}<sup>[3]</sup></td>
+  </tr>
+  <tr>
+   <td>Eventos install/activate</td>
+   <td>{{ CompatChrome(40) }}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[2]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>Evento fetch/request/<br>
+    <code>respondWith()</code></td>
+   <td>{{CompatChrome(40)}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[2]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>caches/cache</td>
+   <td>
+    <p>{{CompatChrome(42)}}</p>
+   </td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{ CompatGeckoDesktop("39.0") }}<sup>[2]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("ServiceWorkerMessageEvent")}} defasado em favor {{domxref("MessageEvent")}}</td>
+   <td>
+    <p>{{CompatChrome(57)}}</p>
+   </td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoDesktop("55.0") }}<sup>[2]</sup></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>NavigationPreloadManager</code></td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td> </td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatOpera(46)}}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Recursos</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>Suporte básico</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40)}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}<sup>[3]</sup></td>
+  </tr>
+  <tr>
+   <td>Eventos install/activate</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40)}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>Evento fetch/request/<br>
+    <code>respondWith()</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40)}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>caches/cache</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40)}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{ CompatGeckoMobile("39.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("ServiceWorkerMessageEvent")}} defasado em favor de {{domxref("MessageEvent")}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>
+    <p>{{CompatChrome(57)}}</p>
+   </td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile("55.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>NavigationPreloadManager</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatOperaMobile(46)}}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Esse recurso ainda não é suportado, apesar de <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/serviceworker/">já estar em desenvolvimento</a>.</p>
+
+<p>[2] Service workers (e <a href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API">Push</a>) foram desabilitados no Firefox, nas versões <a href="https://www.mozilla.org/en-US/firefox/organizations/">45 &amp; 52 Extended Support Releases</a> (ESR.)</p>
+
+<p>[3] Esse recurso ainda não é suportado, apesar de <a href="https://bugs.webkit.org/show_bug.cgi?id=174541">já estar em desenvolvimento</a>.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="https://serviceworke.rs/">ServiceWorker Cookbook</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+ <li><a href="https://www.fastly.com/blog/best-practices-for-using-the-vary-header">Best Practices for using the VARY header</a></li>
+</ul>
diff --git a/files/pt-br/web/api/service_worker_api/using_service_workers/index.html b/files/pt-br/web/api/service_worker_api/using_service_workers/index.html
new file mode 100644
index 0000000000..983b352d82
--- /dev/null
+++ b/files/pt-br/web/api/service_worker_api/using_service_workers/index.html
@@ -0,0 +1,522 @@
+---
+title: Usando Service Workers
+slug: Web/API/Service_Worker_API/Using_Service_Workers
+translation_of: Web/API/Service_Worker_API/Using_Service_Workers
+---
+<p>{{ServiceWorkerSidebar}}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<div class="summary">
+<p>Esse artigo contém informações de como começar com service workers, incluindo a arquitetura básica, registro de um service worker, o processo de instalação e ativação de um novo service worker, atualização de seu service worker, controle de cache e respostas customizadas, tudo isso no contexto de um simples app com a funcionalidade offline.</p>
+</div>
+
+<h2 id="A_premissa_dos_Service_Workers">A premissa dos Service Workers</h2>
+
+<p>O principal problema que os usuários da web sofreram durante anos foi a perda de conexão. Até mesmo melhor web app do mundo terá uma péssima experiência de usuário se você não conseguir baixa-lá. Houveram várias tentativas de criar tecnologias para resolver esse problema, como mostra nossa página <a href="/en-US/Apps/Build/Offline">Offline</a>, e algumas questões foram resolvidas. Mas o maior problema é que, no geral, ainda não há um bom mecanismo de controle para caching de assets e requisições de rede personalizadas.<br>
+ <br>
+ A tentativa anterior — <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Using_the_application_cache">AppCache</a> — parecia uma boa ideia, pois permitia especificar facilmente os assets para cache. Porém, fazia várias suposições sobre o que você estava tentando fazer e depois quebrava horrivelmente quando seu app não seguia exatamente tais suposições. Leia <a href="http://alistapart.com/article/application-cache-is-a-douchebag">Application Cache is a Douchebag</a> de Jake Archibald para mais detalhes.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: A partir do Firefox 44, quando <a href="/en-US/docs/Web/HTML/Using_the_application_cache">AppCache</a> é usado para fornecer suporte offline  uma página, um aviso é exibido no console para que os desenvolvedores usem <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> ({{bug("1204581")}}.)</p>
+</div>
+
+<p>Service workers devem finalmente corrigir esses problemas. A sintaxe do service worker é mais complexa do que a do AppCache, mas a vantagem é que você pode usar Javascript para controlar os comportamentos implícitos do AppCache com um bom grau de granularidade, permitindo que você lide com esse problema e muitos outros. Usando Service Worker você pode facilmente configurar um app para usar primeiro assets em cache, provendo uma experiência padronizada mesmo que esteja offline, antes de obter mais dados da rede (mais conhecido como <a href="http://offlinefirst.org/">Offline First</a>). Isso já está disponível em apps nativos, que é uma das principais razões pelas quais apps nativos são frequentemente mais escolhidos do que web apps.</p>
+
+<h2 id="Configuração_para_usar_service_workers">Configuração para usar service workers</h2>
+
+<p>Várias características de service workers estão habilitadas por padrão em versões mais recentes dos navegadores suportados. Se, no entanto, encontrar um código de demonstração que não está funcionando na suas versões instaladas, você precisará habilitar essa preferência:</p>
+
+<ul>
+ <li><strong>Firefox Nightly</strong>: Vá para sobre: config e mude <code>dom.serviceWorkers.enabled para true; reinicie o browser.</code></li>
+ <li><strong>Chrome Canary</strong>: Vá para <code>chrome://flags e mude para experimental-web-platform-features; reinicie o navegador (note que alguns recursos do Chrome vem habilitados por padrão.)</code></li>
+ <li><strong>Opera</strong>:  Vá em <code>opera://flags e habilite Support for ServiceWorker; reinicie o navegador.</code></li>
+ <li><strong>Microsoft Edge</strong>: Vá para <code>about:flags</code> and marque <code>Enable service workers</code>; reinicie o navegador.</li>
+</ul>
+
+<p>Você também precisa fornecer seu código via HTTPS — Service workers estão restritos a rodar apenas via HTTPS por motivos de segurança. GitHub serve como um bom host para os experimentos, pois suporta HTTPS. Para facilitar o desenvolvimento local, localhost também é considerado uma origem segura pelos navegadores. </p>
+
+<h2 id="Arquitetura_Básica">Arquitetura Básica</h2>
+
+<p>Com service workers, os seguintes passos geralmente são observados como configuração básica:</p>
+
+<ol>
+ <li>A URL do service worker é buscada e registrada via {{domxref("serviceWorkerContainer.register()")}}.</li>
+ <li>Em caso de sucesso, o service worker é executado em um {{domxref("ServiceWorkerGlobalScope") }}; isto é basicamente um tipo especial de contexto do worker, que é executado fora da thread de execução do script principal, sem acesso ao DOM.</li>
+ <li>O service worker agora está pronto para processar eventos.</li>
+ <li>A tentativa de instalação do worker acontece quando as páginas controladas pelo service worker são acessadas. O evento de instalação é sempre o primeiro a ser enviado ao service worker (isto pode ser usado para iniciar o processode preencher um IndexedDB, e armazenar em cache os assets do site). Este é realmente o mesmo tipo de procedimento para instalação de um aplicativo nativo ou do Firefox OS — disponibilizando tudo offline.</li>
+ <li>Quando o manipulador <code>oninstall </code>estiver completo, considera-se que o service worker está instalado.</li>
+ <li>O próximo é a ativação. Quando um service worker é instalado, ele recebe um evento de ativação. O uso primário do <code>onactivate é</code> para limpeza de recursos usado em versões anterioires do script de um Service worker.</li>
+ <li>O Service worker agora vai controlar páginas, mas apenas aquelas abertas após o <code>register() </code>tiver sido bem-sucedido. Isto é, um documento inicia a vida com ou sem Service worker e mantém isso durante seu tempo de vida. Logo, documentos terão de ser recarregados para serem controlados.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12636/sw-lifecycle.png" style="display: block; height: 867px; margin: 0px auto; width: 579px;"></p>
+
+<p>O gráfico abaixo mostra um resumo dos eventos de service worker disponíveis:</p>
+
+<p><img alt="install, activate, message, fetch, sync, push" src="https://mdn.mozillademos.org/files/12632/sw-events.png" style="display: block; margin: 0px auto;"></p>
+
+<h3 id="Promises">Promises</h3>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> são um ótimo mecanismo para executar operações assíncronas, onde o sucesso de uma depende do sucesso das outras. Isto é o fundamento para o modo como os service workers trabalham.<br>
+ <br>
+ Promises pode fazer uma variedade de coisas, mas tudo o que precisa saber agora é que, se algo retorna uma promise, você pode inserir <code>.then()</code> ao final e incluir dentro dela callback para casos de sucesso ou poder inserir <code>.catch() </code>ao final, se quiser incluir um callback para falha.</p>
+
+<p>Vamos comparar a estrutura de um callback tradicional síncrono para uma promise assíncrona equivalente.</p>
+
+<h4 id="sync">sync</h4>
+
+<pre class="brush: js notranslate">try {
+  var value = myFunction();
+  console.log(value);
+} catch(err) {
+  console.log(err);
+}</pre>
+
+<h4 id="async">async</h4>
+
+<pre class="brush: js notranslate">myFunction().then(function(value) {
+  console.log(value);
+}).catch(function(err) {
+  console.log(err);
+});</pre>
+
+<p>No primeiro exemplo, temos que esperar <code>myFunction()</code> executar e retornar <code>value</code> antes que qualquer código adicional possa ser executado. No segundo exemplo, <code>myFunction()</code> retorna uma promessa para <code>value</code>, então o resto do código pode ser executado logo em seguida. Quando a promessa é atendida, o código dentro do método <code>then</code> será executado, assincronamente.<br>
+ <br>
+ Agora para um exemplo real — e se quiséssemos carregar imagens dinamicamente, mas quiséssemos ter certeza que as imagens estão carregadas antes de tentar mostrá-las? É uma coisa padrão que estamos querendo fazer, mas pode ser um pouco complicado. Podemos usar <code>.onload</code> para somente mostrar a imagem após ela ter carregado, mas e para os eventos que aconteceram antes de começarmos a ouvi-los? Podemos tentar contornar isso usando <code>.complete</code>, mas ainda não é a prova de falhas, e para várias imagens? E, ummm, ainda é síncrono, portanto bloqueia a thread principal.<br>
+ <br>
+ Ao invés disso, podemos contruir nossa própria promessa para lidar com casos deste tipo. (Veja o exemplo <a href="https://github.com/mdn/js-examples/tree/master/promises-test">Promises test</a> para o código fonte, ou <a href="https://mdn.github.io/promises-test/">veja rodando live</a>.)</p>
+
+<p>{{note("Uma implementação real de service worker usaria caching e onfetch ao invés da depreciada XMLHttpRequest API. Estes features não são usados aqui para que você foque em entender Promises.")}}</p>
+
+<pre class="brush: js notranslate">function imgLoad(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('Image didn\'t load successfully; error code:' + request.statusText));
+      }
+    };
+
+    request.onerror = function() {
+      reject(Error('There was a network error.'));
+    };
+
+    request.send();
+  });
+}</pre>
+
+<p>Retornamos uma nova promise usando o <code>Promise()</code> constructor, o qual tem uma função callback como argumento com os parâmetros <code>resolve</code> e<code>reject</code>. Em algum lugar na função, precisamos definir o que acontece para que a promessa ser resolvida com sucesso ou ser rejeitada — neste caso, retornar um status 200 OK ou não — e então chamar <code>resolve</code> em caso de sucesso, ou <code>reject</code> em caso de falha. O resto do conteúdo desta função é XHR padrão, então, não vamos nos preocupar com isso agora.</p>
+
+<p>Quando chamamos a função <code>imgLoad()</code>, chamamos com a url para a imagem que queremos carregar, como seria de se esperar, mas o resto do código é um pouco diferente:</p>
+
+<pre class="brush: js notranslate">var body = document.querySelector('body');
+var myImage = new Image();
+
+imgLoad('myLittleVader.jpg').then(function(response) {
+  var imageURL = window.URL.createObjectURL(response);
+  myImage.src = imageURL;
+  body.appendChild(myImage);
+}, function(Error) {
+  console.log(Error);
+});</pre>
+
+<p>No fim da chamada da função, encadeamos o método <code>then()</code> da promisse, o qual contém duas funções — a primeira é executada quando a promisse é resolvida com sucesso, e a segunda é chamada quando a promise é rejeitada. Caso seja resolvida, exibimos a imagem dentro de <code>myImage</code> e a acrescentamos ao corpo (cujo argument é o <code>request.response</code> contido dentro do método <code>resolve</code> da promise); no caso de rejeição, nos retornamos um erro ao console.</p>
+
+<p>Tudo isto acontece assincronamente.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Você também pode encadear chamadas de promises, por exemplo:<br>
+ <code>myPromise().then(success, failure).then(success).catch(failure);</code></p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode encontrar muito mais informações sobre promises lendo o excelente <a href="http://www.html5rocks.com/en/tutorials/es6/promises/">JavaScript Promises: there and back again</a> de Jake Archibald.</p>
+</div>
+
+<h2 id="Demonstração_de_Service_workers">Demonstração de Service workers</h2>
+
+<p>Para demonstrar apenas o básico de registro e instalação de um service worker, criamos uma simples demonstração chamada <a href="https://github.com/mdn/sw-test">sw-test</a>, que é uma simples galeria de imagens de Star Wars Lego. Usa uma função ativada por promise para ler dados de imagem a partir de um objeto JSON e carrega as imagens usando Ajax, antes de exibir as imagens em uma linha ao longo da página. Mantivemos as coisas estáticas e simples por enquanto. Também registra, instala e ativa um service worker, e quando mais especificações são suportadas pelos navegadores, armazena em cache todos os arquivos necessários para que funcione offline!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8243/demo-screenshot.png" style="display: block; height: 410px; margin: 0px auto; width: 480px;"><br>
+ <br>
+ <br>
+ Você pode ver o <a href="https://github.com/mdn/sw-test/">código-fonte no GitHub</a>, e <a href="https://mdn.github.io/sw-test/">ver um exemplo vivo</a>. A parte que mencionaremos aqui é a promise (veja <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L22-L47">app.js linhas 22-47</a>), que é uma versão modificada do que você leu a respeito acima, em <a href="https://github.com/mdn/promises-test">Promises test demo</a>. É diferente das seguintes formas:</p>
+
+<ol>
+ <li>No original, passamos somente uma URL para uma image que queríamos carregar. Nesta versão, passamos um fragmento de um JSON contendo todos os dados de uma única imagem (veja como se parecem em <a href="https://github.com/mdn/sw-test/blob/gh-pages/image-list.js">image-list.js</a>). Isto porque todos os dados para cada resolução de promise precisam ser transmitidos com a promise, pois é assíncrona. Se você passou apenas a url, e depois tentou acessar os outros itens no JSON separadamente, quando o laço de repetição <code>for()</code> estivesse sendo iterado posteriormente, não funcionaria, pois a promise não se resolveria ao mesmo tempo que as iterações estão sendo feitas (isso é um processo síncrono).</li>
+ <li>Na verdade, resolvemos a promise como uma matriz, pois queremos tornar o blob da imagem carregada disponível para a função de resolução mais adiante no código, além do nome da imagem, créditos e texto alternativo (veja <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L31-L34">app.js linhas 31-34</a>). Promises resolverão somente com um único argumento, então, se você quiser resolver múltiplos valores, precisará usar uma matriz/objeto..</li>
+ <li>Para acessar os valores da promise resolvida, acessamos esta função como esperado (veja <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L60-L64">app.js linhas 60-64</a>). Pode parecer um pouco estranho no começo, mas é assim que as promises funcionam.</li>
+</ol>
+
+<h2 id="Inserir_service_workers">Inserir service workers</h2>
+
+<p>Agora vamos aos service workers!</p>
+
+<h3 id="Registrando_seu_worker">Registrando seu worker</h3>
+
+<p>O primeiro bloco de código do nosso arquivo do app JavaScript — <code>app.js</code> — é conforme segue. Este é nosso entry point para usar service workers.</p>
+
+<pre class="brush: js notranslate">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw-test/sw.js', {scope: '/sw-test/'})
+  .then(function(reg) {
+    // registration worked
+    console.log('Registration succeeded. Scope is ' + reg.scope);
+  }).catch(function(error) {
+    // registration failed
+    console.log('Registration failed with ' + error);
+  });
+}</pre>
+
+<ol>
+ <li>The outer block performs a feature detection test to make sure service workers are supported before trying to register one.</li>
+ <li>Next, we use the {{domxref("ServiceWorkerContainer.register()") }} function to register the service worker for this site, which is just a JavaScript file residing inside our app (note this is the file's URL relative to the origin, not the JS file that references it.)</li>
+ <li>The <code>scope</code> parameter is optional, and can be used to specify the subset of your content that you want the service worker to control. In this case, we have specified '<code>/sw-test/'</code>, which means all content under the app's origin. If you leave it out, it will default to this value anyway, but we specified it here for illustration purposes.</li>
+ <li>The <code>.then()</code> promise function is used to chain a success case onto our promise structure.  When the promise resolves successfully, the code inside it executes.</li>
+ <li>Finally, we chain a <code>.catch()</code> function onto the end that will run if the promise is rejected.</li>
+</ol>
+
+<p>This registers a service worker, which runs in a worker context, and therefore has no DOM access. You then run code in the service worker outside of your normal pages to control their loading.<br>
+ <br>
+ A single service worker can control many pages. Each time a page within your scope is loaded, the service worker is installed against that page and operates on it. Bear in mind therefore that you need to be careful with global variables in the service worker script: each page doesn’t get its own unique worker.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Your service worker functions like a proxy server, allowing you to modify requests and responses, replace them with items from its own cache, and more.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: One great thing about service workers is that if you use feature detection like we’ve shown above, browsers that don’t support service workers can just use your app online in the normal expected fashion. Furthermore, if you use AppCache and SW on a page, browsers that don’t support SW but do support AppCache will use that, and browsers that support both will ignore the AppCache and let SW take over.</p>
+</div>
+
+<h4 id="Why_is_my_service_worker_failing_to_register">Why is my service worker failing to register?</h4>
+
+<p>This could be for the following reasons:</p>
+
+<ol>
+ <li>You are not running your application through HTTPS.</li>
+ <li>The path to your service worker file is not written correctly — it needs to be written relative to the origin, not your app’s root directory. In our example, the worker is at <code>https://mdn.github.io/sw-test/sw.js</code>, and the app’s root is <code>https://mdn.github.io/sw-test/</code>. But the path needs to be written as <code>/sw-test/sw.js</code>, not <code>/sw.js</code>.</li>
+ <li>The service worker being pointed to is on a different origin to that of your app. This is also not allowed.</li>
+</ol>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12630/important-notes.png" style="display: block; height: 277px; margin: 0px auto; width: 574px;"></p>
+
+<p>Also note:</p>
+
+<ul>
+ <li>The service worker will only catch requests from clients under the service worker's scope.</li>
+ <li>The max scope for a service worker is the location of the worker.</li>
+ <li>If your server worker is active on a client being served with the <code>Service-Worker-Allowed</code> header, you can specify a list of max scopes for that worker.</li>
+ <li>In Firefox, Service Worker APIs are hidden and cannot be used when the user is in <a href="https://support.mozilla.org/en-US/kb/private-browsing-use-firefox-without-history">private browsing mode</a>.</li>
+</ul>
+
+<h3 id="Install_and_activate_populating_your_cache">Install and activate: populating your cache</h3>
+
+<p>After your service worker is registered, the browser will attempt to install then activate the service worker for your page/site.<br>
+ <br>
+ The install event is fired when an install is successfully completed. The install event is generally used to populate your browser’s offline caching capabilities with the assets you need to run your app offline. To do this, we use Service Worker’s brand new storage API — {{domxref("cache")}} — a global on the service worker that allows us to store assets delivered by responses, and keyed by their requests. This API works in a similar way to the browser’s standard cache, but it is specific to your domain. It persists until you tell it not to — again, you have full control.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The Cache API is not supported in every browser. (See the {{anch("Browser support")}} section for more information.) If you want to use this now, you could consider using a polyfill like the one available in <a href="https://github.com/Polymer/topeka/blob/master/sw.js">Google's Topeka demo</a>, or perhaps store your assets in <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</p>
+</div>
+
+<p>Let’s start this section by looking at a code sample — this is the <a href="https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L18">first block you’ll find in our service worker</a>:</p>
+
+<pre class="brush: js notranslate">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});</pre>
+
+<ol>
+ <li>Here we add an <code>install</code> event listener to the service worker (hence <code>this</code>), and then chain a {{domxref("ExtendableEvent.waitUntil()") }} method onto the event — this ensures that the service worker will not install until the code inside <code>waitUntil()</code> has successfully occurred.</li>
+ <li>Inside <code>waitUntil()</code> we use the <a href="/en-US/docs/Web/API/CacheStorage/open"><code>caches.open()</code></a> method to create a new cache called <code>v1</code>, which will be version 1 of our site resources cache. This returns a promise for a created cache; once resolved, we then call a function that calls <code>addAll()</code> on the created cache, which for its parameter takes an array of origin-relative URLs to all the resources you want to cache.</li>
+ <li>If the promise is rejected, the install fails, and the worker won’t do anything. This is ok, as you can fix your code and then try again the next time registration occurs.</li>
+ <li>After a successful installation, the service worker activates. This doesn’t have much of a distinct use the first time your service worker is installed/activated, but it means more when the service worker is updated (see the {{anch("Updating your service worker") }} section later on.)</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a> works in a similar way to service worker cache, but it is synchronous, so not allowed in service workers.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> can be used inside a service worker for data storage if you require it.</p>
+</div>
+
+<h3 id="Custom_responses_to_requests">Custom responses to requests</h3>
+
+<p>Now you’ve got your site assets cached, you need to tell service workers to do something with the cached content. This is easily done with the <code>fetch</code> event.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12634/sw-fetch.png" style="display: block; margin: 0 auto;"></p>
+
+<p>A <code>fetch</code> event fires every time any resource controlled by a service worker is fetched, which includes the documents inside the specified scope, and any resources referenced in those documents (for example if <code>index.html</code> makes a cross origin request to embed an image, that still goes through its service worker.)</p>
+
+<p>You can attach a <code>fetch</code> event listener to the service worker, then call the <code>respondWith()</code> method on the event to hijack our HTTP responses and update them with your own magic.</p>
+
+<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    // magic goes here
+  );
+});</pre>
+
+<p>We could start by simply responding with the resource whose url matches that of the network request, in each case:</p>
+
+<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request)
+  );
+});</pre>
+
+<p><code>caches.match(event.request)</code> allows us to match each resource requested from the network with the equivalent resource available in the cache, if there is a matching one available. The matching is done via url and vary headers, just like with normal HTTP requests.</p>
+
+<p>Let’s look at a few other options we have when defining our magic (see our <a href="/en-US/docs/Web/API/Fetch_API">Fetch API documentation</a> for more information about {{domxref("Request")}} and {{domxref("Response")}} objects.)</p>
+
+<ol>
+ <li>
+  <p>The <code>{{domxref("Response.Response","Response()")}}</code> constructor allows you to create a custom response. In this case, we are just returning a simple text string:</p>
+
+  <pre class="brush: js notranslate">new Response('Hello from your friendly neighbourhood service worker!');</pre>
+ </li>
+ <li>
+  <p>This more complex <code>Response</code> below shows that you can optionally pass a set of headers in with your response, emulating standard HTTP response headers. Here we are just telling the browser what the content type of our synthetic response is:</p>
+
+  <pre class="brush: js notranslate">new Response('&lt;p&gt;Hello from your friendly neighbourhood service worker!&lt;/p&gt;', {
+  headers: { 'Content-Type': 'text/html' }
+});</pre>
+ </li>
+ <li>
+  <p>If a match wasn’t found in the cache, you could tell the browser to simply {{domxref("GlobalFetch.fetch","fetch")}} the default network request for that resource, to get the new resource from the network if it is available:</p>
+
+  <pre class="brush: js notranslate">fetch(event.request);</pre>
+ </li>
+ <li>
+  <p>If a match wasn’t found in the cache, and the network isn’t available, you could just match the request with some kind of default fallback page as a response using {{domxref("CacheStorage.match","match()")}}, like this:</p>
+
+  <pre class="brush: js notranslate">caches.match('/fallback.html');</pre>
+ </li>
+ <li>
+  <p>You can retrieve a lot of information about each request by calling parameters of the {{domxref("Request")}} object returned by the {{domxref("FetchEvent")}}:</p>
+
+  <pre class="brush: js notranslate">event.request.url
+event.request.method
+event.request.headers
+event.request.body</pre>
+ </li>
+</ol>
+
+<h2 id="Recovering_failed_requests">Recovering failed requests</h2>
+
+<p>So <code>caches.match(event.request)</code> is great when there is a match in the service worker cache, but what about cases when there isn’t a match? If we didn’t provide any kind of failure handling, our promise would reject and we would just come up against a network error when a match isn’t found.</p>
+
+<p>Fortunately service workers’ promise-based structure makes it trivial to provide further options towards success. We could do this:</p>
+
+<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+      return response || fetch(event.request);
+    })
+  );
+});</pre>
+
+<p>If the resources isn't in the cache, it is requested from the network.</p>
+
+<p>If we were being really clever, we would not only request the resource from the network; we would also save it into the cache so that later requests for that resource could be retrieved offline too! This would mean that if extra images were added to the Star Wars gallery, our app could automatically grab them and cache them. The following would do the trick:</p>
+
+<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(resp) {
+      return resp || fetch(event.request).then(function(response) {
+        return caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});</pre>
+
+<p>Here we return the default network request with <code>return fetch(event.request)</code>, which returns a promise. When this promise is resolved, we respond by running a function that grabs our cache using <code>caches.open('v1')</code>; this also returns a promise. When that promise resolves, <code>cache.put()</code> is used to add the resource to the cache. The resource is grabbed from <code>event.request</code>, and the response is then cloned with <code>response.clone()</code> and added to the cache. The clone is put in the cache, and the original response is returned to the browser to be given to the page that called it.</p>
+
+<p>Cloning the response is necessary because request and response streams can only be read once.  In order to return the response to the browser and put it in the cache we have to clone it. So the original gets returned to the browser and the clone gets sent to the cache.  They are each read once.</p>
+
+<p>The only trouble we have now is that if the request doesn’t match anything in the cache, and the network is not available, our request will still fail. Let’s provide a default fallback so that whatever happens, the user will at least get something:</p>
+
+<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(resp) {
+      return resp || fetch(event.request).then(function(response) {
+        caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+        });
+        return response;
+      });
+    }).catch(function() {
+      return caches.match('/sw-test/gallery/myLittleVader.jpg');
+    })
+  );
+});</pre>
+
+<p>We have opted for this fallback image because the only updates that are likely to fail are new images, as everything else is depended on for installation in the <code>install</code> event listener we saw earlier.</p>
+
+<h2 id="Updating_your_service_worker"><a id="Updating your service worker" name="Updating your service worker">Updating your service worker</a></h2>
+
+<p>If your service worker has previously been installed, but then a new version of the worker is available on refresh or page load, the new version is installed in the background, but not yet activated. It is only activated when there are no longer any pages loaded that are still using the old service worker. As soon as there are no more such pages still loaded, the new service worker activates.</p>
+
+<p>You’ll want to update your <code>install</code> event listener in the new service worker to something like this (notice the new version number):</p>
+
+<pre class="brush: js notranslate">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v2').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+
+        …
+
+        // include other new resources for the new version...
+      ]);
+    })
+  );
+});</pre>
+
+<p>While this happens, the previous version is still responsible for fetches. The new version is installing in the background. We are calling the new cache <code>v2</code>, so the previous <code>v1</code> cache isn't disturbed.</p>
+
+<p>When no pages are using the current version, the new worker activates and becomes responsible for fetches.</p>
+
+<h3 id="Deleting_old_caches">Deleting old caches</h3>
+
+<p>You also get an <code>activate</code> event. This is a generally used to do stuff that would have broken the previous version while it was still running, for example getting rid of old caches. This is also useful for removing data that is no longer needed to avoid filling up too much disk space — each browser has a hard limit on the amount of cache storage that a given service worker can use. The browser does its best to manage disk space, but it may delete the Cache storage for an origin.  The browser will generally delete all of the data for an origin or none of the data for an origin.</p>
+
+<p>Promises passed into <code>waitUntil()</code> will block other events until completion, so you can rest assured that your clean-up operation will have completed by the time you get your first <code>fetch</code> event on the new cache.</p>
+
+<pre class="brush: js notranslate">this.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});</pre>
+
+<h2 id="Developer_tools">Developer tools</h2>
+
+<p>Chrome has <code>chrome://inspect/#service-workers</code>, which shows current service worker activity and storage on a device, and <code>chrome://serviceworker-internals</code>, which shows more detail and allows you to start/stop/debug the worker process. In the future they will have throttling/offline modes to simulate bad or non-existent connections, which will be a really good thing.</p>
+
+<p>Firefox has also started to implement some useful tools related to service workers:</p>
+
+<ul>
+ <li>You can navigate to <code><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></code> to see what SWs are registered and update/remove them.</li>
+ <li>When testing you can get around the HTTPS restriction by checking the "Enable Service Workers over HTTP (when toolbox is open)" option in the <a href="/en-US/docs/Tools/Settings">Firefox Developer Tools settings</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: You may serve your app from <code>http://localhost</code> (e.g. using <code>me@localhost:/my/app$ <strong>python -m SimpleHTTPServer</strong></code>) for local development. See <a href="https://www.w3.org/TR/service-workers/#security-considerations">Security considerations</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('Service Workers', '')}}</td>
+   <td>{{Spec2('Service Workers')}}</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>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("33.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</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>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://serviceworke.rs/">The Service Worker Cookbook</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>Download the <a href="https://mdn.mozillademos.org/files/12638/sw101.png">Service Workers 101 cheatsheet</a>.</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/pt-br/web/api/serviceworkercontainer/index.html b/files/pt-br/web/api/serviceworkercontainer/index.html
new file mode 100644
index 0000000000..45a4406e9d
--- /dev/null
+++ b/files/pt-br/web/api/serviceworkercontainer/index.html
@@ -0,0 +1,175 @@
+---
+title: ServiceWorkerContainer
+slug: Web/API/ServiceWorkerContainer
+tags:
+  - API
+  - Draft
+  - Interface
+  - NeedsTranslation
+  - Offline
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorkerContainer
+  - TopicStub
+  - Workers
+translation_of: Web/API/ServiceWorkerContainer
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">O <code>ServiceWorkerContainer</code> é a interface de <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.</span></p>
+
+<p>Most importantly, it exposes the {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} method used to register service workers, and the {{domxref("ServiceWorkerContainer.controller")}} property used to determine whether or not the current page is actively controlled.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}</dt>
+ <dd>Returns a {{domxref("ServiceWorker")}} object if its state is <code>activated</code> (the same object returned by {{domxref("ServiceWorkerRegistration.active")}}). This property returns <code>null</code> during a force-refresh request (<em>Shift</em> + refresh) or if there is no active worker.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}</dt>
+ <dd>Provides a way of delaying code execution until a service worker is active. It returns a {{jsxref("Promise")}} that will never reject, and which waits indefinitely until the {{domxref("ServiceWorkerRegistration")}} associated with the current page has an {{domxref("ServiceWorkerRegistration.active")}} worker. Once that condition is met, it resolves with the {{domxref("ServiceWorkerRegistration")}}.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.oncontrollerchange")}}</dt>
+ <dd>Fired whenever a {{Event("controllerchange")}} event occurs — when the document's associated {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active","active")}} worker.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.onerror")}}</dt>
+ <dd>Fired whenever an {{Event("error")}} event occurs in the associated service workers.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.onmessage")}}</dt>
+ <dd>Fired whenever a {{Event("message")}} event occurs — when incoming messages are received to the {{domxref("ServiceWorkerContainer")}} object (e.g. via a {{domxref("MessagePort.postMessage()")}} call.)</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} </dt>
+ <dd>Creates or updates a {{domxref("ServiceWorkerRegistration")}} for the given <code>scriptURL</code>.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.getRegistration()")}}</dt>
+ <dd>Gets a {{domxref("ServiceWorkerRegistration")}} object whose scope matches the provided document URL.  If the method can't return a {{domxref("ServiceWorkerRegistration")}}, it returns a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. </dd>
+ <dt>{{domxref("ServiceWorkerContainer.getRegistrations()")}}</dt>
+ <dd>Returns all {{domxref("ServiceWorkerRegistration")}} objects associated with a <code>ServiceWorkerContainer</code> in an array.  If the method can't return {{domxref("ServiceWorkerRegistration")}} objects, it returns a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The example below first checks to see if the browser supports service workers. If supported, the code registers the service worker and determines if the page is actively controlled by the service worker. If it isn't, it prompts the user to reload the page so the service worker can take control. The code also reports any registration failures.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  // Register a service worker hosted at the root of the
+  // site using the default scope.
+  navigator.serviceWorker.register('/sw.js').then(function(registration) {
+    console.log('Service worker registration succeeded:', registration);
+
+    // At this point, you can optionally do something
+    // with registration. See https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration
+  }).catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+
+  // Independent of the registration, let's also display
+  // information about whether the current page is controlled
+  // by an existing service worker, and when that
+  // controller changes.
+
+  // First, do a one-off check if there's currently a
+  // service worker in control.
+  if (navigator.serviceWorker.controller) {
+    console.log('This page is currently controlled by:', navigator.serviceWorker.controller);
+  }
+
+  // Then, register a handler to detect when a new or
+  // updated service worker takes control.
+  navigation.serviceWorker.oncontrollerchange = function() {
+    console.log('This page is now controlled by:', navigator.serviceWorker.controller);
+  };
+} else {
+  console.log('Service workers are not supported.');
+}</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('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td>
+   <td>{{Spec2('Service Workers')}}</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>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(27)}}</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>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>{{CompatChrome(40)}}</td>
+   <td>{{CompatChrome(40)}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(27)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 and 52 Extended Support Releases</a> (ESR.)</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/pt-br/web/api/serviceworkercontainer/register/index.html b/files/pt-br/web/api/serviceworkercontainer/register/index.html
new file mode 100644
index 0000000000..cb27ddc843
--- /dev/null
+++ b/files/pt-br/web/api/serviceworkercontainer/register/index.html
@@ -0,0 +1,140 @@
+---
+title: ServiceWorkerContainer.register()
+slug: Web/API/ServiceWorkerContainer/register
+translation_of: Web/API/ServiceWorkerContainer/register
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<p><span class="seoSummary">O método <strong><code>register()</code></strong>da interface {{domxref("ServiceWorkerContainer")}} cria ou atualiza um {{domxref("ServiceWorkerRegistration")}} passado em <code>scriptURL</code>.</span></p>
+
+<p>Em caso de sucesso, um registro de service worker vincula o URL do script fornecido ao es<em>copo</em>, que é usado posteriormente para a navegação correspondente. Você pode chamar esse método incondicionalmente da página controlada. Ou seja, você não precisa primeiro verificar se há um registro ativo.</p>
+
+<p>Há uma frequente confusão em relação ao significado e uso do escopo. Uma vez que um service worker não pode ter um escopo mais amplo do que sua própria localização, use apenas a opção `scope` quando precisar de um escopo mais limitado do que o padrão.</p>
+
+<h2 id="Síntaxe">Síntaxe</h2>
+
+<pre class="syntaxbox">ServiceWorkerContainer.register(scriptURL, options)
+  .then(function(ServiceWorkerRegistration) { ... });</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>scriptURL</code></dt>
+ <dd>A URL do script service worker.</dd>
+ <dt><code>options</code> <code>{{optional_inline}}</code></dt>
+ <dd>Um objeto contendo as opções do registro. Atualmente as opções disponíveis são:
+ <ul>
+  <li><code>scope</code>: Uma {{domxref("USVString")}} representando uma URL que define o registro do escopo de um service worker's ; ou seja, o alcance das URLs que o service worker pode controlar. É geralmente uma URL relativa. O valor padrão é o URL que você obtém se você resolvesse './' usando a localização da página web como  base.  Não é, como customa-se acreditar, relativo à localização do service worker. Veja as seções de <a href="#Example">Exemplos</a> para mais informações sobre como isso funciona.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p>Um {{domxref("Promise")}} que resolve com um objeto {{domxref("ServiceWorkerRegistration")}}.</p>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Os exemplos descritos escrito aqui deve ser tomado em conjunto para obter um melhor entendimento de como escopos do service workers são aplicados a uma página. </p>
+
+<p>O exemplo a seguir usa o valor padrão de<code>scope</code> (ao omití-lo). O service worker neste caso irá controlar<code>example.com/index.html</code> bem como páginas abaixo, como <code>example.com/product/description.html</code>.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  // Registra um service worker hospeadado na raiz do
+  // site usando o escopo padrão
+  navigator.serviceWorker.register('/sw.js').then(function(registration) {
+    console.log('Service worker  registrado com sucesso:', registration);
+  }).catch(function(error) {
+    console.log('Falha ao Registrar o Service Worker:', error);
+  });
+} else {
+  console.log('Service workers não suportado!');
+}</pre>
+
+<p>O código a seguir,  se incluído em uma página na raiz de um site, seria aplicado  exatamente às mesmas páginas, como no exemplo acima. Lembre-se de que o escopo, quando incluído, usa a localização da página como base. Alternativamente, se esse código foi incluído em uma página <code>example.com/product/description.html</code>,  o escopo de<code>'./'</code> significa que o escopo que o service worker seria aplicado somente  aos recursos de<code>example.com/product</code>.  Se precisassemos de registrar um service worker em <code>example.com/product/description.html</code> aplicado a todoo <code>example.com</code>, deixaríamos o escopo acima.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  // Registre um service worker hospeado na raiz do
+  // site usando um escopo mais restritivo.
+  navigator.serviceWorker.register('/sw.js', {scope: './'}).then(function(registration) {
+    console.log('Service worker registrado com sucesso:', registration);
+  }).catch(function(error) {
+    console.log('Service worker falhou ao registrar:', error);
+  });
+} else {
+  console.log('Service workers não é suportado pelo navegador!.');
+}
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_Navegadores">Compatibilidade com Navegadores</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(27)}}</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>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>{{CompatChrome(40)}}</td>
+   <td>{{CompatChrome(40)}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(27)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Os Service workers (e <a href="/en-US/docs/Web/API/Push_API">Push</a>) foram desativados no <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 e 52 Extended Support Releases</a> (ESR.)</p>
diff --git a/files/pt-br/web/api/serviceworkerglobalscope/clients/index.html b/files/pt-br/web/api/serviceworkerglobalscope/clients/index.html
new file mode 100644
index 0000000000..6792b3b96c
--- /dev/null
+++ b/files/pt-br/web/api/serviceworkerglobalscope/clients/index.html
@@ -0,0 +1,63 @@
+---
+title: ServiceWorkerGlobalScope.clients
+slug: Web/API/ServiceWorkerGlobalScope/clients
+tags:
+  - API
+  - Clients
+  - Service Worker
+  - Service Workers
+  - ServiceWorker
+  - ServiceWorkerGlobalScope
+  - ServiceWorkers
+translation_of: Web/API/ServiceWorkerGlobalScope/clients
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p>A propriedade somente-leitura <strong><code>clients</code></strong> da interface {{domxref("ServiceWorkerGlobalScope")}} retorna os objetos dos <a href="https://developer.mozilla.org/en-US/docs/Web/API/Clients" title="The ServiceWorkerClients interface of the ServiceWorker API represents a container for a list of ServiceWorkerClient objects."><code>Clients</code></a> associatos ao <em>service worker</em>.</p>
+
+<h2 id="Syntax" name="Syntax" style="line-height: 30px; font-size: 2.14285714285714rem;">Sintaxe</h2>
+
+<pre class="syntaxbox" style="font-size: 14px;">swClients = self.clients
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>O objeto {{domxref("Clients")}} associado ao <em>service worker</em> específico.</p>
+
+<h2 id="Especificações" style="line-height: 30px; font-size: 2.14285714285714rem;">Especificações</h2>
+
+<div> </div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Specification</span></font></th>
+   <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Status</span></font></th>
+   <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Comment</span></font></th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-global-scope-clients', 'ServiceWorkerRegistration.clients')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.<br>
+     </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade">Compatibilidade</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorkerGlobalScope.clients")}}</p>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/pt-br/web/api/serviceworkerglobalscope/index.html b/files/pt-br/web/api/serviceworkerglobalscope/index.html
new file mode 100644
index 0000000000..3f4115cbab
--- /dev/null
+++ b/files/pt-br/web/api/serviceworkerglobalscope/index.html
@@ -0,0 +1,152 @@
+---
+title: ServiceWorkerGlobalScope
+slug: Web/API/ServiceWorkerGlobalScope
+tags:
+  - API
+  - Draft
+  - Interface
+  - NeedsTranslation
+  - Offline
+  - Reference
+  - Service Workers
+  - ServiceWorkerGlobalScope
+  - TopicStub
+  - Workers
+translation_of: Web/API/ServiceWorkerGlobalScope
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<p>The <code>ServiceWorkerGlobalScope</code> interface of the <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> represents the global execution context of a service worker.</p>
+
+<p>Developers should keep in mind that the ServiceWorker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state.</p>
+
+<p>Once successfully registered, a service worker can and will be terminated when idle to conserve memory and processor power. An active service worker is automatically restarted to respond to events, such as {{domxref("ServiceWorkerGlobalScope.onfetch")}} or {{domxref("ServiceWorkerGlobalScope.onmessage")}}.</p>
+
+<p>Additionally, synchronous requests are not allowed from within a service worker — only asynchronous requests, like those initiated via the {{domxref("GlobalFetch.fetch", "fetch()")}} method, can be used.</p>
+
+<p>This interface inherits from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</p>
+
+<p>{{InheritanceDiagram(700, 85, 20)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerGlobalScope.clients")}} {{readonlyinline}}</dt>
+ <dd>Contains the {{domxref("Clients")}} object associated with the service worker.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.registration")}} {{readonlyinline}}</dt>
+ <dd>Contains the {{domxref("ServiceWorkerRegistration")}} object that represents the service worker's registration.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.caches")}} {{readonlyinline}}</dt>
+ <dd>Contains the {{domxref("CacheStorage")}} object associated with the service worker.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/activate_event">activate</a></code></dt>
+ <dd>Occurs when a {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active")}} worker.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onactivate")}} property.</dd>
+ <dt><code>fetch</code></dt>
+ <dd>Occurs when a {{domxref("GlobalFetch.fetch", "fetch()")}} is called.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onfetch")}} property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/install_event">install</a></code></dt>
+ <dd>Occurs when a {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.installing")}} worker.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.oninstall")}} property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/message_event">message</a></code></dt>
+ <dd>Occurs when incoming messages are received. Controlled pages can use the {{domxref("MessagePort.postMessage()")}} method to send messages to service workers. The service worker can optionally send a response back via the {{domxref("MessagePort")}} exposed in <a href="https://html.spec.whatwg.org/multipage/comms.html#messageport"><code>event.data.port</code></a>, corresponding to the controlled page.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onmessage")}} property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/notificationclick_event">notificationclick</a></code></dt>
+ <dd>Occurs when a user clicks on a displayed notification.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} property.</dd>
+ <dt><code>notificationclose</code></dt>
+ <dd>Occurs — when a user closes a displayed notification.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onnotificationclose")}} property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/push_event">push</a></code></dt>
+ <dd>Occurs when a server push notification is received.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onpush")}} property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope/pushsubscriptionchange_event">pushsubscriptionchange</a></code></dt>
+ <dd>Occurs when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time).<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} property.</dd>
+ <dt><code>sync</code></dt>
+ <dd>Triggered when a call to {{domxref("SyncManager.register")}} is made from a service worker client page. The attempt to sync is made either immediately if the network is available or as soon as the network becomes available. <br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onsync")}} property.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerGlobalScope.skipWaiting()")}}</dt>
+ <dd>Allows the current service worker registration to progress from waiting to active state while service worker clients are using it.</dd>
+</dl>
+
+<p><code>ServiceWorkerGlobalScope</code> implements {{domxref("WorkerGlobalScope")}} — which implements {{domxref("WindowOrWorkerGlobalScope")}}. Therefore it also has the following property available to it:</p>
+
+<dl>
+ <dt>{{domxref("GlobalFetch.fetch()")}}</dt>
+ <dd>Starts the process of fetching a resource. This returns a promise that resolves to the {{domxref("Response")}} object representing the response to your request. This algorithm is the entry point for the fetch handling handed to the service worker context.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js">service worker prefetch sample</a> (see <a href="https://googlechrome.github.io/samples/service-worker/prefetch/">prefetch example live</a>.) The {{domxref("ServiceWorkerGlobalScope.onfetch")}} event handler listens for the <code>fetch</code> event. When fired, the code returns a promise that resolves to the first matching request in the {{domxref("Cache")}} object. If no match is found, the code fetches a response from the network.</p>
+
+<p>The code also handles exceptions thrown from the {{domxref("GlobalFetch.fetch", "fetch()")}} operation. Note that an HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code set.</p>
+
+<pre class="brush: js">self.addEventListener('fetch', function(event) {
+  console.log('Handling fetch event for', event.request.url);
+
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+      if (response) {
+        console.log('Found response in cache:', response);
+
+        return response;
+      }
+      console.log('No response found in cache. About to fetch from network...');
+
+      return fetch(event.request).then(function(response) {
+        console.log('Response from network is:', response);
+
+        return response;
+      }, function(error) {
+        console.error('Fetching failed:', error);
+
+        throw error;
+      });
+    })
+  );
+});</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('Service Workers', '#serviceworkerglobalscope-interface', 'ServiceWorkerGlobalScope')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorkerGlobalScope")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/pt-br/web/api/sharedworker/index.html b/files/pt-br/web/api/sharedworker/index.html
new file mode 100644
index 0000000000..6aa6257435
--- /dev/null
+++ b/files/pt-br/web/api/sharedworker/index.html
@@ -0,0 +1,188 @@
+---
+title: SharedWorker
+slug: Web/API/SharedWorker
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - SharedWorker
+  - TopicStub
+  - Web Workers
+  - Workers
+translation_of: Web/API/SharedWorker
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p>The <code><strong>SharedWorker</strong></code> interface represents a specific kind of worker that can be <em>accessed</em> from several browsing contexts, such as several windows, iframes or even workers. They implement an interface different than dedicated workers and have a different global scope, {{domxref("SharedWorkerGlobalScope")}}.</p>
+
+<div class="note">
+<p><strong>Note:</strong> If SharedWorker can be accessed from several browsing contexts, all those browsing contexts must share the exact same origin (same protocol, host and port).</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: In Firefox, shared workers cannot be shared between private (i.e. browsing in a private window) and non-private documents (see {{bug(1177621)}}.)</p>
+</div>
+
+<h2 id="Constructors">Constructors</h2>
+
+<dl>
+ <dt>{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}</dt>
+ <dd>Creates a shared web worker that executes the script at the specified URL.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("EventTarget")}}, and implements properties from {{domxref("AbstractWorker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>Is an {{domxref("EventListener")}} that is called whenever an {{domxref("ErrorEvent")}} of type <code>error</code> bubbles through the worker.</dd>
+ <dt>{{domxref("SharedWorker.port")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("MessagePort")}} object used to communicate and control the shared worker.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("EventTarget")}}, and implements methods from {{domxref("AbstractWorker")}}.</em></p>
+
+<h2 id="Example">Example</h2>
+
+<p>In our <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>), we have two HTML pages, each of which uses some JavaScript to perform a simple calculation. The different scripts are using the same worker file to perform the calculation — they can both access it, even if their pages are running inside different windows.</p>
+
+<p>The following code snippet shows creation of a <code>SharedWorker</code> object using the {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor. Both scripts contain this:</p>
+
+<pre class="brush: js">var myWorker = new SharedWorker('worker.js');
+</pre>
+
+<p>Both scripts then access the worker through a {{domxref("MessagePort")}} object created using the {{domxref("SharedWorker.port")}} property. If the onmessage event is attached using addEventListener, the port is manually started using its <code>start()</code> method:</p>
+
+<pre class="brush: js">myWorker.port.start();</pre>
+
+<p>When the port is started, both scripts post messages to the worker and handle messages sent from it using <code>port.postMessage()</code> and <code>port.onmessage</code>, respectively:</p>
+
+<pre class="brush: js">first.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+myWorker.port.onmessage = function(e) {
+  result1.textContent = e.data;
+  console.log('Message received from worker');
+}</pre>
+
+<p>Inside the worker we use the {{domxref("SharedWorkerGlobalScope.onconnect")}} handler to connect to the same port discussed above. The ports associated with that worker are accessible in the {{event("connect")}} event's <code>ports</code> property — we then use {{domxref("MessagePort")}} <code>start()</code> method to start the port, and the <code>onmessage</code> handler to deal with messages sent from the main threads.</p>
+
+<pre class="brush: js">onconnect = function(e) {
+  var port = e.ports[0];
+
+  port.addEventListener('message', function(e) {
+    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+    port.postMessage(workerResult);
+  });
+
+  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
+}</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', "#sharedworker", "SharedWorker")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("Web Workers")}}.</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>Support</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatGeckoDesktop(29.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(10.60)}}</td>
+   <td>5<br>
+    {{CompatNo}} 6.1</td>
+  </tr>
+  <tr>
+   <td>Constructor <code>name</code> option</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(55)}}</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>Support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("33.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.5</td>
+   <td>5.1<br>
+    {{CompatNo}} 7.1</td>
+  </tr>
+  <tr>
+   <td>Constructor <code>name</code> option</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(55)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Worker")}}</li>
+ <li><a class="internal" href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/pt-br/web/api/sharedworker/port/index.html b/files/pt-br/web/api/sharedworker/port/index.html
new file mode 100644
index 0000000000..248878949c
--- /dev/null
+++ b/files/pt-br/web/api/sharedworker/port/index.html
@@ -0,0 +1,111 @@
+---
+title: SharedWorker.port
+slug: Web/API/SharedWorker/port
+translation_of: Web/API/SharedWorker/port
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p>A propriedade <code><strong>port</strong></code> do {{domxref ("SharedWorker")}} retorna um objeto {{domxref ("MessagePort")}} usado para comunicar e controlar o shared worker.</p>
+
+<p> </p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">myWorker.port;</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Um objeto {{domxref("MessagePort")}}.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>O snippet de código a seguir mostra a criação de um objeto SharedWorker usando o construtor {{domxref ("SharedWorker.SharedWorker", "SharedWorker ()")}} . Vários scripts podem acessar o worker através de um objeto do tipo {{domxref ("MessagePort")}} , usando a propriedade SharedWorker.port  — A porta é iniciada usando o método <code>start()</code> .</p>
+
+<pre class="brush: js">var myWorker = new SharedWorker('worker.js');
+myWorker.port.start();</pre>
+
+<p>Veja um exemplo completo <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>.)</p>
+
+<h2 id="Especificações">Especificações</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-sharedworker-port", "AbstractWorker.onerror")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers', "#dom-sharedworker-port", "AbstractWorker.onerror")}}</td>
+   <td>{{Spec2('Web Workers')}}</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>Support</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatGeckoDesktop(29.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(10.60)}}</td>
+   <td>5<br>
+    {{CompatNo}} 6.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>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("33.0")}}</td>
+   <td>2.1</td>
+   <td>{{CompatNo}}</td>
+   <td>11.5</td>
+   <td>5.1<br>
+    {{CompatNo}} 7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("SharedWorker")}} interface it belongs to.</li>
+</ul>
diff --git a/files/pt-br/web/api/speechgrammar/index.html b/files/pt-br/web/api/speechgrammar/index.html
new file mode 100644
index 0000000000..c1a3aac1cf
--- /dev/null
+++ b/files/pt-br/web/api/speechgrammar/index.html
@@ -0,0 +1,79 @@
+---
+title: SpeechGrammar
+slug: Web/API/SpeechGrammar
+tags:
+  - API
+  - Experimental
+  - Fala
+  - Interface
+  - Referencia
+  - SpeechGrammar
+  - Web Speech API
+  - reconhecimento
+translation_of: Web/API/SpeechGrammar
+---
+<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>
+
+<p>A interface <strong><code>SpeechGrammar</code></strong> da <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> representa um conjunto de palavras ou padrões de palavras, os quais, nós queremos que o serviço de reconhecimento reconheça.</p>
+
+<p>A gramática é definida usando <a class="external external-icon" href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>.) Outros formatos podem ser suportados no futuro.</p>
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("SpeechGrammar.SpeechGrammar()")}}</dt>
+ <dd>Cria um novo objeto <code>SpeechGrammar</code>.</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("SpeechGrammar.src")}}</dt>
+ <dd>Define e retorna a string contendo a gramática contida na instância do objeto <code>SpeechGrammar</code>.</dd>
+ <dt>{{domxref("SpeechGrammar.weight")}} {{optional_inline}}</dt>
+ <dd>Define e retorna o peso do objeto <code>SpeechGrammar</code>.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<pre class="brush: js">var grammar = '#JSGF V1.0; grammar colors; public &lt;color&gt; = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
+var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();
+speechRecognitionList.addFromString(grammar, 1);
+recognition.grammars = speechRecognitionList;
+
+
+console.log(speechRecognitionList[0].src); // deveria retornar o mesmo conteúdo da variável grammar
+console.log(speechRecognitionList[0].weight); // deveria retornar 1 - o mesmo peso definido na linha 4.
+</pre>
+
+<h2 id="Especificações">Especificações</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 Speech API', '#speechreco-speechgrammar', 'SpeechGrammar')}}</td>
+   <td>{{Spec2('Web Speech API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2>
+
+<div>
+
+
+<p>{{Compat("api.SpeechGrammar")}}</p>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
+</ul>
diff --git a/files/pt-br/web/api/speechsynthesis/index.html b/files/pt-br/web/api/speechsynthesis/index.html
new file mode 100644
index 0000000000..889e129516
--- /dev/null
+++ b/files/pt-br/web/api/speechsynthesis/index.html
@@ -0,0 +1,194 @@
+---
+title: SpeechSynthesis
+slug: Web/API/SpeechSynthesis
+tags:
+  - API
+  - Elocução
+  - Experimental
+  - Fala
+  - Interface
+  - Referencia
+  - SpeechSynthesis
+  - Web Speech API
+  - sintetização
+translation_of: Web/API/SpeechSynthesis
+---
+<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>
+
+<p>A interface <strong><code>SpeechSynthesis</code></strong> da <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> é a interface controladora para o serviço de fala; este pode ser usado para obter informações sobre as vozes sintetizadas disponíveis no dispositivo, reproduzir e pausar uma elocução, além de outros comandos.</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em><code>SpeechSynthesis</code> também herda propriedades da sua interface pai, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesis.paused")}} {{readonlyinline}}</dt>
+ <dd>Um {{domxref("Boolean")}} que retorna <code>true</code> se o objeto <code>SpeechSynthesis</code> está em estado de pausa.</dd>
+ <dt>{{domxref("SpeechSynthesis.pending")}} {{readonlyinline}}</dt>
+ <dd>Um {{domxref("Boolean")}} que retorna <code>true</code> se a fila de elocuções contém falas que ainda não foram reproduzidas.</dd>
+ <dt>{{domxref("SpeechSynthesis.speaking")}} {{readonlyinline}}</dt>
+ <dd>Um {{domxref("Boolean")}} que retorna <code>true</code> se uma elocução está sendo reproduzida atualmente — mesmo que <code>SpeechSynthesis</code> esteja em estado de pausa.</dd>
+</dl>
+
+<h3 id="Tratamento_de_eventos">Tratamento de eventos</h3>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesis.onvoiceschanged")}}</dt>
+ <dd>Disparado quando a lista de objetos {{domxref("SpeechSynthesisVoice")}} que pode ser retornada pelo método {{domxref("SpeechSynthesis.getVoices()")}} mudou.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em><code>SpeechSynthesis</code> também herda métodos da sua interface pai, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesis.cancel()")}}</dt>
+ <dd>Remove todas as elocuções da fila para reprodução.</dd>
+ <dt>{{domxref("SpeechSynthesis.getVoices()")}}</dt>
+ <dd>Retorna uma lista de objetos {{domxref("SpeechSynthesisVoice")}} representando todas as vozes disponíveis no dispositivo atuall</dd>
+ <dt>{{domxref("SpeechSynthesis.pause()")}}</dt>
+ <dd>Deixa o objeto <code>SpeechSynthesis</code> em estado de pausa.</dd>
+ <dt>{{domxref("SpeechSynthesis.resume()")}}</dt>
+ <dd>Retira o estado de pausa do objeto <code>SpeechSynthesis</code>: retoma a reprodução se ele estiver pausado.</dd>
+ <dt>{{domxref("SpeechSynthesis.speak()")}}</dt>
+ <dd>Adiciona uma {{domxref("SpeechSynthesisUtterance", "utterance")}} à fila de reprodução; ela será reproduzida assim que todas as elocuções enfileiradas anteriormente tenham sido reproduzidas.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Na nossa demonstração básica <a href="https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis">Speech synthesiser demo</a>, nós primeiro pegamos uma referência para o controlador SpeechSynthesis usando <code>window.speechSynthesis</code>. Após definir algumas variáveis necessárias, nós obtemos uma lista de vozes disponíveis usando o método {{domxref("SpeechSynthesis.getVoices()")}} usando-as para popular um menu de seleção de forma que o usuário possa escolher a voz que desejar.</p>
+
+<p>Dentro do tratamento <code>inputForm.onsubmit</code>, nós impedimos a submissão do formulário com <a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a>,  instanciamos uma {{domxref("SpeechSynthesisUtterance")}} contendo o texto presente no {{htmlelement("input")}}, atribuímos a voz da elocução para a voz selecionada no elemento {{htmlelement("select")}}, e iniciamos a reprodução da elocução através do método {{domxref("SpeechSynthesis.speak()")}}.</p>
+
+<pre class="brush: js">var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('.txt');
+var voiceSelect = document.querySelector('select');
+
+var pitch = document.querySelector('#pitch');
+var pitchValue = document.querySelector('.pitch-value');
+var rate = document.querySelector('#rate');
+var rateValue = document.querySelector('.rate-value');
+
+var voices = [];
+
+function populateVoiceList() {
+  voices = synth.getVoices();
+
+  for(i = 0; i &lt; voices.length ; i++) {
+    var option = document.createElement('option');
+    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+
+    if(voices[i].default) {
+      option.textContent += ' -- DEFAULT';
+    }
+
+    option.setAttribute('data-lang', voices[i].lang);
+    option.setAttribute('data-name', voices[i].name);
+    voiceSelect.appendChild(option);
+  }
+}
+
+populateVoiceList();
+if (speechSynthesis.onvoiceschanged !== undefined) {
+  speechSynthesis.onvoiceschanged = populateVoiceList;
+}
+
+inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i &lt; voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  utterThis.pitch = pitch.value;
+  utterThis.rate = rate.value;
+  synth.speak(utterThis);
+
+  inputTxt.blur();
+}</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Situação</th>
+   <th scope="col">Comentários</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Speech API', '#tts-section', 'SpeechSynthesis')}}</td>
+   <td>{{Spec2('Web Speech API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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>Suporte básico</td>
+   <td>{{CompatChrome(33)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>7</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>2.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
+</ul>
diff --git a/files/pt-br/web/api/speechsynthesisutterance/index.html b/files/pt-br/web/api/speechsynthesisutterance/index.html
new file mode 100644
index 0000000000..96c51a0c87
--- /dev/null
+++ b/files/pt-br/web/api/speechsynthesisutterance/index.html
@@ -0,0 +1,177 @@
+---
+title: SpeechSynthesisUtterance
+slug: Web/API/SpeechSynthesisUtterance
+tags:
+  - API
+  - Experimental
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - SpeechSynthesisUtterance
+  - TopicStub
+  - Web Speech API
+  - speech
+  - synthesis
+translation_of: Web/API/SpeechSynthesisUtterance
+---
+<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>
+
+<p>The <strong><code>SpeechSynthesisUtterance</code></strong> interface of the <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.)</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()")}}</dt>
+ <dd>Returns a new <code>SpeechSynthesisUtterance</code> object instance.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em><code>SpeechSynthesisUtterance</code> also inherits properties from its parent interface, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesisUtterance.lang")}}</dt>
+ <dd>Gets and sets the language of the utterance.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.pitch")}}</dt>
+ <dd>Gets and sets the pitch at which the utterance will be spoken at.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.rate")}}</dt>
+ <dd>Gets and sets the speed at which the utterance will be spoken at.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.text")}}</dt>
+ <dd>Gets and sets the text that will be synthesised when the utterance is spoken.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.voice")}}</dt>
+ <dd>Gets and sets the voice that will be used to speak the utterance.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.volume")}}</dt>
+ <dd>Gets and sets the volume that the utterance will be spoken at.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesisUtterance.onboundary")}}</dt>
+ <dd>Fired when the spoken utterance reaches a word or sentence boundary.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onend")}}</dt>
+ <dd>Fired when the utterance has finished being spoken.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onerror")}}</dt>
+ <dd>Fired when an error occurs that prevents the utterance from being succesfully spoken.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onmark")}}</dt>
+ <dd>Fired when the spoken utterance reaches a named SSML "mark" tag.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onpause")}}</dt>
+ <dd>Fired when the utterance is paused part way through.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onresume")}}</dt>
+ <dd>Fired when a paused utterance is resumed.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onstart")}}</dt>
+ <dd>Fired when the utterance has begun to be spoken.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In our basic <a href="https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis">Speech synthesiser demo</a>, we first grab a reference to the SpeechSynthesis controller using <code>window.speechSynthesis</code>. After defining some necessary variables, we retrieve a list of the voices available using {{domxref("SpeechSynthesis.getVoices()")}} and populate a select menu with them so the user can choose what voice they want.</p>
+
+<p>Inside the <code>inputForm.onsubmit</code> handler, we stop the form submitting with <a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a>,  use the {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "constructor")}} to create a new utterance instance containing the text from the text {{htmlelement("input")}}, set the utterance's {{domxref("SpeechSynthesisUtterance.voice","voice")}} to the voice selected in the {{htmlelement("select")}} element, and start the utterance speaking via the {{domxref("SpeechSynthesis.speak()")}} method.</p>
+
+<pre class="brush: js">var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('input');
+var voiceSelect = document.querySelector('select');
+
+var voices = synth.getVoices();
+
+for(i = 0; i &lt; voices.length ; i++) {
+  var option = document.createElement('option');
+  option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+  option.setAttribute('data-lang', voices[i].lang);
+  option.setAttribute('data-name', voices[i].name);
+  voiceSelect.appendChild(option);
+}
+
+inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i &lt; voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  synth.speak(utterThis);
+  inputTxt.blur();
+}</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 Speech API', '#utterance-attributes', 'SpeechSynthesisUtterance')}}</td>
+   <td>{{Spec2('Web Speech API')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(33)}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>7</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</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>{{CompatNo}}</td>
+   <td>2.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
+</ul>
diff --git a/files/pt-br/web/api/speechsynthesisutterance/voice/index.html b/files/pt-br/web/api/speechsynthesisutterance/voice/index.html
new file mode 100644
index 0000000000..22f884d58b
--- /dev/null
+++ b/files/pt-br/web/api/speechsynthesisutterance/voice/index.html
@@ -0,0 +1,130 @@
+---
+title: SpeechSynthesisUtterance.voice
+slug: Web/API/SpeechSynthesisUtterance/voice
+tags:
+  - API
+  - Experimental
+  - Fala
+  - SpeechSynthesisUtterance
+  - Voz
+  - Web Speech API
+translation_of: Web/API/SpeechSynthesisUtterance/voice
+---
+<div>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</div>
+
+<p>A propriedade <strong><code>voice</code></strong>  da interface {{domxref("SpeechSynthesisUtterance")}} retorna e configura a voz que será usada para a fala.</p>
+
+<p>Essa propriedade deve ser configurada para um dos objetos {{domxref("SpeechSynthesisVoice")}} retornado por {{domxref("SpeechSynthesis.getVoices()")}}. Se não for configurada no momento da fala, a voz usada será a determinada como default na propriedade {{domxref("SpeechSynthesisUtterance.lang","lang")}}.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var myVoice = speechSynthesisUtteranceInstance.voice;
+speechSynthesisUtteranceInstance.voice = speechSynthesisVoiceInstance;
+</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Um objeto {{domxref("SpeechSynthesisVoice")}}.</p>
+
+<h2 id="Examplo">Examplo</h2>
+
+<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> synth <span class="operator token">=</span> window<span class="punctuation token">.</span>speechSynthesis<span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> inputForm <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">'form'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> inputTxt <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">'input'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> voiceSelect <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">'select'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> voices <span class="operator token">=</span> synth<span class="punctuation token">.</span><span class="function token">getVoices</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code>
+
+  ...
+
+inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i &lt; voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  synth.speak(utterThis);
+  inputTxt.blur();
+}</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Speech API', '#dfn-utterancevoice', 'voice')}}</td>
+   <td>{{Spec2('Web Speech API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatiblidade_dos_navegadores">Compatiblidade dos navegadores</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(33)}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>7</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</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>{{CompatNo}}</td>
+   <td>2.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
+</ul>
diff --git a/files/pt-br/web/api/storage/clear/index.html b/files/pt-br/web/api/storage/clear/index.html
new file mode 100644
index 0000000000..7542b3873a
--- /dev/null
+++ b/files/pt-br/web/api/storage/clear/index.html
@@ -0,0 +1,131 @@
+---
+title: Storage.clear()
+slug: Web/API/Storage/clear
+tags:
+  - API
+  - Armazenamento
+  - Armazenamento web
+  - Referencia
+  - metodo
+translation_of: Web/API/Storage/clear
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>O método <code>clear()</code> da interface {{domxref("Storage")}}, quando realizado uma chamada, todas as chaves do armazenamento são esvaziadas.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js"><em>storage</em>.clear();</pre>
+
+<h3 id="Parametros">Parametros</h3>
+
+<p><em>Nenhum parametro..</em></p>
+
+<h3 id="Retorno">Retorno</h3>
+
+<p><em>Nenhum retorno.</em></p>
+
+<p> </p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p> </p>
+
+<p>A função abaixo cria três itens e armazenam localmente, depois remove todos utilizando a função clear().</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.clear();
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Para visualizar um exemplo real, veja nossa seção <a href="https://github.com/mdn/web-storage-demo">Demonstração de Web Storage</a>.</p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-clear', 'clear()')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Funcionalidade</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>Funcionalidade</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>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Todos os navegadores possuem diferentes capacidades tanto para o localSotrage quanto para sessionSotrage. Você pode verificar uma <a href="http://dev-test.nemikor.com/web-storage/support-test/">lista detalhada de capacidades de diversos navegadores.</a></p>
+
+<div class="note">
+<p><strong>Nota:</strong> a versão iOS 5.1, Safari Mobile utiliza a pasta cache para armazenar os dados do localStorage, onde possivelmente podem perder os dados quando ocorrer pouco espaço no SO.</p>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<p><a href="/pt-BR/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilizando a API Web Storage</a></p>
diff --git a/files/pt-br/web/api/storage/getitem/index.html b/files/pt-br/web/api/storage/getitem/index.html
new file mode 100644
index 0000000000..46c49c6e0c
--- /dev/null
+++ b/files/pt-br/web/api/storage/getitem/index.html
@@ -0,0 +1,79 @@
+---
+title: localStorage.getItem()
+slug: Web/API/Storage/getItem
+translation_of: Web/API/Storage/getItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>Passar o nome da chave para o método <code>getItem()</code> da interface {{domxref("Storage")}} retornará o seu valor.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>aValue</em> = localStorage.getItem(<em>keyName</em>);
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><em><code>keyName</code></em></dt>
+ <dd>Um {{domxref("DOMString")}} contendo o nome da chave cujo valor você quer obter.</dd>
+</dl>
+
+<h3 id="Retorno">Retorno</h3>
+
+<p>Um {{domxref("DOMString")}} contendo o valor da chave. Se a chave não existe, <font face="Consolas, Liberation Mono, Courier, monospace">é retornado null</font>.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>A função seguinte recupera três itens armazenados no local storage e usa-os para definir estilos customizados em uma página.</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>: Para ver essa funcionalidade aplicada a um exemplo real, veja nossa <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-getitem', 'getItem()')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade">Compatibilidade</h2>
+
+<div id="compat-desktop">{{Compat("api.Storage.getItem")}}</div>
+
+<div id="compat-mobile"></div>
+
+<p>Os níveis de compatibilidade podem variar em todos os navegadores, tanto para o localStorage quanto para o sessionStorage. Aqui temos <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">estatísticas detalhadas dos níveis de compatibilidade para vários navegadores</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>A partir da versão 5.1 do iOS, o Safari Mobile armazena os dados do localStorage na pasta do cache, sujeito a ser apagado em caso de espaço insificiente.</p>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usando a API Web Storage</a></p>
diff --git a/files/pt-br/web/api/storage/index.html b/files/pt-br/web/api/storage/index.html
new file mode 100644
index 0000000000..e500e88cfa
--- /dev/null
+++ b/files/pt-br/web/api/storage/index.html
@@ -0,0 +1,119 @@
+---
+title: Storage
+slug: Web/API/Storage
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - Storage
+  - TopicStub
+  - Web Storage
+  - data
+translation_of: Web/API/Storage
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>A interface de Armazenamento da Web Storage API fornece acesso ao armazenamento de sessão ou armazenamento local para um domínio específico, permitindo que você, por exemplo, adicione, modifique ou exclua itens de dados armazenados.</p>
+
+<p>Se você quiser manipular o armazenamento de sessão para um domínio, você chama o método {{domxref ("Window.sessionStorage")}}; Se você quiser manipular o armazenamento local para um domínio, você chama {{domxref ("Window.localStorage")}}.</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt>
+ <dd>Retorna um número inteiro que representa o número de itens de dados armazenados no objeto Storage.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("Storage.key()")}}</dt>
+ <dd>Quando passado um número n, este método retornará o nome da n-ésima chave no armazenamento..</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Storage.getItem()")}}</dt>
+ <dd>Quando passado um nome de chave, retornará o valor dessa chave.</dd>
+ <dt>{{domxref("Storage.setItem()")}}</dt>
+ <dd>Quando passado um nome de chave e valor, irá adicionar essa chave para o armazenamento, ou atualizar o valor dessa chave, se já existir.</dd>
+ <dt>{{domxref("Storage.removeItem()")}}</dt>
+ <dd>Quando passado um nome de chave, irá remover essa chave do armazenamento.</dd>
+ <dt>{{domxref("Storage.clear()")}}</dt>
+ <dd>Quando chamado, irá esvaziar todas as chaves fora do armazenamento.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Aqui acessamos um objeto Storage chamando localStorage. Primeiro testamos se o armazenamento local contém itens de dados usando! localStorage.getItem ('bgcolor'). Se isso acontecer, executaremos uma função chamada setStyles () que agarra os itens de dados usando {{domxref("localStorage.getItem()")}} E usa esses valores para atualizar estilos de página. Se não, executamos outra função, populateStorage (), que usa {{domxref("localStorage.setItem()")}} Para definir os valores do item, em seguida, executa setStyles ().</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>: Para ver isso funcionando como um exemplo completo de trabalho, consulte nossa <a href="https://github.com/mdn/web-storage-demo">Demonstração de armazenamento na Web</a>.</p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#the-storage-interface', 'Storage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>
+
+<p> </p>
+
+<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.Storage")}}</p>
+
+<p> </p>
+
+<div id="compat-desktop"> </div>
+
+<p>[1] Desde o iOS 5.1, o Safari Mobile armazena os dados localStorage na pasta de cache, que está sujeita a limpeza ocasional a pedido do sistema operacional, normalmente se o espaço for curto.</p>
+
+<p>Todos os navegadores têm diferentes níveis de capacidade para o localStorage e sessionStorage. <a href="http://dev-test.nemikor.com/web-storage/support-test/">Aqui está um resumo detalhado de todas as capacidades de armazenamento para vários navegadores</a>.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></p>
diff --git a/files/pt-br/web/api/storage/key/index.html b/files/pt-br/web/api/storage/key/index.html
new file mode 100644
index 0000000000..9ed50459ad
--- /dev/null
+++ b/files/pt-br/web/api/storage/key/index.html
@@ -0,0 +1,72 @@
+---
+title: Storage.key()
+slug: Web/API/Storage/key
+translation_of: Web/API/Storage/key
+---
+<div>{{APIRef("Web Storage API")}}</div>
+
+<p>O método <strong><code>key()</code></strong> da interface {{domxref("Storage")}}, quando passado um número n, retorna o nome da n-ésima chave no dado objeto <code>Storage</code>. A ordem das chaves é definida pelo user-agent, então não deve-se confiar nela.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>aKeyName</em> = <em>storage</em>.key(<em>index</em>);</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>index</code></dt>
+ <dd>Um inteiro representando o número da chave que deseja obter. Esse é um índice que começa em zero.</dd>
+</dl>
+
+<h3 id="Retorno">Retorno</h3>
+
+<p>Uma {{domxref("DOMString")}} contendo o nome da chave. Se o index não existir, retornará <code>null</code>.</p>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>A função a seguir itera sobre as chaves do armazenamento local:</p>
+
+<pre class="brush: js">function forEachKey(callback) {
+  for (var i = 0; i &lt; localStorage.length; i++) {
+    callback(localStorage.key(i));
+  }
+}</pre>
+
+<p>A função a seguir itera sobre as chaves do armazenamento local e obtém o valor de cada chave:</p>
+
+<pre class="brush: js">for(var i =0; i &lt; localStorage.length; i++){
+  console.log(localStorage.getItem(localStorage.key(i)));
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Pra ver um exemplo real, consulte nossa <a href="https://mdn.github.io/dom-examples/web-storage/">Demonstração de armazenamento na Web</a>.</p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>
+
+
+
+<p>{{Compat("api.Storage.key")}}</p>
+
+<h2 id="Veja_também">Veja também</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>
+</ul>
diff --git a/files/pt-br/web/api/storage/length/index.html b/files/pt-br/web/api/storage/length/index.html
new file mode 100644
index 0000000000..fad990d9a8
--- /dev/null
+++ b/files/pt-br/web/api/storage/length/index.html
@@ -0,0 +1,130 @@
+---
+title: Storage.length
+slug: Web/API/Storage/length
+tags:
+  - API
+  - Armazenamento
+  - Armazenamento web
+  - Propriedade
+  - Referencia
+  - Somente Leitura
+  - Web Storage
+translation_of: Web/API/Storage/length
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>A propriedade length, que é somente leitura, da interface {{domxref("Storage")}} retorna um inteiro que representa o número de itens armazenados no objeto <code>Storage</code>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>aLength</em> = <em>storage</em>.length;</pre>
+
+<h3 id="Retorno">Retorno</h3>
+
+<p>Um inteiro</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>A função a seguir adiciona três itens ('bgcolor', 'font' e 'image') ao local storage do domínio atual, em seguida retorna o número de itens no storage:</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', 'yellow');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'cats.png');
+
+  localStorage.length; // should return 3
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Para um exemplo do mundo real, veja nosso <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-length', 'length')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_browsers">Compatibilidade com 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>Cada browser tem uma capacidade variada para localStorage e sessionStorage. Aqui existe um <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">tabela detalhada sobre a capacidade de armazenamento de cada browser</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>desde o iOS 5.1, o Safari Mobile armazena os dados do localStorage no folder de cache, que está sujeito a uma limpeza ocasional baseada em regras do SO, tipicamente, quando o espaço está se esgotando.</p>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usando a API Web Storage</a></p>
diff --git a/files/pt-br/web/api/storage/removeitem/index.html b/files/pt-br/web/api/storage/removeitem/index.html
new file mode 100644
index 0000000000..851f926173
--- /dev/null
+++ b/files/pt-br/web/api/storage/removeitem/index.html
@@ -0,0 +1,124 @@
+---
+title: Storage.removeItem()
+slug: Web/API/Storage/removeItem
+translation_of: Web/API/Storage/removeItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>O método <code>removeItem()</code> da interface {{domxref("Storage")}}, quando passado um nome de chave, irá remover essa chave do armazenamento.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>storage</em>.removeItem(<em>keyName</em>);</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><em><u>keyName</u></em></dt>
+ <dd>A {{domxref("DOMString")}} contendo o nome da chave que você deseja remover.</dd>
+</dl>
+
+<h3 id="Retorno">Retorno</h3>
+
+<p><em>Nenhum valor de retorno.</em></p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>A função a seguir cria três itens de dados no armazenamento local, em seguida, remove o item "image".</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.removeItem('image');
+}</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Para ver o uso em um exemplo prático veja nosso <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentários</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-storage-removeitem', 'removeItem()')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade">Compatibilidade</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>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p>
+
+<div class="note">
+<p><strong>Note: </strong>since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.</p>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usando a API Web Storage</a></p>
diff --git a/files/pt-br/web/api/storage/setitem/index.html b/files/pt-br/web/api/storage/setitem/index.html
new file mode 100644
index 0000000000..90a964fbc8
--- /dev/null
+++ b/files/pt-br/web/api/storage/setitem/index.html
@@ -0,0 +1,131 @@
+---
+title: Storage.setItem()
+slug: Web/API/Storage/setItem
+tags:
+  - Referencia
+translation_of: Web/API/Storage/setItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>O método <code>setItem()</code> da interface {{domxref("Storage")}}, quando passado 'chave' e 'valor', irá adicionar esta chave ao storage, ou atualizar o valor caso a chave já exista.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>storage</em>.setItem(<em>keyName</em>, <em>keyValue</em>);</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><em>keyName</em></dt>
+ <dd>Um {{domxref("DOMString")}} contendo o nome da chave que você deseja criar ou alterar.</dd>
+ <dt><em>keyValue</em></dt>
+ <dd>Um {{domxref("DOMString")}} contendo o valor da chave que você está criando ou atualizando.</dd>
+</dl>
+
+<h3 id="Retornos">Retornos</h3>
+
+<p><em>Sem retorno.</em></p>
+
+<h3 id="Exceções">Exceções</h3>
+
+<p><code>setItem()</code> poderá lançar uma exceção caso o storage esteja cheio. Particularmente, no Safari Mobile (desde o iOS 5) sempre irá lançar quando o usuário entrar em modo privado (Safari define a quota para 0 bytes no modo privado ao contrário de outros navegadores que permitem o armazenamento em modo privado, usando recipientes de dados separados).<br>
+ Assim os desenvolvedores devem certificar-se de <strong>sempre tratar as possíveis exceções do <code>setItem()</code></strong>.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>A função abaixo irá criar três dados dentro do 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>: Para ver ele sendo usado em um exemplo real, consulte nosso <a href="https://github.com/mdn/web-storage-demo">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Especificações">Especificações</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 Storage', '#dom-storage-setitem', 'setItem()')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegadores_compatíveis">Navegadores compatíveis</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>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Todos os navegadores têm diferentes níveis de capacidade para tanto localStorage e sessionStorage. Aqui você encontra uma detalhada <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">a </a><a href="http://dev-test.nemikor.com/web-storage/support-test/">capacidade detalhada para vários browsers</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>desde a versão iOS 5.1, Mobile Safari os dados na pasta 'cache' estão sujeito a limpezas ocasionais devido ao pouco espaço disponível.</p>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usando a Web Storage API</a></p>
diff --git a/files/pt-br/web/api/storagemanager/index.html b/files/pt-br/web/api/storagemanager/index.html
new file mode 100644
index 0000000000..30be398f06
--- /dev/null
+++ b/files/pt-br/web/api/storagemanager/index.html
@@ -0,0 +1,53 @@
+---
+title: StorageManager
+slug: Web/API/StorageManager
+tags:
+  - API
+  - Interface
+  - Persistence
+  - Quotas
+  - Reference
+  - Secure context
+  - Storage
+  - Storage API
+  - StorageManager
+  - Usage
+translation_of: Web/API/StorageManager
+---
+<p>{{securecontext_header}}{{SeeCompatTable}}{{APIRef("Storage")}}</p>
+
+<p><strong><code>StorageManager</code></strong> é uma inteface da <a href="/en-US/docs/Web/API/Storage_API">Storage API</a> que fornece uma interface para controlar as permissões de gravações e estima o espaço disponível. Você pode obter a referência desta interface usando {{domxref("navigator.storage")}} ou {{domxref("WorkerNavigator.storage")}}.</p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("StorageManager.estimate()")}} {{securecontext_inline}}</dt>
+ <dd>Retorna um objeto {{domxref("StorageEstimate")}} contendo números de uso e cota para sua origem.</dd>
+ <dt>{{domxref("StorageManager.persist()")}} {{securecontext_inline}}</dt>
+ <dd>Retorna uma {{jsxref('Promise')}} que resolve como <code>true</code> se o agente de usuário for capaz de gravar o armazenamento do seu site.</dd>
+ <dt>{{domxref("StorageManager.persisted()")}} {{securecontext_inline}}</dt>
+ <dd>Retorna uma {{jsxref('Promise')}} que resolve como <code>true</code> se alguma gravação já foi concedida para o armazenamento do seu site.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Storage','#storagemanager','StorageManger')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>
+
+
+
+<p>{{Compat("api.StorageManager")}}</p>
diff --git a/files/pt-br/web/api/streams_api/concepts/index.html b/files/pt-br/web/api/streams_api/concepts/index.html
new file mode 100644
index 0000000000..575d59cf67
--- /dev/null
+++ b/files/pt-br/web/api/streams_api/concepts/index.html
@@ -0,0 +1,121 @@
+---
+title: Conceitos da API Stream
+slug: Web/API/Streams_API/Concepts
+tags:
+  - API
+  - Streams
+  - conceitos
+translation_of: Web/API/Streams_API/Concepts
+---
+<div>{{apiref("Streams")}}</div>
+
+<p class="summary">A <a href="/en-US/docs/Web/API/Streams_API">Streams API</a> adiciona conjunto muito útil de ferramentas à plataforma web, provendo objetos que permitem ao JavaScript acessar via programação dados de stream recebidos pela rede e processá-los conforme desejado pelo desenvolvedor. Alguns conceitos e terminologias associadas a streams podem ser novos pra você - este artigo explicará tudo o que você precisa saber.</p>
+
+<h2 id="Readable_streams">Readable streams</h2>
+
+<p>Um readable stream pode ser representado em JavaScript por um objeto {{domxref("ReadableStream")}} que flui de uma underlying source - é um recurso em algum lugar na rede ou outro lugar no domínio do qual deseja obter dados..</p>
+
+<p>Há dois tipos de fontes subjacentes:</p>
+
+<ul>
+ <li><strong>Push sources</strong> constatemente envia dados enquanto os acessa, e você decide quando iniciar, pausar ou cancelar o acesso ao stream. Exemplos deste tipo incluem stream de vídeo e sockets TCP/<a href="/en-US/docs/Web/API/WebSockets_API">Web sockets</a>.</li>
+ <li><strong>Pull sources</strong> requer que você requisite os dados explicitamente uma conectado. Exemplos deste tipo incluem operações de acesso a arquivos via chamada <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> ou <a href="/en-US/docs/Web/API/XMLHttpRequest/XMLHttpRequest">XHR</a>.</li>
+</ul>
+
+<p>O dado é lido sequencialmente em pequenos blocos de informação chamado chunks. Um chunk por ser um simples byte, ou, pode ser algo maior como um <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a> de um certo tamanho.<br>
+ Um simples stream pode conter chunks de diferentes tamanhos e tipos.<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/15819/Readable%20streams.png" style="height: 452px; width: 1000px;"></p>
+
+<p>Os chunks alocados em um stream são ditos <strong>enqueued</strong> (enfileirados) — isto significa que eles estão aguardando em uma fila prontos para serem lidos. Uma <strong>internal queue </strong>rastreia os chunks que ainda não foram lidos (veja filas internas e estratégias de enfileiramento na sessão abaixo).</p>
+
+<p>Os chunks dentro de um stream são lidos por um <strong>reader </strong>— este processa o dado de um chunk por vez, permitindo fazer qualquer tipo de operação que desejar .O reader com mais outro código de processamento junto é chamado <strong>consumer</strong>.</p>
+
+<p>Há também uma construção que você usará chamada <strong>controller</strong> — cada reader tem um controller associado que lhe permite controlar o stream (por exemplo, cancelá-lo se desejar).</p>
+
+<p>Apenas um reader pode ler um stream por vez; quando um reader é criado e inicia a leitura de um stream (um <strong>active reader</strong>), dizemos que ele está <strong>atrelado</strong> a ele. Se você deseja outro reader para iniciar a leitura de seu stream, você precisa tipicamente cancelar o primeiro reader antes de fazer qualquer coisa (embora você possa usar um stream <strong>tee</strong>, veja Teeing na sessão abaixo)</p>
+
+<p>Observe que há dois tipos diferentes de readable streams. Assim como um readable stream convencional há um tipo chamado byte stream - este é uma versão extendida de um stream convencional para leitura de underlying byte sources (de outra forma conhecido como BYOB, ou "bring your own buffer"). Estes permitem que streams sejam lidos diretamente em um buffer fornecido pelo desenvolvedor, minimizando a cópia necessária. Tal underlying stream (e por extensão, reader e controller) seu código dependerá em primeiro lugar de como o stream foi criado (veja o {{domxref("ReadableStream.ReadableStream()")}} construtor de página).</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: Bytes streams não estão implementados ainda em algum lugar, e foram levantadas questões sobre se os detalhes de especificação estão em condições para serem implementados. Isto pode mudar com o tempo.</p>
+</div>
+
+<p>Você pode fazer uso dos stream readers já implementados via mecanismos como {{domxref("Response.body")}} como uma requisição, ou com seus próprios streams usando o {{domxref("ReadableStream.ReadableStream()")}} como construtor.</p>
+
+<h2 id="Teeing">Teeing</h2>
+
+<p>Embora um único reader possa ler um stream por vez, é possível dividir um stream em duas cópias idênticas, que podem então serem lidas por dois readers distintos. Isto é chamado <strong>teeing.</strong> </p>
+
+<p>Em JavaScript, isto pode ser alcançado pelo método {{domxref("ReadableStream.tee()")}} — ele retorna um array contendo duas cópias idêniticas o readable stream original, o qual pode então ser lido independentemente por dois readers separados.</p>
+
+<p>Você deve fazê-lo por exemplo em um <a href="/en-US/docs/Web/API/Service_Worker_API">ServiceWorker</a> se deseja pegar a resposta de um servidor e disponibilizar via stream no navegador, mas, também disponibilizá-lo via cache do ServiceWorker. Uma vez que o corpo da resposta não pode ser consumido mais que uma vez, e um stream não pode ser lido por mais de um reader por vez, você precisaria de duas cópias para fazer isto.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15820/tee.png" style="height: 527px; width: 1000px;"></p>
+
+<h2 id="Writable_streams">Writable streams</h2>
+
+<p>Um <strong>writable stream</strong> é o destino o qual você pode escrever dados, representado em JavaScript pelo objeto {{domxref("WritableStream")}}. Ele serve como uma camada de abstração sobre um <strong>underlying sink</strong> — um I/O de baixo-nivel que sincroniza quais dados brutos são escritos.</p>
+
+<p>O dado é escrito para o stream via um <strong>writer, </strong>um chunk por vez. Um chunk pode ter uma infinidade de formas, assim como os chunk em um reader. Você pode usar qualquer código que desejar para produzir chunks prontos para escrever, mais o código associado ao <strong>producer.</strong></p>
+
+<p>Quando um writer é criado e inicia a escrita para um stream (um <strong>active writer</strong>), dizemos estar <strong>locked </strong>(atrelado) a este. Apenas um writer opde escrever em um writable stream por vez. Se deseja outro writer iniciar a escrita em seu stream, você deve tipicamente abortá-lo antes de anexar outro write à ele.</p>
+
+<p>Uma <strong>internal queue</strong> mantém os chunks que foram escritos por um stream mas não foram ainda processados por underlying sink.</p>
+
+<p>Há uma construção que você usará chamada controller — cada writer tem um controller associado que permite a você controlar o stream (por exemplo, abortá-lo se desejado).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15821/writable%20streams.png" style="height: 452px; width: 1000px;"></p>
+
+<p>Você pode fazer uso de writable streams usando o construtor </p>
+
+<p>You can make use of writable streams using the {{domxref("WritableStream.WritableStream()")}}. Estes atualmente possuem uma disponibilidade limitada nos navegadores.</p>
+
+<h2 id="Pipe_chains">Pipe chains</h2>
+
+<p>A API de Streams torna possível encadear streams (ou pelo menos irá fazer quando os navegadores implementarem a funcionalidade relevante para tal) usando uma estrutura chamada <strong>pipe chain</strong>. Há dois métodos disponíveis na especificação para facilitá-lo:</p>
+
+<ul>
+ <li>{{domxref("ReadableStream.pipeThrough()")}} — pipes de stream através do <strong>transform stream</strong>, que é um par compreendido do writable stream que possui dados escritos, e readable stream que então tem os dados lidos dele — ele atua como um tipo de esteira que constantemente pega a entrada de dados e os transforma em um outro estado. Efetivamente o mesmo stream é escrito para então os mesmos valores serem lidos. Um simples exemplo é um decodificador de texto, onde bytes brutos são escritos, e então strings são lidas. Você pode encontrar mais ideias úteis e exemplos na especificação — leia <a href="https://streams.spec.whatwg.org/#ts-model">Transform streams</a> para ideias e <a href="https://streams.spec.whatwg.org/#example-both">this web sockets example</a>.</li>
+ <li>{{domxref("ReadableStream.pipeTo()")}} — pipes para um writable stream que atua como um ponto final para a pipe chain.</li>
+</ul>
+
+<p>Para iniciar um pipe chain é chamado o <strong>original source</strong>, e no final é chamado <strong>ultimate sink</strong>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15818/PipeChain.png" style="height: 382px; width: 1000px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Esta funcionalidade não está totalmente pensada ainda, embora disponível em muitos navegadores. Até certo ponto espero que a especificação dos writers pode contribuir para algo como uma clase <code>TransformStream</code> para criar facilmente transform stream.</p>
+</div>
+
+<h2 id="Backpressure">Backpressure</h2>
+
+<p>Um importante conceito sobre streams é <strong>backpressure</strong> — é um processo pelo qual um stream simples ou uma pipe chain ajusta a velocidade de leitura/escrita. Quando um stream mais tarde na conrrente continua ocupado e não está ainda pronto para aceitar mais chunks, ele envia um sinal de volta através da corrente informar mais tarde o transform stream (ou a fonte original) para diminuir a velocidade de entrega conforme apropriado tal que você não precise terminar com um gargalo em algum lugar.</p>
+
+<p>Para usar backpressure em um ReadableStream, podemos perguntar ao controller pelo tamanho do chunk desejado pelo consumer consultando o atributo {{domxref("ReadableStreamDefaultController.desiredSize")}} no controller. Se estiver muito baixo, nosso ReadableStream pode informar sua underlying source de dados e o backpressure junto a cadeira de stream.</p>
+
+<p>Se mais tarde o consumer novamente deseja receber dados, podemos usar o método pull no stream para informar nossa underlying source para alimentar nosso stream com dados.</p>
+
+<h2 id="Internal_queues_and_queuing_strategies">Internal queues and queuing strategies</h2>
+
+<p>Como mencionado antes, os chunks de um stream que não foram ainda processados e finalizados são mantidos por uma internal queue (fila interna).</p>
+
+<ul>
+ <li>No caso de readable stream, esses chunks foram enfileirados mas ainda não lidos.</li>
+ <li>No caso do writable stream, esses chunks que foram escritos mas ainda não processados pela underlying sink.</li>
+</ul>
+
+<p>Filas internas trabalham com uma <strong>queuing strategy</strong>, o qual dita informar a backpressure baseado na <strong>internal queue state.</strong></p>
+
+<p>Em geral, a estratégia compara o tamanho dos chunks na fila com o valor chamado no <strong>high water mark</strong>, o qual é o total do maior valor de chunk que a fila pode gerenciar de modo realista.</p>
+
+<p>O cálculo realizado é</p>
+
+<pre>high water mark - total size of chunks in queue = desired size</pre>
+
+<p>O <strong>desired size</strong> é o tamanho de chunks que um stream ainda pode aceitar para manter o fluxo do stream menor que o high water mark. Após o cálculo ser efetuado, a geração de chunks terá sua velocidade reduzida ou aumentada conforme apropriado para manter o fluxo do stream o mais rápido possível enquanto mantém o tamanho desejado acima de zero. Se o valor cair para zero (ou menor no caso de writable streams), significa que os chunks estão sendo gerados mais rápido que o stream pode lidar, o qual resulta em problemas.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: O que ocorre no caso em que valor desejado for zero ou negativo não foi definido na especificação até o momento. Paciência é uma virtude. </p>
+</div>
+
+<p>Como um exemplo, vamos pegar um chunk de tamanho 1, e uma high water mark de 3. Isto significa que até 3 chunks podem ser enfileirados antes que a high water mark seja alcançada e o  backpressure aplicado.</p>
diff --git a/files/pt-br/web/api/streams_api/index.html b/files/pt-br/web/api/streams_api/index.html
new file mode 100644
index 0000000000..c382b3e7f8
--- /dev/null
+++ b/files/pt-br/web/api/streams_api/index.html
@@ -0,0 +1,157 @@
+---
+title: Streams API
+slug: Web/API/Streams_API
+tags:
+  - API
+  - Experimental
+  - Landing
+  - NeedsTranslation
+  - Reference
+  - Streams
+  - TopicStub
+translation_of: Web/API/Streams_API
+---
+<div>{{SeeCompatTable}}{{APIRef("Streams")}}</div>
+
+<div>A API Streams permite que o JavaScript acesse programaticamente fluxos de dados recebidos pela rede e os processe conforme desejado pelo desenvolvedor.</div>
+
+<p class="summary"></p>
+
+<h2 id="Conceitos_e_Uso">Conceitos e Uso</h2>
+
+
+
+<p>O streaming envolve a divisão de um recurso que você deseja receber pela rede em pequenos blocos e, em seguida, processa esses blocos aos poucos. Isso é algo que os navegadores fazem de qualquer maneira ao receber recursos para serem exibidos em páginas da web — o buffer de vídeos e mais está gradualmente disponível para reprodução, e às vezes você verá imagens sendo exibidas gradualmente conforme mais é carregado.</p>
+
+<p>Mas isto nunca esteve disponível para JavaScript antes. Anteriormente, se quiséssemos processar um recurso de algum tipo (seja ele um vídeo, ou um arquivo de texto, etc.), Teríamos que baixar o arquivo inteiro, espera até que seja desserializado em um formato adequado, então processa todo o lote após ser totalmente recebido.</p>
+
+<p>Com o Streams disponível para JavaScript, tudo isso muda - agora você pode começar a processar dados brutos com JavaScript bit a bit assim que estiverem disponíveis no lado do cliente, sem a necessidade de gerar um buffer, string ou blob.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15817/Concept.png" style="display: block; height: 382px; margin: 0px auto; width: 1000px;"></p>
+
+
+
+<p>Também há mais vantagens - você pode detectar quando os fluxos começam ou terminam, encadeia os fluxos juntos, trata os erros e cancela os fluxos quando necessário e reage à velocidade em que o fluxo está sendo lido.</p>
+
+<p>O uso básico de Streams gira em torno de tornar as respostas disponíveis como streams. Por exemplo, a resposta {{domxref("Body")}} retornada com sucesso de uma <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch request</a> pode ser exposta como um {{domxref("ReadableStream")}}, e você pode lê-lo usando um leitor criado com {{domxref("ReadableStream.getReader()")}}, cancela-lo com {{domxref("ReadableStream.cancel()")}}, etc.</p>
+
+
+
+<p>Usos mais complicados envolvem a criação de seu próprio fluxo usando o contrutor {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}, por exemplo para processar dados dentro de um <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a>.</p>
+
+<p>Você também pode gravar dados em streams usando {{domxref("WritableStream")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Você pode encontrar muito mais detalhes sobre a teoria e prática de streams em nossos artigos — <a href="/en-US/docs/Web/API/Streams_API/Concepts">Streams API concepts</a>, <a href="/en-US/docs/Web/API/Streams_API/Using_readable_streams">Using readable streams</a>, e <a href="/en-US/docs/Web/API/Streams_API/Using_writable_streams">Using writable streams</a>.</p>
+</div>
+
+<h2 id="Stream_interfaces">Stream interfaces</h2>
+
+<h3 id="Readable_streams">Readable streams</h3>
+
+<dl>
+ <dt>{{domxref("ReadableStream")}}</dt>
+ <dd>Represents a readable stream of data. It can be used to handle response streams of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>, or developer-defined streams (e.g. a custom {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} constructor).</dd>
+ <dt>{{domxref("ReadableStreamDefaultReader")}}</dt>
+ <dd>Represents a default reader that can be used to read stream data supplied from a network (e.g. a fetch request).</dd>
+ <dt>{{domxref("ReadableStreamDefaultController")}}</dt>
+ <dd>Represents a controller allowing control of a {{domxref("ReadableStream")}}'s state and internal queue. Default controllers are for streams that are not byte streams.</dd>
+</dl>
+
+<h3 id="Writable_streams">Writable streams</h3>
+
+<dl>
+ <dt>{{domxref("WritableStream")}}</dt>
+ <dd>Provides a standard abstraction for writing streaming data to a destination, known as a sink. This object comes with built-in backpressure and queuing.</dd>
+ <dt>{{domxref("WritableStreamDefaultWriter")}}</dt>
+ <dd>Represents a default writable stream writer that can be used to write chunks of data to a writable stream.</dd>
+ <dt>{{domxref("WritableStreamDefaultController")}}</dt>
+ <dd>Represents a controller allowing control of a {{domxref("WritableStream")}}'s state. When constructing a <code>WritableStream</code>, the underlying sink is given a corresponding <code>WritableStreamDefaultController</code> instance to manipulate.</dd>
+</dl>
+
+<h3 id="Related_stream_APIs_and_operations">Related stream APIs and operations</h3>
+
+<dl>
+ <dt>{{domxref("ByteLengthQueuingStrategy")}}</dt>
+ <dd>Provides a built-in byte length queuing strategy that can be used when constructing streams.</dd>
+ <dt>{{domxref("CountQueuingStrategy")}}</dt>
+ <dd>Provides a built-in chunk counting queuing strategy that can be used when constructing streams.</dd>
+</dl>
+
+<h3 id="Extensions_to_other_APIs">Extensions to other APIs</h3>
+
+<dl>
+ <dt>{{domxref("Request")}}</dt>
+ <dd>When a new <code>Request</code> object is constructed, you can pass it a {{domxref("ReadableStream")}} in the <code>body</code> property of its <code>RequestInit</code> dictionary.  This <code>Request</code> could then be passed to a {{domxref("WindowOrWorkerGlobalScope.fetch()")}} to commence fetching the stream.</dd>
+ <dt>{{domxref("Body")}}</dt>
+ <dd>The response {{domxref("Body")}} returned by a successful <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch request</a> is exposed by default as a {{domxref("ReadableStream")}}, and can have a reader attached to it, etc.</dd>
+</dl>
+
+<h3 id="ByteStream-related_interfaces">ByteStream-related interfaces</h3>
+
+<div class="warning">
+<p><strong>Important</strong>: these are not implemented anywhere as yet, and questions have been raised as to whether the spec details are in a finished enough state for them to be implemented. This may change over time.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("ReadableStreamBYOBReader")}}</dt>
+ <dd>Represents a BYOB ("bring your own buffer") reader that can be used to read stream data supplied by the developer (e.g. a custom {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} constructor).</dd>
+ <dt>{{domxref("ReadableByteStreamController")}}</dt>
+ <dd>Represents a controller allowing control of a {{domxref("ReadableStream")}}'s state and internal queue. Byte stream controllers are for byte streams.</dd>
+ <dt>{{domxref("ReadableStreamBYOBRequest")}}</dt>
+ <dd>Represents a pull into request in a {{domxref("ReadableByteStreamController")}}.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>We have created a directory of examples to go along with the Streams API documentation — see <a href="https://github.com/mdn/dom-examples/tree/master/streams">mdn/dom-examples/streams</a>. The examples are as follows:</p>
+
+<ul>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-pump/">Simple stream pump</a>: This example shows how to consume a ReadableStream and pass its data to another.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/grayscale-png/">Grayscale a PNG</a>: This example shows how a ReadableStream of a PNG can be turned into grayscale.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-random-stream/">Simple random stream</a>: This example shows how to use a custom stream to generate random strings, enqueue them as chunks, and then read them back out again.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-tee-example/">Simple tee example</a>: This example extends the Simple random stream example, showing how a stream can be teed and both resulting streams can be read independently.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-writer/">Simple writer</a>: This example shows how to to write to a writable stream, then decode the stream and write the contents to the UI.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/png-transform-stream/">Unpack chunks of a PNG</a>: This example shows how <a href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/pipeThrough"><code>pipeThrough()</code></a> can be used to transform a ReadableStream into a stream of other data types by transforming a data of a PNG file into a stream of PNG chunks.</li>
+</ul>
+
+<p>Examples from other developers:</p>
+
+<ul>
+ <li><a href="https://fetch-progress.anthum.com/">Progress Indicators with Streams, Service Workers, &amp; Fetch</a>.</li>
+</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('Streams')}}</td>
+   <td>{{Spec2('Streams')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>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>
+</div>
+
+<h3 id="WritableStream">WritableStream</h3>
+
+<p>{{Compat("api.WritableStream")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Streams_API/Concepts">Streams API concepts</a></li>
+ <li><a href="/en-US/docs/Web/API/Streams_API/Using_readable_streams">Using readable streams</a></li>
+ <li><a href="/en-US/docs/Web/API/Streams_API/Using_writable_streams">Using writable streams</a></li>
+</ul>
diff --git a/files/pt-br/web/api/subtlecrypto/derivekey/index.html b/files/pt-br/web/api/subtlecrypto/derivekey/index.html
new file mode 100644
index 0000000000..16f39fb7e1
--- /dev/null
+++ b/files/pt-br/web/api/subtlecrypto/derivekey/index.html
@@ -0,0 +1,270 @@
+---
+title: SubtleCrypto.deriveKey()
+slug: Web/API/SubtleCrypto/deriveKey
+tags:
+  - API
+  - Criptografía
+  - Crypto
+  - Referencia
+  - SubtleCrypto
+  - Web
+  - metodo
+translation_of: Web/API/SubtleCrypto/deriveKey
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>O método <code><strong>SubtleCrypto.deriveKey()</strong></code> retorna como {{jsxref("Promise")}} de um recentemente gerado {{domxref("CryptoKey")}} derivada de uma master key e um algoritmo específico dados como parâmetro.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>result</em> = crypto<code>.subtle.deriveKey(<em>algorithm</em>, <em>masterKey</em>, <em>derivedKeyAlgorithm</em>, <em>extractable</em>, <em>keyUsages</em>)</code>;
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<ul>
+ <li><code><em>algorithm</em></code> é um objeto definindo o algoritmo de derivação a se usar. Os valores suportados são:
+
+  <ul>
+   <li><code>{"name": "ECDH", "public": publicKey}</code></li>
+   <li><code>{"name": "DH", "public": publicKey}</code></li>
+   <li><code>{"name": "PBKDF2", salt, iterations, hash}</code> where <em><code>salt</code></em> is an {{jsxref("ArrayBuffer")}} ou um {{jsxref("ArrayBufferView")}}, <em><code>iterations</code></em> é o número de interações e <em><code>hash</code></em> é um {{domxref("DOMString")}} identificando o algoritmo hashing para uso.</li>
+   <li><code>{"name": "HKDF-CTR", hash, label, context}</code></li>
+  </ul>
+ </li>
+ <li><em><code>masterKey</code></em> é uma {{domxref("CryptoKey")}} representando a master key para ser utilizada por um algoritmo de derivação de key.</li>
+ <li><code><em>derivedKeyAlgorithm</em></code> é um objeto que define o algoritmo, a key derivada será utilizada para {{domxref("DOMString")}} como um atalho para <code>{"name": derivedKeyAlgo}</code>. Para AES uma propriedade <code><em>length</em></code> também é requerida, e os valores possíveis são 128, 192 ou 256 bits.</li>
+ <li><code><em>extractable</em></code> é um {{jsxref("Boolean")}} indicando se a key pode ser extraída de um objeto {{domxref("CryptoKey")}} em um estágio mais tardio.</li>
+ <li><code><em>keyUsages</em></code>  é um {{jsxref("Array")}} indicando o que pode ser feito com a chave derivada. Os valores possíveis do array são:
+  <ul>
+   <li><code>"encrypt"</code>, permitindo que a key seja utilizada para {{glossary("encryption", "encrypting")}} mensagens.</li>
+   <li><code>"decrypt"</code>, permitindo que a key seja utilizada para {{glossary("decryption", "decrypting")}} mensagens.</li>
+   <li><code>"sign"</code>, permitindo que a key seja utilizada para {{glossary("signature", "signing")}} mensagens.</li>
+   <li><code>"verify"</code>, permitindo que a key seja utilizada para {{glossary("verification", "verifying the signature")}} de mensagens.</li>
+   <li><code>"deriveKey"</code>, permitindo que a key seja utilizada como key base na derivação de uma nova key.</li>
+   <li><code>"deriveBits"</code>, permitindo que a key seja utilizada como key base na derivação de bits de informação para uso em criptografias primitivas.</li>
+   <li><code>"wrapKey"</code>, permitindo que a key envolva uma key simétrica (transferência, armazenamento) em ambientes não seguros.</li>
+   <li><code>"unwrapKey"</code>, permitindo que a key se desvincule de uma key simétrica para uso (transfererência, armazenamento) em ambientes não seguros.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<ul>
+ <li><code><em>result</em></code> é uma {{jsxref("Promise")}} que retorna a key derivada como uma {{domxref("CryptoKey")}} ou uma {{domxref("CryptoKeyPair")}}.</li>
+</ul>
+
+<h3 id="Exceções">Exceções</h3>
+
+<p>A promise é rejeitada quando uma das seguintes exceções é encontrada:</p>
+
+<ul>
+ <li>{{exception("InvalidAccessError")}} quando a master key não é uma key para o algoritmo de derivação requisitado ou se o valor desta chave, {{domxref("CryptoKey.usages")}}, não contém <code>"deriveKey"</code>.</li>
+ <li>{{exception("NotSupported")}} quando tentando usar um algoritmo que não é nem desconhecido e nem se encaixa para a derivação, ou se, o algoritmo requisitado da key derivada não define o comprimento da key.</li>
+ <li>{{exception("SyntaxError")}} quando <em><code>keyUsages</code></em> está vazio mas a key desvinculada é do tipo <code>"secret"</code> ou <code>"private"</code>.</li>
+</ul>
+
+<h2 id="Exemplo" style="font-size: 2.14285714285714rem;">Exemplo</h2>
+
+<p style="line-height: 16.7999992370605px;">Aqui está um exemplo de como usar <strong>deriveKey()</strong> para criar uma <strong>Secure Remote Password</strong> (também nomeado de <strong>Proof of Secret</strong>) da password de um usuário.</p>
+
+<pre class="brush: js" style="font-size: 14px;">// salt deve ser Uint8Array ou ArrayBuffer
+var saltBuffer = Unibabel.hexToBuffer('e85c53e7f119d41fd7895cdc9d7bb9dd');
+
+// não use métodos naïve para conversão de texto, senão caracteres
+// internacionais não terão a sequência correta de byte. Use o TextEncoder quando
+// possível ou então use polyfills relevantes
+var passphraseKey = Unibabel.utf8ToBuffer("I hëart årt and £$¢!");
+
+// Você deve primeiramente importar sua passphrase Uint8array em uma CryptoKey
+window.crypto.subtle.importKey(
+  'raw',
+  passphraseKey,
+  {name: 'PBKDF2'},
+  false,
+  ['deriveBits', 'deriveKey']
+).then(function(key) {
+
+  return window.crypto.subtle.deriveKey(
+    { "name": 'PBKDF2',
+      "salt": saltBuffer,
+      // não seja muito ambicioso, ou pelo menos tenha em mente
+      // que celulares com baixo poder de processamento vão acessar o seu app
+      "iterations": 100,
+      "hash": 'SHA-256'
+    },
+    key,
+
+    // Nota: para essa demo nós não vamos precisar de uma cipher suite,
+    // mas a API exige que a mesma seja especificada.
+
+    // Para AES o comprimento requerido é de 128 ou 256 bits (não bytes)
+    { "name": 'AES-CBC', "length": 256 },
+
+    // Independente da resposta a key é extraível (menos seguro) ou não extraível (mais seguro),
+    // quando falso, a key pode ser entregue apenas como um objeto crypto web, não inspecionado
+    true,
+
+    // esse objeto crypto web será permitido para apenas essas funções:
+    [ "encrypt", "decrypt" ]
+  )
+}).then(function (webKey) {
+
+  return crypto.subtle.exportKey("raw", webKey);
+
+}).then(function (buffer) {
+
+    var proofOfSecret = Unibabel.bufferToHex(buffer);
+    // esta proof-of-secret / password remota-segura
+    // pode agora ser enviada no lugar da password do usuário
+});</pre>
+
+<p style="line-height: 16.7999992370605px;">Nota: Por conta de não haver ferramentas nativas que convertam entre Uint8Array, Unicode, hex, e base64, você provavelmente vai querer utilizar algo como o <a href="https://github.com/coolaj86/unibabel-js">Unibabel</a> ou <a href="https://github.com/feross/buffer">Buffer</a> para converter entre eles.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-deriveKey', 'SubtleCrypto.deriveKey()') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatChrome(37) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(34) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatSafari(11) }}</td>
+  </tr>
+  <tr>
+   <td><code>PBKDF2</code></td>
+   <td>{{ CompatChrome(42) }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(34) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatSafari(11) }}</td>
+  </tr>
+  <tr>
+   <td><code>HKDF-CTR</code></td>
+   <td>{{ CompatChrome(42) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>DH</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(35) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Edge</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>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>37</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+  <tr>
+   <td><code>PBKDF2</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>42</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+  <tr>
+   <td><code>HKDF-CTR</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>42</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>DH</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile(35) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li>
+ <li>{{domxref("SubtleCrypto")}}, a interface a qual ele pertence.</li>
+</ul>
+
+<h3 id="Dicionário">Dicionário:</h3>
+
+<p>"Key" = "Chave"</p>
+
+<p>"Master key" = "Chave mestre"</p>
+
+<p>"Proof-of-secret" = "Prova de segredo ou Atestado de sigilo"</p>
+
+<p>"Password" = "Palavra passe ou Senha"</p>
diff --git a/files/pt-br/web/api/subtlecrypto/generatekey/index.html b/files/pt-br/web/api/subtlecrypto/generatekey/index.html
new file mode 100644
index 0000000000..0b2c8a8bb0
--- /dev/null
+++ b/files/pt-br/web/api/subtlecrypto/generatekey/index.html
@@ -0,0 +1,197 @@
+---
+title: SubtleCrypto.generateKey()
+slug: Web/API/SubtleCrypto/GenerateKey
+tags:
+  - API
+  - Referencia
+  - SubtleCrypto
+  - Web Crypto API
+  - metodo
+translation_of: Web/API/SubtleCrypto/generateKey
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>O método <code><strong>SubtleCrypto.generateKey()</strong></code> retorna como {{jsxref("Promise")}} de uma recentemente gerada {{domxref("CryptoKey")}}, para algoritmos simétricos, ou uma {{domxref("CryptoKeyPair")}}, contendo duas keys recentemente geradas, para algoritmos assimétricos, que combina com o algoritmo, o uso e a extractividade são dados como parâmetro.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>result</em> = <em>crypto.subtle</em><code>.generateKey(<em>algo</em>, <em>extractable</em>, <em>keyUsages</em>)</code>;
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<ul>
+ <li><em><code>algo</code></em> é um objeto do dicionário definindo a função utilizada da geração da key. algo suportados são : <a href="/en-US/docs/Web/API/Web_Crypto_API/Supported_algorithms#AES-CBC">AES-CBC</a>, <code>AES-CTR</code>, <code>AES-GCM</code>, <code>RSA-OAEP</code>, <code>AES-KW</code>, <code>HMAC</code>, <code>RSASSA-PKCS1-v1_5</code>, <code>ECDSA</code>, <code>ECDH</code>, e <code>DH</code>. Os formatos de objetos do dicionário são:
+
+  <ul>
+   <li>
+    <p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;"><code>"name"</code>, </span></font>o qual corresponde com um dos algo's suportados listados acima,</p>
+   </li>
+   <li>
+    <p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">"modulusLength"<code>, </code></span></font>o qual corresponde com o número de dígitos usado nos módulos</p>
+   </li>
+   <li>
+    <p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;"><code>"publicExponent</code>",</span></font> uma {{jsxref("Uint8Array")}} representando o exponencial público</p>
+   </li>
+   <li>
+    <p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">"<code>hash</code>", </span></font>um objeto do dicionário referenciando o uso do algoritmo hash. Por exemplo:</p>
+
+    <ul>
+     <li>
+      <p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;"><code>{name: "SHA-512"}</code></span></font></p>
+     </li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li><code><em>extractable</em></code> é um {{jsxref("Boolean")}} indicando se a key pode ser extraída do objeto {{domxref("CryptoKey")}} em um estágio mais tardio.</li>
+ <li><code><em>keyUsages</em></code>  é uma {{jsxref("Array")}} indicando o que pode ser feito com uma key recentemente gerada. Os possíveis valores da array são:
+  <ul>
+   <li><code>"encrypt"</code>, permitindo que a key seja utilizada para {{glossary("encryption", "encrypting")}} mensagens.</li>
+   <li><code>"decrypt"</code>, permitindo que a key seja utilizada para {{glossary("decryption", "decrypting")}} mensagens.</li>
+   <li><code>"sign"</code>, permitindo que a key seja utilizada para {{glossary("signature", "signing")}} mensagens.</li>
+   <li><code>"verify"</code>, permitindo que a key seja utilizada para {{glossary("verification", "verifying the signature")}} de mensagens.</li>
+   <li><code>"deriveKey"</code>, permitindo que a key seja utilizada como uma key base para quando se derivando uma nova key.</li>
+   <li><code>"deriveBits"</code>, permitindo que a key seja utilizada como uma key base quando se derivando {{glossary("bits")}} de dados para uso em criptografias primitivas.</li>
+   <li><code>"wrapKey"</code>, permitindo que a key envolva uma chave simétrica para uso (transferência, armazenamento) em ambientes não seguros.</li>
+   <li><code>"unwrapKey"</code>, permitindo que a key se desvincule de uma chave simétrica para uso (transferência, armazenamento) em ambientes não seguros.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<ul>
+ <li><code><em>result</em></code> é uma {{jsxref("Promise")}} que retorna uma key gerada como uma {{domxref("CryptoKey")}} ou uma {{domxref("CryptoKeyPair")}}.</li>
+</ul>
+
+<h3 id="Exceções">Exceções</h3>
+
+<p>A {{jsxref("Promise")}} é rejeitada quando a seguinte exceção é encontrada:</p>
+
+<ul>
+ <li>{{exception("SyntaxError")}} quando <em><code>keyUsages</code></em> está vazia mas a key gerada simetricamente é do tipo <code>"secret"</code> ou <code>"private"</code> ou o componente privado gerado do par de key assimétrica está vazio.</li>
+</ul>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentário</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-generateKey', 'SubtleCrypto.generateKey()') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatChrome(37) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(34) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>13</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+  <tr>
+   <td><code>ECDSA</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(36) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>DH</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(35) }}</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>Características</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>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>37</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+  <tr>
+   <td><code>ECDSA</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile(36) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+  <tr>
+   <td><code>DH</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile(35) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li>
+ <li>{{domxref("SubtleCrypto")}}, a interface a qual ele pertence.</li>
+</ul>
+
+<h3 id="Dicionário">Dicionário:</h3>
+
+<p>"Key" = "Chave"</p>
diff --git a/files/pt-br/web/api/subtlecrypto/importkey/index.html b/files/pt-br/web/api/subtlecrypto/importkey/index.html
new file mode 100644
index 0000000000..15c4102162
--- /dev/null
+++ b/files/pt-br/web/api/subtlecrypto/importkey/index.html
@@ -0,0 +1,169 @@
+---
+title: SubtleCrypto.importKey()
+slug: Web/API/SubtleCrypto/importKey
+tags:
+  - API
+  - Criptografía
+  - Referencia
+  - SubtleCrypto
+  - Web Crypto API
+  - metodo
+translation_of: Web/API/SubtleCrypto/importKey
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>O método <code><strong>SubtleCrypto.importKey()</strong></code> retorna como {{jsxref("Promise")}} de uma {{domxref("CryptoKey")}} de uma informção dada como parâmetro.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>result</em> = <em>crypto</em><code>.subtle.importKey(<em>format</em>, <em>keyData</em>, <em>algo</em>, <em>extractable</em>, <em>usages</em>)</code>;
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<ul>
+ <li><em><code>format</code></em> é um valor enumerado descrevendo o formato de informação da key exportada. Podendo ser um dos seguintes:
+
+  <ul>
+   <li><code>"raw"</code>, a key como um conjunto de bytes, normalmente uma key secreta.</li>
+   <li><code>"pkcs8"</code> uma key privada, no <a href="http://tools.ietf.org/html/rfc5208">IETF Public Key-Cryptographic Standard Encryption #8</a>.</li>
+   <li><code>"spki"</code>, normalmente uma key pública, no <a href="http://en.wikipedia.org/wiki/Simple_public-key_infrastructure">Simple public key infrastructure</a> padrão.</li>
+   <li><code>"jwk"</code>, a key no formato <a href="https://tools.ietf.org/html/draft-ietf-jose-json-web-key-41">JSON Web Key</a>.</li>
+  </ul>
+ </li>
+ <li><code><em>keyData</em></code> é uma {{domxref("ArrayBuffer")}} ou uma {{domxref("JSONWebKey")}} contendo uma key no formato dado.</li>
+ <li><em><code>algo</code></em> é um objeto de dicionário que define o algoritmo que foi utilizado para gerar a key que está sendo importada.</li>
+ <li><code><em>extractable</em></code> é um {{jsxref("Boolean")}} indicando se a key pode ser extraída de um objeto {{domxref("CryptoKey")}} em um estágio mais tardio.</li>
+ <li><code><em>usages</em></code> é um {{jsxref("Array")}} que indica o que pode ser feito com a key. Valores possíveis do array são:
+  <ul>
+   <li><code>"encrypt"</code>, permitindo que a key seja utilizada para {{glossary("encryption", "encrypting")}} mensagens.</li>
+   <li><code>"decrypt"</code>, permitindo que a key seja utilizada para {{glossary("decryption", "decrypting")}} mensagens.</li>
+   <li><code>"sign"</code>, permitindo que a key seja utilizada para {{glossary("signature", "signing")}} mensagens.</li>
+   <li><code>"verify"</code>, permitindo que a key seja utilizada para {{glossary("verification", "verifying the signature")}} de mensagens.</li>
+   <li><code>"deriveKey"</code>, permitindo que a key seja utilizada como uma key base na derivação de uma nova key.</li>
+   <li><code>"deriveBits"</code>, permitindo que a key seja utilizada como key base na derivação de bits de informação para uso em criptografias primitivas.</li>
+   <li><code>"wrapKey"</code>, permitindo que a key envolva uma key simétrica para uso (transferência, armazenamento) em ambientes não seguros.</li>
+   <li><code>"unwrapKey"</code>, permitindo que a key se desvincule de uma key simétrica para uso (transferência, armazenamento) em ambientes não seguros.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<ul>
+ <li><code><em>result</em></code> é uma {{jsxref("Promise")}} que retorna a {{domxref("CryptoKey")}} gerada.</li>
+</ul>
+
+<h3 id="Exceções">Exceções</h3>
+
+<p>A promise é rejeitada quando umas das seguintes exceções é encontrada:</p>
+
+<ul>
+ <li>{{exception("SyntaxError")}} quando <em><code>keyUsages</code></em> está vazia mas a key desvinculada é do tipo <code>"secret"</code> ou <code>"private"</code>.</li>
+ <li>{{jsxref("TypeError")}} quando tentando utilizar um formato invalido ou se a <em><code>keyData</code></em> não é adequada para este formato.</li>
+</ul>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-importKey', 'SubtleCrypto.importKey()') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Características</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatChrome(37) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(34) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+  <tr>
+   <td><code>ECDH</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(41) }}</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>Características</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>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>37</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+  <tr>
+   <td><code>ECDH</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(41) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li>
+ <li>{{domxref("SubtleCrypto")}}, a interface a qual ele pertence.</li>
+</ul>
+
+<h3 id="Dicionário">Dicionário:</h3>
+
+<p>"Key" = "Chave"</p>
+
+<p> </p>
diff --git a/files/pt-br/web/api/subtlecrypto/index.html b/files/pt-br/web/api/subtlecrypto/index.html
new file mode 100644
index 0000000000..a949d1cfa5
--- /dev/null
+++ b/files/pt-br/web/api/subtlecrypto/index.html
@@ -0,0 +1,83 @@
+---
+title: SubtleCrypto
+slug: Web/API/SubtleCrypto
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Referencia
+  - TopicStub
+  - Web Crypto API
+translation_of: Web/API/SubtleCrypto
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>A interface <code><strong>SubtleCrypto</strong></code> representa um conjunto de criptografias primitivas. E está disponível via propriedades {{domxref("Crypto.subtle")}} disponíveis em uma janela de contexto (via {{domxref("Window.crypto")}}).</p>
+
+<div class="warning">
+<p>Por especificação: "Desenvolvedores fazendo uso da interface SubtleCrypto devem estar cientes das preocupações associadas com o design e a implementação de vários algoritmos providos. Os algoritmos brutos são providos em ordem para permitir aos desenvolvedores uma felixibilidade máxima na implementação de uma variedade de protocolos e aplicações, cada um deve representar a composição e os parâmetros de segurança em uma maneira única que necessita do uso de algoritmos brutos."</p>
+</div>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>Esta interface não herda e nem implementa nenhuma propriedade.</em></p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p>Esta interface não herda nenhum método</p>
+
+<dl>
+ <dt>{{domxref("SubtleCrypto.encrypt()")}}</dt>
+ <dd>Retorna uma {{jsxref("Promise")}} da informação criptografada correspondente com o texto, algoritmo e chave key dados como parâmetros.</dd>
+ <dt>{{domxref("SubtleCrypto.decrypt()")}}</dt>
+ <dd>Retorna uma {{jsxref("Promise")}} da informação correspondente ao texto encriptografado, algoritmo e key dados como parâmetros.</dd>
+ <dt>{{domxref("SubtleCrypto.sign()")}}</dt>
+ <dd>Retorna uma {{jsxref("Promise")}} de uma assinatura correspondente ao texto, algoritmo e key dados como parâmetros.</dd>
+ <dt>{{domxref("SubtleCrypto.verify()")}}</dt>
+ <dd>Retorna uma {{jsxref("Promise")}} de um valor {{jsxref("Boolean")}} indicando se a assinatura dada como parâmetro combina com o texto, algoritmo e key também dados como parâmetros.</dd>
+ <dt>{{domxref("SubtleCrypto.digest()")}}</dt>
+ <dd>Retorna uma {{jsxref("Promise")}} de um resumo gerado a partir do algoritmo e texto dados como parâmetros.</dd>
+ <dt>{{domxref("SubtleCrypto.generateKey()")}}</dt>
+ <dd>Retorna uma {{jsxref("Promise")}} de uma recentemente gerada {{domxref("CryptoKey")}}, para algoritmos simétricos, ou uma {{domxref("CryptoKeyPair")}}, contendo duas novas keys simétricas, para algoritmos assimétricos, que combina com o algoritmo, os usos e a extrabilidade dados como parâmetros.</dd>
+ <dt>{{domxref("SubtleCrypto.deriveKey()")}}</dt>
+ <dd>Retorna uma {{jsxref("Promise")}} de uma recentemente gerada {{domxref("CryptoKey")}} derivada de uma master key e um algoritmo específico dados como parâmetros.</dd>
+ <dt>{{domxref("SubtleCrypto.deriveBits()")}}</dt>
+ <dd>Retorna uma {{jsxref("Promise")}} de um buffer recentemente gerado de bits pseudo-randômicos derivados de uma master key e um algoritmo específico dados como parâmetros.</dd>
+ <dt>{{domxref("SubtleCrypto.importKey()")}}</dt>
+ <dd>Retorna uma {{jsxref("Promise")}} de uma {{domxref("CryptoKey")}} correspondente ao formato, o algoritmo, a informação da key bruta, o uso e a extrabilidade dados como parâmetros.</dd>
+ <dt>{{domxref("SubtleCrypto.exportKey()")}}</dt>
+ <dd>Retorna uma {{jsxref("Promise")}} deu uma buffer contendo a key no formato requisitado.</dd>
+ <dt>{{domxref("SubtleCrypto.wrapKey()")}}</dt>
+ <dd>Retorna uma {{jsxref("Promise")}} de uma key envolvida simetricamente para uso (transferência, armazenamento) em ambientes não seguros. O buffer envolvido retornado será no formato dado nos parâmetros, e contém a key envolvida com a key envolvendo e o algoritmo dado.</dd>
+ <dt>{{domxref("SubtleCrypto.unwrapKey()")}}</dt>
+ <dd>Retorna uma {{jsxref("Promise")}} de uma {{domxref("CryptoKey")}} correspondente à key envolvida dada como parâmetro.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#subtlecrypto-interface', 'SubtleCrypto') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+
+
+<p>{{Compat("api.SubtleCrypto")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li>
+</ul>
diff --git a/files/pt-br/web/api/svgaelement/index.html b/files/pt-br/web/api/svgaelement/index.html
new file mode 100644
index 0000000000..687b067178
--- /dev/null
+++ b/files/pt-br/web/api/svgaelement/index.html
@@ -0,0 +1,74 @@
+---
+title: SVGAElement
+slug: Web/API/SVGAElement
+tags:
+  - Imagem vetorial
+  - Vetores
+translation_of: Web/API/SVGAElement
+---
+<div>{{APIRef("SVG")}}</div>
+
+<div>O <strong><code>SVGAElement</code></strong> interface fornece acesso as propriedades do elemento {{SVGElement("a")}}, bem como metodos para manipula-los.</div>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>Esta interface também herda propriedades de sua interface pai,{{domxref("SVGGraphicsElement")}}, e implementa propriedades de {{domxref("SVGURIReference")}} e de {{domxref("HTMLHyperlinkElementUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SVGAElement.target")}} {{readonlyInline}}</dt>
+ <dd>It corresponds to the {{SVGAttr("target")}} attribute of the given element.</dd>
+</dl>
+
+<h2 id="Metodos">Metodos</h2>
+
+<p><em>Esta interface não tem metodos próprios, porém herda metodos da interface {{domxref("SVGGraphicsElement")}}.</em></p>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>No exemplo abaixo, o {{SVGAttr("target")}} atributo do elemento {{SVGElement("a")}} recebe o valor <code>_blank</code> e quando o link for clicado, ele notifica se a condição é verdadeira ou falsa.</p>
+
+<pre class="brush: js">var linkRef = document.querySelector("a");
+linkRef.target = "_self";
+
+linkRef.onclick = function(){
+  if (linkRef.target === "_blank") {
+    console.log("BLANK!");
+    linkRef.target = "_self";
+  } else {
+    console.log("SORRY! not _blank");
+  }
+} </pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Especificação</td>
+   <td>Status</td>
+   <td>Comentário</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "linking.html#InterfaceSVGAElement")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Replaced inheritance from {{domxref("SVGElement")}} by {{domxref("SVGGraphicsElement")}} and removed the interface implementations of {{domxref("SVGTests")}}, {{domxref("SVGLangSpace")}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}}, and {{domxref("SVGTransformable")}} by {{domxref("HTMLHyperlinkElementUtils")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "linking.html#InterfaceSVGAElement")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_o_Navegador">Compatibilidade com o Navegador</h2>
+
+
+
+<p>{{Compat("api.SVGAElement")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>SVG {{SVGElement("a")}} element</li>
+</ul>
diff --git a/files/pt-br/web/api/svgaelement/svgalement.target/index.html b/files/pt-br/web/api/svgaelement/svgalement.target/index.html
new file mode 100644
index 0000000000..ebd533b068
--- /dev/null
+++ b/files/pt-br/web/api/svgaelement/svgalement.target/index.html
@@ -0,0 +1,105 @@
+---
+title: SVGAElement.target
+slug: Web/API/SVGAElement/SVGAlement.target
+tags:
+  - Imagem vetorial
+  - Vetores
+translation_of: Web/API/SVGAElement/target
+---
+<p>{{APIRef("SVGAElement")}}</p>
+
+<p>O <code><strong>SVGAElement.target</strong></code> propriedade somente ler de {{domxref("SVGAElement")}} retorna um objeto {{domxref("SVGAnimatedString")}} que especifica a porção de um alvo sendo ele "window", "frame" ou "pane" no qual um documento será aberto quando o link for acionado.</p>
+
+<p>Esta propriedade é usada quando existem dois ou mais possiveis alvos(destinos) para o documento, por exemplo, quando o documento pai é um arquivo .html ou .xhtml com varias telas (multi-frame).</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre><code><em>myLink</em>.target = '<em>value</em>';</code></pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Um {{domxref("SVGAnimatedString")}} indica o destino final do recurso que abre o documento assim que o link é acionado.</p>
+
+<p>Valores para {{domxref("target")}} você pode ver <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/linking.html#AElementTargetAttribute">aqui</a>.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>O código é foi retirado de <a href="/en-US/docs/Web/API/SVGAElement#Example">"SVGAElement example code"</a></p>
+
+<pre class="brush: js">...
+var linkRef = document.querySelector('a');
+linkRef.target ='_blank';
+...</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Specification</td>
+   <td>Status</td>
+   <td>Comment</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'text.html#InterfaceSVGAElement', 'target')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com o navegador</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>9.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>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{ SVGAttr("target") }}</li>
+</ul>
diff --git a/files/pt-br/web/api/svganimatetransformelement/index.html b/files/pt-br/web/api/svganimatetransformelement/index.html
new file mode 100644
index 0000000000..2dddfa5f0b
--- /dev/null
+++ b/files/pt-br/web/api/svganimatetransformelement/index.html
@@ -0,0 +1,48 @@
+---
+title: SVGAnimateTransformElement
+slug: Web/API/SVGAnimateTransformElement
+translation_of: Web/API/SVGAnimateTransformElement
+---
+<div>{{APIRef("SVG")}}</div>
+
+<p>A interface <code>SVGAnimateTransformElement</code> corresponde ao elemento {{SVGElement("animateTransform")}}.</p>
+
+<p>{{InheritanceDiagram(600, 140)}}</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>Essa interface não possui propriedades próprias mas as herda do seu pai,       {{domxref("SVGAnimationElement")}}.</em></p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Essa interface não possui métodos próprios mas os herda do seu pai, {{domxref("SVGAnimationElement")}}.</em></p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Especificação</td>
+   <td>Status</td>
+   <td>Comentário</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG Animations 2", "#InterfaceSVGAnimateTransformElement", "SVGAnimateTransformElement")}}</td>
+   <td>{{Spec2("SVG Animations 2")}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "animate.html#InterfaceSVGAnimateTransformElement", "SVGAnimateTransformElement")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade">Compatibilidade</h2>
+
+
+
+
+
+<p>{{Compat("api.SVGAnimateTransformElement")}}</p>
diff --git a/files/pt-br/web/api/url/createobjecturl/index.html b/files/pt-br/web/api/url/createobjecturl/index.html
new file mode 100644
index 0000000000..430b49c457
--- /dev/null
+++ b/files/pt-br/web/api/url/createobjecturl/index.html
@@ -0,0 +1,42 @@
+---
+title: URL.createObjectURL()
+slug: Web/API/URL/createObjectURl
+translation_of: Web/API/URL/createObjectURL
+---
+<p>{{ApiRef("URL API")}}{{SeeCompatTable}}</p>
+
+<h2 id="Summary" name="Summary">Resumo</h2>
+
+<p>Cria um novo objeto URL, cujo tempo de vida está ligado ao {{domxref("document")}} na janela na qual este objeto foi criado. O novo objeto URL representa o objeto {{domxref("File")}} ou o objeto {{domxref("Blob")}} passado como argumento.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>objetoURL</em> = window.URL.createObjectURL(blob);
+</pre>
+
+<ul>
+ <li><code>blob</code> é um objeto do tipo {{domxref("File")}} ou {{domxref("Blob")}} para o qual se deseja criar um objeto URL.</li>
+ <li><code>objetoURL</code> é o objeto URL gerado. O conteúdo completo do arquivo especificado é representado pelo texto do objeto URL.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<p>Veja <a href="/en-US/docs/Using_files_from_web_applications#Example.3A_Using_object_URLs_to_display_images" title="https://developer.mozilla.org/en/Using_files_from_web_applications#Example:_Using_object_URLs_to_display_images">Using object URLs to display images</a>.</p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Cada vez que a função <code>createObjectURL()</code> é chamada, um novo objeto URL é criado, mesmo se você já tiver criado um objeto URL para esse mesmo arquivo. Cada objeto URL criado precisa ser liberado por meio de uma chamada a {{domxref("window.URL.revokeObjectURL()")}} quando este não for mais necessário. Os navegadores liberarão os objetos URL criados automaticamente quando o documento for descarregado; no entanto, para um desempenho e um gerenciamento de memória ótimos, se houver algum momento em que você puder liberar estes recursos explicitamente, você deveria fazê-lo.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade de navegadores</h2>
+
+
+
+<p>{{Compat("api.URL.createObjectURL")}}</p>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li>{{domxref("URL.revokeObjectURL()")}}</li>
+ <li><a href="/en-US/docs/Using_files_from_web_applications" title="Using files from web applications">Using files from web applications</a></li>
+ <li>Especificação <a class="external" href="http://www.w3.org/TR/FileAPI/#dfn-createObjectURL" title="http://dev.w3.org/2006/webapi/FileAPI/#url">File API</a></li>
+</ul>
diff --git a/files/pt-br/web/api/url/index.html b/files/pt-br/web/api/url/index.html
new file mode 100644
index 0000000000..6e24c8efe7
--- /dev/null
+++ b/files/pt-br/web/api/url/index.html
@@ -0,0 +1,113 @@
+---
+title: URL
+slug: Web/API/URL
+translation_of: Web/API/URL
+---
+<div>{{ApiRef("URL API")}} {{SeeCompatTable}}</div>
+
+<p>The <strong><code>URL</code></strong><strong> </strong>interface represent an object providing static methods used for creating object URLs.</p>
+
+<p>When using a user agent where no constructor has been implemented yet, it is possible to access such an object using the non-standard {{domxref("Window.URL")}} properties (prefixed with Webkit- and Blink-based browser as <code>Window.webkitURL</code>).</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Implements properties defined in {{domxref("URLUtils")}}.</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>, 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>
+</dl>
+
+<dl>
+ <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="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("URL.URL", "URL()")}}</dt>
+ <dd>Creates and return a <code>URL</code> object composed from the given parameters.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The <code>URL</code> interface implements methods defined in {{domxref("URLUtils")}}.</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="Static_methods">Static methods</h2>
+
+<dl>
+ <dt>{{ domxref("URL.createObjectURL()") }}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing a unique blob URL, that is a URL with <code>blob:</code> as its scheme, followed by an opaque string uniquely identifying the object in the browser.</dd>
+ <dt>{{ domxref("URL.revokeObjectURL()") }}</dt>
+ <dd>Revokes an object URL previously created using {{ domxref("URL.createObjectURL()") }}.</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('File API', '#creating-revoking', 'URL')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Added the static methods <code>URL.createObjectURL()</code> and <code>URL.revokeObjectURL</code><code>()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#api', 'Node')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition (implements <code>URLUtils</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.URL")}}</p>
+
+<p>[1] From Gecko 2 (Firefox 4) to Gecko 18 included, Gecko supported this interface with the non-standard <code>nsIDOMMozURLProperty</code> internal type. As the only to access such an object was through {{domxref("window.URL")}}, in practice, this didn't make any difference.</p>
+
+<h2 id="Chrome_Code_-_Scope_Availability">Chrome Code - Scope Availability</h2>
+
+<p>To use from chrome code, JSM and Bootstrap scope, you have to import it like this:</p>
+
+<pre class="brush: js notranslate">Cu.importGlobalProperties(['URL']);
+</pre>
+
+<p><code>URL</code> is available in Worker scopes.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Property allowing to get such an object: {{domxref("Window.URL")}}.</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/pt-br/web/api/url/revokeobjecturl/index.html b/files/pt-br/web/api/url/revokeobjecturl/index.html
new file mode 100644
index 0000000000..1a6c34027d
--- /dev/null
+++ b/files/pt-br/web/api/url/revokeobjecturl/index.html
@@ -0,0 +1,107 @@
+---
+title: URL.revokeObjectURL()
+slug: Web/API/URL/revokeObjectURL
+translation_of: Web/API/URL/revokeObjectURL
+---
+<p>{{ApiRef("URL")}}{{SeeCompatTable}}</p>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>O método estático <strong><code>URL.revokeObjectURL()</code></strong> libera um objeto URL que foi criado préviamente chamando {{domxref("URL.createObjectURL()") }}.  Utilize este método quando terminar de usar um objeto URL, para informar o navegador que não é mais necessário manter a referência para o arquivo.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">window.URL.revokeObjectURL(<em>objectURL</em>);
+</pre>
+
+<dl>
+ <dt><em>objectURL </em></dt>
+ <dd>é um {{domxref("DOMString")}} representando o objeto URL que foi criado chamando {{domxref("URL.createObjectURL()") }}.</dd>
+</dl>
+
+<ul>
+</ul>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Veja <a href="/en-US/docs/Using_files_from_web_applications#Example_Using_object_URLs_to_display_images">Using object URLs to display images</a>.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-revokeObjectURL', 'URL')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</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>8.0<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>10.0</td>
+   <td>15.0</td>
+   <td>6.0<sup>[1]</sup><br>
+    7.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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoMobile(14.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>15.0</td>
+   <td>6.0<sup>[1]</sup><br>
+    7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Implementado com prefixo de URL como <code>webkitURL</code>.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("URL.createObjectURL()") }}</li>
+ <li><a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a></li>
+</ul>
diff --git a/files/pt-br/web/api/url/searchparams/index.html b/files/pt-br/web/api/url/searchparams/index.html
new file mode 100644
index 0000000000..a711b85fa2
--- /dev/null
+++ b/files/pt-br/web/api/url/searchparams/index.html
@@ -0,0 +1,45 @@
+---
+title: URL.searchParams
+slug: Web/API/URL/searchParams
+translation_of: Web/API/URL/searchParams
+---
+<p>{{APIRef("")}}</p>
+
+<p>A propriedade <strong><code>searchParams</code></strong> da interface {{domxref("URL")}} retorna um objeto {{domxref("URLSearchParams")}} permitindo acesso aos parâmetros enviados via GET que uma URL possui.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox notranslate">var urlSearchParams = URL.searchParams;</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Um objeto {{domxref("URLSearchParams")}}.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Se a URL da sua página é <code>https://example.com/?name=Jonathan&amp;age=18</code> você pode parsear os parametros 'name' e 'age' usando:</p>
+
+<pre class="default prettyprint prettyprinted notranslate">let params = (new URL(document.location)).searchParams;
+let name = params.get("name"); // é a string "Jonathan"
+let age = parseInt(params.get("age")); // é o número 18</pre>
+
+<h2 id="Especificações">Especificações</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('URL', '#dom-url-searchparams', 'searchParams')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.URL.searchParams")}}</p>
diff --git a/files/pt-br/web/api/urlsearchparams/get/index.html b/files/pt-br/web/api/urlsearchparams/get/index.html
new file mode 100644
index 0000000000..7a89676a9a
--- /dev/null
+++ b/files/pt-br/web/api/urlsearchparams/get/index.html
@@ -0,0 +1,109 @@
+---
+title: URLSearchParams.get()
+slug: Web/API/URLSearchParams/get
+translation_of: Web/API/URLSearchParams/get
+---
+<p>{{ApiRef("URL API")}}{{SeeCompatTable}} </p>
+
+<p>O métod <strong>get() </strong> da interface {{domxref("URLSearchParams")}},  retorna o primeiro valor associado ao parametro de busca fornecido.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">URLSearchParams.get(name)</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt>name</dt>
+ <dd>O nome do parâmetro à ser retornado.</dd>
+</dl>
+
+<h3 id="Retorno">Retorno</h3>
+
+<p>Um {{domxref("USVString")}} se o parâmetro de pesquisa for encontrado; Caso contrário, <code><strong>null</strong></code>.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Se a URL da sua página é <code>https://example.com/?name=Jonathan&amp;age=18</code> você pode obter o parâmetro 'name' e 'age'  usando:</p>
+
+<pre class="default prettyprint prettyprinted"><code>let params = new URLSearchParams(document.location.search.substring(1));
+let name = params.get("name")<span class="kwd">; // retorna a string "Jonathan"
+</span>let age = parseInt(params.get("age"), 10<span class="kwd">); // retorna o número 18</span></code>
+</pre>
+
+<p>Buscar um  parâmetro que não esteja presente na string de pesquisa, retornará  <code><strong>null</strong></code>:</p>
+
+<pre><code>let address = params.get("address"); // null</code></pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('URL', '#dom-urlsearchparams-get', "get()")}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Definição inicial.</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</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>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(49.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/pt-br/web/api/urlsearchparams/index.html b/files/pt-br/web/api/urlsearchparams/index.html
new file mode 100644
index 0000000000..00080b0ae5
--- /dev/null
+++ b/files/pt-br/web/api/urlsearchparams/index.html
@@ -0,0 +1,177 @@
+---
+title: URLSearchParams
+slug: Web/API/URLSearchParams
+tags:
+  - API
+  - API de URL
+  - Experimental
+  - Interface
+  - Referencia
+translation_of: Web/API/URLSearchParams
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>A interface <strong><code>URLSearchParams</code></strong> define métodos de utilização para trabalhar com query string de uma URL.</p>
+
+<p>Uma implementação do objeto <code>URLSearchParams</code> pode diretamente ser usado em uma estrutura {{jsxref("Statements/for...of", "for...of")}}, em vez de {{domxref('URLSearchParams.entries()', 'entries()')}}: <code>for (var p of mySearchParams)</code> é equivalente de <code>for (var p of mySearchParams.entries())</code>.</p>
+
+<h2 id="Construtor">Construtor</h2>
+
+<dl>
+ <dt>{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}</dt>
+ <dd>Construtor retorna um objeto <code>URLSearchParams</code>.</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>Esta interface não herda nenhuma propriedade.</em></p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Esta interface não herda nenhum método.</em></p>
+
+<dl>
+ <dt>{{domxref("URLSearchParams.append()")}}</dt>
+ <dd>Acrescenta um par de chave/valor específica com um novo parâmetro de busca.</dd>
+ <dt>{{domxref("URLSearchParams.delete()")}}</dt>
+ <dd>Exclui o parâmetro de busca informado, e seu valor associado, da lista de parâmetros de busca.</dd>
+ <dt>{{domxref("URLSearchParams.entries()")}}</dt>
+ <dd>Retorna um {{jsxref("Iteration_protocols","iterator")}} permitindo obter por todos os pares de chave/valor contidos neste objeto.</dd>
+ <dt>{{domxref("URLSearchParams.get()")}}</dt>
+ <dd>Retorna o primeiro valor associado ao parâmetro de busca informado.</dd>
+ <dt>{{domxref("URLSearchParams.getAll()")}}</dt>
+ <dd>Retorna todos os valores associados com o parâmetro de busca encontrado.</dd>
+ <dt>{{domxref("URLSearchParams.has()")}}</dt>
+ <dd>Retorna um {{jsxref("Boolean")}} indicando se cada um dos parâmetros de busca existe.</dd>
+ <dt>{{domxref("URLSearchParams.keys()")}}</dt>
+ <dd>Retorna um {{jsxref("Iteration_protocols", "iterator")}} permitindo obter todas as chaves dos pares de chave/valor contido neste objeto.</dd>
+ <dt>{{domxref("URLSearchParams.set()")}}</dt>
+ <dd>Define o valor associado ao parâmetro de busca com o valor informado. Se tiver mutios valores, exclua os outros.</dd>
+ <dt>{{domxref("URLSearchParams.toString()")}}</dt>
+ <dd>Retorna uma string contendo uma query string adequada pra usar numa URL.</dd>
+ <dt>{{domxref("URLSearchParams.values()")}}</dt>
+ <dd>Retorna um {{jsxref("Iteration_protocols", "iterator")}} permitindo obter todos os valores dos pares de chave/valor contido neste objeto.</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">var stringParams = "q=URLUtils.searchParams&amp;topic=api"
+var paramsBusca = new URLSearchParams(stringParams);
+
+//Iterar os parâmetros de busca.
+for (let p of paramsBusca) {
+  console.log(p);
+}
+
+paramsBusca.has("topic") === true; // true
+paramsBusca.get("topic") === "api"; // true
+paramsBusca.getAll("topic"); // ["api"]
+paramsBusca.get("foo") === null; // true
+paramsBusca.append("topic", "webdev");
+paramsBusca.toString(); // "q=URLUtils.searchParams&amp;topic=api&amp;topic=webdev"
+paramsBusca.set("topic", "More webdev");
+paramsBusca.toString(); // "q=URLUtils.searchParams&amp;topic=More+webdev"
+paramsBusca.delete("topic");
+paramsBusca.toString(); // "q=URLUtils.searchParams"
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Situação</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('URL', '#urlsearchparams', "URLSearchParams")}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>36</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, e suporte de <code>for...of</code></td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoDesktop("44.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>36</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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>Suporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoMobile("29.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49)}}</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, e suporte de <code>for...of</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoMobile("44.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>Outras interfaces relacionadas com URL: {{domxref("URL")}}, {{domxref("URLUtils")}}.</li>
+ <li><a href="https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en">Google Developers: Easy URL manipulation with URLSearchParams</a></li>
+</ul>
+
+<dl>
+</dl>
diff --git a/files/pt-br/web/api/urlsearchparams/values/index.html b/files/pt-br/web/api/urlsearchparams/values/index.html
new file mode 100644
index 0000000000..0bb1b06ff3
--- /dev/null
+++ b/files/pt-br/web/api/urlsearchparams/values/index.html
@@ -0,0 +1,112 @@
+---
+title: URLSearchParams.values()
+slug: Web/API/URLSearchParams/values
+translation_of: Web/API/URLSearchParams/values
+---
+<p>{{APIRef("URL API")}}</p>
+
+<p>O m<em>étodo</em> <code><strong>URLSearchParams.values()</strong></code>retorna um {{jsxref("Iteration_protocols",'iterator')}} que permite passar por todos os valores do objeto. Os valores são objetos {{domxref("USVString")}}.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Esse método está disponível no <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">searchParams.values();</pre>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Retorna um  {{jsxref("Iteration_protocols","iterator")}}.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js;highlight:[5]">// Cria um objeto URLSearchParams
+var searchParams = new URLSearchParams("key1=value1&amp;key2=value2");
+
+// Mostra os pares de chave/valor
+for(var value of searchParams.values()) {
+  console.log(value);
+}</pre>
+
+<p>O resultado é:</p>
+
+<pre>value1
+value2</pre>
+
+<h2 id="Especificações">Especificações</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('URL', '#urlsearchparams','values() (as iterator&lt;&gt;)')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Definição inicial.</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>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(44)}}</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>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>Outras interfaces relacionadas à URL: {{domxref("URL")}}, {{domxref("URLUtils")}}.</li>
+</ul>
diff --git a/files/pt-br/web/api/validitystate/index.html b/files/pt-br/web/api/validitystate/index.html
new file mode 100644
index 0000000000..e5bba7b7fb
--- /dev/null
+++ b/files/pt-br/web/api/validitystate/index.html
@@ -0,0 +1,85 @@
+---
+title: ValidityState
+slug: Web/API/ValidityState
+tags:
+  - API
+  - Forms
+  - HTML DOM
+  - HTML5
+  - Interface
+  - Validation
+translation_of: Web/API/ValidityState
+---
+<div>{{APIRef("HTML DOM")}} {{gecko_minversion_header("2.0")}}</div>
+
+<p>A interface <strong><code>ValidityState</code></strong> representa os estados de validação que um elemento<em> </em><br>
+ pode conter de acordo com as propriedades de validação abaixo. Juntas, elas podem explicar porque um elemento é inválido (caso seja) ao ser validado.</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p>Para cada uma das propriedades Booleanas abaixo, caso retorne <code><strong>true</strong></code>, isso indica a razão específica porque a validação falhou, exceto no caso da propriedade <em>valid</em>, que retorna <strong><code>true</code></strong> no caso do elemento ser completamente válido e <strong><code>false</code></strong> caso contrário.</p>
+
+<dl>
+ <dt>{{domxref("ValidityState.badInput")}} {{ReadOnlyInline}}</dt>
+ <dd>É um {{jsxref("Boolean")}} informando se o usuário inseriu um valor que o navegador é incapaz de converter.</dd>
+ <dt>{{domxref("ValidityState.customError")}} {{ReadOnlyInline}}</dt>
+ <dd>É um {{jsxref("Boolean")}} informando se o elemento possui uma mensagem de validação definida por <code>setCustomValidity()</code> para um valor não vázio.</dd>
+ <dt>{{domxref("ValidityState.patternMismatch")}} {{ReadOnlyInline}}</dt>
+ <dd>É um {{jsxref("Boolean")}} informando se o valor não combina com o padrão ({{htmlattrxref("pattern", "input")}}) especificado.</dd>
+ <dt>{{domxref("ValidityState.rangeOverflow")}} {{ReadOnlyInline}}</dt>
+ <dd>É um {{jsxref("Boolean")}} informando se o valor é maior do que o máximo especificado pelo atributo {{htmlattrxref("max", "input")}}.</dd>
+ <dt>{{domxref("ValidityState.rangeUnderflow")}} {{ReadOnlyInline}}</dt>
+ <dd>É um {{jsxref("Boolean")}} informando se o valor é menor do que o mínimo especificado pelo atributo {{htmlattrxref("min", "input")}}.</dd>
+ <dt>{{domxref("ValidityState.stepMismatch")}} {{ReadOnlyInline}}</dt>
+ <dd>É um {{jsxref("Boolean")}} informando se o valor não segue a regra definida pelo atributo {{htmlattrxref("step", "input")}}.</dd>
+ <dt>{{domxref("ValidityState.tooLong")}} {{ReadOnlyInline}}</dt>
+ <dd>É um {{jsxref("Boolean")}} informando se o valor ultrapassa o especificado pelo atributo <code>maxlength</code> para {{domxref("HTMLInputElement")}} ou {{domxref("HTMLTextAreaElement")}}. <em><strong>OBS:</strong> Isso nunca será <code>true</code> em navegadores como o Firefox, pois a inserção de valores não é permitida ao alcançar o valor definido em <code>maxlength</code>.</em></dd>
+ <dt>{{domxref("ValidityState.tooShort")}} {{ReadOnlyInline}}</dt>
+ <dd>É um {{jsxref("Boolean")}} informando se o valor não corresponde ao especificado no atributo <code>minlength</code> para {{domxref("HTMLInputElement")}} ou {{domxref("HTMLTextAreaElement")}}.</dd>
+ <dt>{{domxref("ValidityState.typeMismatch")}} {{ReadOnlyInline}}</dt>
+ <dd>É um {{jsxref("Boolean")}} informando se o valor não corresponde ao tipo de entrada definida. (Um exemplo é quando {{htmlattrxref("type", "input")}} é <code>email</code> ou <code>url</code>).</dd>
+ <dt>{{domxref("ValidityState.valid")}} {{ReadOnlyInline}}</dt>
+ <dd>É um {{jsxref("Boolean")}} informando se o elemento é completamente válido.</dd>
+ <dt>{{domxref("ValidityState.valueMissing")}} {{ReadOnlyInline}}</dt>
+ <dd>É um {{jsxref("Boolean")}} informando que o elemento tem o atributo {{htmlattrxref("required", "input")}}, mas não tem {{htmlattrxref("value", "input")}}.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'forms.html#the-constraint-validation-api', 'ValidityState') }}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Live Standard</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5.1', '#the-constraint-validation-api', 'ValidityState') }}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>No change from the previous snapshot {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', 'forms.html#the-constraint-validation-api', 'ValidityState') }}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>First snapshot of  {{SpecName('HTML WHATWG')}} containing this interface.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>
+
+<div class="hidden">A tabela de compatibilidade desta página é gerada a partir de dados estruturados. Se você gostaria de contribuir com estes dados, por favor, veja <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um pull request.</div>
+
+<p>{{Compat("api.ValidityState")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation">Forms: Data form validation</a></li>
+</ul>
diff --git a/files/pt-br/web/api/web_animations_api/index.html b/files/pt-br/web/api/web_animations_api/index.html
new file mode 100644
index 0000000000..c18d6fec70
--- /dev/null
+++ b/files/pt-br/web/api/web_animations_api/index.html
@@ -0,0 +1,86 @@
+---
+title: Web Animations API
+slug: Web/API/Web_Animations_API
+tags:
+  - API
+  - Animation
+  - Landing
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web Animations
+translation_of: Web/API/Web_Animations_API
+---
+<p>{{DefaultAPISidebar("Web Animations")}}</p>
+
+<p>The <strong>Web Animations API</strong> allows for synchronizing and timing changes to the presentation of a Web page, i.e. animation of DOM elements. It does so by combining two models: the Timing Model and the Animation Model.</p>
+
+<h2 id="Concepts_and_usage">Concepts and usage</h2>
+
+<p>The Web Animations API provides a common language for browsers and developers to describe animations on DOM elements. To get more information on the concepts behind the API and how to use it, read <a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Using the Web Animations API</a>.</p>
+
+<h2 id="Web_Animations_interfaces">Web Animations interfaces</h2>
+
+<dl>
+ <dt>{{domxref("Animation")}}</dt>
+ <dd>Provides playback controls and a timeline for an animation node or source. Can take an object created with the {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} constructor.</dd>
+ <dt>{{domxref("KeyframeEffect")}}</dt>
+ <dd>Describes sets of animatable properties and values, called <strong>keyframes </strong>and their <a href="/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options">timing options</a>. These can then be played using the {{domxref("Animation.Animation", "Animation()")}} constructor.</dd>
+ <dt>{{domxref("AnimationTimeline")}}</dt>
+ <dd>Represents the timeline of animation. This interface exists to define timeline features (inherited by {{domxref("DocumentTimeline")}} and future timeline objects) and is not itself accessed by developers.</dd>
+ <dt>{{domxref("AnimationEvent")}}</dt>
+ <dd>Actually part of CSS Animations.</dd>
+ <dt>{{domxref("DocumentTimeline")}}</dt>
+ <dd>Represents animation timelines, including the default document timeline (accessed using the {{domxref("Document.timeline")}} property).</dd>
+ <dt>{{domxref("EffectTiming")}}</dt>
+ <dd>{{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect()")}} all accept an optional dictionary object of timing properties.</dd>
+</dl>
+
+<h2 id="Extensions_to_other_interfaces">Extensions to other interfaces</h2>
+
+<p>The Web Animations API adds some new features to {{domxref("document")}} and {{domxref("element")}}.</p>
+
+<h3 id="Extensions_to_the_Document_interface">Extensions to the <code>Document</code> interface</h3>
+
+<dl>
+ <dt>{{domxref("document.timeline")}}</dt>
+ <dd>The <code>DocumentTimeline</code> object representing the default document timeline.</dd>
+ <dt>{{domxref("document.getAnimations()")}}</dt>
+ <dd>Returns an Array of {{domxref("Animation")}} objects currently in effect on elements in the <code>document</code>.</dd>
+ <dt>
+ <h3 id="Extensions_to_the_Element_interface">Extensions to the <code>Element</code> interface</h3>
+ </dt>
+ <dt>{{domxref("Element.animate()")}}</dt>
+ <dd>A shortcut method for creating and playing an animation on an element. It returns the created {{domxref("Animation")}} object instance.</dd>
+ <dt>{{domxref("Element.getAnimations()")}}</dt>
+ <dd>Returns an Array of {{domxref("Animation")}} objects currently affecting an element or which are scheduled to do so in future.</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('Web Animations')}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Using the Web Animations API</a></li>
+ <li><a href="https://mozdevs.github.io/Animation-examples/">Web Animations demos</a></li>
+ <li><a href="https://github.com/web-animations/web-animations-js">Polyfill</a></li>
+ <li>Firefox's current implementation: <a href="https://birtles.github.io/areweanimatedyet/">AreWeAnimatedYet</a></li>
+ <li>
+  <p><a href="http://codepen.io/danwilson/pen/xGBKVq">Browser support test</a></p>
+ </li>
+</ul>
diff --git a/files/pt-br/web/api/web_animations_api/usando_a_web_animations_api/index.html b/files/pt-br/web/api/web_animations_api/usando_a_web_animations_api/index.html
new file mode 100644
index 0000000000..2743f68d65
--- /dev/null
+++ b/files/pt-br/web/api/web_animations_api/usando_a_web_animations_api/index.html
@@ -0,0 +1,358 @@
+---
+title: Usando a Web Animations API
+slug: Web/API/Web_Animations_API/Usando_a_Web_Animations_API
+tags:
+  - Alice
+  - Animação
+  - CSS
+  - Guía
+  - Iniciante
+  - JavaScript
+  - Timing
+  - Tutorial
+  - animar
+  - duration
+  - keyframes
+  - pausar
+  - pause
+  - play
+  - quadro-chave
+  - reverse
+  - web animations api
+translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
+---
+<p>{{DefaultAPISidebar("Web Animations")}}</p>
+
+<p class="summary">A Web Animations API nos possibilita criar animações e controlar sua reprodução pelo JavaScript. Esse artigo vai te demonstrar esses conceitos com demonstrações e tutoriais com o temática de Alice no País das Maravilhas.</p>
+
+<h2 id="Conhecendo_a_Web_Animations_API">Conhecendo a Web Animations API</h2>
+
+<p>A <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> abre a engine de animação do browser para os desenvolvedores manipularem via JavaScript. Esta API foi construída para se basear nas implementações das <a href="/en-US/docs/Web/CSS/CSS_Animations">Animações CSS</a> e <a href="/en-US/docs/Web/CSS/CSS_Transitions">Transições CSS</a>, e deixam a porta aberta para futuros efeitos de animação. É um dos métodos mais performáticos para se animar na Web, permitindo que o browser faça internamente suas próprias otimizações, sem precisar depender de hacks, coerções ou {{domxref("Window.requestAnimationFrame()")}}.</p>
+
+<p>Com a Web Animations API, podemos transferir as animações interativas das folhas de estilo para o JavaScript, separando comportamento de apresentação. Não vamos precisar mais depender de técnicas muito dependentes do DOM como propriedades do CSS e escopo de classes para controlar a direção da reprodução. E diferente de CSS puro e declarativo, JavaScript também te possibilita definir dinâmicamente valores: de propriedades à duração. Para criar bibilotecas de animação à criar animações interativas, a Web Animations API pode ser a ferramenta perfeita para o trabalho. Vamos ver o que ela pode fazer!</p>
+
+<h2 id="Suporte_de_Navegadores">Suporte de Navegadores</h2>
+
+<p>O suporte básico para as funcionalidades da Web Animations API discutidas neste artigo estão disponíveis no Firefox 48+, Chrome 36+ e Safari 13.1+. Também existe um <a href="https://github.com/web-animations/web-animations-js">polyfill prático</a> que verifica o suporte e adiciona as funcionalidades onde for necessário.</p>
+
+<h2 id="Escrevendo_Animações_CSS_com_a_Web_Animations_API">Escrevendo Animações CSS com a Web Animations API</h2>
+
+<p>Uma das maneiras mais familiares de abordar a Web Animations API é começar com algo que boa parte dos desenvolvedores web já utilizaram antes: Animações CSS. Animações CSS tem uma sintaxe familiar que funciona bem para nossa demonstração.</p>
+
+<h3 id="A_versão_CSS">A versão CSS</h3>
+
+<p>Aqui temos uma animação escrita com CSS mostrando Alice caindo no buraco de coelho que leva ao País das Maravilhas (veja o <a href="http://codepen.io/rachelnabors/pen/QyOqqW">código completo no Codepen</a>):</p>
+
+<p><a href="http://codepen.io/rachelnabors/pen/rxpmJL"><img alt="Alice Tumbling down the rabbit's hole." src="https://mdn.mozillademos.org/files/13843/tumbling-alice_optimized.gif" style="display: block; height: 374px; margin-left: auto; margin-right: auto; width: 700px;"></a></p>
+
+<p>Perceba que o fundo se mexe, a Alice gira e sua cor muda em sincronia com o giro. Nós vamos focar somente na Alice para este tutorial. Segue a versão simplificada do CSS que controla a animação da Alice:</p>
+
+<pre class="brush: css notranslate">#alice {
+  animation: aliceTumbling infinite 3s linear;
+}
+
+@keyframes aliceTumbling {
+  0% {
+    color: #000;
+    transform: rotate(0) translate3D(-50%, -50%, 0);
+  }
+  30% {
+    color: #431236;
+  }
+  100% {
+    color: #000;
+    transform: rotate(360deg) translate3D(-50%, -50%, 0);
+  }
+}</pre>
+
+<p>Isso muda a cor da Alice e a rotação do `transform` por 3 segundos em um ritmo constante (linear) e se repete infinitamente. No bloco do <a href="/en-US/docs/Web/CSS/@keyframes">@keyframes</a> podemos ver que em 30% de cada repetição (por volta dos 900ms), a cor da Alice muda de preto para um vinho, e volta para o preto no final do loop.</p>
+
+<h3 id="Mudando_para_o_JavaScript">Mudando para o JavaScript</h3>
+
+<p>Agora vamos tentar criar a mesma animação usando a Web Animations API.</p>
+
+<h4 id="Representando_keyframes">Representando keyframes</h4>
+
+<p>A primeira coisa que precisamos fazer é criar um <a href="/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">Objeto Keyframe</a> correspondente ao nosso bloco <a href="/en-US/docs/Web/CSS/@keyframes">@keyframes</a> do CSS:</p>
+
+<pre class="brush: js notranslate">var aliceTumbling = [
+  { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+  { color: '#431236', offset: 0.3},
+  { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+];</pre>
+
+<p>Aqui estávamos utilizando uma array contendo múltiplos objetos. Cada objeto representa uma chave do CSS original. Contudo, diferente do CSS, a Web Animations API não precisa informar explicitamente as porcentagens temporais para cada chave, o JS automaticamente divide a animação em partes iguais baseado no número de chaves que você forneceu. Isso significa que um objeto Keyframe com três chaves vai reproduzir a chave do meio em 50% do tempo de cada loop, exceto se for definido o contrário.</p>
+
+<p>Quando queremos explicitamente definir um timing diferente para essas outras chaves, podemos especificar um offset diretamente no objeto, separado do resto da declaração por uma vírgula. No exemplo acima, para definir que a cor da Alice muda em 30% do tempo (e não 50%), nós definiremos como <code>offset: 0.3</code>.</p>
+
+<p>Atualmente, devem ser definidos pelo menos dois keyframes (representando o início e fim de estado das sequências de animação). Se a sua lista de keyframes somente tem uma entrada, {{domxref("Element.animate()")}} pode disparar uma exceção <code>NotSupportedErro</code> em alguns browsers até eles serem atualizados.</p>
+
+<p>Então recapitulando: as chaves são espaçadas igualmente por padrão, exceto se você definir um offset para uma chave. Útil, não?</p>
+
+<h4 id="Representando_propriedades_temporais">Representando propriedades temporais</h4>
+
+<p>Nós precisamos criar também um objeto de propriedades temporais (um objeto {{domxref("AnimationEffectTimingProperties")}}) correspondente aos valores da animação da Alice:</p>
+
+<pre class="brush: js notranslate">var aliceTiming = {
+  duration: 3000,
+  iterations: Infinity
+}</pre>
+
+<p>Você pode notar algumas diferenças aqui comparando com os valores equivalentes representados no CSS:</p>
+
+<ul>
+ <li>A propriedade <code>duration</code> está em milisegundos (<code>3000</code>, não <code>3s</code>). Assim como {{domxref("WindowTimers.setTimeout()")}} e {{domxref("Window.requestAnimationFrame()")}}, a Web Animations API somente aceita millisegundos.</li>
+ <li>A outra diferença é o uso de <code>iterations</code> no lugar de <code>iteration-count</code>.</li>
+</ul>
+
+<div class="note">
+<p>Existem algumas pequenas diferenças de terminologia entre o CSS Animations e o Web Animations. Por exemplo, Web Animations não usa a string <code>"infinite"</code>, e sim a keyword JavaScript <code>Infinity</code>. E no lugar de <code>timing-function</code>, usamos <code>easing</code>. Não estamos citando um valor de <code>easing</code> aqui pois, diferente das Animações CSS onde o valor padrão do <a href="/en-US/docs/Web/CSS/animation-timing-function">animation-timing-function</a> é <code>ease</code>, na Web Animations API o padrão é <code>linear</code> — o que nós já queremos para a animação da Alice.</p>
+</div>
+
+<h4 id="Juntando_as_peças">Juntando as peças</h4>
+
+<p>Agora vamos juntar o que já fizemos com o método {{domxref("Element.animate()")}}:</p>
+
+<pre class="brush: js notranslate">document.getElementById("alice").animate(
+  aliceTumbling,
+  aliceTiming
+)</pre>
+
+<p>E pronto: a animação começa a tocar (veja a <a href="http://codepen.io/rachelnabors/pen/rxpmJL">versão final no Codepen</a>).</p>
+
+<p>O método <code>animate()</code> pode ser chamado em qualquer elemento do DOM que pode ser animado com CSS. E pode ser escrito de algumas maneiras. Ao invés de criar objetos para os keyframes e propriedades temporais, podemos passar seus valores diretamentes, tipo:</p>
+
+<pre class="brush: js notranslate">document.getElementById("alice").animate(
+  [
+    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+    { color: '#431236', offset: 0.3},
+    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+  ], {
+    duration: 3000,
+    iterations: Infinity
+  }
+);</pre>
+
+<p>E se nós precisarmos somente especificar a duração da animação e não suas iterações (por padrão, a animação roda uma ), podemos passar só os milisegundos após o array:</p>
+
+<pre class="brush: js notranslate">document.getElementById("alice").animate(
+  [
+    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
+    { color: '#431236', offset: 0.3},
+    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+  ], 3000);</pre>
+
+<h2 id="Controlando_a_reprodução_com_play_pause_reverse_e_updatePlaybackRate">Controlando a reprodução com play(), pause(), reverse() e updatePlaybackRate()</h2>
+
+<p>Por mais que possamos escrever Animações CSS utilizando a Web Animations API, a API realmente mostra seu potencial quando precisamos manipular a reprodução da animação. A Web Animations API fornece vários métodos úteis para controlar a reprodução. Vamos dar uma olhada em como pausar e tocar animações no jogo da Alice Crescendo/Encolhendo (confira o <a href="http://codepen.io/rachelnabors/pen/PNYGZQ">código completo no Codepen</a>):</p>
+
+<p><a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010"><img alt="Playing the growing and shrinking game with Alice." src="https://mdn.mozillademos.org/files/13845/growing-shrinking_article_optimized.gif" style="display: block; height: 374px; margin-left: auto; margin-right: auto; width: 700px;"></a></p>
+
+<p>Nesse jogo, Alice tem uma animação que a encolhe ou aumenta seu tamanho, que controlamos por uma garrafa e um cupcake. Cada um tem sua própria animação.</p>
+
+<h3 id="Pausando_e_tocando_animações">Pausando e tocando animações</h3>
+
+<p>Vamos falar sobre a animação da Alice depois, mas por enquanto, vamos dissecar esta animação do cupcake.</p>
+
+<pre class="brush: js notranslate">var nommingCake = document.getElementById('eat-me_sprite').animate(
+[
+  { transform: 'translateY(0)' },
+  { transform: 'translateY(-80%)' }
+], {
+  fill: 'forwards',
+  easing: 'steps(4, end)',
+  duration: aliceChange.effect.timing.duration / 2
+});</pre>
+
+<p>O método {{domxref("Element.animate()")}} vai rodar imediatamente depois de ser chamado. Para evitar que o bolinho se coma sozinho antes da interação do usuário, chamamos o {{domxref("Animation.pause()")}} imediatamente depois de criar a animação:</p>
+
+<pre class="brush: js notranslate">nommingCake.pause();</pre>
+
+<p>Agora nós podemos usar o método {{domxref("Animation.play()")}} para rodar assim que for o momento:</p>
+
+<pre class="brush: js notranslate">nommingCake.play();</pre>
+
+<p>Especificamente, nós queremos linka-lo à animação da Alice, para ela crescer assim que o cupcake é mordido. Podemos fazer isso com a seguinte função:</p>
+
+<pre class="brush: js notranslate">var growAlice = function() {
+
+  // Play Alice's animation.
+  aliceChange.play();
+
+  // Play the cake's animation.
+  nommingCake.play();
+
+}</pre>
+
+<p>Quando o usuário clicar ou pressionar seu dedo no bolinho em uma tela de toque, podemos chamar a função <code>growAlice</code> para fazer todas as animações tocarem:</p>
+
+<pre class="brush: js notranslate">cake.addEventListener("mousedown", growAlice, false);
+cake.addEventListener("touchstart", growAlice, false);</pre>
+
+<h3 id="Outros_métodos_úteis">Outros métodos úteis</h3>
+
+<ul>
+ <li>{{domxref("Animation.finish()")}} pula para o final da animação.</li>
+ <li>{{domxref("Animation.cancel()")}} aborta a animação e cancela seus efeitos.</li>
+ <li>{{domxref("Animation.reverse()")}} define o ({{domxref("Animation.playbackRate")}}) para um valor negativo, então roda ao contrário</li>
+</ul>
+
+<p>Vamos dar uma olhada primeiro no método <code>playbackRate</code> — um valor negativo vai fazer a animação tocar ao contrário. Quando Alice bebe da garrafa, ela encolhe. Isso porque a garrafa muda o <code>playbackRate</code> da animação de 1 para -1:</p>
+
+<pre class="brush: js notranslate">var shrinkAlice = function() {
+  aliceChange.playbackRate = -1;
+  aliceChange.play();
+}
+
+bottle.addEventListener("mousedown", shrinkAlice, false);
+bottle.addEventListener("touchstart", shrinkAlice, false);</pre>
+
+<p>Em <a href="https://en.wikipedia.org/wiki/Through_the_Looking-Glass">Alice Através do Espelho</a>, Alice viaja para um mundo onde ela deve correr para se manter no lugar — e correr com o dobro de velocidade para avançar! No exemplo da Corrida da Rainha Vermelha, Alice e a Rainha Vermelha estão correndo para se manter no lugar (veja o <a href="http://codepen.io/rachelnabors/pen/PNGGaV">código completo no Codepen</a>):</p>
+
+<p><a href="http://codepen.io/rachelnabors/pen/PNGGaV"><img alt="Alice and the Red Queen race to get to the next square in this game." src="https://mdn.mozillademos.org/files/13847/red-queen-race_optimized.gif" style="display: block; height: 342px; margin-left: auto; margin-right: auto; width: 640px;"></a></p>
+
+<p>Já que crianças pequenas se cansam facilmente, diferente de peças de xadrez autônomas, Alice está constantemente desacelerando. Nós podemos fazer isso definindo uma queda no <code>playbackRate</code> da animação dela. Usamos o <code>updatePlaybackRate()</code> no lugar de definir manualmente o playbackRate, já que isso produz uma atualização mais suave:</p>
+
+<pre class="brush: js notranslate">setInterval( function() {
+
+  // Make sure the playback rate never falls below .4
+  if (redQueen_alice.playbackRate &gt; .4) {
+    redQueen_alice.updatePlaybackRate(redQueen_alice.playbackRate * .9);
+  }
+
+}, 3000);</pre>
+
+<p>Mas impulsioná-las clicando ou tocando na tela aumenta a velocidade delas por multiplicar o playbackRate:</p>
+
+<pre class="brush: js notranslate">var goFaster = function() {
+  redQueen_alice.updatePlaybackRate(redQueen_alice.playbackRate * 1.1);
+}
+
+document.addEventListener("click", goFaster);
+document.addEventListener("touchstart", goFaster);</pre>
+
+<p>Os elementos do fundo também tem <code>playbackRate</code>s que também são afetados pelo clique ou toque na tela. O que acontece quando você faz Alice e a Rainha Vermelha correrem com o dobro da velocidade? O que acontece quando você as deixa desacelerar?</p>
+
+<h2 id="Extraindo_informação_das_animações">Extraindo informação das animações</h2>
+
+<p>Imagine outras maneiras de utilizar o playbackRate, como melhorar a acessibilidade para usuários com disfunções vestibulares permitindo que eles desacelerem as animações do site todo. Isso é impossível de fazer via CSS sem recalcular todas as regras, mas com a Web Animations API, podemos utilizar o método {{domxref("document.getAnimations()")}} para iterar todas animações de uma página e dividir pela metade seu <code>playbackRate</code>, como por exemplo:</p>
+
+<pre class="brush: js notranslate">document.getAnimations().forEach(
+  function (animation) {
+    animation.updatePlaybackRate(animation.playbackRate * .5);
+  }
+);</pre>
+
+<p>Com a Web Animations API, você só precisa mudar uma simples propriedade!</p>
+
+<p>Outra coisa que é difícil de fazer somente com Animações CSS é criar dependências de valores fornecidos por outras animações. Por exemplo, no logo Aumentando e Encolhendo Alice, você pode ter notado algo estranho sobre a duração do bolinho:</p>
+
+<pre class="brush: js notranslate">duration: aliceChange.effect.getComputedTiming().duration / 2</pre>
+
+<p>Para entender o que está acontecendo, vamos dar uma olhada na animação da Alice:</p>
+
+<pre class="brush: js notranslate">var aliceChange = document.getElementById('alice').animate(
+  [
+    { transform: 'translate(-50%, -50%) scale(.5)' },
+    { transform: 'translate(-50%, -50%) scale(2)' }
+  ], {
+    duration: 8000,
+    easing: 'ease-in-out',
+    fill: 'both'
+  });</pre>
+
+<p>A animação da Alice a fazia ir de metade de seu tamanho para o dobro em 8 segundos. Então nós a pausamos:</p>
+
+<pre class="brush: js notranslate">aliceChange.pause();</pre>
+
+<p>Se pausassemos no início da animação, ela começaria com metade de seu tamanho original, como se já tivesse bebido a garrafa toda! Então nós precisamos definir o estado inicial da animação no meio. Podemos fazer isso definindo o {{domxref("Animation.currentTime")}} para 4 segundos, como no exemplo abaixo:</p>
+
+<pre class="brush: js notranslate">aliceChange.currentTime = 4000;</pre>
+
+<p>Mas enquanto trabalhamos nessa animação, vamos mudar bastante a duração da Alice. Não seria melhor definir essa <code>currentTime</code> dinamicamente? Assim não precisariamos fazer duas atualizações de uma vez só. Podemos fazer isso referenciando a propriedade {{domxref("Animation.effect")}}, que retorna um objeto que contém todos os detalhes sobre o(s) efeito(s) ativos na Alice:</p>
+
+<pre class="brush: js notranslate">aliceChange.currentTime = aliceChange.effect.getComputedTiming().duration / 2;</pre>
+
+<p>O <code>effect</code> nos permite acessar os keyframes e propriedades temporais da animação — <code>aliceChange.effect.getComputedTiming()</code> aponta para o objeto timing da Alice (cujo tipo é {{domxref("ComputedEffectTiming")}}) — que contem o {{domxref("ComputedEffectTiming.duration")}} dela. Podemos dividir sua duração pela metade para definir a metade da animação para a linha do tempo da animação da Alice, assim ela começaria com o tamanho normal. Então nós podemos reverter e tocar a animação dela em qualquer direção para encolher ou aumentar seu tamanho!</p>
+
+<p>E nós podemos fazer a mesma coisa quando definimos as durações da garrafa e do bolinho:</p>
+
+<pre class="brush: js notranslate">var drinking = document.getElementById('liquid').animate(
+[
+  { height: '100%' },
+  { height: '0' }
+], {
+  fill: 'forwards',
+  duration: aliceChange.effect.getComputedTiming().duration / 2
+});
+drinking.pause();</pre>
+
+<p>Agora todas as três animações estão ligadas por apenas um <code>duration</code>, que pode ser modificado facilmente em um só lugar do código.</p>
+
+<p>Nós também podemos utilizar a Web Animations API para descobrir o quanto da linha do tempo já foi percorrido. O jogo acaba quando o seu bolinho acaba ou você esvazia a garrafa. A vinheta que é apresentada aos jogadores depende do quão longe a Alice estava em sua animação, seja ficando grande demais pra caber na portinha ou pequena demais pra não conseguir mais alcançar a chave para abrir a porta. Podemos descobrir se ela está nesses extremos pegando o <code>currentTime</code> da sua animação e dividir pelo <code>activeDuration</code>:</p>
+
+<pre class="brush: js notranslate">var endGame = function() {
+
+  // get Alice's timeline's playhead location
+  var alicePlayhead = aliceChange.currentTime;
+  var aliceTimeline = aliceChange.effect.getComputedTiming().activeDuration;
+
+  // stops Alice's and other animations
+  stopPlayingAlice();
+
+  // depending on which third it falls into
+  var aliceHeight = alicePlayhead / aliceTimeline;
+
+  if (aliceHeight &lt;= .333){
+    // Alice got smaller!
+    ...
+
+  } else if (aliceHeight &gt;= .666) {
+    // Alice got bigger!
+    ...
+
+  } else {
+    // Alice didn't change significantly
+    ...
+
+  }
+}
+</pre>
+
+<div class="note">
+<p><strong>Nota:</strong> <code>getAnimations()</code> e <code>effect</code> não estão disponíveis em todos os browsers no momento em que este artigo foi escrito, mas o polyfill possibilita utilizá-los agora.</p>
+</div>
+
+<h2 id="Callbacks_e_promises">Callbacks e promises</h2>
+
+<p>Animações e Transições CSS tem seus event listeners próprios, que também são possíveis com a Web Animations API:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/Animation/onfinish">onfinish</a></code> é o manipulador de eventos para o evento <code>finish</code> e pode ser disparado manualmente com <code><a href="/en-US/docs/Web/API/Animation/finish">finish()</a></code>.</li>
+ <li><code><a href="/en-US/docs/Web/API/Animation/oncancel">oncancel</a></code> é o manipulador de eventos para o evento <code>cancel</code> e pode ser disparado manualmente com <code><a href="/en-US/docs/Web/API/Animation/cancel">cancel()</a></code>.</li>
+</ul>
+
+<p>Aqui nós definimos os callbacks para o bolinho, a garrafa e para Alice para disparar a função <code>endGame</code>:</p>
+
+<pre class="brush: js notranslate">// When the cake or bottle runs out...
+nommingCake.onfinish = endGame;
+drinking.onfinish = endGame;
+
+// ...or Alice reaches the end of her animation
+aliceChange.onfinish = endGame;
+
+</pre>
+
+<p>Ainda melhor, a Web Animations API também fornece uma promise <code><a href="/en-US/docs/Web/API/Animation/finished">finished</a></code> que será resolvida quando a animação é completada, e rejeitada se for cancelada.</p>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Essas são as funcionalidades básicas da Web Animations API, a maioria delas já estão sendo suportadas pelas últimas versões do Chrome, Firefox e Safari. Agora você está pronto pra "cair na toca do coelho" de animar utilizando o browser e pronto pra escrever e experimentar com sua própria animação! Se você está utilizando a API e deseja compartilha, tente usar a hashtag #WAAPI. Nós estaremos de olho e vamos escrever mais tutoriais para cobrir funcionalidades futuras assim que o suporte aumentar!</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li class="post__title">A <a href="http://codepen.io/collection/bpEza/">coleção completa de demos de Alice no País das Maravilhas</a> no CodePen para você brincar, compartilhar e editar</li>
+ <li class="post__title"><a href="https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/">Animating like you just don’t care with Element.animate</a> (em inglês) — Um ótimo artigo para se ler que explica mais sobre a Web Animations API por baixo dos panos, e por que ela tem uma performance melhor do que os outros métodos de animação web</li>
+ <li class="post__title"><a href="https://github.com/web-animations/web-animations-js">web-animations-js</a> — O polyfill da Web Animations API</li>
+</ul>
diff --git a/files/pt-br/web/api/web_crypto_api/index.html b/files/pt-br/web/api/web_crypto_api/index.html
new file mode 100644
index 0000000000..3058112978
--- /dev/null
+++ b/files/pt-br/web/api/web_crypto_api/index.html
@@ -0,0 +1,132 @@
+---
+title: Web Crypto API
+slug: Web/API/Web_Crypto_API
+tags:
+  - API
+  - API de criptografia Web
+  - Overview
+  - Referencia
+  - Visão Geral
+  - Web Crypto API
+translation_of: Web/API/Web_Crypto_API
+---
+<p>{{DefaultAPISidebar("Web Crypto API")}}{{SeeCompatTable}}{{draft}}</p>
+
+<p>A <strong>Web Crypto API</strong> é uma interface que permite um script utilizar criptografias primitivas para criar sistemas usando criptografia.</p>
+
+<p>Uma característica fundamental desta API é permitir a manipulação e o armazenamento de keys de criptografia privadas e secretas sem que o JavaScript tenha acesso aos bits internos das keys.</p>
+
+<p>Essa interface permite que scripts acessem as seguintes primitivas:</p>
+
+<ul>
+ <li><em>digest</em>, a habilidade de computar um hash de um bloco arbitrário de dados com o objetivo de detectar se houve alguma mudança.</li>
+ <li><em>mac</em>, a habilidade de computar um código de autenticação de mensagem.</li>
+ <li><em>sign</em> e <em>verify</em>, a habilidade de assinar digitalmente um documento e de verificar se uma dada assinatura pertence àquele que afirma ser seu signatário.</li>
+ <li><em>encrypt</em> e <em>decrypt</em>, a habilidade de codificar e decodificar um documento utilizando chaves criptográficas.</li>
+ <li><em>import</em> e <em>export</em>, a habilidade de importar e exportar keys criptografadas.</li>
+ <li><em>key generation</em>, a habilidade de criar uma key ou um par de keys de criptografia segura, sem o uso de uma key base, mas utilizando a entropia do sistema local como fonte de aleatoriedade para essa geração.</li>
+ <li><em>key wrapping</em> e <em>unwrapping</em>, a habilidade de transmitir e receber uma key de um terceiro, codificada utilizando uma outra key, sem expor a key subjacente ao código JavaScript.</li>
+ <li><em>random</em>, a habilidade de gerar números pseudo-randômicos de criptografia significante.</li>
+</ul>
+
+<p>A Web Crypto API não resolve todos os problemas de criptografia que um site Web ou aplicação pode encontrar:</p>
+
+<ul>
+ <li>Ela não dispensa o respeito ao <a href="/en-US/docs/Web/Security/Same-origin_policy">modelo de origem idêntica</a> do navegador, como em casos em que chaves são fornecidas por autoridades centrais utilizadas por diversos sítios Web.</li>
+ <li>Ela é incapaz de interagir com hardwares dedicados, como cartões inteligentes (smartcards), tokens USB ou geradores de aleatoriedade.</li>
+</ul>
+
+<div class="warning">
+<p><strong>Atenção!</strong></p>
+
+<ul>
+ <li>O mero uso de criptografia não faz seu sistema seguro. Segurança é um <strong>processo</strong> que constantemente avalia os riscos em que um sistema pode incorrer dentro do seu contexto de utilização. O contexto e os riscos que podem ocorrer evoluem no tempo.</li>
+ <li>Quando se lida com segurança, todo o <strong>sistema</strong> precisa ser considerado. No caso da Web Crypto API, os desenvolvedores Web não devem considerar apenas a segurança de seu código ou script, mas também a segurança da conexão que é mantida com o servidor e os dados que o servidor pode manter em texto plano (não criptografado). A segurança geral não será mais forte que a segurança de da parte mais fraca do sistema.</li>
+</ul>
+</div>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>Alguns navegadores implementam uma interface chamada {{domxref("Crypto")}} sem que ela esteja bem definida ou seja substancialmente criptografado. Para evitar confusões, métodos e propriedades desta interface foram retiradas de navegadores que implementaram Web Crypto API, e todos os métodos Web Crypto API estão disponíveis em uma nova interface: {{domxref("SubtleCrypto")}}. A propriedade {{domxref("Crypto.subtle")}} dá acesso a um objeto que a implementa.</p>
+
+<h2 id="Casos_de_uso">Casos de uso</h2>
+
+<p>A Web Crypto API pode ser utilizada:</p>
+
+<ul>
+ <li>Para verificar que dados não foram alterados por um terceiro. Mesmo se dados foram armazenados sem criptografia, o armazenamento de uma assinatura, gerada a partir de uma senha, permite que pessoas que conhecem a senha identificar se o conteúdo e a assinatura são genuínos.</li>
+</ul>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Web Crypto API")}}</td>
+   <td>{{Spec2("Web Crypto API")}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p> </p>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatChrome(37)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(24)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Característica</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>Suporte básico</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(37)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/pt-br/web/api/web_storage_api_pt_br/index.html b/files/pt-br/web/api/web_storage_api_pt_br/index.html
new file mode 100644
index 0000000000..f4e16bd9e7
--- /dev/null
+++ b/files/pt-br/web/api/web_storage_api_pt_br/index.html
@@ -0,0 +1,139 @@
+---
+title: API de Armazenamento na Web
+slug: Web/API/Web_Storage_API_pt_br
+translation_of: Web/API/Web_Storage_API
+---
+<p>{{DefaultAPISidebar("Web Storage API")}}</p>
+
+<p>A  API de armazenamento na web (<strong>Web Storage</strong>) fornece mecanismos para que os navegadores possam armazenar dados através de chave/valor de uma forma mais eficiente que os cookies.</p>
+
+<h2 id="Armazenamento_na_Web_conceitos_e_formas_de_uso">Armazenamento na Web conceitos e formas de uso</h2>
+
+<p>A API de Web Storage fornece duas maneiras de armazenar dados:</p>
+
+<ul>
+ <li><code>sessionStorage</code> mantém as informações armazenadas por origem e permanece disponível enquanto há uma sessão aberta no navegador (mesmo a página sendo recarregada). Caso o browser seja fechado a sessão será limpa e as informações serão perdidas.</li>
+ <li><code>localStorage</code> mesmo que o navegador seja fechado, os dados permanecem armazenados.</li>
+</ul>
+
+<p>Esses mecanismos estão disponíveis a partir das seguintes propriedades {{domxref("Window.sessionStorage")}} e {{domxref("Window.localStorage")}} (para um maior suporte, o objeto <code>Window</code> implementa os objetos  <code>Window.LocalStorage</code> e <code>Window.SessionStorage</code>) — ao invocar uma dessas propriedades, é criada uma instância do objeto {{domxref("Storage")}}, que fornece métodos para inserir, recuperar e remover os dados. Sempre será utilizado um objeto diferente para cada origem de <code>sessionStorage</code> e <code>localStorage, dessa forma o controle de ambos é realizado de forma separada.</code></p>
+
+<div class="note">
+<p>Nota: O acesso a API de Web storage a partir de IFrames de terceiros é negado se o usuário desabilitou cookies de terceiros (Firefox implementa esse comportamento a partir da versão 43 em diante).</p>
+</div>
+
+<div class="note">
+<p>Nota<strong>:</strong> Web Storage não é o mesmo que mozStorage (interface XPCOM da Mozilla para o SQLite) ou Session store API (uma forma de armazenamento XPCOM para uso de extensões).</p>
+</div>
+
+<h2 id="Interfaces_de_Armazenamento_na_Web">Interfaces de Armazenamento na Web</h2>
+
+<dl>
+ <dt>{{domxref("Storage")}}</dt>
+ <dd>Permite que você insira, recupere e remova dados de um domínio no storage(session ou local).</dd>
+ <dt>{{domxref("Window")}}</dt>
+ <dd>A API de Web Storage estende o objeto {{domxref("Window")}} com duas novas propriedades — {{domxref("Window.sessionStorage")}} e {{domxref("Window.localStorage")}} —  fornecendo acesso à sessão do domínio atual e local para o objeto {{domxref("Storage")}} respectivamente.</dd>
+ <dt>{{domxref("StorageEvent")}}</dt>
+ <dd>
+ <p>Um evento de storage é chamado em um objeto window do documento quando ocorre uma mudança no storage.</p>
+ </dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Para desmonstrar o uso de web storage, nós criamos um exemplo simples, chamado <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">Web Storage Demo</a>. A página da demo <a href="http://mdn.github.io/web-storage-demo/">landing page</a> oferece funcionalidades que permitem alterar a cor, fonte e imagem que é exibida na página. Quando você escolhe uma opção diferente, a página será atualizada imediatamente. Além disso, sua escolha foi armazenada em <code>localStorage</code>,  para que quando você feche o navegador e abra novamente para acessar a página, suas escolhas sejam lembradas.</p>
+
+<p>Nós também fornecemos um <a href="http://mdn.github.io/web-storage-demo/event.html">event output page</a> —  para quando você abrir a página em outra aba,  as informações sejam atualizadas através da chamada de um {{event("StorageEvent")}}.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_os_Navegadores">Compatibilidade com os Navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Propriedade</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>Suporte básico</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Todos os navegadores têm espaços de armazenamento diferentes tanto para localStorage quanto para sessionStorage. Veja um resumo detalhado da <a href="http://dev-test.nemikor.com/web-storage/support-test/">capacidade de armazenamento de vários navegadores</a>.</p>
+
+<div class="note">
+<p>Nota: Desde iOS 5.1, o Safari armazena dados móveis de LocalStorage na pasta cache, que está sujeito a limpeza pelo OS, além disso o espaço de armazenamento é curto.</p>
+</div>
+
+<h2 id="Navegação_privada_modo_de_navegação_anônima">Navegação privada /modo de navegação anônima</h2>
+
+<p>Boa parte dos navegadores atuais suportam a opção de privacidade chamada modo de "Navegação privada ou anônima", que basicamente torna a sessão de navegação privada e não deixa rastros depois que o navegador é fechado. Este modo é incompatível com armazenamento na Web por razões óbvias. Os fabricantes de navegadores estão experimentando com diferentes cenários como lidar com essa incompatibilidade.</p>
+
+<p>A maioria dos navegadores optaram por uma estratégia onde as APIs de armazenamento ainda estão disponíveis e, aparentemente, funcional, com a grande diferença de que todos os dados armazenados é apagado depois que o navegador é fechado. Para estes navegadores ainda existem diferentes interpretações sobre o que deve ser feito com os dados existentes armazenados (a partir de uma sessão de navegação regular). E quanto   a leitura dos dados se o navegador estiver no modo privado? Há alguns navegadores, principalmente Safari, que optaram por uma solução em que o armazenamento está disponível, mas está vazio e tem uma quota de 0 bytes atribuídos, tornando impossível o armazenamento de dados.</p>
+
+<p>Os desenvolvedores devem estar cientes e considerar as diferentes formas de implementações ao desenvolverem sites dependendo das APIs Web Storage. Para mais informações, leia neste <a href="https://blog.whatwg.org/tag/localstorage">post</a> escrito no blog do WHATWG que lida especificamente com este tópico.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usando a API Web Storage</a></p>
diff --git a/files/pt-br/web/api/web_storage_api_pt_br/using_the_web_storage_api/index.html b/files/pt-br/web/api/web_storage_api_pt_br/using_the_web_storage_api/index.html
new file mode 100644
index 0000000000..eb9807f0ef
--- /dev/null
+++ b/files/pt-br/web/api/web_storage_api_pt_br/using_the_web_storage_api/index.html
@@ -0,0 +1,267 @@
+---
+title: Usando a API Web Storage
+slug: Web/API/Web_Storage_API_pt_br/Using_the_Web_Storage_API
+tags:
+  - API
+  - Guía
+  - Storage
+  - Web Storage API
+  - localStorage
+  - sessionStorage
+translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API
+---
+<div>{{DefaultAPISidebar("Web Storage API")}}</div>
+
+<div class="summary">
+<p>A API Web Storage fornece mecanismos pelos quais os navegadores podem armazenar pares de chaves/valores de uma maneira muito mais segura e intuitiva do que usar cookies. Este artigo fornece um passo a passo sobre como usar essa tecnologia.</p>
+</div>
+
+<h2 id="Conceitos_básicos">Conceitos básicos</h2>
+
+<p>Objetos <code>Storage</code> são simples conjuntos contendo pares de chave/valor, de forma parecida com objetos, porém eles permanecem intactos mesmo após a página ser recarregada. As chaves e valores são sempre strings (note que chaves cujo nome seja um número inteiro serão automaticamente convertidas par strings, assim como acontece nos objetos). Você pode acessar esses valores como você faria com um objeto ou usando os métodos {{domxref("Storage.getItem()")}} e {{domxref("Storage.setItem()")}}. As três linhas seguintes definem o valor de <code>corDefinida</code> de maneiras diferentes, mas com o mesmo resultado:</p>
+
+<pre class="brush: js" style="white-space: pre;">localStorage.corDefinida = '#a4509b';
+localStorage['corDefinida'] = '#a4509b';
+localStorage.setItem('corDefinida', '#a4509b');</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Recomendamos que você utilize a API Web Storage (<code>setItem</code>, <code>getItem</code>, <code>removeItem</code>, <code>key</code>, <code>length</code>) para evitar as <a href="http://www.2ality.com/2012/01/objects-as-maps.html">armadilhas</a> associadas ao uso de objetos literais como mapas de chave-valor.</p>
+</div>
+
+<p>Os dois mecanismos presentes na Web Storage são os seguintes:</p>
+
+<ul>
+ <li>O<strong> <code>sessionStorage</code> </strong>mantém uma área de armazenamento separada para cada origem diferente. Cada uma dessas áreas fica disponível durante a sessão da página (ou seja, enquanto a aba do navegador estiver aberta, incluindo recarregamentos e restaurações de páginas).</li>
+ <li>O <strong><code>localStorage</code> </strong>faz a mesma coisa, mas os dados armazenados aqui continuam existindo mesmo depois do navegador ser fechado e reaberto.</li>
+</ul>
+
+<p>Esses mecanismos estão disponíveis através das propriedades {{domxref("Window.sessionStorage")}} e {{domxref("Window.localStorage")}} (de forma mais específica, em navegadores compatíveis, o objeto <code>Window</code> implementa os objetos <code>WindowLocalStorage</code> e <code>WindowSessionStorage</code>, aos quais as propriedades <code>localStorage</code> and <code>sessionStorage</code> pertencem, respectivamente) — invocar uma dessas propriedades irá criar uma instância do objeto {{domxref("Storage")}}, através do qual itens de dados podem ser definidos, acessados e removidos. Cada origem recebe objetos Storage diferentes para <code>sessionStorage</code> and <code>localStorage</code> — eles operam e são controlados separadamente.</p>
+
+<p>Por exemplo, chamar <code>localStorage</code> pela primeira vez em um documento retornará um objeto {{domxref("Storage")}}; chamar <code>sessionStorage</code> em um documento retornará um outro objeto {{domxref("Storage")}}. Ambos podem ser manipulados da mesma maneira, mas de forma isolada.</p>
+
+<h2 id="Detectando_a_disponibilidade_do_localStorage">Detectando a disponibilidade do localStorage</h2>
+
+<p>Para poder usarmos o localStorage, devemos antes verificar se ele é compatível e está disponível na sessão atual de navegação.</p>
+
+<h3 id="Testando_a_disponibilidade">Testando a disponibilidade</h3>
+
+<p>Navegadores compatíveis com localStorage terão uma propriedade no objeto <code>window</code> chamada <code>localStorage</code>. Contudo, por várias razões, apenas verificar se essa propriedade existe pode gerar erros. Se ela existir, ainda não haverá garantias de que o localStorage está de fato disponível para uso, já que vários navegadores fornecem opções que desativam o localStorage. Dessa forma, um navegador pode ser <em>compatível</em> com o localStorage, mas também pode não torná-lo <em>disponível</em> para os scripts usarem. One example of that is Safari, which in Private Browsing mode gives us an empty localStorage object with a quota of zero, effectively making it unusable. However, we might still get a legitimate QuotaExceededError, which only means that we've used up all available storage space, but storage is actually <em>available</em>. Our feature detect should take these scenarios into account.</p>
+
+<p>Here is a function that detects whether localStorage is both supported and available:</p>
+
+<pre class="brush: js">function storageAvailable(type) {
+    try {
+        var storage = window[type],
+            x = '__storage_test__';
+        storage.setItem(x, x);
+        storage.removeItem(x);
+        return true;
+    }
+    catch(e) {
+        return e instanceof DOMException &amp;&amp; (
+            // everything except Firefox
+            e.code === 22 ||
+            // Firefox
+            e.code === 1014 ||
+            // test name field too, because code might not be present
+            // everything except Firefox
+            e.name === 'QuotaExceededError' ||
+            // Firefox
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &amp;&amp;
+            // acknowledge QuotaExceededError only if there's something already stored
+            storage.length !== 0;
+    }
+}</pre>
+
+<p>And here is how you would use it:</p>
+
+<pre class="brush: js">if (storageAvailable('localStorage')) {
+  // Yippee! We can use localStorage awesomeness
+}
+else {
+  // Too bad, no localStorage for us
+}</pre>
+
+<p>You can test for sessionStorage instead by calling <code>storageAvailable('sessionStorage')</code>.</p>
+
+<p>See here for a <a href="https://gist.github.com/paulirish/5558557">brief history of feature-detecting localStorage</a>.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>To illustrate some typical web storage usage, we have created a simple example, imaginatively called <strong>Web Storage Demo</strong>. The <a href="https://mdn.github.io/dom-examples/web-storage/">landing page</a> provides controls that can be used to customize the color, font, and decorative image:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9685/landing.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;">When you choose different options, the page is instantly updated; in addition, your choices are stored in <code>localStorage</code>, so that when you leave the page and load it again, later on, your choices are remembered.</p>
+
+<p>We have also provided an <a href="https://mdn.github.io/dom-examples/web-storage/event.html">event output page</a> — if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage information outputted as a {{domxref("StorageEvent")}} is fired.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9687/event-output.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: As well as viewing the example pages live using the above links, you can also <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">check out the source code</a>.</p>
+</div>
+
+<h3 id="Testing_whether_your_storage_has_been_populated">Testing whether your storage has been populated</h3>
+
+<p>To start with on <a href="https://github.com/mdn/dom-examples/blob/master/web-storage/main.js">main.js</a>, we will test whether the storage object has already been populated (i.e., the page was previously accessed):</p>
+
+<pre class="brush: js">if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}</pre>
+
+<p>The {{domxref("Storage.getItem()")}} method is used to get a data item from storage; in this case, we are testing to see whether the <code>bgcolor</code> item exists; if not, we run <code>populateStorage()</code> to add the existing customization values to the storage. If there are already values there, we run <code>setStyles()</code> to update the page styling with the stored values.</p>
+
+<p><strong>Note</strong>: You could also use {{domxref("Storage.length")}} to test whether the storage object is empty or not.</p>
+
+<h3 id="Getting_values_from_storage">Getting values from storage</h3>
+
+<p>As noted above, values can be retrieved from storage using {{domxref("Storage.getItem()")}}. This takes the key of the data item as an argument, and returns the data value. For example:</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>
+
+<p>Here, the first three lines grab the values from local storage. Next, we set the values displayed in the form elements to those values, so that they keep in sync when you reload the page. Finally, we update the styles/decorative image on the page, so your customization options come up again on reload.</p>
+
+<h3 id="Setting_values_in_storage">Setting values in storage</h3>
+
+<p>{{domxref("Storage.setItem()")}} is used both to create new data items, and (if the data item already exists) update existing values. This takes two arguments — the key of the data item to create/modify, and the value to store in it.</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}</pre>
+
+<p>The <code>populateStorage()</code> function sets three items in local storage — the background color, font, and image path. It then runs the <code>setStyles()</code> function to update the page styles, etc.</p>
+
+<p>We've also included an <code>onchange</code> handler on each form element so that the data and styling are updated whenever a form value is changed:</p>
+
+<pre class="brush: js">bgcolorForm.onchange = populateStorage;
+fontForm.onchange = populateStorage;
+imageForm.onchange = populateStorage;</pre>
+
+<h3 id="Responding_to_storage_changes_with_the_StorageEvent">Responding to storage changes with the StorageEvent</h3>
+
+<p>The {{domxref("StorageEvent")}} is fired whenever a change is made to the {{domxref("Storage")}} object (note that this event is not fired for sessionStorage changes). This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can't access the same storage objects.</p>
+
+<p>On the events page (see <a href="https://github.com/mdn/dom-examples/blob/master/web-storage/event.js">events.js</a>) the only JavaScript is as follows:</p>
+
+<pre class="brush: js">window.addEventListener('storage', function(e) {
+  document.querySelector('.my-key').textContent = e.key;
+  document.querySelector('.my-old').textContent = e.oldValue;
+  document.querySelector('.my-new').textContent = e.newValue;
+  document.querySelector('.my-url').textContent = e.url;
+  document.querySelector('.my-storage').textContent = e.storageArea;
+});</pre>
+
+<p>Here we add an event listener to the <code>window</code> object that fires when the {{domxref("Storage")}} object associated with the current origin is changed. As you can see above, the event object associated with this event has a number of properties containing useful information — the key of the data that changed, the old value before the change, the new value after that change, the URL of the document that changed the storage, and the storage object itself.</p>
+
+<h3 id="Deleting_data_records">Deleting data records</h3>
+
+<p>Web Storage also provides a couple of simple methods to remove data. We don't use these in our demo, but they are very simple to add to your project:</p>
+
+<ul>
+ <li>{{domxref("Storage.removeItem()")}} takes a single argument — the key of the data item you want to remove — and removes it from the storage object for that domain.</li>
+ <li>{{domxref("Storage.clear()")}} takes no arguments, and simply empties the entire storage object for that domain.</li>
+</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('HTML WHATWG', 'webstorage.html#webstorage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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 (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>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p>
+
+<div class="note">
+<p><strong>Note: </strong>since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional cleanup, at the behest of the OS, typically if space is short.</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API landing page</a></li>
+</ul>
diff --git a/files/pt-br/web/api/web_workers_api/index.html b/files/pt-br/web/api/web_workers_api/index.html
new file mode 100644
index 0000000000..538a92bd1f
--- /dev/null
+++ b/files/pt-br/web/api/web_workers_api/index.html
@@ -0,0 +1,213 @@
+---
+title: Web Workers API
+slug: Web/API/Web_Workers_API
+translation_of: Web/API/Web_Workers_API
+---
+<p>{{DefaultAPISidebar("Web Workers API")}}</p>
+
+<p class="summary"><strong>Web Workers</strong> são mecanismos que permitem que uma operação de um dado script seja executado em uma thread diferente da thread principal da aplicação Web. Permitindo que cálculos laboriosos sejam processados sem que ocorra bloqueio da thread principal (geralmente associado à interface).</p>
+
+<p> </p>
+
+<h2 id="Web_Workers_conceitos_e_uso">Web Workers: conceitos e uso</h2>
+
+<p>Um "worker" é um objeto criado através da utilização do construtor (ex {{domxref("Worker.Worker", "Worker()")}}) que executa um dado arquivo Javascript —  o código contido em tal arquivo é executado no thread do worker; e tais workers são executados em um contexto diferente do principal {{domxref("window")}}. O contexto dos workers é representado pelo objeto {{domxref("DedicatedWorkerGlobalScope")}} no caso de workers dedicados (workers padrões são utilizados por um único script; workers compartilhados utilizam {{domxref("SharedWorkerGlobalScope")}}).</p>
+
+<p>O thread do worker roda qualquer trecho de código, mas é importante ressaltar que esse trecho não poderá manipular o DOM, ou usar alguns métodos e propriedades do objeto {{domxref("window")}}. Mas, é permitido usar um grande número de itens fornecidos pelo objeto window, incluindo <a href="/en-US/docs/WebSockets">WebSockets</a>, mecanismos de data storage tais como <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>, Firefox OS-only <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a>. Para mais detalhes veja <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Funções e classes disponíveis para os workers</a>.</p>
+
+<p>O thread principal e os threads dos workers comunicam-se entre si enviando dados através do sistema de mensagens — ambos os lados enviam mensagens usando o método <code>postMessage()</code>, e respondem as mensagens via o manipulador de eventos <code>onmessage</code> (a mensagem está contida no atributo <code>data</code> do evento {{event("Message")}}). É importante ressaltar que os dados são copiados, e não compartilhados.</p>
+
+<p>Workers podem, por sua vez, gerar novos workers, desde que esses workers sejam hospedados na mesma origem que a página principal. Além disso, workers podem usar <code><a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest">XMLHttpRequest</a></code> para network I/O, com a exceção de que os atributos <code>responseXML</code> e <code>channel</code> do <code>XMLHttpRequest</code> sempre retornam nulo.</p>
+
+<p>Além dos workers dedicados, existem outros tipos de workers:</p>
+
+<ul>
+ <li>Shared Workers são workers que podem ser utilizados por diversos scripts que estão sendo executados em diferentes janelas, IFrames, etc., desde que eles estejam no mesmo domínio. Eles são ligeiramente mais complexos que workers dedicados — os scripts se comunicam através de uma porta ativa. Veja {{domxref("SharedWorker")}} para mais detalhes.</li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> essencialmente atuam como servidores proxy enquadram entre aplicativos da web e o navegador e a rede (quando disponível). Eles destinam-se (entre outras coisas) a habilitar a criação de experiências off-line efetivas, interceptando solicitações de rede e tomando as ações adequadas com base na disponibilidade da rede e atualização de ativos no servidor. Eles também permitirão o acesso a notificações push e APIs de sincronização em background.</li>
+ <li>Chrome Workers são um Firefox-only tipo de worker que você pode usar caso esteja desenvolvendo um add-ons e quer usar workers em extensão e ter acesso a <a href="https://developer.mozilla.org/en/js-ctypes" title="en/js-ctypes">js-ctypes</a> na sua worker. Veja {{domxref("ChromeWorker")}} para mais detalhes. </li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> fornecem a capacidade de processamento de áudio direcionado direto para ser feito dentro do contexto de um web worker.</li>
+</ul>
+
+<h2 id="Interfaces_Web_Worker">Interfaces Web Worker</h2>
+
+<dl>
+ <dt>{{domxref("AbstractWorker")}}</dt>
+ <dd>Propriedades Abstratas e métodos comuns a todos tipos de workers (i.e. {{domxref("Worker")}} ou {{domxref("SharedWorker")}}).</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd>Representa a worker thread em execução, permitindo que você passe mensagens para o código em execução.</dd>
+ <dt>{{domxref("SharedWorker")}}</dt>
+ <dd>Representa um tipo específico de worker que pode ser <em>acessado </em>a partir de vários contextos de navegação, sendo várias janelas, iframes ou mesmo workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope")}}</dt>
+ <dd>Representa o escopo genérico de qualquer worker (fazendo o mesmo trabalho como {{domxref("Window")}} para conteúdo normal da web). Diferentes tipos de workers têm objetos de escopo que herdam desta interface e adicionam recursos mais específicos.</dd>
+ <dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt>
+ <dd>Representa o escopo de um dedicated worker, herdado de {{domxref("WorkerGlobalScope")}} e adicionam recursos mais específicos.</dd>
+ <dt>{{domxref("SharedWorkerGlobalScope")}}</dt>
+ <dd>Representa o escopo de um shared worker, herdado de {{domxref("WorkerGlobalScope")}} e adicionam recursos mais específicos.</dd>
+ <dt>{{domxref("WorkerNavigator")}}</dt>
+ <dd>Representa a identidade e estado do user agent (o cliente):</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Criamos algumas demonstrações simples para mostrar o uso básico:</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/simple-web-worker">Exemplo básico de dedicated worker</a> (<a href="http://mdn.github.io/simple-web-worker/">executar dedicated worker</a>).</li>
+ <li><a href="https://github.com/mdn/simple-shared-worker">Exemplo básico de shared worker</a> (<a href="http://mdn.github.io/simple-shared-worker/">executar shared worker</a>).</li>
+</ul>
+
+<p>Você pode descobrir mais informações sobre como essas demonstrações funcionam em <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Usando web workers</a>.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#toc-workers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers')}}</td>
+   <td>{{Spec2('Web Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Passing data using structured cloning</td>
+   <td>13</td>
+   <td>{{CompatGeckoDesktop(8)}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Passing data using  transferable objects</td>
+   <td>17 {{ property_prefix("webkit") }}<br>
+    21</td>
+   <td>{{CompatGeckoDesktop(18)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Global {{ domxref("window.URL", "URL") }}</td>
+   <td>10 [1]<br>
+    23</td>
+   <td>{{CompatGeckoDesktop(21)}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6 [2]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome Mobile</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>{{CompatNo}}</td>
+   <td>4</td>
+   <td>29</td>
+   <td>1.4</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Passing data using structured cloning</td>
+   <td>{{CompatNo}}</td>
+   <td>4</td>
+   <td>8</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Passing data using  transferable objects</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>18</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1][2] Como em <code>webkitURL</code>.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Using Web Workers</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">Worker Interface</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker">SharedWorker interface</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Advanced_concepts_and_examples">Advanced concepts and examples</a></li>
+ <li><a href="/en-US/docs/Web/API/ChromeWorker">ChromeWorker</a>: para usar workers em código privilegiado/chrome.</li>
+</ul>
diff --git a/files/pt-br/web/api/webgl_api/index.html b/files/pt-br/web/api/webgl_api/index.html
new file mode 100644
index 0000000000..97e1e97857
--- /dev/null
+++ b/files/pt-br/web/api/webgl_api/index.html
@@ -0,0 +1,278 @@
+---
+title: WebGL
+slug: Web/API/WebGL_API
+tags:
+  - WebGL
+translation_of: Web/API/WebGL_API
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p>WebGL (Web Graphics Library) é uma API do JavaScript para renderizar gráficos 3D e 2D dentro de um <span id="result_box" lang="pt"><span>navegador web compatível sem o uso de plug-ins</span></span>. <span id="result_box" lang="pt"><span>O WebGL faz isso introduzindo uma API que está de acordo com o OpenGL ES 2.0 e que pode ser usada em elementos do HTML5</span></span> {{HTMLElement("canvas")}}.</p>
+</div>
+
+<p>O suporte para WebGL está presente no <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ e <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+. N<span id="result_box" lang="pt"><span>o entanto, o dispositivo do usuário também deve ter um hardware que suporte esses recursos.</span></span></p>
+
+<p>O elemento {{HTMLElement("canvas")}} é também usado pelo <a href="/en-US/docs/Web/API/Canvas_API">Canvas 2D</a> para renderizar gráficos 2D em páginas web.</p>
+
+<h2 id="Referências">Referências</h2>
+
+<h3 id="Interfaces_padrão"><span class="short_text" id="result_box" lang="pt"><span>Interfaces padrão</span></span></h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("WebGLRenderingContext")}}</li>
+ <li>{{domxref("WebGL2RenderingContext")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLActiveInfo")}}</li>
+ <li>{{domxref("WebGLBuffer")}}</li>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+ <li>{{domxref("WebGLFramebuffer")}}</li>
+ <li>{{domxref("WebGLProgram")}}</li>
+ <li>{{domxref("WebGLQuery")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLRenderbuffer")}}</li>
+ <li>{{domxref("WebGLSampler")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLShaderPrecisionFormat")}}</li>
+ <li>{{domxref("WebGLSync")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLTexture")}}</li>
+ <li>{{domxref("WebGLTransformFeedback")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLUniformLocation")}}</li>
+ <li>{{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<h3 id="Extensões">Extensões</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_frag_depth")}}</li>
+ <li>{{domxref("EXT_sRGB")}}</li>
+ <li>{{domxref("EXT_shader_texture_lod")}}</li>
+ <li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
+ <li>{{domxref("OES_element_index_uint")}}</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("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="Eventos">Eventos</h3>
+
+<ul>
+ <li>{{Event("webglcontextlost")}}</li>
+ <li>{{Event("webglcontextrestored")}}</li>
+ <li>{{Event("webglcontextcreationerror")}}</li>
+</ul>
+
+<h3 id="Constantes_e_tipos">Constantes e tipos</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Constants">Constantes em WebGL</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Types">Tipos em WebGL</a></li>
+</ul>
+
+<h3 id="WebGL_2">WebGL 2</h3>
+
+<p><span id="result_box" lang="pt"><span>O WebGL 2 é uma atualização importante para o WebGL, que é fornecida através da interface </span></span><span lang="pt"><span>{{domxref ("WebGL2RenderingContext")}}.</span> <span>Baseia-se no OpenGL ES 3.0 e os novos recursos incluem:</span></span></p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebGL2RenderingContext/texImage3D">Texturas 3D</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGLSampler">Objetos Sampler</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">Objetos Uniform Buffer</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGLSync">Objetos Sync</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGLQuery">Objetos Query</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGLTransformFeedback">Objetos Transform Feedback</a></li>
+ <li>Extensões que agora fazem parte da especificação principal do WebGL 2: <a href="/en-US/docs/Web/API/WebGLVertexArrayObject">Objetos Vertex Array</a>, <a href="/en-US/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instanciação</a>, <a href="/en-US/docs/Web/API/WebGL2RenderingContext/drawBuffers">múltiplas metas de renderização</a>, <a href="/en-US/docs/Web/API/EXT_frag_depth">profundidade de fragmentos</a>.</li>
+</ul>
+
+<p>Veja também os posts <a href="https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/">WebGL 2 lands in Firefox</a> e <a href="http://webglsamples.org/WebGL2Samples/">webglsamples.org/WebGL2Samples</a> para alguns exemplos de demonstração.</p>
+
+<h2 id="Guias_e_tutoriais">Guias e tutoriais</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Tutorial">Tutorial WebGL</a>: Um guia para iniciantes nos conceitos principais do WebGL. Um bom lugar para iniciar se você não tem experiência prévia em WebGL.</li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/WebGL_best_practices">Melhores práticas em WebGL</a>: Dicas e sugestões para melhorar seu conteúdo WebGL.</li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Usando extensões</a>: Como usar as extensões disponíveis em WebGL.</li>
+</ul>
+
+<h3 id="Tutoriais_avançados">Tutoriais avançados</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection">Modelo, visualização e projeção em WebGL</a>: Uma explicação detalhada das três matrizes principais tipicamente usadas para representar uma visualização em 3D de um objeto: as matrizes de modelo, de visualização e de projeção.</li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matemática matricial para a web</a>: Um guia útil sobre como matrizes de transformação 3D funcionam e como podem ser usadas na web — tanto para cálculos em WebGL quanto para transformações em CSS3.</li>
+</ul>
+
+<h2 id="Recursos">Recursos</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">WebGL puro: Uma introdução ao WebGL</a> Uma conversa com Nick Desaulniers que introduz o básico de WebGL. Este é um ótimo lugar para iniciar se você nunca trabalhou com programação de baixo nível para gráficos.</li>
+ <li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Site WebGL do Khronos</a> O site principal para WebGL do Grupo Khronos.</li>
+ <li><a href="http://learningwebgl.com/blog/?page_id=1217" title="http://learningwebgl.com/blog/">Aprendendo WebGL</a> Um site com tutoriais de uso do WebGL.</li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">Fundamentos de WebGL</a> Um tutorial básico com os fundamentos do WebGL.</li>
+ <li><a href="http://webglplayground.net" title="http://webglplayground.net">Playground do WebGL</a> Uma ferramenta online para criar e compartilhar projetos em WebGL. Boa para protótipos rápidos e experimentação.</li>
+ <li><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">Academia WebGL</a> Um editor HTML/JavaScript com tutoriais para aprender o básico de programação em WebGL.</li>
+ <li><a href="http://webglstats.com/">WebGL Stats</a> Um site com estatísticas sobre as funcionalidades do WebGL em navegadores de diferentes plataformas.</li>
+</ul>
+
+<h3 id="Bibliotecas">Bibliotecas</h3>
+
+<ul>
+ <li><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a> Biblioteca em JavaScript de Matrizes e Vetores para aplicações WebGL de Alta Performance.</li>
+ <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> é um WebGL <em>framework</em> para Visualização de Dados, Código Criativo, e Desenvolvimento de Jogos.</li>
+ <li><a href="http://www.pixijs.com/">Pixi.js</a> é um renderizador gráfico 2D, rápido e com código aberto, que utiliza WebGL.</li>
+ <li><a href="https://playcanvas.com/">PlayCanvas</a> motor de jogos com código aberto.</li>
+ <li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> Uma biblioteca de código aberto para manipular vetores e matrizes. Não é otimizada para WebGL mas é extremamente robusta.</li>
+ <li><a href="https://threejs.org/">three.js</a> é uma biblioteca WebGL 3D com recursos completose de código aberto.</li>
+ <li><a href="https://phaser.io/">Phaser</a> é um <em>framework</em> rápido de código aberto, gratuita e divertida para jogos em navegadores baseados em Canvas e WebGL.</li>
+</ul>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebGL')}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Definição inicial. Baseada em OpenGL ES 2.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2')}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Criada com base no WebGL 1. Baseada em OpenGL ES 3.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0')}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0')}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_em_navegadores">Compatibilidade em navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>11</td>
+   <td>12</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>WebGL 2</td>
+   <td>56</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("51")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>43</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Recurso</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>Suporte básico</td>
+   <td>25</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4</td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>8.1</td>
+  </tr>
+  <tr>
+   <td>WebGL 2</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="Notas_sobre_compatibilidade">Notas sobre compatibilidade</h3>
+
+<p>Além do navegador, a própria GPU também precisa suportar o recurso. Por exemplo, o S3 Texture Compression (S3TC) só está disponível em tablets baseados em Tegra. A maioria dos navegadores disponibiliza o contexto WebGL usando o nome de contexto <code>webgl</code>, mas navegadores antigos também precisam do nome de contexto <code>experimental-webgl</code>. Além disso, o futuro <a href="/en-US/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> é totalmente retrocompatível e terá o nome de contexto <code>webgl2</code>.</p>
+
+<h3 id="Notas_sobre_o_Gecko">Notas sobre o Gecko</h3>
+
+<h4 id="Debugando_e_testando_WebGL">Debugando e testando WebGL</h4>
+
+<p>Iniciando com o Gecko 10.0 {{geckoRelease("10.0")}}, há duas preferências disponíveis que permitem controlar as funcionalidades do WebGL, para efeitos de teste:</p>
+
+<dl>
+ <dt><code>webgl.min_capability_mode</code></dt>
+ <dd>Uma propriedade booleana que, quando configurada para <code>true</code>, habilita um modo de capacidade mínima. Neste modo, o WebGL é configurado para suportar somente um conjunto básico de recursos e funcionalidades requeridos pela especificação WebGL. Isto garante que o código WebGL funcione em qualquer dispositivo ou navegador, independente de suas funcionalidades. Esta propriedade tem o valor <code>false</code> por padrão.</dd>
+ <dt><code>webgl.disable_extensions</code></dt>
+ <dd>Uma propriedade booleana que, quando configurada para <code>true</code>, desabilita todas as extensões WebGL. Esta propriedade tem o valor <code>false</code> por padrão.</dd>
+</dl>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Informações de compatibilidade para extensões WebGL</a></li>
+</ul>
diff --git a/files/pt-br/web/api/webgl_api/tutorial/adicionando_conteudo_2d_a_um_contexto_webgl/index.html b/files/pt-br/web/api/webgl_api/tutorial/adicionando_conteudo_2d_a_um_contexto_webgl/index.html
new file mode 100644
index 0000000000..7b4f6384f6
--- /dev/null
+++ b/files/pt-br/web/api/webgl_api/tutorial/adicionando_conteudo_2d_a_um_contexto_webgl/index.html
@@ -0,0 +1,226 @@
+---
+title: Adicionando conteúdo 2D a um contexto WebGL
+slug: Web/API/WebGL_API/Tutorial/Adicionando_conteudo_2D_a_um_contexto_WebGL
+tags:
+  - Tutorial
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
+
+<p>Uma vez que você tenha  <a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">criado um contexto WebGL</a> com sucesso, você pode iniciar a renderizar nele. O mais simples que podemos fazer é desenhar um objeto 2D não texturizado. Então vamos começar por aí, construindo o código necessário para se desenhar um quadrado.</p>
+
+<h2 id="Desenhando_a_cena">Desenhando a cena</h2>
+
+<p>A coisa mais importante para se entender antes de começarmos é que, mesmo que estejamos só renderizando um objeto bidimensional nesse exemplo, nós ainda estamos desenhamos em um espaço 3d. Portanto, ainda precisamos estabelecer os shaders que irão criar a cor para a nossa cena simples, assim como desenhar o objeto. Eles irão estabelecer como o quadrado irá aparecer na tela.</p>
+
+<h3 id="Inicializando_os_shaders">Inicializando os shaders</h3>
+
+<p>Shaders são especificados ao usar a <a class="external" href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" title="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf">Linguagem de Shading OpenGL ES</a>. Com o intuito de tornar mais fácil para manter e atualizar nosso conteúdo, nós podemos escrever nosso código que carrega os shaders para buscá-los no documento HTML, ao invés de termos de criar tudo em JavaScript. Vamos dar uma olhada na nossa rotina <code>initShaders()</code>, que cuida dessa tarefa:</p>
+
+<pre class="brush: js">function initShaders() {
+  var fragmentShader = getShader(gl, "shader-fs");
+  var vertexShader = getShader(gl, "shader-vs");
+
+  // Cria o progrma shader
+
+  shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // Se falhar ao criar o progrma shader, alerta
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert("Não foi possível inicializar o programa shader.");
+  }
+
+  gl.useProgram(shaderProgram);
+
+  vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+  gl.enableVertexAttribArray(vertexPositionAttribute);
+}
+
+</pre>
+
+<p>Dois programas estão sendo inicializados por essa rotina; o primeiro, fragment shader, é carregado a partir do elemento HTML com o id "shader-fs". O segundo, vertex shader, é carregado pelo elemento HTML com o id "shader-vs". Nós vamos analisar a função getShader() no próximo tutorial; Essa rotina, na verdade, lida com a parte de puxar os programas shader da DOM.</p>
+
+<p>Então nós criamos o programa shader chamando do objeto WebGL a função createProgram(), anexamos dois shaders nele e fazemos o link com o programa shader. Depois de fazer isso, o parametro LINK_STATUS do objeto g1 é checado para ter certeza de que o link foi criado com sucesso; Se sim, nós ativamos o novo programa shader.</p>
+
+<h3 id="Carregando_os_shaders_da_DOM">Carregando os shaders da DOM</h3>
+
+<p><code>A rotina getShader()</code> busca um programa shader com o nome específico do DOM, retornando o programa shader compilado para o requisitante, ou null se ele não pode ser carregado ou compilado.</p>
+
+<pre class="brush: js">function getShader(gl, id) {
+  var shaderScript, theSource, currentChild, shader;
+
+  shaderScript = document.getElementById(id);
+
+  if (!shaderScript) {
+    return null;
+  }
+
+  theSource = "";
+  currentChild = shaderScript.firstChild;
+
+  while(currentChild) {
+    if (currentChild.nodeType == currentChild.TEXT_NODE) {
+      theSource += currentChild.textContent;
+    }
+
+    currentChild = currentChild.nextSibling;
+  }
+</pre>
+
+<p>Uma vez que o elemento com o ID específico é encontrado, seu texto é lido na variável theSource.</p>
+
+<pre class="brush: js">  if (shaderScript.type == "x-shader/x-fragment") {
+    shader = gl.createShader(gl.FRAGMENT_SHADER);
+  } else if (shaderScript.type == "x-shader/x-vertex") {
+    shader = gl.createShader(gl.VERTEX_SHADER);
+  } else {
+     // <code>Tipo de shader desconhecido</code>
+     return null;
+  }</pre>
+
+<p>Uma vez que o código para o shader tenha sido lido, nós observamos o tipo MIME do objeto shader para determinar se é um sombreamento de vértice (MIME type "x-shader/x-vertex") ou um fragmento de shader (MIME type "x-shader/x-fragment"), em seguinda crie um tipo de shader apropriado para a partir do código fonte recuperado.</p>
+
+<pre class="brush: js">  gl.shaderSource(shader, theSource);
+
+  // Compile o programa shader
+  gl.compileShader(shader);
+
+  // Veja se ele compila com sucesso
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      alert("Um erro ocorreu ao compilar os shaders: " + gl.getShaderInfoLog(shader));
+      return null;
+  }
+
+  return shader;
+}
+</pre>
+
+<p>Finalmente, a fonte é passada para o shader e compilada. Se um erro ocorrer enquanto o shader estiver compilando, nós mostraremos um alerta e retornaremos null; Caso contrário, o shader recém compilado é retornado para o requisitante.</p>
+
+<h3 id="Os_shaders">Os shaders</h3>
+
+<p>Agora, nós precisamos adicionar os programas shaders ao HTML para descrever nosso documento. Os detalhes sobre como os shaders trabalham estão além do escopo deste artigo, assim como a sintaxe da linguagem do shader.</p>
+
+<h4 id="Fragmentos_shader">Fragmentos shader</h4>
+
+<p>Cada pixel é um poligono chamado de fragmento (fragment) na linguagem GL. O trabalho do fragmento de shader é estabelecer a cor de cada pixel. Ness caso, nós estamos apenas definindo a cor branca para cada pixel.</p>
+
+<p>g1_FragColor é um construtor de variável GL que é utilizado para a cor do fragmento. Altere seu valor para definir a cor do pixel, como mostrado abaixo.</p>
+
+<pre class="brush: html">&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+  void main(void) {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+  }
+&lt;/script&gt;
+</pre>
+
+<h4 id="Vértice_do_shader">Vértice do shader</h4>
+
+<p>A vértice (vertex) do shader define a posição e a forma de cada vértice.</p>
+
+<pre class="brush: html">&lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+  attribute vec3 aVertexPosition;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+  }
+&lt;/script&gt;
+</pre>
+
+<h2 id="Criando_um_objeto">Criando um objeto</h2>
+
+<p>Before we can render our square, we need to create the buffer that contains its vertices. We'll do that using a function we call <code>initBuffers()</code>; as we explore more advanced WebGL concepts, this routine will be augmented to create more -- and more complex -- 3D objects.</p>
+
+<pre class="brush: js">var horizAspect = 480.0/640.0;
+
+function initBuffers() {
+  squareVerticesBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+
+  var vertices = [
+    1.0,  1.0,  0.0,
+    -1.0, 1.0,  0.0,
+    1.0,  -1.0, 0.0,
+    -1.0, -1.0, 0.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+}
+</pre>
+
+<p>This routine is pretty simplistic given the basic nature of the scene in this example. It starts by calling the <code>gl</code> object's <code>createBuffer()</code> method to obtain a buffer into which we'll store the vertices. This is then bound to the context by calling the <code>bindBuffer()</code> method.</p>
+
+<p>Once that's done, we create a JavaScript array containing the coordinates for each vertex of the square. This is then converted into an array of WebGL floats and passed into the <code>gl</code> object's <code>bufferData()</code> method to establish the vertices for the object.</p>
+
+<h2 id="Desenhando_a_cena_2">Desenhando a cena</h2>
+
+<p>Once the shaders are established and the object constructed, we can actually render the scene. Since we're not animating anything in this example, our <code>drawScene()</code> function is very simple. It uses a few utility routines we'll cover shortly.</p>
+
+<pre class="brush: js">function drawScene() {
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+  loadIdentity();
+  mvTranslate([-0.0, 0.0, -6.0]);
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+  setMatrixUniforms();
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+}
+</pre>
+
+<p>The first step is to clear the context to our background color; then we establish the camera's perspective. We set a field of view of 45°, with a width to height ratio of 640/480 (the dimensions of our canvas). We also specify that we only want objects between 0.1 and 100 units from the camera to be rendered.</p>
+
+<p>Then we establish the position of the square by loading the identity position and translating away from the camera by 6 units. After that, we bind the square's vertex buffer to the context, configure it, and draw the object by calling the <code>drawArrays()</code> method.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample2">View the complete code</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample2/">Open this demo on a new page</a></p>
+
+<h2 id="Operações_úteis_da_Matrix">Operações úteis da Matrix</h2>
+
+<p>Matrix operations are complicated enough. Nobody really wants to write all the code needed to handle them on their own. Fortunately, there's <a class="external" href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a>, a very handy library for handling vector and matrix operations from JavaScript.</p>
+
+<p>The <code>glUtils.js</code> file used by this demo is used by a number of WebGL demos floating around on the Web. Nobody seems entirely clear on where it came from, but it does simplify the use of Sylvester even further by adding methods for building special types of matrices, as well as outputting HTML for displaying them.</p>
+
+<p>In addition, this demo defines a few helpful routines to interface with these libraries for specific tasks. What exactly they do is beyond the scope of this demo, but there are plenty of good references on matrices available online; see the {{ anch("See also") }} section for a list of a few.</p>
+
+<pre class="brush: js">function loadIdentity() {
+  mvMatrix = Matrix.I(4);
+}
+
+function multMatrix(m) {
+  mvMatrix = mvMatrix.x(m);
+}
+
+function mvTranslate(v) {
+  multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
+}
+
+function setMatrixUniforms() {
+  var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
+  gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
+
+  var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
+  gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
+}
+</pre>
+
+<h2 id="Ver_Também">Ver Também</h2>
+
+<ul>
+ <li><a class="external" href="http://mathworld.wolfram.com/Matrix.html" title="http://mathworld.wolfram.com/Matrix.html">Matrices</a> on Wolfram MathWorld</li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/Matrix_(mathematics)" title="http://en.wikipedia.org/wiki/Matrix_(mathematics)">Matriz</a> na Wikipedia</li>
+</ul>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
diff --git a/files/pt-br/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/pt-br/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
new file mode 100644
index 0000000000..4abbd5e304
--- /dev/null
+++ b/files/pt-br/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
@@ -0,0 +1,71 @@
+---
+title: Começando com WebGL
+slug: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
+
+<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> permite que o contéudo web use uma API baseada em <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 para realizar renderização 3D em um <a class="internal" href="/en-US/docs/Web/API/Canvas_API"><code>canvas</code></a> HTML em browsers que o suportam sem o uso de plugins. Programas WebGL consistem em um código de controle escrito em JavaScript e códigos de efeitos especiais (shader code) que é executado na Unidade Gráfica de Processamento (GPU) de um computador. Elementos WebGL podem ser utilizados junto com outros elementos HTML e com outras partes da página ou do fundo.</p>
+
+<p>Esse artigo vai introduzir o básico sobre o uso do WebGL. Acredita-se que você já possui entendimento da matemática que envolve os gráficos 3D, e que este artigo não tem a pretensão de tentar ensinar-lhe OpenGL em si.</p>
+
+<p>Os exemplos de código deste tutorial também podem ser encontrados no <a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial">Exemplos de WebGL no repositório do GitHub</a>.</p>
+
+<h2 id="Preparando-se_para_renderizar_em_3D">Preparando-se para renderizar em 3D</h2>
+
+<p><span id="result_box" lang="pt"><span>A primeira coisa que você precisa para para renderização d</span></span><span lang="pt"><span>o WebGL, é a inicialização do canvas.</span> <span>O fragmento HTML abaixo declara um canvas em que nosso exemplo será desenhado.</span></span></p>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;canvas id="glCanvas" width="640" height="480"&gt;&lt;/canvas&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="Preparando_o_contexto_WebGL">Preparando o contexto WebGL</h3>
+
+<p><span id="result_box" lang="pt"><span>A função </span></span><code>main()</code> <span lang="pt"><span> em nosso código JavaScript é chamada quando nosso script é carregado.</span> <span>O objetivo é configurar o contexto do WebGL e começar a renderizar o conteúdo.</span></span></p>
+
+<pre class="brush: js">main();
+
+//
+// começa aqui
+//
+function main() {
+  const canvas = document.querySelector("#glCanvas");
+  // Inicializa o contexto GL
+  const gl = canvas.getContext("webgl");
+
+  // Só continua se o WebGL estiver disponível e funcionando
+  if (!gl) {
+    alert("Incapaz de inicializar o WebGL.Seu navegador ou sua máquina não suporta.");
+    return;
+  }
+
+  // Define a cor para preto totalmente opaca (sem transparência)
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  // Limpa o buffer de cores com uma cor específica
+  gl.clear(gl.COLOR_BUFFER_BIT);
+}
+
+</pre>
+
+<p>A primeira coisa que nós fazemos aqui é obter a referência para o canvas, atribuindo-a para a variável chamada <code>canvas</code>.</p>
+
+<p>Uma vez que nós temos o canvas, nós tentamos obter um <a href="/en-US/docs/Web/API/WebGLRenderingContext">WebGLRenderingContext</a> para ele chamando o <a href="/en-US/docs/Web/API/HTMLCanvasElement/getContext">getContext</a> e passando a string <code>"webgl"</code>. Se o browser não suportar o webgl <code>getContext</code> vai retornar <code>null</code> nesse caso nós mostraremos uma mensagem para o usuário e sair.</p>
+
+<p>Se o contexto for inicializado com sucesso, a variável <code>gl</code> é nossa referência para ele. Nesse caso, nós altermos a cor para preto, e o contexto para aquela cor (redesenhando o canvas com a cor de fundo).</p>
+
+<p>Nesse ponto, você tem código suficiente para o contexto WebGL ser inicializado com sucesso, e você deve visualizar uma grande caixa preta vazia, pronta e esperando para receber conteúdo.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1">Veja o código completo</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample1/">Abra a demo em uma nova página</a></p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="https://dev.opera.com/articles/introduction-to-webgl-part-1/">Uma introdução ao WebGL</a>: Escrito por Luz Caballero, publicado por dev.opera.com. Esse artigo direciona sobre o que o WebGL é, explicando como o WebGL funciona (incluindo o conceito de pipeline de renderização), e introduz algumas bibliotecas do WebGL.</li>
+ <li><a href="http://webglfundamentals.org/">Fundamentos do WebGL</a></li>
+ <li><a href="http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html">Uma introdução para o OpenGL moderno:</a> Uma séroe de bons artigos sobre OpenGL escrita por Joe Groff, provendo uma introdução clara para o OpenGL a partir de sua história até os importantes conceitos de pipeline de gráficos, e também inclui alguns exemplos demonstrativos sobre como o OpenGL funciona. Se você não tem ideia do que seja OpenGL, esse é um bom lugar para começar.</li>
+</ul>
+
+<p>{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
diff --git a/files/pt-br/web/api/webgl_api/tutorial/index.html b/files/pt-br/web/api/webgl_api/tutorial/index.html
new file mode 100644
index 0000000000..4fa7ba76cf
--- /dev/null
+++ b/files/pt-br/web/api/webgl_api/tutorial/index.html
@@ -0,0 +1,39 @@
+---
+title: WebGL tutorial
+slug: Web/API/WebGL_API/Tutorial
+tags:
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> enables web content to use an API based on <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 to perform 3D rendering in an HTML {{HTMLElement("canvas")}} in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code(shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.</p>
+</div>
+
+<p><span class="seoSummary">This tutorial describes how to use the <code>&lt;canvas&gt;</code> element to draw WebGL graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with WebGL and will provide code snippets that may get you started in building your own content.</span></p>
+
+<h2 id="Before_you_start">Before you start</h2>
+
+<p>Using the <code>&lt;canvas&gt;</code> element is not very difficult, but you do need a basic understanding of <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> and <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. The <code>&lt;canvas&gt;</code> element and WebGL are not supported in some older browsers, but are supported in recent versions of all major browsers. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.</p>
+
+<h2 id="In_this_tutorial">In this tutorial</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">Getting started with WebGL</a></dt>
+ <dd>How to set up a WebGL context.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">Adding 2D content to a WebGL context</a></dt>
+ <dd>How to render simple flat shapes using WebGL.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL">Using shaders to apply color in WebGL</a></dt>
+ <dd>Demonstrates how to add color to shapes using shaders.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL">Animating objects with WebGL</a></dt>
+ <dd>Shows how to rotate and translate objects to create simple animations.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL">Creating 3D objects using WebGL</a></dt>
+ <dd>Shows how to create and animate a 3D object (in this case, a cube).</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Using textures in WebGL</a></dt>
+ <dd>Demonstrates how to map textures onto the faces of an object.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">Lighting in WebGL</a></dt>
+ <dd>How to simulate lighting effects in your WebGL context.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL">Animating textures in WebGL</a></dt>
+ <dd>Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.</dd>
+</dl>
diff --git a/files/pt-br/web/api/webrtc_api/index.html b/files/pt-br/web/api/webrtc_api/index.html
new file mode 100644
index 0000000000..f4a91242e3
--- /dev/null
+++ b/files/pt-br/web/api/webrtc_api/index.html
@@ -0,0 +1,197 @@
+---
+title: WebRTC API
+slug: Web/API/WebRTC_API
+tags:
+  - API
+  - Audio
+  - Landing
+  - Media
+  - NeedsTranslation
+  - Networking
+  - TopicStub
+  - Video
+  - WebRTC
+  - WebRTC API
+  - streaming
+translation_of: Web/API/WebRTC_API
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary"><strong>WebRTC</strong> (Web Real-Time Communications) é uma tecnologia que permite aplicativos e sites da Web a capturarem e opcionalmente transmitirem mídia de áudio e/ou vídeo, assim como trocar informação arbitrária entre navegadores sem a necessidade de um intermediador. O conjunto de padrões que abrangem WebRTC possibilita o compartilhamento de informação e a realização de teleconferência peer-to-peer, dispensando a instalação de <em>plug-ins</em> ou quaisquer softwares de terceiros.</span></p>
+
+<p>WebRTC consiste em diversas APIs e protocolos interrelacionados que trabalham juntos. A documentação que você encontrará aqui o ajudará a entender os fundamentos de WebRTC, como configurar e usar, tanto informação, quanto conexões de mídia e mais. </p>
+
+<h2 id="WebRTC_conceitos_e_uso">WebRTC conceitos e uso</h2>
+
+<p>WebRTC serve à diversas propostas, e sobrepõe-se substancialmente com a API de Captura e Transmissão. Juntas, provém capacidades poderosas de multimídia para a Web, incluíndo suporte para conferência em áudio e vídeo, troca de arquivos, administração de identidade, e lidando com sistemas telefônicos legados enviando sinais {{Glossary("DTMF")}}.</p>
+
+<p>Conexões entre dois <em>peers </em>são criadas usando—e representadas por—uma interface {{DOMxRef("RTCPeerConnection")}}. Uma vez que a conexão tenha sido estabilizada e iniciada, media streams ({{DOMxRef("MediaStream")}}s) (transmissões de mídia) e/ou data channels ({{DOMxRef("RTCDataChannel")}}s) (canais de dados) podem ser adicionados à conexão.</p>
+
+<p>Dados de mídia podem consistir em qualquer número de <em>tracks</em>(faixas) de dados de mídia; <em>tracks</em>, que são representados por objetos baseados na interface {{DOMxRef("MediaStreamTrack")}} , que podem conter um número dentre tipos de dados de mídia, incluíndo áudio, vídeo e texto (como legendas ou até mesmo nomes de capítulos). A maioria das transmissões consiste de ao menos uma faixa de áudio e comumente também uma faixa de vídeo, e podem ser usadas para enviar e receber ambas as mídias ao vivo ou dados salvos de mídia (como um filme transmitido).</p>
+
+<p>Você também pode usar a conexão entre dois <em>peers </em>para trocar dados arbitrários binários usando a interface {{DOMxRef("RTCDataChannel")}}. Isto pode ser usado para informação de <em>back-channel </em>(canal de volta), troca de <em>metadata</em>, pacotes de <em>status</em> de games, transferência de arquivos, ou até mesmo como um canal primário para transferir dados.</p>
+
+<p><em><strong>são necessários mais detalhes e links e tutoriais relevantes</strong></em></p>
+
+<h2 id="WebRTC_interfaces">WebRTC interfaces</h2>
+
+<p>Porque WebRTC provê interfaces que trabalham em conjunto para realizar uma variedade de tarefas, nós dividimos as interfaces na listagem abaixo por categoria. Por favor, atente-se a sidebar para uma listagem em ordem alfabética.</p>
+
+<h3 id="Conexão_configuração_e_gerenciamento">Conexão, configuração e gerenciamento</h3>
+
+<p>Estas interfaces são usadas para configurar, abrir e gerenciar conexões WebRTC.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection")}}</dt>
+ <dd>Representa a conexão WebRTC entre o computador local e um peer remoto. É usado para lidar com um streaming eficiente de dados entre os dois peers.</dd>
+ <dt>{{domxref("RTCDataChannel")}}</dt>
+ <dd>Representa um canal de dados bidirecional entre dois peers de uma conexão</dd>
+ <dt>{{domxref("RTCDataChannelEvent")}}</dt>
+ <dd>Represents events that occur while attaching a {{domxref("RTCDataChannel")}} to a {{domxref("RTCPeerConnection")}}. The only event sent with this interface is {{event("datachannel")}}.</dd>
+ <dt>{{domxref("RTCSessionDescription")}}</dt>
+ <dd>Represents the parameters of a session. Each <code>RTCSessionDescription</code> consists of a description <a href="/en-US/docs/Web/API/RTCSessionDescription/type" title="The property RTCSessionDescription.type is an enum of type RTCSdpType describing the description's type."><code>type</code></a> indicating which part of the offer/answer negotiation process it describes and of the <a href="/en-US/docs/Glossary/SDP" title="SDP: SDP (Session Description Protocol) is the standard describing a peer-to-peer connection. SDP contains the codec, source address, and timing information of audio and video.">SDP</a> descriptor of the session.</dd>
+ <dt>{{domxref("RTCStatsReport")}}</dt>
+ <dd>Provides information detailing statistics for a connection or for an individual track on the connection; the report can be obtained by calling {{domxref("RTCPeerConnection.getStats()")}}.</dd>
+ <dt>{{domxref("RTCIceCandidate")}}</dt>
+ <dd>Represents a candidate internet connectivity establishment (ICE) server for establishing an {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCIceTransport")}}</dt>
+ <dd>Represents information about an internet connectivity establishment (ICE) transport.</dd>
+ <dt>{{domxref("RTCPeerConnectionIceEvent")}}</dt>
+ <dd>Represents events that occurs in relation to ICE candidates with the target, usually an {{domxref("RTCPeerConnection")}}. Only one event is of this type: {{event("icecandidate")}}.</dd>
+ <dt>{{domxref("RTCRtpSender")}}</dt>
+ <dd>Manages the encoding and transmission of data for a {{domxref("MediaStreamTrack")}} on an {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCRtpReceiver")}}</dt>
+ <dd>Manages the reception and decoding of data for a {{domxref("MediaStreamTrack")}} on an {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCTrackEvent")}}</dt>
+ <dd>Indicates that a new incoming {{domxref("MediaStreamTrack")}} was created and an associated {{domxref("RTCRtpReceiver")}} object was added to the {{domxref("RTCPeerConnection")}} object.</dd>
+</dl>
+
+<h3 id="Identity_and_security">Identity and security</h3>
+
+<p>The WebRTC API includes a number of interfaces to manage security and identity.</p>
+
+<dl>
+ <dt>{{domxref("RTCIdentityProvider")}}</dt>
+ <dd>Enables a user agent is able to request that an identity assertion be generated or validated.</dd>
+ <dt>{{domxref("RTCIdentityAssertion")}}</dt>
+ <dd>Represents the identity of the a remote peer of the current connection. If no peer has yet been set and verified this interface returns <code>null</code>. Once set it can't be changed.</dd>
+ <dt>{{domxref("RTCIdentityProviderRegistrar")}}</dt>
+ <dd>Registers an  identity provider (idP).</dd>
+ <dt>{{domxref("RTCIdentityEvent")}}</dt>
+ <dd>Represents an identity assertion generated by an identity provider (idP). This is usually for an {{domxref("RTCPeerConnection")}}. The only event sent with this type is {{event("identityresult")}}.</dd>
+ <dt>{{domxref("RTCIdentityErrorEvent")}}</dt>
+ <dd>Represents an error associated with the identity provider (idP). This is usually for an {{domxref("RTCPeerConnection")}}. Two events are sent with this type: {{event("idpassertionerror")}} and {{event("idpvalidationerror")}}.</dd>
+ <dt>{{domxref("RTCCertificate")}}</dt>
+ <dd>Represents a certificate that an {{domxref("RTCPeerConnection")}} uses to authenticate.</dd>
+</dl>
+
+<h3 id="Telephony">Telephony</h3>
+
+<p>These interfaces are related to interactivity with public-switched telephone networks (PTSNs).</p>
+
+<dl>
+ <dt>{{domxref("RTCDTMFSender")}}</dt>
+ <dd>Manages the encoding and transmission of dual-tone multi-frequency (DTMF) signaling for an {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCDTMFToneChangeEvent")}}</dt>
+ <dd>Indicates an occurrence of a of dual-tone multi-frequency (DTMF). This event does not bubble (except where otherwise stated) and is not cancelable (except where otherwise stated).</dd>
+</dl>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Protocols">Introduction to WebRTC protocols</a></dt>
+ <dd>This article introduces the protocols on top of which the WebRTC API is built.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Connectivity">WebRTC connectivity</a></dt>
+ <dd>A guide to how WebRTC connections work and how the various protocols and interfaces can be used together to build powerful communication apps.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></dt>
+ <dd>WebRTC lets you build peer-to-peer communication of arbitrary data, audio, or video—or any combination thereof—into a browser application. In this article, we'll look at the lifetime of a WebRTC session, from establishing the connection all the way through closing the connection when it's no longer needed.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and two-way video calling</a></dt>
+ <dd>A tutorial and example which turbs a WebSocket-based chat system created for a previous example and adds support for opening video calls among participants. The chat server's WebSocket connection is used for WebRTC signaling.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Using_data_channels">Using WebRTC data channels</a></dt>
+ <dd>This guide covers how you can use a peer connection and an associated {{domxref("RTCDataChannel")}} to exchange arbitrary data between two peers.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Using_DTMF">Using DTMF with WebRTC</a></dt>
+ <dd>WebRTC's support for interacting with gateways that link to old-school telephone systems includes support for sending DTMF tones using the {{domxref("RTCDTMFSender")}} interface. This guide shows how to do so.</dd>
+</dl>
+
+<h2 id="Tutorials">Tutorials</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/adapter.js">Improving compatibility using WebRTC adapter.js</a></dt>
+ <dd>The WebRTC organization <a href="https://github.com/webrtc/adapter/">provides on GitHub the WebRTC adapter</a> to work around compatibility issues in different browsers' WebRTC implementations. The adapter is a JavaScript shim which lets your code to be written to the specification so that it will "just work" in all browsers with WebRTC support.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Taking_still_photos">Taking still photos with WebRTC</a></dt>
+ <dd>This article shows how to use WebRTC to access the camera on a computer or mobile phone with WebRTC support and take a photo with it.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">A simple RTCDataChannel sample</a></dt>
+ <dd>The {{domxref("RTCDataChannel")}} interface is a feature which lets you open a channel between two peers over which you may send and receive arbitrary data. The API is intentionally similar to the <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a>, so that the same programming model can be used for each.</dd>
+</dl>
+
+<h2 id="Resources">Resources</h2>
+
+<h3 id="Protocols">Protocols</h3>
+
+<h4 id="WebRTC-proper_protocols">WebRTC-proper protocols</h4>
+
+<ul>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/"><cite>Application Layer Protocol Negotiation for Web Real-Time Communications</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/"><cite>WebRTC Audio Codec and Processing Requirements</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/"><cite>RTCWeb Data Channels</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/"><cite>RTCWeb Data Channel Protocol</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-rtp-usage/"><cite>Web Real-Time Communication (WebRTC): Media Transport and Use of RTP</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/"><cite>WebRTC Security Architecture</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/"><cite>Transports for RTCWEB</cite></a></li>
+</ul>
+
+<h4 id="Related_supporting_protocols">Related supporting protocols</h4>
+
+<ul>
+ <li><a href="https://tools.ietf.org/html/rfc5245">Interactive Connectivity Establishment (ICE): A Protocol for Network Address Translator (NAT) Traversal for Offer/Answer Protocol</a></li>
+ <li><a href="https://tools.ietf.org/html/rfc5389"><cite>Session Traversal Utilities for NAT (STUN)</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc7064"><cite>URI Scheme for the Session Traversal Utilities for NAT (STUN) Protocol</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc7065"><cite>Traversal Using Relays around NAT (TURN) Uniform Resource Identifiers</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc3264"><cite>An Offer/Answer Model with Session Description Protocol (SDP)</cite></a></li>
+ <li><a href="https://datatracker.ietf.org/doc/draft-ietf-tram-turn-third-party-authz/"><cite>Session Traversal Utilities for NAT (STUN) Extension for Third Party Authorization</cite></a></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('WebRTC 1.0')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>The initial definition of the API of WebRTC.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>The initial definition of the object conveying the stream of media content.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture DOM Elements')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>The initial definition on how to obtain stream of content from DOM Elements</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>In additions to these specifications defining the API needed to use WebRTC, there are several protocols, listed under <a href="#Protocols">resources</a>.</p>
+
+<h2 class="Related_Topics" id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("MediaDevices")}}</li>
+ <li>{{domxref("MediaStreamEvent")}}</li>
+ <li>{{domxref("MediaStreamConstraints")}}</li>
+ <li>{{domxref("MediaStreamTrack")}}</li>
+ <li>{{domxref("MessageEvent")}}</li>
+ <li>{{domxref("MediaStream")}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/06/firefox-multistream-and-renegotiation-for-jitsi-videobridge/">Firefox multistream and renegotiation for Jitsi Videobridge</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/04/peering-through-the-webrtc-fog-with-socketpeer/">Peering Through the WebRTC Fog with SocketPeer</a></li>
+ <li><a href="https://hacks.mozilla.org/2014/04/inside-the-party-bus-building-a-web-app-with-multiple-live-video-streams-interactive-graphics/">Inside the Party Bus: Building a Web App with Multiple Live Video Streams + Interactive Graphics</a></li>
+</ul>
diff --git a/files/pt-br/web/api/webrtc_api/protocols/index.html b/files/pt-br/web/api/webrtc_api/protocols/index.html
new file mode 100644
index 0000000000..973a160ca7
--- /dev/null
+++ b/files/pt-br/web/api/webrtc_api/protocols/index.html
@@ -0,0 +1,70 @@
+---
+title: Introdução aos protocolos WebRTC
+slug: Web/API/WebRTC_API/Protocols
+tags:
+  - API
+  - Audio
+  - Guía
+  - ICE
+  - Iniciante
+  - Media
+  - NAT
+  - Projeto
+  - SDP
+  - STUN
+  - TURN
+  - Video
+  - WebRTC
+  - WebRTC API
+translation_of: Web/API/WebRTC_API/Protocols
+---
+<div>{{WebRTCSidebar}}{{draft}}</div>
+
+<p>Este artigo apresenta os protocolos sobre os quais a API WebRTC é construída.</p>
+
+<h2 id="ICE">ICE</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment">Interactive Connectivity Establishment (ICE)</a> é a estrutura que permite seu navegador web se conectar com outras pessoas. Existem muitas razões pelas quais uma conexão direta do Ponto A para o Ponto B simplesmente não funciona. Ele precisa ignorar firewalls que impediriam a abertura de conexões, fornecer um endereço exclusivo, como na maioria das situações, caso seu dispositivo não tiver um endereço IP público e retransmitir dados por meio de um servidor ou se seu roteador não permitir a conexão direta com seus pares . O ICE usa servidores STUN e / ou TURN para fazer isso, conforme descrito abaixo.</p>
+
+<h2 id="STUN">STUN</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/STUN">Session Traversal Utilities for <u>NAT</u> (STU<u>N</u>)</a> (sigla dentro de uma sigla) é um protocolo para descobrir seu endereço público e determinar quaisquer restrições em seu roteador que poderiam impedir uma conexão direta com um par.</p>
+
+<p>O cliente enviará uma solicitação a um servidor STUN na Internet que responderá com o endereço público do cliente e se o cliente está ou não acessível por meio do NAT do roteador.</p>
+
+<p><img alt="An interaction between two users of a WebRTC application involving a STUN server." src="https://mdn.mozillademos.org/files/6115/webrtc-stun.png" style="display: block; height: 378px; margin: 0px auto; width: 259px;"></p>
+
+<h2 id="NAT">NAT</h2>
+
+<p><a href="https://en.wikipedia.org/wiki/Network_address_translation">Network Address Translation (NAT)</a> é usado para dar ao seu dispositivo um endereço IP público. Um roteador terá um endereço IP público e cada dispositivo conectado ao roteador terá um endereço IP privado. As solicitações serão traduzidas do IP privado do dispositivo para o IP público do roteador com uma porta exclusiva. Dessa forma, você não precisa de um IP público exclusivo para cada dispositivo, mas ainda pode ser descoberto na Internet.</p>
+
+<p>Alguns roteadores terão restrições sobre quem pode se conectar a dispositivos na rede. Isso pode significar que, embora tenhamos o endereço IP público encontrado pelo servidor STUN, ninguém pode criar uma conexão. Nesta situação, precisamos voltar para TURN.</p>
+
+<h2 id="TURN">TURN</h2>
+
+<p>Alguns roteadores que usam NAT empregam uma restrição chamada ‘Symmetric NAT’ (<em>NAT simétrico</em>). Isso significa que o roteador só aceitará conexões de pares aos quais você já se conectou.</p>
+
+<p><a href="http://en.wikipedia.org/wiki/TURN">Traversal Using Relays around NAT (TURN)</a> destina-se a contornar a restrição de NAT simétrico abrindo uma conexão com um servidor TURN para que ele re-transmita toda informação. Você criaria uma conexão com um servidor TURN e avisaria a todos os pares (<em>peers</em>) para enviar pacotes para este servidor, que lhe encaminharia. Isso obviamente vem com alguma sobrecarga, então só é usado se não houver outras alternativas.</p>
+
+<p><img alt="An interaction between two users of a WebRTC application involving STUN and TURN servers." src="https://mdn.mozillademos.org/files/6117/webrtc-turn.png" style="display: block; height: 297px; margin: 0px auto; width: 295px;"></p>
+
+<h2 id="SDP">SDP</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/Session_Description_Protocol">Session Description Protocol (SDP)</a> é um padrão para descrever o conteúdo multimídia da conexão, como resolução, formatos, codecs, criptografia, etc., para que os dois pontos possam se entender uma vez que os dados estejam sendo transferidos. Em essência, são os metadados que descrevem o conteúdo e não o conteúdo da mídia em si.</p>
+
+<p>Tecnicamente, então, SDP não é realmente um protocolo, mas um formato de dados usado para descrever a conexão que compartilha mídia entre dispositivos.</p>
+
+<p>A documentação do SDP está bem fora do escopo desta documentação; no entanto, existem algumas coisas que vale a pena observar aqui.</p>
+
+<h3 id="Estrutura">Estrutura</h3>
+
+<p>O SDP consiste em uma ou mais linhas de texto UTF-8, cada uma começando com um tipo de um caractere, seguido por um sinal de igual ("="), seguido por um texto estruturado contendo um valor ou descrição, cujo formato depende do tipo. As linhas de texto que começam com uma determinada letra são geralmente chamadas de "letter-lines" (<em>"linhas de letras</em><em>"</em>). Por exemplo, as linhas que fornecem descrições de mídia têm o tipo "m", portanto, essas linhas são chamadas de "linhas m".</p>
+
+<h3 id="Para_mais_informações">Para mais informações</h3>
+
+<p>Para saber mais sobre o SDP, consulte os seguintes recursos úteis:</p>
+
+<ul>
+ <li>Especificação: {{RFC(4566, "SDP: Session Description Protocol")}}</li>
+ <li><a href="https://www.iana.org/assignments/sip-parameters/sip-parameters.xhtml">IANA registry of SDP parameters</a></li>
+</ul>
diff --git a/files/pt-br/web/api/webrtc_api/simples_rtcdatachannel_amostra/index.html b/files/pt-br/web/api/webrtc_api/simples_rtcdatachannel_amostra/index.html
new file mode 100644
index 0000000000..72ac37e56a
--- /dev/null
+++ b/files/pt-br/web/api/webrtc_api/simples_rtcdatachannel_amostra/index.html
@@ -0,0 +1,272 @@
+---
+title: Uma simples amostra de RTCDataChannel
+slug: Web/API/WebRTC_API/Simples_RTCDataChannel_amostra
+translation_of: Web/API/WebRTC_API/Simple_RTCDataChannel_sample
+---
+<p>{{WebRTCSidebar}}</p>
+
+<p>A interface {{domxref("RTCDataChannel")}} é um recurso da <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a> que permite abrir um canal entre dois pares sobre os quais você pode enviar e receber dados arbitrários. A API é intencionalmente semelhante à <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a>, de modo que o mesmo modelo de programação pode ser usado para ambos.</p>
+
+<p>Neste exemplo, abriremos um {{domxref("RTCDataChannel")}} para realizar a conexão entre dois elementos na mesma página. Embora seja obviamente um cenário artificial, é útil para demonstrar o fluxo de conexão entre dois pares. Vamos cobrir a mecânica necessária para conectar, transmitir e receber dados, mas vamos deixar para outro exemplo os detalhes sobre como localizar e se conectar a um computador remoto.</p>
+
+<h2 id="O_HTML">O HTML</h2>
+
+<p>Primeiro, vamos dar uma olhada rápida no <a class="external" href="https://github.com/mdn/samples-server/tree/master/s/webrtc-simple-datachannel/index.html" rel="noopener">HTML que é necessário</a>. Não há nada incrivelmente complicado aqui. Primeiro, temos um par de botões para estabelecer e fechar a conexão:</p>
+
+<pre class="brush: html">&lt;button id="connectButton" name="connectButton" class="buttonleft"&gt;
+  Conectar
+&lt;/button&gt;
+&lt;button id="disconnectButton" name="disconnectButton" class="buttonright" disabled&gt;
+  Desconectar
+&lt;/button&gt;</pre>
+
+<p>Depois, há uma caixa que contém o campo de <em>input </em>no qual o usuário pode digitar uma mensagem para transmitir, com um botão para enviar o texto digitado. Este {{HTMLElement("div")}} será o primeiro ponto (peer) no canal.</p>
+
+<pre class="brush: html">  &lt;div class="messagebox"&gt;
+    &lt;label for="message"&gt;Insira a mensagem:
+      &lt;input type="text" name="message" id="message" placeholder="Texto da mensagem"
+              inputmode="latin" size=60 maxlength=120 disabled&gt;
+    &lt;/label&gt;
+    &lt;button id="sendButton" name="sendButton" class="buttonright" disabled&gt;
+      Enviar
+    &lt;/button&gt;
+  &lt;/div&gt;</pre>
+
+<p>Finalmente, há uma pequena caixa na qual vamos inserir as mensagens. Este bloco {{HTMLElement("div")}} será o segundo ponto do par (peer).</p>
+
+<pre class="brush: html">&lt;div class="messagebox" id="receivebox"&gt;
+  &lt;p&gt;Mensagens recebidas:&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h2 id="O_código_JavaScript">O código JavaScript</h2>
+
+<p>Como você pode simplesmente <a class="external" href="https://github.com/mdn/samples-server/tree/master/s/webrtc-simple-datachannel/main.js" rel="noopener">ver o próprio código no GitHub</a>, abaixo, analisaremos as partes do código que fazem o trabalho pesado.</p>
+
+<p>A WebRTC API faz um intenso uso de {{jsxref("Promise")}}s. Que tornam muito fácil encadear as etapas do processo de conexão; Se você ainda não leu sobre esta funcionalidade do <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 2015</a>, você deveria ler sobre eles. Da mesma forma, este exemplo usa <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> para simplificar a sintaxe.</p>
+
+<h3 id="Começando">Começando</h3>
+
+<p>Quando o script é executado, configuramos um {{event("load")}} ouvinte de eventos (event listener), De modo que, uma vez que a página esteja totalmente carregada, nossa função <code>startup()</code> seja chamada.</p>
+
+<pre class="brush: js">function startup() {
+  connectButton = document.getElementById('connectButton');
+  disconnectButton = document.getElementById('disconnectButton');
+  sendButton = document.getElementById('sendButton');
+  messageInputBox = document.getElementById('message');
+  receiveBox = document.getElementById('receivebox');
+
+  // Define os ouvintes de eventos para os elementos da interface do usuário
+
+  connectButton.addEventListener('click', connectPeers, false);
+  disconnectButton.addEventListener('click', disconnectPeers, false);
+  sendButton.addEventListener('click', sendMessage, false);
+}</pre>
+
+<p>Isso é bastante direto. Pegamos referências de todos os elementos da página que precisaremos acessar e, em seguida, configuramos {{domxref("EventListener", "event listeners")}} nos três botões.</p>
+
+<h3 id="Estabelecendo_uma_conexão">Estabelecendo uma conexão</h3>
+
+<p>Quando o usuário clica no botão "Conectar", o método <code>connectPeers()</code> é chamado. Para que fique mais claro, iremos quebrar o código em mais partes, e analisar um pouco de cada vez.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Mesmo que ambas as extremidades da nossa conexão estejam na mesma página, vamos nos referir ao ponto que inicia a conexão como "local", e ao outro como sendo o "remoto".</p>
+</div>
+
+<h4 id="Configurando_o_ponto_local_(local_peer)">Configurando o ponto local (local peer)</h4>
+
+<pre class="brush: js">localConnection = new RTCPeerConnection();
+
+sendChannel = localConnection.createDataChannel("sendChannel");
+sendChannel.onopen = handleSendChannelStatusChange;
+sendChannel.onclose = handleSendChannelStatusChange;
+</pre>
+
+<p>O primeiro passo é criar o ponto "local" da conexão. Este é o ponto que enviará o pedido de conexão. O próximo passo é criar o {{domxref("RTCDataChannel")}} chamando {{domxref("RTCPeerConnection.createDataChannel()")}} e configurando ouvintes de eventos (event listeners) para monitorar o canal, e para que possamos saber quando ele for aberto e fechado (isto é, quando o canal está conectado ou desconectado dentro dessa conexão entre pares (peer connection)).</p>
+
+<p>É importante ter em mente que cada extremidade do canal tem seu próprio objeto {{domxref("RTCDataChannel")}} .</p>
+
+<h4 id="Configurando_o_ponto_remoto_(remote_peer)">Configurando o ponto remoto (remote peer)</h4>
+
+<pre class="brush: js">remoteConnection = new RTCPeerConnection();
+remoteConnection.ondatachannel = receiveChannelCallback;</pre>
+
+<p>O ponto remoto está configurado de forma semelhante, exceto que não precisamos nós mesmos criar explicitamente um {{domxref("RTCDataChannel")}} , uma vez que vamos ser conectados através do canal estabelecido acima. Em vez disso, criamos um {{event("datachannel")}} manipulador de eventos (event handler); Isso será chamado quando o canal de dados (data channel) for aberto; Este manipulador (handler) receberá um objeto <code>RTCDataChannel</code>; você verá isso abaixo.</p>
+
+<h4 id="Configurando_ICE_candidates">Configurando  ICE candidates</h4>
+
+<p>O próximo passo é configurar cada conexão com os ouvintes do ICE que serão chamados quando houver um novo candidato ICE para comunicar com o outro lado.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Em um cenário do mundo real em que os dois pares não estão sendo executados no mesmo contexto, o processo é um pouco mais complexo; Cada lado fornece, um de cada vez, um sugestão sobre como conectar (por exemplo, UDP, UDP com um relay, TCP, etc.) chamando {{domxref("RTCPeerConnection.addIceCandidate()")}}, e eles vão de um lado para outro até chegarem a um acordo. Mas aqui, acabamos de aceitar a primeira oferta de cada lado, uma vez que não existe uma rede real envolvida.</p>
+</div>
+
+<pre class="brush: js">    localConnection.onicecandidate = e =&gt; !e.candidate
+        || remoteConnection.addIceCandidate(e.candidate)
+        .catch(handleAddCandidateError);
+
+    remoteConnection.onicecandidate = e =&gt; !e.candidate
+        || localConnection.addIceCandidate(e.candidate)
+        .catch(handleAddCandidateError);</pre>
+
+<p>Configuramos cada {{domxref("RTCPeerConnection")}} para ter um manipulador de eventos (event handler) para o evento {{event("icecandidate")}} .</p>
+
+<h4 id="Iniciando_a_tentativa_de_conexão">Iniciando a tentativa de conexão</h4>
+
+<p>A última coisa que precisamos fazer para começar a conectar nossos pares é criar uma oferta de conexão.</p>
+
+<pre class="brush: js">    localConnection.createOffer()
+    .then(offer =&gt; localConnection.setLocalDescription(offer))
+    .then(() =&gt; remoteConnection.setRemoteDescription(localConnection.localDescription))
+    .then(() =&gt; remoteConnection.createAnswer())
+    .then(answer =&gt; remoteConnection.setLocalDescription(answer))
+    .then(() =&gt; localConnection.setRemoteDescription(remoteConnection.localDescription))
+    .catch(handleCreateDescriptionError);</pre>
+
+<p>Vamos passar por isto linha por linha e decifrar o que significa.</p>
+
+<ol>
+ <li>Primeiro chamamos {{domxref("RTCPeerConnection.createOffer()")}} método para criar um resumo {{Glossary("SDP")}} (Session Description Protocol) descrevendo a conexão que queremos fazer. Este método aceita, opcionalmente, um objeto com restrições a serem suportadas pela conexão para atender às suas necessidades, como no caso da conexão precisar suportar áudio, vídeo ou ambos. Em nosso exemplo simples, não temos restrições.</li>
+ <li>Se a oferta for criada com sucesso, passamos o resumo junto ao método de conexões locais {{domxref("RTCPeerConnection.setLocalDescription()")}} . Isso configura o ponto local da conexão.</li>
+ <li>O próximo passo é conectar o ponto local ao remoto comunicando ao ponto remoto sobre ele. Isso é feito chamando <code>remoteConnection.</code>{{domxref("RTCPeerConnection.setRemoteDescription()")}}. Agora o <code>remoteConnection</code> conhece a conexão que está sendo construída.</li>
+ <li>Isso significa que é hora do ponto remoto responder. Ele faz isso chamando o método {{domxref("RTCPeerConnection.createAnswer", "createAnswer()")}} . Isso gera um resumo de SDP que descreve a conexão que o ponto remoto está disposto e capaz de estabelecer. Essa configuração está em algum lugar na união das opções que ambos os pares podem suportar.</li>
+ <li>Uma vez que a resposta foi criada, ela é passada para o <em>remoteConnection </em>chamando {{domxref("RTCPeerConnection.setLocalDescription()")}}. Isso estabelece o ponto remoto da conexão (que, para o ponto remoto, é o ponto local. Isso pode parecer confuso, mas você irá se acostumar com isso.</li>
+ <li>Finalmente, a descrição local das conexões remotas está configurada para se referir ao ponto remoto, chamando localConnection's {{domxref("RTCPeerConnection.setRemoteDescription()")}}.</li>
+ <li>O <code>catch()</code> chama uma rotina que lida com os erros que ocorrem.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota:</strong> Mais uma vez, esse processo não é uma implementação do mundo real; No uso normal, há dois pedaços de código executados em duas máquinas, interagindo e negociando a conexão.</p>
+</div>
+
+<h4 id="Manipulação_da_conexão_de_pares_bem_sucedida">Manipulação da conexão de pares bem sucedida</h4>
+
+<p>Como cada lado da conexão peer-to-peer é conectado com sucesso, o evento correspondente {{domxref("RTCPeerConnection")}}'s {{event("icecandidate")}} é disparado. Esses manipuladores podem fazer o que for necessário, mas, neste exemplo, tudo o que precisamos fazer é atualizar a interface do usuário:</p>
+
+<pre class="brush: js">  function handleLocalAddCandidateSuccess() {
+    connectButton.disabled = true;
+  }
+
+  function handleRemoteAddCandidateSuccess() {
+    disconnectButton.disabled = false;
+  }</pre>
+
+<p>A única coisa que fazemos aqui é desativar o botão "Conectar" quando o ponto local estiver conectado e ativar o botão "Desconectar" quando o ponto remoto se conectar.</p>
+
+<h4 id="Conectando_o_canal_de_dados">Conectando o canal de dados</h4>
+
+<p>Uma vez que o {{domxref("RTCPeerConnection")}} é aberto, o evento {{event("datachannel")}} é enviado para o ponto remoto para completar o processo de abertura do canal de dados; Isso invoca nosso método <code>receiveChannelCallback()</code>, que se parece com isso:</p>
+
+<pre class="brush: js">  function receiveChannelCallback(event) {
+    receiveChannel = event.channel;
+    receiveChannel.onmessage = handleReceiveMessage;
+    receiveChannel.onopen = handleReceiveChannelStatusChange;
+    receiveChannel.onclose = handleReceiveChannelStatusChange;
+  }</pre>
+
+<p>O evento{{event("datachannel")}} inclui, em sua propriedade de canal, uma referência a um {{domxref("RTCDataChannel")}} Representando o ponto remoto do canal. Isso é salvo, e nós configuramos, no canal, ouvintes de eventos para os eventos que queremos manipular. Uma vez feito isso, nosso método <code>handleReceiveMessage()</code> Será chamado cada vez que os dados são recebidos pelo ponto remoto, e o método <code>handleReceiveChannelStatusChange()</code> será chamado sempre que mudar o estado da conexão do canal, para que possamos reagir quando o canal estiver totalmente aberto e quando ele for fechado.</p>
+
+<h3 id="Lidando_com_as_mudanças_de_status_do_canal">Lidando com as mudanças de status do canal</h3>
+
+<p>Ambos nossos pontos locais e remotos usam um único método para lidar com eventos que indicam alguma alteração no status da conexão do canal.</p>
+
+<p>Quando o ponto local experimenta um evento aberto ou fechado, o método<code>handleSendChannelStatusChange()</code> é chamado:</p>
+
+<pre class="brush: js">  function handleSendChannelStatusChange(event) {
+    if (sendChannel) {
+      var state = sendChannel.readyState;
+
+      if (state === "open") {
+        messageInputBox.disabled = false;
+        messageInputBox.focus();
+        sendButton.disabled = false;
+        disconnectButton.disabled = false;
+        connectButton.disabled = true;
+      } else {
+        messageInputBox.disabled = true;
+        sendButton.disabled = true;
+        connectButton.disabled = false;
+        disconnectButton.disabled = true;
+      }
+    }
+  }</pre>
+
+<p>Se o estado do canal mudou para "open", isso indica que terminamos de estabelecer o link entre os dois pares. A interface do usuário é atualizada de forma correspondente: ativando o elemento de input de texto para a mensagem a ser enviada, focando este elemento de input para que o usuário comece imediatamente a digitar, habilitando os botões "Enviar" e "Desconectar", que são agora utilizáveis, E desativando o botão "Conectar", uma vez que não é necessário quando a conexão está aberta.</p>
+
+<p>Se o estado do canal mudou para "closed", ocorre o conjunto oposto de ações: a caixa de entrada de texto e o botão "Enviar" estão desativados, o botão "Conectar" está habilitado para que o usuário possa abrir uma nova conexão se desejar, e o botão "Desconectar" está desativado, uma vez que não é útil quando não existe conexão.</p>
+
+<p>Nosso exemplo de par remoto, por outro lado, ignora os eventos de alteração de status, exceto para registrar o evento no console:</p>
+
+<pre class="brush: js">  function handleReceiveChannelStatusChange(event) {
+    if (receiveChannel) {
+      console.log("Receive channel's status has changed to " +
+                  receiveChannel.readyState);
+    }
+  }</pre>
+
+<p>O método <code>handleReceiveChannelStatusChange()</code> recebe como parâmetro de entrada o evento que ocorreu; Este será um {{domxref("RTCDataChannelEvent")}}.</p>
+
+<h3 id="Enviando_mensagens">Enviando mensagens</h3>
+
+<p>Quando o usuário pressiona o botão "Enviar", o método sendMessage() que estabelecemos como o manipulador para o evento do botão {{event("click")}} é chamado. Esse método é bastante simples:</p>
+
+<pre class="brush: js">  function sendMessage() {
+    var message = messageInputBox.value;
+    sendChannel.send(message);
+
+    messageInputBox.value = "";
+    messageInputBox.focus();
+  }</pre>
+
+<p>Primeiro, o texto da mensagem é obtido dos atributos do elemento de <em>input </em>{{htmlattrxref("value", "input")}} . Isso é enviado para o ponto remoto, ligando para {{domxref("RTCDataChannel.send", "sendChannel.send()")}}. E está tudo aí! O resto deste método é apenas um pouco de açúcar para experiência do usuário - a caixa de entrada é esvaziada e re-focada para que o usuário comece imediatamente a digitar outra mensagem.</p>
+
+<h3 id="Recebendo_mensagens">Recebendo mensagens</h3>
+
+<p>Quando ocorre um evento de "mensagem" no canal remoto, nosso método <code>handleReceiveMessage()</code> é chamado como o manipulador de eventos.</p>
+
+<pre class="brush: js">  function handleReceiveMessage(event) {
+    var el = document.createElement("p");
+    var txtNode = document.createTextNode(event.data);
+
+    el.appendChild(txtNode);
+    receiveBox.appendChild(el);
+  }</pre>
+
+<p>Este método simplesmente executa alguns injeções básicas {{Glossary("DOM")}} ; cria um novo {{HTMLElement("p")}} (paragraph) elemento, então cria um novo nó {{domxref("Text")}} contendo o texto da mensagem, que é recebido na propriedade de dados do evento. Este nó de texto é anexado como um filho do novo elemento, que é então inserido no bloco <em>receiveBox</em>, fazendo com que ele desenhe na janela do navegador.</p>
+
+<h3 id="Desconectando_os_pares_(peers)">Desconectando os pares (peers)</h3>
+
+<p>Quando o usuário clica no botão "Desconectar", o método <code>disconnectPeers()</code> previamente configurado como o manipulador desse botão é chamado.</p>
+
+<pre class="brush: js">  function disconnectPeers() {
+
+    // Close the RTCDataChannels if they're open.
+
+    sendChannel.close();
+    receiveChannel.close();
+
+    // Close the RTCPeerConnections
+
+    localConnection.close();
+    remoteConnection.close();
+
+    sendChannel = null;
+    receiveChannel = null;
+    localConnection = null;
+    remoteConnection = null;
+
+    // Update user interface elements
+
+    connectButton.disabled = false;
+    disconnectButton.disabled = true;
+    sendButton.disabled = true;
+
+    messageInputBox.value = "";
+    messageInputBox.disabled = true;
+  }
+</pre>
+
+<p>Isso começa por fechar cada par {{domxref("RTCDataChannel")}}, então, de forma semelhante, cada um {{domxref("RTCPeerConnection")}}. Então, todas as referências salvas desses objetos são definidas como null para evitar a reutilização acidental, e a interface do usuário é atualizada para refletir o fato de que a conexão foi fechada.</p>
+
+<h2 id="Próximos_passos">Próximos passos</h2>
+
+<p>Você poderia <a href="https://mdn-samples.mozilla.org/s/webrtc-simple-datachannel">tentar este exemplo</a> e dar uma olhada no código fonte <a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-simple-datachannel">webrtc-simple-datachannel</a>, disponível no GitHub.</p>
diff --git a/files/pt-br/web/api/websocket/index.html b/files/pt-br/web/api/websocket/index.html
new file mode 100644
index 0000000000..8eb46000c9
--- /dev/null
+++ b/files/pt-br/web/api/websocket/index.html
@@ -0,0 +1,323 @@
+---
+title: WebSocket
+slug: Web/API/WebSocket
+tags:
+  - API
+  - WebSocket
+  - WebSockets
+translation_of: Web/API/WebSocket
+---
+<div>{{APIRef("Web Sockets API")}}{{SeeCompatTable}}</div>
+
+<p>O objeto <code>WebSocket</code> provê uma API para criação e gerenciamento de uma conexão <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a> com um servidor, bem como o envio e recebimento de dados através dessa conexão.</p>
+
+<p>O construtor do WebSocket aceita um parâmetro obrigatório e um opcional:</p>
+
+<pre class="syntaxbox">WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString[] protocols
+);
+</pre>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>A URL da devida conexão; esta deve ser a URL da qual o servidor WebSocket irá responder.</dd>
+ <dt><code>protocols</code> {{optional_inline}}</dt>
+ <dd>Um único protocolo em formato texto ou uma lista de textos de protocolo. Estes textos são usados para indicar sub-protocolos, assim então um único servidor pode implementar múltiplos sub-protocolos WebSocket (por exemplo, você pode querer um servidor capaz de manipular diferentes tipos de interações dependendo do protocolo especificado). se você não especificar um protocolo em texto, será assumido um texto vazio.</dd>
+</dl>
+
+<p>O construtor pode lançar exceções:</p>
+
+<dl>
+ <dt><code>SECURITY_ERR</code></dt>
+ <dd>A porta a qual a conexão está sendo executada está bloqueada.</dd>
+</dl>
+
+<h2 id="Visão_Geral_do_método">Visão Geral do método</h2>
+
+<table class="standard-table" style="color: #3b3c40; font-size: 14px; font-weight: normal;">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#close()">close</a>(É opcional: unsigned long code, É opcional: DOMString reason);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#send()">send</a>(in DOMString data);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Atributos">Atributos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Attributo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descrição</td>
+  </tr>
+  <tr>
+   <td><code>binaryType</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>
+    <p>Uma string indica o tipo de dado binário que está sendo transmitido pela conexão. Este deve ser tanto "blob" se o objeto DOM {{domxref("Blob")}} estiver sendo usado ou "arraybuffer" se os objetos {{jsxref("ArrayBuffer")}} estiver sendo usada</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>bufferedAmount</code></td>
+   <td><code>unsigned long</code></td>
+   <td>
+    <p>O número de bites de dados que tem sid consultado usando chamadas para {{manch("send")}} mas não ainda para a rede.Estes valor reseta para zero uma vez que todos os dados tem sido mandados.Este valor não reseta para zero quando a conexão está fechada, se você continuar chamando {{manch("send")}}, isto continuará escalando. <strong>Leitura online</strong></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>extensions</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>As extensões selecionadas pelo servidor. Este é atualmente apenas a string vazia ou uma lista de extensões negociadas pela conexão.</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{domxref("EventListener")}}</td>
+   <td>Um event listener para ser chamado quando o <code> readyState </code> da conexão do WebSocket mudar para <code> CLOSED </code>. O listener recebe um <a href="/en-US/docs/Web/API/CloseEvent"><code>CloseEvent </code></a>"close".</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code></td>
+   <td>{{domxref("EventListener")}}</td>
+   <td>Um event listener para ser chamado quando ocorrer um erro. Este é um evento simples chamado "erro".</td>
+  </tr>
+  <tr>
+   <td><code>onmessage</code></td>
+   <td>{{domxref("EventListener")}}</td>
+   <td>Um event listener para ser chamado quando uma mensagem é recebida do servidor. O listener recebe um <a href="/en-US/docs/Web/API/MessageEvent"><code>MessageEvent</code></a> "message".</td>
+  </tr>
+  <tr>
+   <td><code>onopen</code></td>
+   <td>{{domxref("EventListener")}}</td>
+   <td>Um event listener para ser chamado quando o <code> readyState </code> da conexão do WebSocket mudar para <code> OPEN </code>, isso indica que a conexão está pronta para enviar e receber dados. O evento é simples, com o nome "open".</td>
+  </tr>
+  <tr>
+   <td><code>protocol</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>Uma sequência de caracteres que indica o nome do sub-protocolo selecionado pelo servidor, este será um dos parâmetros especificados no <code>protocolo</code> ao criar o objeto WebSocket.</td>
+  </tr>
+  <tr>
+   <td><code>readyState</code></td>
+   <td><code>unsigned short</code></td>
+   <td>O estado atual da conexão, este é um dos {{anch("Ready state constants")}}. <strong>Apenas leitura.</strong></td>
+  </tr>
+  <tr>
+   <td><code>url</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>O URL resolvido pelo construtor. Este é sempre um URL absoluto. <strong>Apenas leitura.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constantes">Constantes</h2>
+
+<h3 id="Estados_de_constantes_prontas">Estados de constantes prontas</h3>
+
+<p>Essas constantes são usadas pelo atributo <code> readyState </code> para descrever o estado da conexão do WebSocket.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constante</td>
+   <td class="header">Valor</td>
+   <td class="header">Descrição</td>
+  </tr>
+  <tr>
+   <td><code>CONNECTING</code></td>
+   <td><code>0</code></td>
+   <td>A conexão ainda não está aberta.</td>
+  </tr>
+  <tr>
+   <td><code>OPEN</code></td>
+   <td><code>1</code></td>
+   <td>A conexão está aberta e pronta para se comunicar.</td>
+  </tr>
+  <tr>
+   <td><code>CLOSING</code></td>
+   <td><code>2</code></td>
+   <td>A conexão está em processo de fechamento.</td>
+  </tr>
+  <tr>
+   <td><code>CLOSED</code></td>
+   <td><code>3</code></td>
+   <td>A conexão está fechada ou não foi possível abrir.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Métodos">Métodos</h2>
+
+<h3 id="close()">close()</h3>
+
+<p>Fecha a conexão do WebSocket ou a tentativa de conexão, se houver. Se a conexão já for <code> CLOSED </code>, este método não faz nada.</p>
+
+<pre class="syntaxbox">void close(
+  É opcional: unsigned short code,
+  É opcional: DOMString reason
+);
+</pre>
+
+<h4 id="Parametros">Parametros</h4>
+
+<dl>
+ <dt><code>code</code> {{optional_inline}}</dt>
+ <dd>Um valor numérico que indica o código de status explicando por que a conexão está sendo fechada. Se esse parâmetro não for especificado, é assumido um valor padrão de 1000 (indicando um fechamento "completo da transação"). Veja a <a href="/en-US/docs/Web/API/CloseEvent#Status_codes">lista de status de códigos</a> na <a href="/en-US/docs/Web/API/CloseEvent"><code>CloseEvent</code></a> página de valores permitidos.</dd>
+ <dt><code>reason</code> {{optional_inline}}</dt>
+ <dd>Uma string legível para humanos que explica por que a conexão está se fechando. Esta seqüência de caracteres não deve ter mais de 123 bytes de texto UTF-8 (<strong>não</strong> caracteres).</dd>
+</dl>
+
+<h4 id="Exceções_lançadas">Exceções lançadas</h4>
+
+<dl>
+ <dt><code>INVALID_ACCESS_ERR</code></dt>
+ <dd>Foi especificado um <code>código</code>inválido.</dd>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>A string <code> reason  é muito longa ou contém substitutos não comparados.</code></dd>
+</dl>
+
+<div class="note">
+<p><code><strong>Note:</strong> No Gecko, este método não suporta nenhum parâmetro antes do Gecko 8.0 {{geckoRelease("8.0")}}.</code></p>
+</div>
+
+<h3 id="send()"><code>send()</code></h3>
+
+<p><code>Transmite dados para o servidor através da conexão WebSocket.</code></p>
+
+<pre class="syntaxbox"><code>
+void send(
+  in DOMString data
+);
+
+void send(
+  in ArrayBuffer data
+);
+
+void send(
+  in Blob data
+);
+</code></pre>
+
+<h4 id="Parametros_2"><code>Parametros</code></h4>
+
+<dl>
+ <dt><code><code>data</code></code></dt>
+ <dd><code>Uma sequência de texto para enviar para o servidor.</code></dd>
+</dl>
+
+<h4 id="Exceções_lançadas_2"><code>Exceções lançadas</code></h4>
+
+<dl>
+ <dt><code><code>INVALID_STATE_ERR</code></code></dt>
+ <dd><code>A conexão não está atualmente <code> OPEN </code>.</code></dd>
+ <dt><code><code>SYNTAX_ERR</code></code></dt>
+ <dd><code>Os dados são uma string que tem substituto não comparado.</code></dd>
+</dl>
+
+<div class="note">
+<p><code><strong>Nota:</strong> A implementação do método <code> send () </code> de Gecko difere um pouco da especificação em {{Gecko("6.0")}}. Gecko retorna um <code> boolean </code> indicando se a conexão ainda está aberta (por extensão, ou os dados estão em fila ou transmitidos com sucesso). Isso é corrigido em {{Gecko("8.0")}}.</code></p>
+
+<p><code>A partir de {{Gecko("11.0")}}, o suporte para {{jsxref ("ArrayBuffer")}} está implementado, mas não {{domxref("Blob")}} tipos de dados.</code></p>
+</div>
+
+<h2 id="Especificações"><code>Especificações</code></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th><code>Especificações</code></th>
+   <th><code>Status</code></th>
+   <th><code>Comentário</code></th>
+  </tr>
+  <tr>
+   <td><code>{{SpecName("Websockets", "#the-websocket-interface", "WebSocket")}}</code></td>
+   <td><code>{{Spec2("Websockets")}}</code></td>
+   <td><code>Definição inicial</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegador_Compatível"><code>Navegador Compatível</code></h2>
+
+<div><code>{{CompatibilityTable}}</code></div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><code>Características</code></th>
+   <th><code>Chrome</code></th>
+   <th><code>Firefox (Gecko)</code></th>
+   <th><code>Internet Explorer</code></th>
+   <th><code>Opera</code></th>
+   <th><code>Safari</code></th>
+  </tr>
+  <tr>
+   <td><code>Suporte básico</code></td>
+   <td><code>{{CompatVersionUnknown}}</code></td>
+   <td><code>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></code></td>
+   <td><code>{{CompatVersionUnknown}}</code></td>
+   <td><code>{{CompatVersionUnknown}}</code></td>
+   <td><code>{{CompatUnknown}}</code></td>
+  </tr>
+  <tr>
+   <td><code>Suporte sub-protocolo</code></td>
+   <td><code>{{CompatUnknown}}</code></td>
+   <td><code>{{CompatGeckoDesktop("6.0")}}</code></td>
+   <td><code>{{CompatUnknown}}</code></td>
+   <td><code>{{CompatUnknown}}</code></td>
+   <td><code>{{CompatUnknown}}</code></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><code>Características</code></th>
+   <th><code>Android</code></th>
+   <th><code>Firefox Mobile (Gecko)</code></th>
+   <th><code>IE Mobile</code></th>
+   <th><code>Opera Mobile</code></th>
+   <th><code>Safari Mobile</code></th>
+  </tr>
+  <tr>
+   <td><code>Suporte básico</code></td>
+   <td><code>{{CompatUnknown}}</code></td>
+   <td><code>{{CompatGeckoMobile("7.0")}}<sup>[1]</sup></code></td>
+   <td><code>{{CompatUnknown}}</code></td>
+   <td><code>{{CompatUnknown}}</code></td>
+   <td><code>{{CompatUnknown}}</code></td>
+  </tr>
+  <tr>
+   <td><code>Suporte sub-protocolo</code></td>
+   <td><code>{{CompatUnknown}}</code></td>
+   <td><code>{{CompatGeckoMobile("7.0")}}</code></td>
+   <td><code>{{CompatUnknown}}</code></td>
+   <td><code>{{CompatUnknown}}</code></td>
+   <td><code>{{CompatUnknown}}</code></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><code>[1] Iniciado no Gecko 6.0 {{geckoRelease("6.0")}}, o construtor está prefixado. Você precisará usar <code> MozWebSocket() </code>: <code> var mySocket = new MozWebSocket("http://www.example.com/socketserver"); </code></code></p>
+
+<p><code>As extensões atribuídas não eram suportadas no Gecko até Gecko 8.0.</code></p>
+
+<p><code>Antes do Gecko 11.0 {{geckoRelease("11.0")}}, as mensagens de saída enviadas usavam o método <a href="#send()"> send()</a>, eram limitadas a 16MB. Agora elas podem ter até 2GB de tamanho.</code></p>
+
+<h2 id="Veja_também"><code>Veja também</code></h2>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Escrevendo aplicativos clientes do WebSocket</a></code></li>
+</ul>
diff --git a/files/pt-br/web/api/webvr_api/index.html b/files/pt-br/web/api/webvr_api/index.html
new file mode 100644
index 0000000000..3046e3f086
--- /dev/null
+++ b/files/pt-br/web/api/webvr_api/index.html
@@ -0,0 +1,151 @@
+---
+title: WebVR API
+slug: Web/API/WebVR_API
+translation_of: Web/API/WebVR_API
+---
+<div>{{draft("The WebVR API documentation is currently being updated to cover the v1.0 spec, therefore some of this information will be out of date. Contact ~~chrisdavidmills if you have any questions about this work.")}}{{DefaultAPISidebar("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p class="summary">O WebVR oferece suporte para expor dispositivos de realidade virtual - por exemplo, telas montadas na cabeça, como o Oculus Rift - para aplicativos da web, permitindo que os desenvolvedores traduzam informações de posição e movimento da tela para movimento em torno de uma cena 3D. Isso tem inúmeras aplicações muito interessantes, de passeios de produtos virtuais e aplicativos de treinamento interativo para super imersivo jogos em primeira pessoa.</p>
+
+<h2 id="Conceitos_e_uso">Conceitos e uso</h2>
+
+<p><img alt="Sketch of a person in a chair with wearing goggles labelled Head mounted display (HMD) facing a monitor with a webcam labelled Position sensor " src="https://mdn.mozillademos.org/files/11035/hw-setup.png" style="display: block; height: 78px; margin: 0px auto; width: 60%;"></p>
+
+<p>Todos os dispositivos VR ligados ao computador serão devolvidos pelo {{domxref("Navigator.getVRDisplays()")}} método. Que retorna uma matriz de objetos para representar os dispositivos conectados, que herdam do objeto geral {{domxref("VRDevice")}} Geralmente o display usado na cabeça terá dois dispositivos - o próprio display montado na cabeça, representado por {{domxref("HMDVRDevice")}}, e uma câmera com sensor na posição que manterá o controle de sua posição de cabeça, representada por {{domxref("PositionSensorVRDevice")}}.</p>
+
+<p>O objeto {{domxref("PositionSensorVRDevice")}} contém o método {{domxref("PositionSensorVRDevice.getState", "getState()")}}, que retorna um objeto {{domxref("VRPositionState")}} - isto representa o estado do sensor num dado carimbo de data e inclui propriedades que contêm dados úteis tais como velocidade, aceleração e orientação atuais, úteis para atualizar o processamento de uma cena em cada trama de acordo com o movimento do visor montado na cabeça VR.</p>
+
+<p>O método {{domxref("HMDVRDevice.getEyeParameters()")}} retorna um objeto {{domxref("VREyeParameters")}}, que pode ser usado para retornar informações do campo de exibição - quanto da cena a tela montada na cabeça pode ver.O {{domxref("VREyeParameters.currentFieldOfView")}} retorna um objeto {{domxref("VRFieldOfView")}} que contém 4 ângulos que descrevem a vista atual a partir de um ponto central. Você também pode alterar o campo de visualização usando {{domxref("HMDVRDevice.setFieldOfView()")}}.</p>
+
+<div id="gt-res-content">
+<h2 class="trans-verified-button-small" dir="ltr" id="WebVR_Interfaces">WebVR Interfaces</h2>
+
+<p class="trans-verified-button-small" dir="ltr">{{domxref("VRDisplay")}}<br>
+ Representa qualquer dispositivo VR suportado por esta API. Ele inclui informações genéricas, como IDs de dispositivo e descrições, bem como métodos para começar a apresentar uma cena VR, recuperar os parâmetros do olho e exibir capacidades e outras funcionalidades importantes.<br>
+ {{domxref("VRDisplayCapabilities")}}<br>
+ Descreve os recursos de um {{domxref("VRDisplay")}} - seus recursos podem ser usados ​​para executar testes de capacidade do dispositivo VR, por exemplo, ele pode retornar informações de posição.<br>
+ {{domxref("VRPose")}}<br>
+ Representa o estado de posição em um dado carimbo de data/hora (que inclui orientação, posição, velocidade e aceleração).<br>
+ {{domxref ("VREyeParameters")}}<br>
+ Fornece acesso a todas as informações necessárias para processar corretamente uma cena para cada olho, incluindo informações de campo de visão.<br>
+ {{domxref("VRFieldOfView")}}<br>
+ Representa um campo de visão definido por 4 valores de graus diferentes que descrevem a vista a partir de um ponto central.<br>
+ {{Domxref("VRLayer")}}<br>
+ Representa uma camada a ser apresentada em {{domxref("VRDisplay")}}.<br>
+ {{domxref("VRStageParameters")}}<br>
+ Representa os valores que descrevem a área de estágio para dispositivos que suportam experiências em escala de sala.</p>
+
+<h2 class="trans-verified-button-small" dir="ltr" id="Extensões_para_outras_interfaces">Extensões para outras interfaces</h2>
+
+<p class="trans-verified-button-small" dir="ltr">{{domxref("Gamepad.displayId")}} {{readonlyInline}}<br>
+ Retorna o {{domxref("VRDisplay.displayId")}} do associado {{domxref("VRDisplay")}} - o VRDisplay que o gamepad está controlando a cena exibida de.<br>
+ {{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}<br>
+ Retorna uma matriz contendo todos os objetos {{domxref("VRDisplay")}} que está sendo apresentado ({{domxref("VRDisplay.ispresenting")}}).<br>
+ {{domxref("Navigator.getVRDisplays()")}}<br>
+ Retorna uma promessa que resolve uma matriz de objetos {{domxref("VRDisplay")}} que representa qualquer dispositivo VR disponível conectado ao computador.<br>
+ {{domxref("Window.onvrdisplayconnected")}}<br>
+ Representa um manipulador de eventos que será executado quando um dispositivo VR compatível tiver sido conectado ao computador (quando o evento {{event("vrdisplayconnected")}} for acionado).<br>
+ {{domxref("Window.onvrdisplaydisconnected")}}<br>
+ Representa um manipulador de eventos que será executado quando um dispositivo VR compatível tiver sido desconectado do computador (quando o evento {{event("vrdisplaydisconnected")}} for acionado).<br>
+ {{domxref("Window.onvrdisplaypresentchange")}}<br>
+ Representa um manipulador de eventos que será executado quando o estado de apresentação de um dispositivo VR mudar - isto é, vai de apresentar a não apresentar, ou vice-versa (quando o evento {{event("onvrdisplaypresentchange")}} é acionado).</p>
+</div>
+
+<h2 id="Examplos">Examplos</h2>
+
+<p>Você pode encontrar uma série de exemplos nesses repositórios Github:</p>
+
+<ul>
+ <li><a href="https://github.com/aframevr/aframe">A-Frame</a>: Estrutura web de código aberto para a construção de experiências VR. Muitos exemplos.</li>
+ <li><a href="https://github.com/mdn/webvr-tests">mdn/webvr-tests</a>: Demonstrações simples construídas para ilustrar o uso de recursos básicos.</li>
+ <li><a href="https://github.com/MozVR/">MozVR team</a>: Mais demonstrações, sobre WebVR e muito mais!</li>
+</ul>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR')}}</td>
+   <td>{{Spec2('WebVR')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_Browser_(navegador)">Compatibilidade do Browser (navegador)</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Chromium</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>
+    <p>Suporte Básico</p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</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>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+   <th>Samsung Internet for GearVR</th>
+  </tr>
+  <tr>
+   <td>
+    <p>Suporte Básico</p>
+   </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_Também">Veja Também</h2>
+
+<ul>
+ <li><a href="https://webvr.info">webvr.info</a>- Informações atualizadas sobre WebVR, configuração do navegador e comunidade.</li>
+ <li><a href="https://iswebvrready.com">webvr.rocks</a>- Informações atualizadas sobre o suporte ao navegador WebVR (incluindo compilações experimentais).</li>
+ <li><a href="http://mozvr.com/">MozVr.com</a>- Demos, downloads, outros recursos da equipe de VR da Mozilla.</li>
+ <li><a href="https://aframe.io">A-Frame</a>- A web framework para a construção de experiências VR (com HTML), a partir da equipe Mozilla VR.</li>
+ <li><a href="http://dsmu.me/ConsoleGameOnWeb/">Console Game on Web</a>- Uma coleção de demonstrações interessantes conceito de jogo, alguns dos quais incluem WebVR.</li>
+ <li><a href="https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate">threejs-vr-boilerplate</a>- Um modelo de iniciador muito útil para escrever aplicações WebVR.</li>
+ <li><a href="https://developer.oculus.com/">Oculus Rift homepage</a></li>
+</ul>
diff --git a/files/pt-br/web/api/webvr_api/using_the_webvr_api/index.html b/files/pt-br/web/api/webvr_api/using_the_webvr_api/index.html
new file mode 100644
index 0000000000..88c0697bdb
--- /dev/null
+++ b/files/pt-br/web/api/webvr_api/using_the_webvr_api/index.html
@@ -0,0 +1,440 @@
+---
+title: Using the WebVR API
+slug: Web/API/WebVR_API/Using_the_WebVR_API
+translation_of: Web/API/WebVR_API/Using_the_WebVR_API
+---
+<div>{{APIRef("WebVR API")}}{{deprecated_header}}</div>
+
+<div class="blockIndicator note"><strong>Note:</strong> WebVR API is replaced by <a href="/en-US/docs/Web/API/WebXR_API">WebXR API</a>. WebVR was never ratified as a standard, was implemented and enabled by default in very few browsers and supported a small number of devices.</div>
+
+<p class="summary">The WebVR API is a fantastic addition to the web developer's toolkit, allowing WebGL scenes to be presented in virtual reality displays such as the Oculus Rift and HTC Vive. But how do you get started with developing VR apps for the Web? This article will guide you through the basics.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The WebVR API's most stable version — 1.1 — has recently been implemented in Firefox 55 (Windows in release version, and Mac OS X on Nightly only) and is also available in Chrome when used with Google Daydream hardware. There is also a later evolution of the spec — 2.0 — but this is at an early stage right now. You can find information on the latest state of the specs at <a href="https://w3c.github.io/webvr/">WebVR Spec Version List</a>.</p>
+</div>
+
+<h2 id="Getting_started">Getting started</h2>
+
+<p>To get started, you need:</p>
+
+<ul>
+ <li>Supporting VR hardware.
+  <ul>
+   <li>The cheapest option is to use a mobile device, supporting browser, and device mount (e.g. Google Cardboard). This won't be quite as good an experience as dedicated hardware, but you won't need to purchase a powerful computer or dedicated VR display.</li>
+   <li>Dedicated hardware can be costly, but it does provide a better experience. The most WebVR-compatible hardware at the moment is the HTC VIVE, and The Oculus Rift. The frontpage of <a href="https://webvr.info/">webvr.info</a> has some further useful information about available hardware, and what browser support them.</li>
+  </ul>
+ </li>
+ <li>A computer powerful enough to handle rendering/displaying of VR scenes using your dedicated VR Hardware, if required. To give you an idea of what you need, look at the relevant guide for the VR you are purchasing (e.g. <a href="https://www.vive.com/us/ready/">VIVE READY Computers</a>).</li>
+ <li>A supporting browser installed — the latest <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/">Firefox Nightly</a> or <a href="https://www.google.com/chrome/index.html">Chrome</a> are your best options right now, on desktop or mobile.</li>
+</ul>
+
+<p>Once you have everything assembled, you can test to see whether your setup works with WebVR by going to our <a href="https://mdn.github.io/webvr-tests/aframe-demo/">simple A-Frame demo</a>, and seeing whether the scene renders and whether you can enter VR display mode by pressing the button at the bottom right.</p>
+
+<p><a href="https://aframe.io/">A-Frame</a> is by far the best option if you want to create a WebVR-compatible 3D scene quickly, without needing to understand a bunch of new JavaScript code. It doesn't however teach you how the raw WebVR API works, and this is what we'll get on to next.</p>
+
+<h2 id="Introducing_our_demo">Introducing our demo</h2>
+
+<p>To illustrate how the WebVR API works, we'll study our raw-webgl-example, which looks a bit like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15121/Capture1.png" style="display: block; height: 761px; margin: 0px auto; width: 1341px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find the <a href="https://github.com/mdn/webvr-tests/tree/master/raw-webgl-example">source code of our demo</a> on GitHub, and <a href="https://mdn.github.io/webvr-tests/raw-webgl-example/">view it live</a> also.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: If WebVR isn't working in your browser, you might need to make sure it is running through your graphics card. For example for NVIDIA cards, if you've got the NVIDIA control panel set up successfully, there will be a context menu option available — right click on Firefox, then choose <em>Run with graphics processor &gt; High-performance NVIDIA processor</em>.</p>
+</div>
+
+<p>Our demo features the holy grail of WebGL demos — a rotating 3D cube. We've implemented this using raw <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> code. We won't be teaching any basic JavaScript or WebGL, just the WebVR parts.</p>
+
+<p>Our demo also features:</p>
+
+<ul>
+ <li>A button to start (and stop) our scene from being presented in the VR display.</li>
+ <li>A button to show (and hide) VR pose data, i.e. the position and orientation of the headset, updated in real time.</li>
+</ul>
+
+<p>When you look through the source code of <a href="https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/webgl-demo.js">our demo's main JavaScript file</a>, you can easily find the WebVR-specific parts by searching for the string "WebVR" in preceding comments.</p>
+
+<div class="note">
+<p><strong>Note</strong>: To find out more about basic JavaScript and WebGL, consult our <a href="/en-US/docs/Learn/JavaScript">JavaScript learning material</a>, and our <a href="/en-US/docs/Web/API/WebGL_API/Tutorial">WebGL Tutorial</a>.</p>
+</div>
+
+<h2 id="How_does_it_work">How does it work?</h2>
+
+<p>At this point, let's look at how the WebVR parts of the code work.</p>
+
+<p>A typical (simple) WebVR app works like this:</p>
+
+<ol>
+ <li>{{domxref("Navigator.getVRDisplays()")}} is used to get a reference to your VR display.</li>
+ <li>{{domxref("VRDisplay.requestPresent()")}} is used to start presenting to the VR display.</li>
+ <li>WebVR's dedicated {{domxref("VRDisplay.requestAnimationFrame()")}} method is used to run the app's rendering loop at the correct refresh rate for the display.</li>
+ <li>Inside the rendering loop, you grab the data required to display the current frame ({{domxref("VRDisplay.getFrameData()")}}), draw the displayed scene twice — once for the view in each eye — then submit the rendered view to the display to show to the user via ({{domxref("VRDisplay.submitFrame()")}}).</li>
+</ol>
+
+<p>In the below sections we'll look at our raw-webgl-demo in detail, and see where exactly the above features are used.</p>
+
+<h3 id="Starting_with_some_variables">Starting with some variables</h3>
+
+<p>The first WebVR-related code you'll meet is this following block:</p>
+
+<pre class="brush: js">// WebVR variables
+
+var frameData = new VRFrameData();
+var vrDisplay;
+var btn = document.querySelector('.stop-start');
+var normalSceneFrame;
+var vrSceneFrame;
+
+var poseStatsBtn = document.querySelector('.pose-stats');
+var poseStatsSection = document.querySelector('section');
+poseStatsSection.style.visibility = 'hidden'; // hide it initially
+
+var posStats = document.querySelector('.pos');
+var orientStats = document.querySelector('.orient');
+var linVelStats = document.querySelector('.lin-vel');
+var linAccStats = document.querySelector('.lin-acc');
+var angVelStats = document.querySelector('.ang-vel');
+var angAccStats = document.querySelector('.ang-acc');
+var poseStatsDisplayed = false;</pre>
+
+<p>Let's briefly explain these:</p>
+
+<ul>
+ <li><code>frameData</code> contains a {{domxref("VRFrameData")}} object, created using the {{domxref("VRFrameData.VRFrameData", "VRFrameData()")}} constructor. This is initially empty, but will later contain the data required to render each frame to show in the VR display, updated constantly as the rendering loop runs.</li>
+ <li><code>vrDisplay</code> starts uninitialized, but will later on hold a reference to our VR headset ({{domxref("VRDisplay")}} — the central control object of the API).</li>
+ <li><code>btn</code> and <code>poseStatsBtn</code> hold references to the two buttons we are using to control our app.</li>
+ <li><code>normalSceneFrame</code> and <code>vrSceneFrame</code> start uninitialized, but later on will hold references to {{domxref("Window.requestAnimationFrame()")}} and {{domxref("VRDisplay.requestAnimationFrame()")}} calls — these will initiate the running of a normal rendering loop, and a special WebVR rendering loop; we'll explain the difference between these two later on.</li>
+ <li>The other variables store references to different parts of the VR pose data display box, which you can see in the bottom right hand corner of the UI.</li>
+</ul>
+
+<h3 id="Getting_a_reference_to_our_VR_display">Getting a reference to our VR display</h3>
+
+<p>One of the major functions inside our code is <code>start()</code> — we run this function when the body has finished loading:</p>
+
+<pre class="brush: js">// start
+//
+// Called when the body has loaded is created to get the ball rolling.
+
+document.body.onload = start;</pre>
+
+<p>To begin with, <code>start()</code> retrieves a WebGL context to use to render 3D graphics into the {{htmlelement("canvas")}} element in <a href="https://github.com/mdn/webvr-tests/blob/master/raw-webgl-example/index.html">our HTML</a>. We then check whether the <code>gl</code> context is available — if so, we run a number of functions to set up the scene for display.</p>
+
+<pre class="brush: js">function start() {
+  canvas = document.getElementById("glcanvas");
+
+  initWebGL(canvas);      // Initialize the GL context
+
+  // WebGL setup code here</pre>
+
+<p>Next, we start the process of actually rendering the scene onto the canvas, by setting the canvas to fill the entire browser viewport, and running the rendering loop (<code>drawScene()</code>) for the first time. This is the non-WebVR — normal — rendering loop.</p>
+
+<pre class="brush: js">    // draw the scene normally, without WebVR - for those who don't have it and want to see the scene in their browser
+
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    drawScene();</pre>
+
+<p>Now onto our first WebVR-specific code. First of all, we check to see if {{domxref("Navigator.getVRDisplays")}} exists — this is the entry point into the API, and therefore good basic feature detection for WebVR. You'll see at the end of the block (inside the <code>else</code> clause) that if this doesn't exist, we log a message to indicate that WebVR 1.1 isn't supported by the browser.</p>
+
+<pre class="brush: js">    // WebVR: Check to see if WebVR is supported
+    if(navigator.getVRDisplays) {
+      console.log('WebVR 1.1 supported');</pre>
+
+<p>Inside our <code>if() { ... }</code> block, we run the {{domxref("Navigator.getVRDisplays()")}} function. This returns a promise, which is fulfilled with an array containing all the VR display devices connected to the computer. If none are connected, the array will be empty.</p>
+
+<pre class="brush: js">      // Then get the displays attached to the computer
+      navigator.getVRDisplays().then(function(displays) {</pre>
+
+<p>Inside the promise <code>then()</code> block, we check whether the array length is more than 0; if so, we set the value of our <code>vrDisplay</code> variable to the 0 index item inside the array. <code>vrDisplay</code> now contains a {{domxref("VRDisplay")}} object representing our connected display!</p>
+
+<pre class="brush: js">        // If a display is available, use it to present the scene
+        if(displays.length &gt; 0) {
+          vrDisplay = displays[0];
+          console.log('Display found');</pre>
+
+<div class="note">
+<p><strong>Note</strong>: It is unlikely that you'll have multiple VR displays connected to your computer, and this is just a simple demo, so this will do for now.</p>
+</div>
+
+<h3 id="Starting_and_stopping_the_VR_presentation">Starting and stopping the VR presentation</h3>
+
+<p>Now we have a {{domxref("VRDisplay")}} object, we can use it do a number of things. The next thing we want to do is wire up functionality to start and stop presentation of the WebGL content to the display.</p>
+
+<p>Continuing on with the previous code block, we now add an event listener to our start/stop button (<code>btn</code>) — when this button is clicked we want to check whether we are presenting to the display already (we do this in a fairly dumb fashion, by checking what the button <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> contains).</p>
+
+<p>If the display is not already presenting, we use the {{domxref("VRDisplay.requestPresent()")}} method to request that the browser start presenting content to the display. This takes as a parameter an array of the {{domxref("VRLayerInit")}} objects representing the layers you want to present in the display.</p>
+
+<p>Since the maximum number of layers you can display is currently 1, and the only required object member is the {{domxref("VRLayerInit.source")}} property (which is a reference to the {{htmlelement("canvas")}} you want to present in that layer; the other parameters are given sensible defaults — see {{domxref("VRLayerInit.leftBounds", "leftBounds")}} and {{domxref("VRLayerInit.rightBounds", "rightBounds")}})), the parameter is simply [{ source: canvas }].</p>
+
+<p><code>requestPresent()</code> returns a promise that is fulfilled when the presentation begins successfully.</p>
+
+<pre class="brush: js">          // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
+          btn.addEventListener('click', function() {
+            if(btn.textContent === 'Start VR display') {
+              vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+                console.log('Presenting to WebVR display');</pre>
+
+<p>With our presentation request successful, we now want to start setting up to render content to present to the VRDisplay. First of all we set the canvas to the same size as the VR display area. We do this by getting the {{domxref("VREyeParameters")}} for both eyes using {{domxref("VRDisplay.getEyeParameters()")}}.</p>
+
+<p>We then do some simple math to calculate the total width of the VRDisplay rendering area based on the eye {{domxref("VREyeParameters.renderWidth")}} and {{domxref("VREyeParameters.renderHeight")}}.</p>
+
+<pre class="brush: js">                // Set the canvas size to the size of the vrDisplay viewport
+
+                var leftEye = vrDisplay.getEyeParameters('left');
+                var rightEye = vrDisplay.getEyeParameters('right');
+
+                canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
+                canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);</pre>
+
+<p>Next, we {{domxref("Window.cancelAnimationFrame()", "cancel the animation loop")}} previously set in motion by the {{domxref("Window.requestAnimationFrame()")}} call inside the <code>drawScene()</code> function, and instead invoke <code>drawVRScene()</code>. This function renders the same scene as before, but with some special WebVR magic going on. The loop inside here is maintained by WebVR's special {{domxref("VRDisplay.requestAnimationFrame")}} method.</p>
+
+<pre class="brush: js">                // stop the normal presentation, and start the vr presentation
+                window.cancelAnimationFrame(normalSceneFrame);
+                drawVRScene();</pre>
+
+<p>Finally, we update the button text so that the next time it is pressed, it will stop presentation to the VR display.</p>
+
+<pre class="brush: js">                btn.textContent = 'Exit VR display';
+              });</pre>
+
+<p><br>
+ To stop the VR presentation when the button is subsequently pressed, we call {{domxref("VRDisplay.exitPresent()")}}. We also reverse the button's text content, and swap over the <code>requestAnimationFrame</code> calls. You can see here that we are using {{domxref("VRDisplay.cancelAnimationFrame")}} to stop the VR rendering loop, and starting the normal rendering loop off again by calling <code>drawScene()</code>.</p>
+
+<pre class="brush: js">            } else {
+              vrDisplay.exitPresent();
+              console.log('Stopped presenting to WebVR display');
+
+              btn.textContent = 'Start VR display';
+
+              // Stop the VR presentation, and start the normal presentation
+              vrDisplay.cancelAnimationFrame(vrSceneFrame);
+              drawScene();
+            }
+          });
+        }
+      });
+    } else {
+      console.log('WebVR API not supported by this browser.');
+    }
+  }
+}</pre>
+
+<p>Once the presentation starts, you'll be able to see the stereoscopic view displayed in the browser:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15123/Capture2.png" style="display: block; margin: 0 auto;"></p>
+
+<p>You'll learn below how the stereoscopic view is actually produced.</p>
+
+<h3 id="Why_does_WebVR_have_its_own_requestAnimationFrame">Why does WebVR have its own requestAnimationFrame()?</h3>
+
+<p>This is a good question. The reason is that for smooth rendering inside the VR display, you need to render the content at the display's native refresh rate, not that of the computer. VR display refresh rates are greater than PC refresh rates, typically up to 90fps. The rate will be differ from the computer's core refresh rate.</p>
+
+<p>Note that when the VR display is not presenting, {{domxref("VRDisplay.requestAnimationFrame")}} runs identically to {{domxref("Window.requestAnimationFrame")}}, so if you wanted, you could just use a single rendering loop, rather than the two we are using in our app. We have used two because we wanted to do slightly different things depending on whether the VR display is presenting or not, and keep things separated for ease of comprehension.</p>
+
+<h3 id="Rendering_and_display">Rendering and display</h3>
+
+<p>At this point, we've seen all the code required to access the VR hardware, request that we present our scene to the hardware, and start running the rending loop. Let's now look at the code for the rendering loop, and explain how the WebVR-specific parts of it work.</p>
+
+<p>First of all, we begin the definition of our rendering loop function — <code>drawVRScene()</code>. The first thing we do inside here is make a call to {{domxref("VRDisplay.requestAnimationFrame()")}} to keep the loop running after it has been called once (this occurred earlier on in our code when we started presenting to the VR display). This call is set as the value of the global <code>vrSceneFrame</code> variable, so we can cancel the loop with a call to {{domxref("VRDisplay.cancelAnimationFrame()")}} once we exit VR presenting.</p>
+
+<pre class="brush: js">function drawVRScene() {
+  // WebVR: Request the next frame of the animation
+  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);</pre>
+
+<p>Next, we call {{domxref("VRDisplay.getFrameData()")}}, passing it the name of the variable that we want to use to contain the frame data. We initialized this earlier on — <code>frameData</code>. After the call completes, this variable will contain the data need to render the next frame to the VR device, packaged up as a {{domxref("VRFrameData")}} object. This contains things like projection and view matrices for rendering the scene correctly for the left and right eye view, and the current {{domxref("VRPose")}} object, which contains data on the VR display such as orientation, position, etc.</p>
+
+<p>This has to be called on every frame so the rendered view is always up-to-date.</p>
+
+<pre class="brush: js">  // Populate frameData with the data of the next frame to display
+  vrDisplay.getFrameData(frameData);</pre>
+
+<p>Now we retrieve the current {{domxref("VRPose")}} from the {{domxref("VRFrameData.pose")}} property, store the position and orientation for use later on, and send the current pose to the pose stats box for display, if the <code>poseStatsDisplayed</code> variable is set to true.</p>
+
+<pre class="brush: js">  // You can get the position, orientation, etc. of the display from the current frame's pose
+
+  var curFramePose = frameData.pose;
+  var curPos = curFramePose.position;
+  var curOrient = curFramePose.orientation;
+  if(poseStatsDisplayed) {
+    displayPoseStats(curFramePose);
+  }</pre>
+
+<p>  We now clear the canvas before we start drawing on it, so that the next frame is clearly seen, and we don't also see previous rendered frames:</p>
+
+<pre class="brush: js">  // Clear the canvas before we start drawing on it.
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);</pre>
+
+<p>We now render the view for both the left and right eyes. First of all we need to create projection and view locations for use in the rendering. these are {{domxref("WebGLUniformLocation")}} objects, created using the {{domxref("WebGLRenderingContext.getUniformLocation()")}} method, passing it the shader program's identifier and an identifying name as parameters.</p>
+
+<pre class="brush: js">  // WebVR: Create the required projection and view matrix locations needed
+  // for passing into the uniformMatrix4fv methods below
+
+  var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
+  var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");</pre>
+
+<p>The next rendering step involves:</p>
+
+<ul>
+ <li>Specifying the viewport size for the left eye, using {{domxref("WebGLRenderingContext.viewport")}} — this is logically the first half of the canvas width, and the full canvas height.</li>
+ <li>Specifying the view and projection matrix values to use to render the left eye — this is done using the {{domxref("WebGLRenderingContext.uniformMatrix", "WebGLRenderingContext.uniformMatrix4fv")}} method, which is passed the location values we retrieved above, and the left matrices obtained from the {{domxref("VRFrameData")}} object.</li>
+ <li>Running the <code>drawGeometry()</code> function, which renders the actual scene — because of what we specified in the previous two steps, we will render it for the left eye only.</li>
+</ul>
+
+<pre class="brush: js">  // WebVR: Render the left eye’s view to the left half of the canvas
+  gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
+  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
+  drawGeometry();</pre>
+
+<p>We now do exactly the same thing, but for the right eye:</p>
+
+<pre class="brush: js">  // WebVR: Render the right eye’s view to the right half of the canvas
+  gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
+  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
+  drawGeometry();</pre>
+
+<p>Next we define our <code>drawGeometry()</code> function. Most of this is just general WebGL code required to draw our 3D cube. You'll see some WebVR-specific parts in the <code>mvTranslate()</code> and <code>mvRotate()</code> function calls — these pass matrices into the WebGL program that define the translation and rotation of the cube for the current frame</p>
+
+<p>You'll see that we are modifying these values by the position (<code>curPos</code>) and orientation (<code>curOrient</code>) of the VR display we got from the {{domxref("VRPose")}} object. The result is that, for example, as you move or rotate your head left, the x position value (<code>curPos[0]</code>) and y rotation value (<code>[curOrient[1]</code>) are added to the x translation value, meaning that the cube will move to the right, as you'd expect when you are looking at something and then move/turn your head left.</p>
+
+<p>This is a quick and dirty way to use VR pose data, but it illustrates the basic principle.</p>
+
+<pre class="brush: js">  function drawGeometry() {
+    // Establish the perspective with which we want to view the
+    // scene. Our field of view is 45 degrees, with a width/height
+    // ratio of 640:480, and we only want to see objects between 0.1 units
+    // and 100 units away from the camera.
+
+    perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+    // Set the drawing position to the "identity" point, which is
+    // the center of the scene.
+
+    loadIdentity();
+
+    // Now move the drawing position a bit to where we want to start
+    // drawing the cube.
+
+    mvTranslate([
+                  0.0 - (curPos[0] * 25) + (curOrient[1] * 25),
+                  5.0 - (curPos[1] * 25) - (curOrient[0] * 25),
+                  -15.0 - (curPos[2] * 25)
+               ]);
+
+    // Save the current matrix, then rotate before we draw.
+
+    mvPushMatrix();
+    mvRotate(cubeRotation, [0.25, 0, 0.25 - curOrient[2] * 0.5]);
+
+    // Draw the cube by binding the array buffer to the cube's vertices
+    // array, setting attributes, and pushing it to GL.
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
+    gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+
+    // Set the texture coordinates attribute for the vertices.
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+    gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
+
+    // Specify the texture to map onto the faces.
+
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+    gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
+
+    // Draw the cube.
+
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+    setMatrixUniforms();
+    gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+
+    // Restore the original matrix
+
+    mvPopMatrix();
+  }
+</pre>
+
+<p>The next bit of the code has nothing to do with WebVR — it just updates the rotation of the cube on each frame:</p>
+
+<pre class="brush: js">  // Update the rotation for the next draw, if it's time to do so.
+
+  var currentTime = (new Date).getTime();
+  if (lastCubeUpdateTime) {
+    var delta = currentTime - lastCubeUpdateTime;
+
+    cubeRotation += (30 * delta) / 1000.0;
+  }
+
+  lastCubeUpdateTime = currentTime;</pre>
+
+<p>The last part of the rendering loop involves us calling {{domxref("VRDisplay.submitFrame()")}} — now all the work has been done and we've rendered the display on the {{htmlelement("canvas")}}, this method then submits the frame to the VR display so it is displayed on there as well.</p>
+
+<pre class="brush: js">  // WebVR: Indicate that we are ready to present the rendered frame to the VR display
+  vrDisplay.submitFrame();
+}</pre>
+
+<h3 id="Displaying_the_pose_position_orientation_etc._data">Displaying the pose (position, orientation, etc.) data</h3>
+
+<p>In this section we'll discuss the <code>displayPoseStats()</code> function, which displays our updated pose data on each frame. The function is fairly simple.</p>
+
+<p>First of all, we store the six different property values obtainable from the {{domxref("VRPose")}} object in their own variables — each one is a {{domxref("Float32Array")}}.</p>
+
+<pre class="brush: js">function displayPoseStats(pose) {
+  var pos = pose.position;
+  var orient = pose.orientation;
+  var linVel = pose.linearVelocity;
+  var linAcc = pose.linearAcceleration;
+  var angVel = pose.angularVelocity;
+  var angAcc = pose.angularAcceleration;</pre>
+
+<p>We then write out the data into the information box, updating it on every frame. We've clamped each value to three decimal places using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed">toFixed()</a></code>, as the values are hard to read otherwise.</p>
+
+<p>You should note that we've used a conditional expression to detect whether the linear acceleration and angular acceleration arrays are successfully returned before we display the data. These values are not reported by most VR hardware as yet, so the code would throw an error if we did not do this (the arrays return <code>null</code> if they are not successfully reported).</p>
+
+<pre class="brush: js">  posStats.textContent = 'Position: x ' + pos[0].toFixed(3) + ', y ' + pos[1].toFixed(3) + ', z ' + pos[2].toFixed(3);
+  orientStats.textContent = 'Orientation: x ' + orient[0].toFixed(3) + ', y ' + orient[1].toFixed(3) + ', z ' + orient[2].toFixed(3);
+  linVelStats.textContent = 'Linear velocity: x ' + linVel[0].toFixed(3) + ', y ' + linVel[1].toFixed(3) + ', z ' + linVel[2].toFixed(3);
+  angVelStats.textContent = 'Angular velocity: x ' + angVel[0].toFixed(3) + ', y ' + angVel[1].toFixed(3) + ', z ' + angVel[2].toFixed(3);
+
+  if(linAcc) {
+    linAccStats.textContent = 'Linear acceleration: x ' + linAcc[0].toFixed(3) + ', y ' + linAcc[1].toFixed(3) + ', z ' + linAcc[2].toFixed(3);
+  } else {
+    linAccStats.textContent = 'Linear acceleration not reported';
+  }
+
+  if(angAcc) {
+    angAccStats.textContent = 'Angular acceleration: x ' + angAcc[0].toFixed(3) + ', y ' + angAcc[1].toFixed(3) + ', z ' + angAcc[2].toFixed(3);
+  } else {
+    angAccStats.textContent = 'Angular acceleration not reported';
+  }
+}</pre>
+
+<h2 id="WebVR_events">WebVR events</h2>
+
+<p>The WebVR spec features a number of events that are fired, allowing our app code to react to changes in the state of the VR display (see <a href="/en-US/docs/Web/API/WebVR_API#Window_events">Window events</a>). For example:</p>
+
+<ul>
+ <li>{{event("vrdisplaypresentchange")}} — Fires when the presenting state of a VR display changes — i.e. goes from presenting to not presenting, or vice versa.</li>
+ <li>{{event("vrdisplayconnect")}} — Fires when a compatible VR display has been connected to the computer.</li>
+ <li>{{event("vrdisplaydisconnect")}} — Fires when a compatible VR display has been disconnected from the computer.</li>
+</ul>
+
+<p>To demonstrate how they work, our simple demo includes the following example:</p>
+
+<pre class="brush: js">window.addEventListener('vrdisplaypresentchange', function(e) {
+  console.log('Display ' + e.display.displayId + ' presentation has changed. Reason given: ' + e.reason + '.');
+});</pre>
+
+<p>As you can see, the {{domxref("VRDisplayEvent", "event object")}} provides two useful properties — {{domxref("VRDisplayEvent.display")}}, which contains a reference to the {{domxref("VRDisplay")}} the event was fired in response to, and {{domxref("VRDisplayEvent.reason")}}, which contains a human-readable reason why the event was fired.</p>
+
+<p>This is a very useful event; you could use it to handle cases where the display gets disconnected unexpectedly, stopping errors from being thrown and making sure the user is aware of the situation. In Google's Webvr.info presentation demo, the event is used to run an <a href="https://github.com/toji/webvr.info/blob/master/samples/03-vr-presentation.html#L174"><code>onVRPresentChange()</code> function</a>, which updates the UI controls as appropriate and resizes the canvas.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This article has given you the very basics of how to create a simple WebVR 1.1 app, to help you get started.</p>
diff --git a/files/pt-br/web/api/window/alert/index.html b/files/pt-br/web/api/window/alert/index.html
new file mode 100644
index 0000000000..028eba5e6c
--- /dev/null
+++ b/files/pt-br/web/api/window/alert/index.html
@@ -0,0 +1,47 @@
+---
+title: Window.alert
+slug: Web/API/Window/alert
+translation_of: Web/API/Window/alert
+---
+<p>{{ APIRef }}</p>
+
+<p>O método <strong><code>Window.alert()</code></strong> mostra uma caixa de diálogo de aviso com o conteúdo opcionalmente especificado e um botão OK.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">window.alert(<em>message</em>);</pre>
+
+<ul>
+ <li><code>message</code> é uma string opcional com o texto que você quer exibir na caixa de diálogo, ou, ainda, um objeto a ser convertido em string e exibido.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush: js">window.alert("Hello world!");
+</pre>
+
+<p>resulta em:</p>
+
+<p><img alt="Image:AlertHelloWorld.png" src="/files/130/AlertHelloWorld.png"></p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>A caixa de diálogo de aviso deve ser utilizada para mensagens que não requeiram nenhuma resposta da parte do usuário, a não ser o reconhecimento da mensagem.</p>
+
+<p><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.confirm</span>Caixas de diálogo são janelas modais - elas evitam que o usuário acesse o resto da interface do programa sem ter fechado a caixa de diálogo. Por essa razão, você não deve utilizar excessivamente nenhuma função que crie caixas de diálogo (ou janelas modais).</p>
+
+<p>Usuários do Chrome (por exemplo, em extensões) devem utilizar os métodos da interface {{interface("nsIPromptService")}} como alternativa.</p>
+
+<p>{{gecko_minversion_inline("23.0")}} O argumento agora é opcional conforme exigido na especificação.</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<p>Especificado no HTML5.</p>
+
+<h2 id="See_also" name="See_also">Ver também</h2>
+
+<ul>
+ <li>{{domxref("window.confirm","confirm")}}</li>
+ <li>{{domxref("window.prompt","prompt")}}</li>
+ <li>Para o <a href="/en-US/docs/Chrome" title="/en-US/docs/Chrome">Mozilla Chrome</a>, veja {{ifmethod("nsIPromptService","alert")}} e {{ifmethod("nsIPromptService","alertCheck")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/window/applicationcache/index.html b/files/pt-br/web/api/window/applicationcache/index.html
new file mode 100644
index 0000000000..d4210a0543
--- /dev/null
+++ b/files/pt-br/web/api/window/applicationcache/index.html
@@ -0,0 +1,33 @@
+---
+title: Window.applicationCache
+slug: Web/API/Window/applicationCache
+translation_of: Web/API/Window/applicationCache
+---
+<p>{{APIRef}}</p>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>Returna uma referência para o objeto de cache da janela.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>cache</var> = window.applicationCache
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parâmetros</h3>
+
+<ul>
+ <li><code>cache</code> é uma referência de objeto para {{domxref("OfflineResourceList")}}.</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li>{{spec("http://www.w3.org/TR/2008/WD-html5-20080122/#appcache","HTML 5","WD")}}</li>
+</ul>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Using_the_application_cache">Usando cache de aplicação</a></li>
+</ul>
diff --git a/files/pt-br/web/api/window/closed/index.html b/files/pt-br/web/api/window/closed/index.html
new file mode 100644
index 0000000000..a7f65aff5f
--- /dev/null
+++ b/files/pt-br/web/api/window/closed/index.html
@@ -0,0 +1,59 @@
+---
+title: Window.closed
+slug: Web/API/Window/closed
+translation_of: Web/API/Window/closed
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>Essa propriedade (read-only) indica se a janela referenciada está ou não fechada.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>isClosed</var> = <var>windowRef</var>.closed;
+</pre>
+
+<dl>
+ <dt><code>isClosed</code></dt>
+ <dd>Um booleano. Valores possíveis:
+ <ul>
+  <li><code>true</code>: A janela foi fechada.</li>
+  <li><code>false</code>: A janela está aberta.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Mudar_a_URL_de_uma_janela_a_partir_de_um_popup">Mudar a URL de uma janela a partir de um popup</h3>
+
+<p>O seguinte exemplo demonstra com uma janela de popup pode alterar a URL da janela que abriu ela. Antes de tentarmos mudar a URL da janela que a abriu, verificamos se a janela atual tem uma janela pai que a abriu usando a propriedade <a href="/en-US/docs/DOM/window.opener">window.opener</a> e que esta não está fechada:</p>
+
+<pre class="brush:js">// Verifique se o opener existe e não está fechado
+if (window.opener &amp;&amp; !window.opener.closed) {
+  window.opener.location.href = "http://www.mozilla.org";
+}</pre>
+
+<p>Note que popups podem somente acessar a janela que os abriu.</p>
+
+<h3 id="Atualizando_um_popup_anteriormente_aberto">Atualizando um popup anteriormente aberto</h3>
+
+<p>Neste exemplo, a função <code>refreshPopupWindow()</code> chama o método <code>reload</code> do objeto <code>location</code> do popup para atualizar seus dados. Se o popup não foi aberto ainda ou o usuário o fechou,  uma nova janela é aberta.</p>
+
+<pre class="brush:js">var popupWindow = null;
+
+function refreshPopupWindow() {
+  if (popupWindow &amp;&amp; !popupWindow.closed) {
+    // popupWindow está aberto, atualize-o
+    popupWindow.location.reload(true);
+  } else {
+    // Abra uma nova janela de popup
+    popupWindow = window.open("popup.html","dataWindow");
+  }
+}
+</pre>
+
+<h2 id="Especificação">Especificação</h2>
+
+<p>HTML5</p>
diff --git a/files/pt-br/web/api/window/confirm/index.html b/files/pt-br/web/api/window/confirm/index.html
new file mode 100644
index 0000000000..e3ced2de5a
--- /dev/null
+++ b/files/pt-br/web/api/window/confirm/index.html
@@ -0,0 +1,49 @@
+---
+title: Window.confirm()
+slug: Web/API/Window/confirm
+translation_of: Web/API/Window/confirm
+---
+<div>{{ApiRef("Window")}}</div>
+
+<p>O método <code><strong>Window.confirm()</strong></code> mostra uma janela modal com uma mensagem opcional e dois botões, OK e Cancelar.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre><em>result</em>ado = window.confirm(<em>mensagem</em>);
+</pre>
+
+<ul>
+ <li><code>mensagem</code> é a string opcional que será mostrada no diálogo.</li>
+ <li><code>resultado</code> é um booleano indicando se OK ou cancelar foram selecionados (<code>true</code> indicará OK).</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre>if (window.confirm("Você realmente quer sair?")) {
+  window.open("sair.html", "Obrigado pela visita!");
+}
+</pre>
+
+<p>Produzirá:</p>
+
+<p><img alt="firefox confirm" src="https://mdn.mozillademos.org/files/7163/firefoxcomfirmdialog_zpsf00ec381.png" style="height: 119px; width: 354px;"><br>
+  </p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.alert</span> Caixas de diálogo são janelas modais - elas previnem o usuário de acessar o resto da interface da aplicação enquanto a caixa de diálogo não for fechada. Por esta razão, você não deve usar abusivamente nenhuma função que crie uma caixa de diálogo (ou uma janela modal). E independente disso, existem boas razões para <a href="http://alistapart.com/article/neveruseawarning">evitar o uso de caixas de diálogo para confirmações. </a></p>
+
+<p>Usuários do <a href="/en-US/Chrome" title="Chrome">Mozilla Chrome</a> (Ex.: Extensões do Firefox) devem utilizar métodos de {{interface("nsIPromptService")}}.</p>
+
+<p>{{gecko_minversion_inline("23.0")}}O argumento é opcional e não é requerido por especificações.</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<p>Especificado em HTML5.</p>
+
+<h2 id="See_also" name="See_also">Veja Também</h2>
+
+<ul>
+ <li>{{domxref("window.alert","alert")}}</li>
+ <li>{{domxref("window.prompt","prompt")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/window/crypto/index.html b/files/pt-br/web/api/window/crypto/index.html
new file mode 100644
index 0000000000..d303c9dd74
--- /dev/null
+++ b/files/pt-br/web/api/window/crypto/index.html
@@ -0,0 +1,128 @@
+---
+title: Window.crypto
+slug: Web/API/Window/crypto
+tags:
+  - API
+  - HTML DOM
+  - Janela
+  - NeedsCompatTable
+  - Propriedade
+  - Referencia
+  - Window
+translation_of: Web/API/Window/crypto
+---
+<div>{{APIRef}}</div>
+
+<p>{{domxref("Window.crypto")}} propriedade somente de leitura, devolve um objeto do tipo {{domxref("Crypto")}} associado ao objeto global. Este objeto permite que páginas da web utilizem recursos de criptografia.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>cryptoObj</em> = window.crypto || window.msCrypto; // for IE 11
+</pre>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<h4 id="Usando_a_propriedade_domxref(Window.crypto)_para_acessar_o_método_getRandomValues().">Usando a propriedade {{domxref("Window.crypto")}}  para acessar o método getRandomValues().</h4>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">genRandomNumbers = function getRandomNumbers() {
+  var array = new Uint32Array(10);
+  window.crypto.getRandomValues(array);
+
+  var randText = document.getElementById("myRandText");
+  randText.innerHTML = "The random numbers are: "
+  for (var i = 0; i &lt; array.length; i++) {
+    randText.innerHTML += array[i] + " ";
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="myRandText"&gt;The random numbers are: &lt;/p&gt;
+&lt;button type="button" onClick='genRandomNumbers()'&gt;Generate 10 random numbers&lt;/button&gt;</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Crypto API", "#dfn-GlobalCrypto", "Window.crypto")}}</td>
+   <td>{{Spec2("Web Crypto API")}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>44 {{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11 {{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>Característica</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</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>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>O objeto global {{domxref("Window")}} </li>
+</ul>
diff --git a/files/pt-br/web/api/window/document/index.html b/files/pt-br/web/api/window/document/index.html
new file mode 100644
index 0000000000..f7cfc4d860
--- /dev/null
+++ b/files/pt-br/web/api/window/document/index.html
@@ -0,0 +1,56 @@
+---
+title: Window.document
+slug: Web/API/Window/document
+tags:
+  - API
+  - DOM HTML
+  - NeedsCompatTable
+  - NeedsExample
+  - NeedsMarkupWork
+  - NeedsSpecTable
+  - Propriedade
+  - Referencia
+  - Window
+translation_of: Web/API/Window/document
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Resumo</h2>
+
+<p>Retorna a referência para o documento contido na janela.</p>
+
+<div class="note"><strong>Nota:</strong> {{Fx_minversion_inline(3)}} Firefox 3 altera a segurança para documentos de uma janela de modo que apenas o domínio a partir do qual foi localizado possa acessar o documento. Enquanto isso pode quebrar alguns sites existentes, é um movimento feito por ambos Firefox 3 e Internet Explorer 7, e resulta na melhoria de segurança.</div>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>doc</var> = window.document
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parâmetros</h3>
+
+<ul>
+ <li><code>doc</code> é um objeto referência de um objeto para um <a href="/en-US/docs/DOM/document" title="DOM/document">document</a>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+   &lt;title&gt;Hello, World!&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;script type="text/javascript"&gt;
+   var doc = window.document;
+   alert( doc.title);    // alerts: Hello, World!
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/html/#the-window-object" title="http://www.whatwg.org/html/#the-window-object">HTML</a></li>
+</ul>
diff --git a/files/pt-br/web/api/window/event/index.html b/files/pt-br/web/api/window/event/index.html
new file mode 100644
index 0000000000..49452c20de
--- /dev/null
+++ b/files/pt-br/web/api/window/event/index.html
@@ -0,0 +1,72 @@
+---
+title: Window.event
+slug: Web/API/Window/event
+translation_of: Web/API/Window/event
+---
+<p>{{APIRef}}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<p><strong><code>window.event</code></strong> é uma propriedade proprietária do Microsoft Internet Explorer que só está disponível enquanto um manipulador de eventos DOM é chamado. Seu valor é o objeto Event atualmente tratado.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<p>Não é parte de nenhuma especificação.</p>
+
+<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms535863(v=vs.85).aspx">tem uma descrição na MSDN</a>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade de navegadores</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</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>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Event.srcElement")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/window/fullscreen/index.html b/files/pt-br/web/api/window/fullscreen/index.html
new file mode 100644
index 0000000000..666b763bf5
--- /dev/null
+++ b/files/pt-br/web/api/window/fullscreen/index.html
@@ -0,0 +1,44 @@
+---
+title: Window.fullScreen
+slug: Web/API/Window/fullScreen
+translation_of: Web/API/Window/fullScreen
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>Esta propriedade indica se a janela está sendo exibida em modo de tela cheia ("<em>full screen</em>") ou não. Ela é confiável apenas no Gecko 1.9 (Firefox 3) e posteriores, veja as  Notas abaixo.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>isInFullScreen</var> = <var>windowRef</var>.fullScreen;
+</pre>
+
+<p>Com "<em>chrome privileges</em>" (privilégios para acesso a funções de baixo nível), a propriedade é de leitura e escrita, caso contrário é de apenas leitura. Tenha em mente que se você tentar definir esta propriedade sem <em>chrome privileges</em>, isto não irá gerar uma excessão; ao invés disto, irá simples e silenciosamente falhar. Isto é para prevenir que <em>scripts</em> projetados para definir esta propriedade no Internet Explorer se quebrem.</p>
+
+<h2 id="Return_Value" name="Return_Value">Valor de Retorno</h2>
+
+<dl>
+ <dt><code>isInFullScreen</code></dt>
+ <dd>Um booleano. Valores possíveis:</dd>
+</dl>
+
+<ul>
+ <li><code>true</code>: A janela está em modo de tela cheia.</li>
+ <li><code>false</code>: A janela não está em modo de tela cheia.</li>
+</ul>
+
+<h2 id="Examples" name="Examples">Exemplos</h2>
+
+<p>{{todo}}</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<p>DOM Level 0. <code>window.fullScreen</code> não é parte de nenhuma especificação do W3C ou recomendação técnica.</p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<ul>
+ <li>Esta propriedade só é confiável no Mozilla 1.9 (Firefox 3) e posteriores. Mozilla 1.8 e anteriores têm esta propriedade, mas sempre retorna <code>false</code>, mesmo quando a janela está em modo de tela cheia ({{Bug("127013")}}).</li>
+ <li>Alternar entre a janela normal e tela cheia irá disparar o evento "resize" na janela correspondente.</li>
+</ul>
diff --git a/files/pt-br/web/api/window/getselection/index.html b/files/pt-br/web/api/window/getselection/index.html
new file mode 100644
index 0000000000..7afcb23ef6
--- /dev/null
+++ b/files/pt-br/web/api/window/getselection/index.html
@@ -0,0 +1,129 @@
+---
+title: Window.getSelection()
+slug: Web/API/Window/getSelection
+translation_of: Web/API/Window/getSelection
+---
+<div>{{ ApiRef() }}</div>
+
+<h2 id="Summary" name="Summary">Resumo</h2>
+
+<p>Retorna um objeto {{domxref("Selection")}} representando a parte do texto selecionada pelo usuário ou a posição atual do cursor.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>selection</em> = <em>window</em>.getSelection();</pre>
+
+<ul>
+ <li><code>selection</code> é um objeto {{domxref("Selection")}}. Quando convertido para string, seja adicionando uma string vazia (" ") ou usando {{jsxref("String.toString()")}}, esse objeto retorna o texto selecionado.</li>
+</ul>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:js">function foo() {
+    var selObj = window.getSelection();
+    alert(selObj);
+    var selRange = selObj.getRangeAt(0);
+    // do stuff with the range
+}</pre>
+
+<h2 id="Notes" name="Notes">Nota</h2>
+
+<h3 id="Representação_do_objeto_Selection_em_String">Representação do objeto Selection em String</h3>
+
+<p>No  JavaScript, quando um objeto é passado para uma função que espera uma string (como {{ Domxref("window.alert()") }} ou {{ Domxref("document.write()") }}), o método {{jsxref("Object.toString", "toString()")}} do objeto é chamado e o valor retornado é passado para a função. Isso pode fazer com que o objeto pareça ser uma string quando usado com outras funções quando na verdade é um objeto com propriedades e métodos.</p>
+
+<p>No exemplo acima, <code>selObj.toString()</code> é chamado automaticamente quando é passado para {{domxref("window.alert()")}}. Contudo,  tentar usar propriedades ou métodos do objeto JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="JS/String">String</a> como <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length" title="JS/String.length">length</a></code> ou <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr" title="JS/String.substr">substr</a> diretamente no objeto</code> {{domxref("Selection")}} resultará em erro se o objeto não possuir essa propriedade ou método e pode retornar valores inesperados mesmo se os tiver. Para usar um objecto <code>Selection</code> como uma string, faça a chamada do seu método <code>toString()</code> diretamente:</p>
+
+<pre class="brush:js;gutter:false;">var selectedText = selObj.toString();</pre>
+
+<ul>
+ <li><code>selObj</code> é um objeto <code>Selection</code>.</li>
+ <li><code>selectedText</code> é uma string (Selected text).</li>
+</ul>
+
+<h3 id="Objectos_Relacionados">Objectos Relacionados</h3>
+
+<p>É útil também notar que você pode chamar {{domxref("Document.getSelection()")}},  que funciona de forma idêntica.</p>
+
+<p>Inputs HTML provêm APIs mais simples para se trabalhar com seleções (veja {{domxref("HTMLInputElement.setSelectionRange()")}}).</p>
+
+<p>Note a diferença entre <em>selection</em> e <em>focus</em>. {{domxref("Document.activeElement")}} retorna o elemento com foco.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML Editing", "#dom-window-getselection", "Window.getSelection()")}}</td>
+   <td>{{Spec2("HTML Editing")}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_dos_Browsers">Compatibilidade dos Browsers</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>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>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>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}</li>
+ <li>{{domxref("Range")}}</li>
+ <li>{{domxref("Document.getSelection()")}}</li>
+ <li>{{domxref("HTMLInputElement.setSelectionRange()")}}</li>
+ <li>{{domxref("Document.activeElement")}}, {{domxref("HTMLElement.focus()")}}, and {{domxref("HTMLElement.blur()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/window/history/index.html b/files/pt-br/web/api/window/history/index.html
new file mode 100644
index 0000000000..cc96ab5be5
--- /dev/null
+++ b/files/pt-br/web/api/window/history/index.html
@@ -0,0 +1,52 @@
+---
+title: Window.history
+slug: Web/API/Window/history
+translation_of: Web/API/Window/history
+---
+<p>{{ APIRef }}</p>
+
+<p>A propriedade só de leitura <strong>Window.history</strong> retorna uma referência ao objeto History, que fornece uma interface para manipular o histórico de sessão do navegador (páginas visitadas na guia ou quadro em que a página atual é carregada).</p>
+
+<p>Consulte <a href="https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history">Manipulação do histórico do navegador</a> para obter exemplos e detalhes. Em particular, esse artigo explica os recursos de segurança dos métodos pushState () e replaceState () que você deve conhecer antes de usá-los.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>var historyObj</em> = <em>window</em>.history;
+</pre>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush: js">History.back (); // equivalente ao clique no botão Voltar
+History.go (-1); // equivalente a history.back ();
+</pre>
+
+<h2 id="Notas"><strong>Notas</strong></h2>
+
+<p><br>
+ Para páginas de nível superior, você pode ver a lista de páginas no histórico da sessão, acessível através do objeto Histórico, nos menus suspensos do navegador ao lado dos botões para trás e para frente.</p>
+
+<p>Por motivos de segurança, o objeto Histórico não permite que o código não privilegiado acesse os URLs de outras páginas no histórico da sessão, mas permite que ele navegue pelo histórico da sessão.</p>
+
+<p>Não há nenhuma maneira de limpar o histórico da sessão ou desabilitar a navegação para trás / para frente do código não privilegiado. A solução disponível mais próxima é o método <a href="https://developer.mozilla.org/en/DOM/window.location#replace">location.replace ()</a>, que substitui o item atual do histórico da sessão pelo URL fornecido.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/pt-br/web/api/window/index.html b/files/pt-br/web/api/window/index.html
new file mode 100644
index 0000000000..45b7ce7759
--- /dev/null
+++ b/files/pt-br/web/api/window/index.html
@@ -0,0 +1,381 @@
+---
+title: Window
+slug: Web/API/Window
+translation_of: Web/API/Window
+---
+<p>{{APIRef}}</p>
+
+<p><span class="seoSummary">O objeto <code>window</code> representa uma janela que contém um elemento DOM; a propriedade <code>document</code> aponta para o <a href="/en-US/docs/DOM/document">documento DOM document</a> carregado naquela janela.</span> Uma janela para um dado documento pode ser obtido usando a propriedade {{Domxref("document.defaultView")}}.</p>
+
+<p>Esta seção provê uma breve referência a todos os métodos, propriedades e eventos disponíveis através do objeto DOM <code>window</code>. O objeto <code>window</code> implementa a interface <code>Window</code>, o qual herda da interface <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code>. Algumas funções globais, objeto de namespace, interfaces e construtores, apesar de não tipicamente associados ao objeto em questão, estão disponíveis e estão listados nas referências <a href="/en-US/docs/JavaScript/Reference">JavaScript Reference</a> e <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a>.</p>
+
+<p>Em um navegador com suporte a abas, como o Firefox, cada aba contém seu próprio objeto <code>window</code> (e, se você estiver escrevendo uma extensão, a janela do navegador é uma janela distinta também - veja <a href="/en-US/docs/Working_with_windows_in_chrome_code#Content_windows">Working with windows in chrome code</a> para mais informação). Isto é, o objeto <code>window não é compartilhado entre as abas na mesma janela. Alguns métodos, nomeadamente </code>{{Domxref("window.resizeTo")}} e {{Domxref("window.resizeBy")}} aplicam-se à janela toda e não à aba em questão ao que o objeto <code>window</code> pertence. Geralmente, qualquer coisa que não pode racionalmente pertencer a uma aba, pertence a uma janela..</p>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>Esta interface herda propriedades da interface {{domxref("EventTarget")}} e implementa propriedades de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, e {{domxref("WindowEventHandlers")}}.</em></p>
+
+<p>Perceba que propriedades que são objetos (ex.: sobrecarregar o protótipo de elementos built-in) são listados em uma sessão separada abaixo.</p>
+
+<dl>
+ <dt>{{domxref("Window.applicationCache")}}  {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>Um objeto {{domxref("OfflineResourceList")}} fornece acesso aos recursos offline para o window.</dd>
+ <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt>
+ <dd>Esta propriedade indica quando a window atual está fechada ou não.</dd>
+ <dt><code><a href="/en-US/docs/Components_object">Window.Components</a></code> {{Non-standard_inline}}</dt>
+ <dd>O ponto de entrada para muitas características XPCOM. Algumas propriedades, por exemplo, classes, estão apenas disponíveis para código suficientemente privilegiado. Código de Web não deve usar essa propriedade.</dd>
+ <dt>{{domxref("console","Window.console")}} {{Non-standard_inline}} {{ReadOnlyInline}}</dt>
+ <dd>Retorna uma referência para o objeto console fornecendo acesso ao console debugging do navegador.</dd>
+ <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Retorna uma referência para o elemento de conteúdo na janela atual. A variante obsoleta com sublinhado não está disponível a partir do conteúdo da Web.</dd>
+ <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Retorna os objetos de controlador XUL para a janela atual do crome.</dd>
+ <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt>
+ <dd>Retorna o objeto de criptografia do navegador.</dd>
+ <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt>
+ <dd>Obtém/define o texto da barra de status para determinada janela.</dd>
+ <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd>
+ <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt>
+ <dd>Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.</dd>
+ <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt>
+ <dd>Synonym of {{domxref("window.personalbar")}}</dd>
+ <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt>
+ <dd>Retorna a referência à propriedade <code>document</code> que a janela contém.</dd>
+ <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt>
+ <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd>
+ <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt>
+ <dd>Returns an array of the subframes in the current window.</dd>
+ <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>This property indicates whether the window is displayed in full screen or not.</dd>
+ <dt>{{domxref("Window.globalStorage")}}<code> </code>{{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt>
+ <dd>Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.<br>
+ Was: Multiple storage objects that are used for storing data across multiple pages.</dd>
+ <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt>
+ <dd>Retorna a referência ao objeto <code>history</code>.</dd>
+ <dt>{{domxref("Window.innerHeight")}}</dt>
+ <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd>
+ <dt>{{domxref("window.innerWidth")}}</dt>
+ <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd>
+ <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd>
+ <dt>{{domxref("Window.location")}} {{ReadOnlyInline}}</dt>
+ <dd>Gets/sets the location, or current URL, of the window object.</dd>
+ <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("WindowStorage.localStorage")}}  {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd>
+ <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd>
+ <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}</dt>
+ <dd>The time in milliseconds since epoch at which the current animation cycle began.</dd>
+ <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd>
+ <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd>
+ <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd>
+ <dt>{{domxref("Window.name")}}</dt>
+ <dd>Pega/attribui o nome ao objeto <code>window</code>.</dd>
+ <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the navigator object.</dd>
+ <dt>{{domxref("Window.opener")}}</dt>
+ <dd>Returns a reference to the window that opened this current window.</dd>
+ <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt>
+ <dd>Gets the height of the outside of the browser window.</dd>
+ <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt>
+ <dd>Gets the width of the outside of the browser window.</dd>
+ <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt>
+ <dd>An alias for {{domxref("window.scrollX")}}.</dd>
+ <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt>
+ <dd>An alias for {{domxref("window.scrollY")}}</dd>
+ <dt>{{domxref("WindowSession.sessionStorage")}} {{readOnlyInline}}</dt>
+ <dd></dd>
+ <dt>{{domxref("SpeechSynthesisGetter.speechSynthesis")}} {{readOnlyInline}}</dt>
+ <dd></dd>
+ <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the parent of the current window or subframe.</dd>
+ <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt>
+ <dd>Provides a hosting area for <a href="/en-US/docs/Navigation_timing">performance related</a> attributes.</dd>
+ <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt>
+ <dd>Formerly provided access to install and remove PKCS11 modules.</dd>
+ <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd>
+ <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the screen object associated with the window.</dd>
+ <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt>
+ <dd>Returns the horizontal distance of the left border of the user's browser from the left side of the screen.</dd>
+ <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt>
+ <dd>Returns the vertical distance of the top border of the user's browser from the top side of the screen.</dd>
+ <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt>
+ <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd>
+ <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd>
+ <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd>
+ <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd>
+ <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns an object reference to the window object itself.</dd>
+ <dt>{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}</dt>
+ <dd>A storage object for storing data within a single page session.</dd>
+ <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the window object of the sidebar.</dd>
+ <dt>{{domxref("Window.status")}}</dt>
+ <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd>
+ <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd>
+ <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the current window.</dd>
+ <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt>
+ <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Register an event handler to a specific event type on the window.</dd>
+ <dt>{{domxref("Window.alert()")}}</dt>
+ <dd>Displays an alert dialog.</dd>
+ <dt>{{domxref("WindowBase64.atob()")}}</dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Moves back one in the window history.</dd>
+ <dt>{{domxref("Window.blur()")}}</dt>
+ <dd>Sets focus away from the window.</dd>
+ <dt>{{domxref("WindowBase64.btoa()")}}</dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+ <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>Registers the window to capture all events of the specified type.</dd>
+ <dt>{{domxref("Window.clearImmediate()")}}</dt>
+ <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd>
+ <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd>
+ <dt>{{domxref("Window.close()")}}</dt>
+ <dd>Closes the current window.</dd>
+ <dt>{{domxref("Window.confirm()")}}</dt>
+ <dd>Displays a dialog with a message that the user needs to respond to.</dd>
+ <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.dispatchEvent()")}}</dt>
+ <dd>Used to trigger an event.</dd>
+ <dt>{{domxref("Window.dump()")}}</dt>
+ <dd>Writes a message to the console.</dd>
+ <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.find()")}}</dt>
+ <dd>Searches for a given string in a window.</dd>
+ <dt>{{domxref("Window.focus()")}}</dt>
+ <dd>Sets focus on the current window.</dd>
+ <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Moves the window one document forward in the history.</dd>
+ <dt>{{domxref("Window.getAttention()")}}</dt>
+ <dd>Flashes the application icon.</dd>
+ <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.getComputedStyle()")}}</dt>
+ <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd>
+ <dt>{{domxref("Window.getDefaulComputedStyle()")}}</dt>
+ <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd>
+ <dt>{{domxref("Window.getSelection()")}}</dt>
+ <dd>Returns the selection object representing the selected item(s).</dd>
+ <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns the browser to the home page.</dd>
+ <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd>
+ <dt>{{domxref("Window.maximize()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt>
+ <dd>Minimizes the window.</dd>
+ <dt>{{domxref("Window.moveBy()")}}</dt>
+ <dd>Moves the current window by a specified amount.</dd>
+ <dt>{{domxref("Window.moveTo()")}}</dt>
+ <dd>Moves the window to the specified coordinates.</dd>
+ <dt>{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. This will cause a <code>MozBeforePaint</code> event to fire before that repaint occurs.</dd>
+ <dt>{{domxref("Window.open()")}}</dt>
+ <dd>Opens a new window.</dd>
+ <dt>{{domxref("Window.openDialog()")}}</dt>
+ <dd>Opens a new dialog window.</dd>
+ <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first, in a secure manner.</dd>
+ <dt>{{domxref("Window.print()")}}</dt>
+ <dd>Opens the Print Dialog to print the current document.</dd>
+ <dt>{{domxref("Window.prompt()")}}</dt>
+ <dd>Returns the text entered by the user in a prompt dialog.</dd>
+ <dt>{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>Releases the window from trapping events of a specific type.</dd>
+ <dt>{{domxref("element.removeEventListener","Window.removeEventListener()")}}</dt>
+ <dd>Removes an event listener from the window.</dd>
+ <dt>{{domxref("Window.resizeBy()")}}</dt>
+ <dd>Resizes the current window by a certain amount.</dd>
+ <dt>{{domxref("Window.resizeTo()")}}</dt>
+ <dd>Dynamically resizes window.</dd>
+ <dt>{{domxref("Window.restore()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.scroll()")}}</dt>
+ <dd>Scrolls the window to a particular place in the document.</dd>
+ <dt>{{domxref("Window.scrollBy()")}}</dt>
+ <dd>Scrolls the document in the window by the given amount.</dd>
+ <dt>{{domxref("Window.scrollByLines()")}}</dt>
+ <dd>Scrolls the document by the given number of lines.</dd>
+ <dt>{{domxref("Window.scrollByPages()")}}</dt>
+ <dd>Scrolls the current document by the specified number of pages.</dd>
+ <dt>{{domxref("Window.scrollTo()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates in the document.</dd>
+ <dt>{{domxref("Window.setCursor()")}}</dt>
+ <dd>Changes the cursor for the current window</dd>
+ <dt>{{domxref("Window.setImmediate()")}}</dt>
+ <dd>Executes a function after the browser has finished other heavy tasks</dd>
+ <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
+ <dd>Schedules the execution of a function each X milliseconds.</dd>
+ <dt>{{domxref("Window.setResizable")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
+ <dd>Sets a delay for executing a function.</dd>
+ <dt>{{domxref("Window.showModalDialog()")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>Displays a modal dialog.</dd>
+ <dt>{{domxref("Window.sizeToContent()")}}</dt>
+ <dd>Sizes the window according to its content.</dd>
+ <dt>{{domxref("Window.stop()")}}</dt>
+ <dd>This method stops window loading.</dd>
+ <dt>{{domxref("Window.updateCommands()")}}</dt>
+ <dd>Updates the state of commands of the current chrome window (UI).</dd>
+</dl>
+
+<h2 id="Event_handlers">Event handlers</h2>
+
+<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p>
+
+<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p>
+
+<div class="note">
+<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>An event handler property for abort events on the window.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>An event handler property for before-unload events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>An event handler property for blur events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>An event handler property for change events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>An event handler property for click events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>An event handler property for handling the window close event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>An event handler property for right-click events on the window.</dd>
+ <dt>{{domxref("Window.ondevicelight")}}</dt>
+ <dd>An event handler property for any ambient light levels changes</dd>
+ <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>An event handler property for any device orientation changes</dd>
+ <dt>{{domxref("Window.ondeviceproximity")}}</dt>
+ <dd>An event handler property for device proximity event</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>An event handler property for {{event("error")}} events raised on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>An event handler property for {{event("focus")}} events on the window.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>An event handler property for hash change events on the window; called when the part of the URL after the hash mark ("#") changes.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>An event handler property for {{event("keydown")}} events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>An event handler property for {{event("keypress")}} events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>An event handler property for {{event("keyup")}} events on the window.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt>
+ <dd>An event handler property for {{event("languagechange")}} events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>An event handler property for window loading.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>An event handler property for mousedown events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>An event handler property for mousemove events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>An event handler property for mouseout events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>An event handler property for mouseover events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>An event handler property for mouseup events on the window.</dd>
+ <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>An event handler property for pageshow events on the window.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>An event handler property for pagehide events on the window.</dd>
+ <dt>{{domxref("Window.onpaint")}}</dt>
+ <dd>An event handler property for paint events on the window.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>An event handler property for popstate events, which are fired when navigating to a session history entry representing a state object.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>An event handler property for reset events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt>
+ <dd>An event handler property for window resizing.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>An event handler property for window scrolling.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>An event handler property for window selection.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>An event handler property for submits on window forms.</dd>
+ <dt>{{domxref("Window.onunload")}}</dt>
+ <dd>An event handler property for unload events on the window.</dd>
+ <dt>{{domxref("Window.onuserproximity")}}</dt>
+ <dd>An event handler property for user proximity events</dd>
+</dl>
+
+<h2 id="Constructors">Constructors</h2>
+
+<p>See also the <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p>
+
+<dl>
+ <dt>{{domxref("Window.DOMParser")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.GeckoActiveXObject")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Image")}}</dt>
+ <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd>
+ <dt>{{domxref("Option")}}</dt>
+ <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd>
+ <dt>{{domxref("Window.QueryInterface")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.XMLSerializer")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd>
+ <dt>{{domxref("Window.XPCNativeWrapper")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+</dl>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>See <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li>
+</ul>
diff --git a/files/pt-br/web/api/window/innerheight/index.html b/files/pt-br/web/api/window/innerheight/index.html
new file mode 100644
index 0000000000..5caf8ae916
--- /dev/null
+++ b/files/pt-br/web/api/window/innerheight/index.html
@@ -0,0 +1,137 @@
+---
+title: Window.innerHeight
+slug: Web/API/Window/innerHeight
+translation_of: Web/API/Window/innerHeight
+---
+<div>{{APIRef}}</div>
+
+<p>Altura (em pixels) da janela de visualização do navegador, incluindo, se renderizado, a barra de rolagem horizontal.</p>
+
+<div class="note"><strong>Note:</strong> If you use {{ifmethod("nsIDOMWindowUtils", "setCSSViewport")}} to set the virtual window size for page layout purposes, the value returned by this property corresponds to the viewport height set using that method.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <var>intViewportHeight</var> = window.innerHeight;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>On return, <code>intViewportHeight</code> is the height of the browser window's viewport.</p>
+
+<p>The <code>window.innerHeight</code> property is read only; it has no default value.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>The <code>innerHeight</code> property is supported in any window object like a {{domxref("window")}}, a frame, a frameset, or a secondary window.</p>
+
+<p>There is <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7">an algorithm</a> to obtain the height of the viewport excluding, if rendered, the horizontal scrollbar.</p>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="Assuming_a_frameset">Assuming a frameset</h3>
+
+<pre class="brush:js">var intFrameHeight = window.innerHeight; // or
+
+var intFrameHeight = self.innerHeight;
+// will return the height of the frame viewport within the frameset
+
+var intFramesetHeight = parent.innerHeight;
+// will return the height of the viewport of the closest frameset
+
+var intOuterFramesetHeight = top.innerHeight;
+// will return the height of the viewport of the outermost frameset
+</pre>
+
+<p>{{todo("link to an interactive demo here")}}</p>
+
+<p>To change the size of a window, see {{domxref("window.resizeBy()")}} and {{domxref("window.resizeTo()")}}.</p>
+
+<p>To get the outer height of a window, i.e. the height of the whole browser window, see {{domxref("window.outerHeight")}}.</p>
+
+<h3 id="Graphical_example">Graphical example</h3>
+
+<p>The following figure shows the difference between <code>outerHeight</code> and <code>innerHeight</code>.</p>
+
+<p><img alt="innerHeight vs outerHeight illustration" src="/@api/deki/files/213/=FirefoxInnerVsOuterHeight2.png"></p>
+
+<h2 id="Specification">Specification</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('CSSOM View', '#dom-window-innerheight', 'window.innerHeight')}}</td>
+   <td>{{Spec2('CSSOM View')}}</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</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}<sup>[1]</sup></td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</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 Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}<sup>[1]</sup></td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] From Firefox 4 to 24 this property was buggy and could give a wrong value before page load on certain circumstances, see {{bug(641188)}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("window.innerWidth")}}</li>
+ <li>{{domxref("window.outerHeight")}}</li>
+ <li>{{domxref("window.outerWidth")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/window/length/index.html b/files/pt-br/web/api/window/length/index.html
new file mode 100644
index 0000000000..b99fa5747a
--- /dev/null
+++ b/files/pt-br/web/api/window/length/index.html
@@ -0,0 +1,52 @@
+---
+title: Window.length
+slug: Web/API/Window/length
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Propriedade
+  - Referencia
+  - Referência do DOM
+  - Referência do DOM do Gecko
+  - WebAPI
+  - Window
+translation_of: Web/API/Window/length
+---
+<div>{{ ApiRef() }}</div>
+
+<h2 id="Summary" name="Summary">Resumo</h2>
+
+<p>Retorna o número de frames (tanto elementos <code>frame</code> ou <code>iframe</code>) dentro da janela.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>quantidadeFrames</em> = window.length;
+</pre>
+
+<ul>
+ <li><em>quantidadeFrames</em> é o número de frames.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:js">if (window.length) {
+  // este é um documento com subframes
+}</pre>
+
+<h2 id="Specification" name="Specification">Especificações</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','browsers.html#dom-length','Window.length')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/pt-br/web/api/window/location/index.html b/files/pt-br/web/api/window/location/index.html
new file mode 100644
index 0000000000..09198523b3
--- /dev/null
+++ b/files/pt-br/web/api/window/location/index.html
@@ -0,0 +1,272 @@
+---
+title: Window.location
+slug: Web/API/Window/location
+translation_of: Web/API/Window/location
+---
+<p>{{APIRef}}</p>
+
+<p>O <strong><code>Window.location </code></strong>é uma propriedade de leitura que retorna um objeto {{domxref("Location")}} com informações de localização do documento atual.<br>
+ <br>
+ Embora <code>Window.location </code>seja apenas um objeto de leitura de localização, você pode também atribuir uma {{domxref("DOMString")}} para ele. Isto significa que você pode trabalhar com <code>location </code>como se fosse uma string na maioria dos casos: <code>location = 'http://www.exemplo.com'</code> é um sinônimo de <code>location.href = 'http://www.exemplo.com'</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>oldLocation</em> = location;
+location = <em>newLocation</em>;
+</pre>
+
+<h2 id="Example" name="Example">Exemplos</h2>
+
+<h3 id="Exemplo_básico">Exemplo básico</h3>
+
+<pre class="brush: js">alert(location); // alerta "https://developer.mozilla.org/en-US/docs/Web/API/Window.location"</pre>
+
+<h3 id="Exemplo_1_Navegando_para_uma_nova_página">Exemplo #1: Navegando para uma nova página</h3>
+
+<p>Sempre que um novo valor é atribuído a um objeto de localização, um documento será carregado usando a URL como se <code>location.assign() </code>tivesse sido chamado com a URL modificada. <span id="result_box" lang="pt"><span class="hps">Observe que as configurações</span> <span class="hps">de segurança</span><span>, como</span> <span class="hps">CORS</span><span>,</span> <span class="hps">pode impedir</span> <span class="hps">que isso aconteça</span> <span class="hps">de forma eficaz.</span></span></p>
+
+<pre class="brush: js">location.assign("http://www.mozilla.org"); // ou
+location = "http://www.mozilla.org";
+</pre>
+
+<h3 id="Exemplo_2_Forçando_recerregamento_da_página_atual_do_servidor">Exemplo #2: Forçando recerregamento da página atual do servidor</h3>
+
+<pre class="brush: js">location.reload(true);</pre>
+
+<h3 id="Exemplo_3">Exemplo #3</h3>
+
+<p>Considere o exemplo a seguir, que vai recarregar a página usando o método <a href="/en-US/docs/Web/API/Location.replace"><code>replace() </code></a>para inserir o valor do <code>location.pathname </code>depois da hash:</p>
+
+<pre class="brush: js">function reloadPageWithHash() {
+  var initialPage = location.pathname;
+  location.replace('http://example.com/#' + initialPage);
+}
+</pre>
+
+<div class="note"><strong>Nota: </strong>O exemplo acima funciona em situações onde <code>location.hash</code> não precisa ser retida. Contudo, em navegadores baseados em Gecko, definindo <code>location.pathname</code> desta forma irá apagar qualquer informação em <code>location.hash</code>, enquanto que no WebKit(e possivelmente em outro navegador), definir o pathname não vai alterar  o hash. Se você precisa mudar o pathname mas manter o hash como é, use o <code>método replace(), </code><span id="result_box" lang="pt"><span class="hps">que deve funcionar</span> <span class="hps">de forma consistente</span> <span class="hps">em todos os navegadores</span><span>.</span></span></div>
+
+<h3 id="Exemplo_4_Mostrar_as_propriedades_da_URL_atual_em_um_alerta">Exemplo #4: Mostrar as propriedades da URL atual em um alerta:</h3>
+
+<pre class="brush: js">function showLoc() {
+  var oLocation = location, aLog = ["Property (Typeof): Value", "location (" + (typeof oLocation) + "): " + oLocation ];
+  for (var sProp in oLocation){
+    aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " +  (oLocation[sProp] || "n/a"));
+  }
+  alert(aLog.join("\n"));
+}
+
+// no html: &lt;button onclick="showLoc();"&gt;Mostrar propriedades de localização&lt;/button&gt;
+</pre>
+
+<h3 id="Exemplo_5_Enviando_uma_linha_de_dados_para_o_servidor_para_modificar_a_propriedade_search">Exemplo #5: Enviando uma linha de dados para o servidor para modificar a propriedade search:</h3>
+
+<pre class="brush: js">function sendData (sData) {
+  location.search = sData;
+}
+
+// no html: &lt;button onclick="sendData('Algum dado');"&gt;Enviar dados&lt;/button&gt;
+</pre>
+
+<p>A URL atual com "?Some%20data" anexada é enviada para o servidor (se nenhuma ação for captada pelo servidor, o documento atual é recarregado com o a linha de pesquisa modificada).</p>
+
+<h3 id="Exemplo_6_Usando_favoritos_sem_mudar_a_propriedade_hash">Exemplo #6: Usando favoritos sem mudar a propriedade <code>hash</code>:</h3>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"/&gt;
+&lt;title&gt;MDN Exemplo&lt;/title&gt;
+&lt;script&gt;
+function showNode (oNode) {
+  var nLeft = 0, nTop = 0;
+  for (var oItNode = oNode; oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);
+  document.documentElement.scrollTop = nTop;
+  document.documentElement.scrollLeft = nLeft;
+}
+
+function showBookmark (sBookmark, bUseHash) {
+  if (arguments.length === 1 || bUseHash) { location.hash = sBookmark; return; }
+  var oBookmark = document.querySelector(sBookmark);
+  if (oBookmark) { showNode(oBookmark); }
+}
+&lt;/script&gt;
+&lt;style&gt;
+span.intLink {
+    cursor: pointer;
+    color: #0000ff;
+    text-decoration: underline;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
+&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.&lt;/p&gt;
+&lt;p id="myBookmark1"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="showBookmark('#myBookmark2');"&gt;Go to bookmark #2&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;p&gt;Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.&lt;/p&gt;
+&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
+&lt;p&gt;Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/p&gt;
+&lt;p&gt;Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.&lt;/p&gt;
+&lt;p&gt;Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.&lt;/p&gt;
+&lt;p&gt;Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.&lt;/p&gt;
+&lt;p id="myBookmark2"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="showBookmark('#myBookmark1');"&gt;Go to bookmark #1&lt;/span&gt; | &lt;span class="intLink" onclick="showBookmark('#myBookmark1', false);"&gt;Go to bookmark #1 without using location.hash&lt;/span&gt; | &lt;span class="intLink" onclick="showBookmark('#myBookmark3');"&gt;Go to bookmark #3&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;p&gt;Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.&lt;/p&gt;
+&lt;p&gt;Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.&lt;/p&gt;
+&lt;p id="myBookmark3"&gt;&lt;em&gt;Here is the bookmark #3&lt;/em&gt;&lt;/p&gt;
+&lt;p&gt;Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.&lt;/p&gt;
+&lt;p&gt;Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.&lt;/p&gt;
+&lt;p&gt;Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.&lt;/p&gt;
+&lt;p&gt;Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.&lt;/p&gt;
+&lt;p&gt;Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.&lt;/p&gt;
+&lt;p&gt;Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.&lt;/p&gt;
+&lt;p&gt;Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.&lt;/p&gt;
+&lt;p&gt;Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.&lt;/p&gt;
+&lt;p&gt;Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.&lt;/p&gt;
+&lt;p&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<div class="note"><strong>Nota: </strong>A função <code>showNode</code> é também um exemplo de uso do ciclo<code> <a href="/en/JavaScript/Reference/Statements/for" title="en/JavaScript/Reference/Statements/for">for</a> sem uma section statement. </code>Neste  caso <strong>o ponto e vírgula é sempre colocado imediatamente depois da declaração do ciclo.</strong></div>
+
+<p>... a mesma coisa mas com uma animação de rolagem na página:</p>
+
+<pre class="brush: js">var showBookmark = (function () {
+  var  _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark,
+       /*
+       * nDuration: the duration in milliseconds of each frame
+       * nFrames: number of frames for each scroll
+       */
+       nDuration = 200, nFrames = 10;
+
+  function _next () {
+    if (_itFrame &gt; nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
+    _isBot = true;
+    document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames);
+    document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames);
+    if (_useHash &amp;&amp; _itFrame === nFrames) { location.hash = _bookMark; }
+    _itFrame++;
+  }
+
+  function _chkOwner () {
+    if (_isBot) { _isBot = false; return; }
+    if (_scrollId &gt; -1) { clearInterval(_scrollId); _scrollId = -1; }
+  }
+
+  if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); }
+  else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); }
+
+  return function (sBookmark, bUseHash) {
+    _scrollY = document.documentElement.scrollTop;
+    _scrollX = document.documentElement.scrollLeft;
+    _bookMark = sBookmark;
+    _useHash = arguments.length === 1 || bUseHash;
+    for (
+      var nLeft = 0, nTop = 0, oNode = document.querySelector(sBookmark);
+      oNode;
+      nLeft += oNode.offsetLeft, nTop += oNode.offsetTop, oNode = oNode.offsetParent
+    );
+    _nodeX = nLeft, _nodeY = nTop, _itFrame = 1;
+    if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); }
+  };
+})();
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estatus</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Window.location")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sem mudanças a partir de {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Window.location")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</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>
+  <tr>
+   <td><code>window.location.origin</code></td>
+   <td>30.0.1599.101 (possibly earlier)</td>
+   <td>{{CompatGeckoDesktop("21.0")}}</td>
+   <td>11<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>7 (possibly earlier, see webkit bug 46558)</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>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>window.location.origin</code></td>
+   <td>30.0.1599.101 (possibly earlier)</td>
+   <td>{{CompatGeckoMobile("21.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td><span style="font-size: 12px; line-height: 18px;">7 (possibly earlier, see webkit bug </span><span style="font-size: 12px; line-height: 18px;">46558)</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In Internet Explorer 11 on Windows 10 window.location.origin is undefined due to a bug, see <a href="https://connect.microsoft.com/IE/feedback/details/1763802/location-origin-is-undefined-in-ie-11-on-windows-10-but-works-on-windows-7">https://connect.microsoft.com/IE/feedback/details/1763802/location-origin-is-undefined-in-ie-11-on-windows-10-but-works-on-windows-7</a>.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>The interface of the returned value, {{domxref("Location")}}.</li>
+ <li>A similar information, but attached to the {{Glossary("browsing context")}}, {{domxref("Document.location")}}.</li>
+ <li><a href="/en/DOM/Manipulating_the_browser_history" title="en/DOM/Manipulating the browser history">Manipulating the browser history</a></li>
+ <li><a href="/en-US/docs/DOM/Mozilla_event_reference/hashchange" title="/en-US/docs/DOM/Mozilla_event_reference/hashchange">hashchange</a></li>
+</ul>
diff --git a/files/pt-br/web/api/window/matchmedia/index.html b/files/pt-br/web/api/window/matchmedia/index.html
new file mode 100644
index 0000000000..a6497ded0a
--- /dev/null
+++ b/files/pt-br/web/api/window/matchmedia/index.html
@@ -0,0 +1,106 @@
+---
+title: Window.matchMedia()
+slug: Web/API/Window/matchMedia
+translation_of: Web/API/Window/matchMedia
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Resumo</h2>
+
+<p>Retorna um novo objeto {{domxref("MediaQueryList")}} representando o resultado analisado da string <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media query</a> especificada.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>mql</em> = window.matchMedia(<em>mediaQueryString</em>)</pre>
+
+<p>onde <code>mediaQueryString</code> é uma string representando a media query para o qual retorna um novo objeto {{domxref("MediaQueryList")}}.</p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush: js">if (window.matchMedia("(min-width: 400px)").matches) {
+  /* a viewport tem pelo menos 400 pixels de largura */
+} else {
+  /* a viewport menos que 400 pixels de largura */
+}</pre>
+
+<p>Este código permite-lhe lidar com as coisas de forma diferente quando a janela é muito estreita.</p>
+
+<p>Veja <a href="/en-US/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">Usando media queries a partir do código</a> para mais exemplos.</p>
+
+<h2 id="Specifications" name="Specifications">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-window-matchmedia", "Window.matchMedia()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade do navegador</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="See_also" name="See_also">Veja também</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">Usando media queries a partir do código</a></li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("MediaQueryListListener")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/window/navigator/index.html b/files/pt-br/web/api/window/navigator/index.html
new file mode 100644
index 0000000000..c73ebe3f36
--- /dev/null
+++ b/files/pt-br/web/api/window/navigator/index.html
@@ -0,0 +1,54 @@
+---
+title: Window.navigator
+slug: Web/API/Window/navigator
+tags:
+  - API
+  - Propriedade
+  - Referencia
+  - Somente-leitura
+  - Window
+translation_of: Web/API/Window/navigator
+---
+<div>
+ {{APIRef}}</div>
+<p>A propriedade somente leitura <code>Window.navigator</code> retorna uma referência para o objeto {{domxref("Navigator")}}, que pode ser consultada para obter informações sobre a aplicação executando o script.</p>
+<h2 id="Example" name="Example">Sintaxe</h2>
+<pre class="syntaxbox"><em>navigatorObject<code> = window.navigator</code></em></pre>
+<h2 id="Specification" name="Specification">Exemplos</h2>
+<h3 id="Exemplo_1_Detecta_o_navegador_e_retorna_uma_string">Exemplo #1: Detecta o navegador e retorna uma string</h3>
+<pre class="brush: js">var sBrowser, sUsrAg = navigator.userAgent;
+
+if(sUsrAg.indexOf("Chrome") &gt; -1) {
+    sBrowser = "Google Chrome";
+} else if (sUsrAg.indexOf("Safari") &gt; -1) {
+    sBrowser = "Apple Safari";
+} else if (sUsrAg.indexOf("Opera") &gt; -1) {
+    sBrowser = "Opera";
+} else if (sUsrAg.indexOf("Firefox") &gt; -1) {
+    sBrowser = "Mozilla Firefox";
+} else if (sUsrAg.indexOf("MSIE") &gt; -1) {
+    sBrowser = "Microsoft Internet Explorer";
+}
+
+alert("Você está utilizando: " + sBrowser);</pre>
+<h3 id="Exemplo_2_Detecta_o_navegador_e_retorna_um_índice">Exemplo #2: Detecta o navegador e retorna um índice</h3>
+<pre class="brush: js">function getBrowserId () {
+
+    var
+        aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera"],
+        sUsrAg = navigator.userAgent, nIdx = aKeys.length - 1;
+
+    for (nIdx; nIdx &gt; -1 &amp;&amp; sUsrAg.indexOf(aKeys[nIdx]) === -1; nIdx--);
+
+    return nIdx
+
+}
+
+console.log(getBrowserId());</pre>
+<h2 id="Specification" name="Specification">Especificação</h2>
+<ul>
+ <li>{{SpecName("HTML5 W3C", "webappapis.html#the-navigator-object","window.navigator")}}</li>
+ <li>{{SpecName("HTML5.1", "webappapis.html#the-navigator-object", "window.navigator")}}</li>
+ <li>{{SpecName("HTML WHATWG", "timers.html#the-navigator-object", "window.navigator")}}</li>
+</ul>
+<h2 id="See_also" name="See_also">Veja também</h2>
diff --git a/files/pt-br/web/api/window/ondevicelight/index.html b/files/pt-br/web/api/window/ondevicelight/index.html
new file mode 100644
index 0000000000..005ef03903
--- /dev/null
+++ b/files/pt-br/web/api/window/ondevicelight/index.html
@@ -0,0 +1,99 @@
+---
+title: Window.ondevicelight
+slug: Web/API/Window/ondevicelight
+translation_of: Web/API/Window/ondevicelight
+---
+<div>{{APIRef}}</div>
+
+<p>Especifica um event listener para receber eventos {{event("devicelight")}}. Esses eventos ocorrem quando um dispositivo com sensores de nível de luz detecta uma mudança na intensidade do nível de luz do ambiente.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">window.ondevicelight = <var>funcRef</var></pre>
+
+<p>Onde <code><em>funcRef</em></code> é a função a ser chamada quando o evento {{event("devicelight")}} ocorre. Estes eventos são do tipo {{domxref("DeviceLightEvent")}}.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('AmbientLight', '#event-handlers', 'Ambient Light Events')}}</td>
+   <td>{{Spec2('AmbientLight')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_os_Navegadores">Compatibilidade com os Navegadores</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>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("22.0")}}<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>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>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("15.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The {{event("devicelight")}} event is implemented and by preference enabled by default in Firefox Mobile for Android (15.0) and in Firefox OS (B2G). Starting with Gecko 22.0 {{geckoRelease("22.0")}}, a desktop implementation for Mac OS X is also available. Support for Windows 7 is in progress (see {{bug(754199)}}).</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{event("devicelight")}}</li>
+ <li>{{domxref("DeviceLightEvent")}}</li>
+ <li><a href="/en-US/docs/Web/API/DeviceLightEvent/Using_light_events">Using Light Events</a></li>
+</ul>
diff --git a/files/pt-br/web/api/window/onscroll/index.html b/files/pt-br/web/api/window/onscroll/index.html
new file mode 100644
index 0000000000..9589f24eaa
--- /dev/null
+++ b/files/pt-br/web/api/window/onscroll/index.html
@@ -0,0 +1,98 @@
+---
+title: window.onscroll
+slug: Web/API/Window/onscroll
+translation_of: Web/API/GlobalEventHandlers/onscroll
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Sumário</h3>
+<p>Especifica a função a ser chamada quando é feito o scroll na janela.</p>
+<h3 id="Syntax" name="Syntax">Sintaxe</h3>
+<pre class="eval">window.onscroll = <em>funcRef</em>;
+</pre>
+<ul>
+ <li><code>funcRef</code> é uma função de referência.</li>
+</ul>
+<h3 id="Example" name="Example">Exemplos</h3>
+<h4 id="Exemplo_1_Genérico">Exemplo 1: Genérico</h4>
+<pre class="brush: js">window.onscroll = function (oEvent) {
+  // executa um bloco de código ou funções, quando o scroll é feito na janela.
+}
+</pre>
+<h4 id="Examplo_2_Dectando_a_rolagem">Examplo 2: Dectando a rolagem</h4>
+<p>O exemplo a seguir, irá disparar um <code><a href="/pt-BR/docs/DOM/window.alert" title="/pt-BR/docs/DOM/window.alert">alerta</a></code> sempre que o usuário rolar a página .</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;onscroll test&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+window.onscroll = scroll;
+
+function scroll () {
+ alert("evento scroll detectado! " + window.pageXOffset + " " + window.pageYOffset);
+ // nota: você pode usar window.innerWidth e window.innerHeight para obter a largura e altura da área de visão.
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;Redimensione a janela&lt;/p&gt;
+&lt;p&gt;para um tamanho pequeno,&lt;/p&gt;
+&lt;p&gt;e use a barra de rolagem&lt;/p&gt;
+&lt;p&gt;para mover ao redor do conteúdo da página&lt;/p&gt;
+&lt;p&gt;na janela.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h4 id="Examplo_3_Mostra_um_link_no_topo_da_página_depois_da_rolagem.">Examplo 3: Mostra um link no topo da página depois da rolagem.</h4>
+<p>O exemplo a seguir irá mostrar um link( uma imagem de seta ) no topo da página quando a rolagem vertical atingir 500 pixels</p>
+<p> </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&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+var bAppended = false, oBookmark = document.createElement("div");
+oBookmark.id = "arrowUp";
+oBookmark.innerHTML = "&lt;a href=\"#\" title=\"Top of the page.\"&gt;&amp;uarr;&lt;\/a&gt;";
+
+onscroll = function() {
+  var nVScroll = document.documentElement.scrollTop || document.body.scrollTop;
+  bAppended = nVScroll &gt; 500 ?
+    bAppended || (document.body.appendChild(oBookmark), true)
+    : bAppended &amp;&amp; (document.body.removeChild(oBookmark), false);
+};
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+#arrowUp {
+  position: fixed;
+  height: auto;
+  width: auto;
+  right: 10px;
+  top: 10px;
+  font-size: 48px;
+}
+#arrowUp a {
+  text-decoration: none;
+  color: black;
+  font-weight: bold;
+  font-family: serif;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;Conteúdo da página aqui!&lt;/p&gt;
+&lt;/body&gt;
+
+&lt;/html&gt;</pre>
+<h3 id="Notes" name="Notes">Notas</h3>
+<p>{{ Bug(189308) }}, nas versões antigas do Gecko, o evento 'onscroll' era executado apenas quando a barra de rolagem era arrastada, não quando utilizada a seta do teclado ou scroll do mouse.<br>
+ Esse bug foi corrigido no Gecko 1.8/Firefox 1.5</p>
+<p>Quando o window.scrollX/scrollY não é 0 -- considerando que o scroll ocorreu por algum script ou uma ação manual -- recarregando a página irá disparar o evento onscroll imediatamente.</p>
+<h3 id="Specification" name="Specification">Especificação</h3>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/html5/webappapis.html#event-handlers-on-elements-document-objects-and-window-objects" title="http://www.w3.org/TR/html5/webappapis.html#event-handlers-on-elements-document-objects-and-window-objects">HTML5: Event handlers on elements, Document objects, and Window objects</a></li>
+</ul>
+<p>{{ languages( { "zh-cn": "zh-cn/DOM/window.onscroll"} ) }}</p>
diff --git a/files/pt-br/web/api/window/opendialog/index.html b/files/pt-br/web/api/window/opendialog/index.html
new file mode 100644
index 0000000000..cb2e5f31ba
--- /dev/null
+++ b/files/pt-br/web/api/window/opendialog/index.html
@@ -0,0 +1,90 @@
+---
+title: window.openDialog
+slug: Web/API/Window/openDialog
+translation_of: Web/API/Window/openDialog
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Summary" name="Summary">Resumo</h3>
+
+<p><code>window.openDialog</code> é uma extensão para <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a>. Ela se comporta da mesma maneira, exceto que pode opcionalmente usar um ou mais parâmetros passado por <code>windowFeatures</code>, e <code>windowFeatures</code> em si é tratado um pouco diferente.</p>
+
+<p>Parâmetros opcionais, se presentes, serão incluídos no JavaScript Array object e adicionados a nova janela criada como uma propriedade chamada <a href="/en/DOM/window.arguments" title="en/DOM/window.arguments">window.arguments</a>. Eles podem ser referenciados no javascript da janela a qualquer momento, incluindo durante a execução da <code>load</code> handler. Esses parâmetros podem ser usados, e depois, para passar argumentos para e da janela de diálogo.</p>
+
+<p>Note que a chamada para <code>openDialog()</code> retorna imediatamente. Se você quer que a chamada seja bloqueada até o usuário fechar a janela de diálogo, forneça <code>modal</code> como um parâmetro <code>windowFeatures</code>. Note que isso significa que o usuário não poderá interagir com a janela que abriu a janela modal (modal dialog) enquanto o usuário não fechá-la.</p>
+
+<h3 id="Syntax" name="Syntax">Sintaxe</h3>
+
+<pre class="eval"><em>newWindow</em> = openDialog(<em>url</em>, <em>name</em>, <em>features</em>, <em>arg1</em>, <em>arg2</em>, ...)
+</pre>
+
+<dl>
+ <dt>newWindow </dt>
+ <dd>A janela aberta</dd>
+ <dt>url </dt>
+ <dd>A URL a ser carregada na nova janela aberta.</dd>
+ <dt>name </dt>
+ <dd>O nome da janela (opcional). Veja a descrição de <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a> para informações detalhadas.</dd>
+ <dt>features </dt>
+ <dd>Consulte <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a> para descrição.</dd>
+ <dt>arg1, arg2, ... </dt>
+ <dd>Os argumentos podem ser passados para a nova janela (opcional).</dd>
+</dl>
+
+<h3 id="Example" name="Example">Exemplo</h3>
+
+<pre class="brush: js">var win = openDialog("<span class="nowiki">http://example.tld/zzz.xul</span>", "dlg", "", "pizza", 6.98);
+</pre>
+
+<h3 id="Notes" name="Notes">Observações</h3>
+
+<h4 id="New_Features" name="New_Features">Novas funcionalidades</h4>
+
+<p><code>all</code> - Initially activates (or deactivates <code>("all=no")</code>) all chrome (except the behaviour flags <code>chrome</code>, <code>dialog</code> and <code>modal</code>). These can be overridden (so <code>"menubar=no,all"</code> turns on all chrome except the menubar.) This feature is explicitly ignored by <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a>. <code>window.openDialog</code> finds it useful because of its different default assumptions.</p>
+
+<h4 id="Default_behaviour" name="Default_behaviour">Comportamento padrão</h4>
+
+<p>The <code>chrome</code> and <code>dialog</code> features are always assumed on, unless explicitly turned off ("<code>chrome=no</code>"). <code>openDialog</code> treats the absence of the features parameter as does <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open</a>, (that is, an empty string sets all features to off) except <code>chrome</code> and <code>dialog</code>, which default to on. If the <code>features</code> parameter is a zero-length string, or contains only one or more of the behaviour features (<code>chrome</code>, <code>dependent</code>, <code>dialog</code> and <code>modal</code>) the chrome features are assumed "OS' choice." That is, window creation code is not given specific instructions, but is instead allowed to select the chrome that best fits a dialog on that operating system.</p>
+
+<h4 id="Passing_extra_parameters_to_the_dialog" name="Passing_extra_parameters_to_the_dialog">Passando parâmetros extras para o diálogo</h4>
+
+<p>Para passar parâmento extra para a janela de diálogo, você pode simplesmente pode fornece=lo depois do parâmetro <code>windowFeatures</code>:</p>
+
+<pre class="brush: js">openDialog("<span class="brush: js">http://example.tld/zzz.xul</span>", "dlg", "", "pizza", 6.98);
+</pre>
+
+<p>Os parâmetros serão empacotados em uma propriedade chamada <code>arguments</code> do tipo <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a>, e essa propriedade será adicionada para a nova janela de diálogo.</p>
+
+<p>Para acessar esses parâmetros extras da janela de diálogo, use o seguinte esquema:</p>
+
+<pre class="brush: js">var food  = window.arguments[0];
+var price = window.arguments[1];
+</pre>
+
+<p>Note que você pode acessar esta propriedade de qualwuer lugar do código de diálogo.. (<a href="/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog" title="en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Outro exemplo</a>).</p>
+
+<h4 id="Returning_values_from_the_dialog" name="Returning_values_from_the_dialog">Retornando valores do diálogo</h4>
+
+<p>Dado que <code>window.close()</code> apaga todas a propriedades associadas com a janela de diálogo (isto é, as variáveis especificadas no código javascript que é carregado a partir da janela de diálogo), não é possível passar os valores retornados depois da operação de fechamento usando variáveis globais (ou qualquer outro construtor).</p>
+
+<p>Para ser possível passar valores de volta para a janela que chamou, você deve fornecer algum objeto via parâmetros extra. Em seguida, pode acessar esse objeto de dentro do código de diálogo e definir as propriedades nele, que contém os valores que você deseja retornar ou preservar passado a operação <code>window.close()</code>.</p>
+
+<pre class="brush: js">var retVals = { address: null, delivery: null };
+openDialog("<span class="brush: js">http://example.tld/zzz.xul</span>", "dlg", "modal", "pizza", 6.98, retVals);
+</pre>
+
+<p>Se você definir as propriedades do objeto <code>retVals</code> no código de diálogo, conforme descrito abaixo, agora você pode acessá-los via array <code>retVals</code> depois do retorno da chamada de <code>openDialog()</code>.</p>
+
+<p>Dentro do código de diálogo, você pode definir as propriedades da seguinte forma:</p>
+
+<pre class="brush: js">var retVals = window.arguments[2];
+retVals.address  = enteredAddress;
+retVals.delivery = "immediate";
+</pre>
+
+<p>Veja também . (<a href="/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog" title="en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Outro exemplo</a>).<br>
+ veja também window.importDialog (mobile).</p>
+
+<h3 id="Specification" name="Specification">Especificação</h3>
+
+<p>{{ DOM0() }}</p>
diff --git a/files/pt-br/web/api/window/performance/index.html b/files/pt-br/web/api/window/performance/index.html
new file mode 100644
index 0000000000..6e7edcd558
--- /dev/null
+++ b/files/pt-br/web/api/window/performance/index.html
@@ -0,0 +1,33 @@
+---
+title: Window.performance
+slug: Web/API/Window/performance
+translation_of: Web/API/Window/performance
+---
+<div>{{APIREf}}</div>
+
+<div>A API Web Performance permite páginas da web acessarem algumas funções para medir a performance de páginas e aplicações da web, incluindo a API Navigation Timing e dados de tempo de alta resolução.</div>
+
+<div> </div>
+
+<h2 id="Methods" name="Methods">Métodos</h2>
+
+<dl>
+ <dt>{{domxref("Performance.mark()", "performance.mark()")}}</dt>
+ <dd>Mapeia um {{domxref("DOMHighResTimeStamp")}} para o nome especificado representando a quantidade de milissegundos passados desde um momento de referência.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Performance.now()", "performance.now()")}}</dt>
+ <dd>Retorna um {{domxref("DOMHighResTimeStamp")}} representando a quantidade de milissegundos passados desde um momento de referência.</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">Propriedades</h2>
+
+<dl>
+ <dt>{{domxref("Performance.timing", "performance.timing")}}</dt>
+ <dd>É um objeto {{domxref("PerformanceTiming")}} contendo informações de performance relacionadas a latência.</dd>
+ <dt>{{domxref("Performance.navigation", "performance.navigation")}}</dt>
+ <dd>É um objeto {{domxref("PerformanceNavigation")}} representando o tipo de navegação que ocorre no contexto de navegação dado, como a quantidade de redirecionamentos necessários para buscar o recurso.</dd>
+ <dt><a href="https://docs.webplatform.org/wiki/apis/timing/properties/memory">performance.memory</a></dt>
+ <dd>Uma extensao não-padrão adicionada ao Chrome.</dd>
+</dl>
diff --git a/files/pt-br/web/api/window/popstate_event/index.html b/files/pt-br/web/api/window/popstate_event/index.html
new file mode 100644
index 0000000000..55f493f18b
--- /dev/null
+++ b/files/pt-br/web/api/window/popstate_event/index.html
@@ -0,0 +1,144 @@
+---
+title: popstate
+slug: Web/API/Window/popstate_event
+translation_of: Web/API/Window/popstate_event
+---
+<p>O evento <code>popstate </code>é disparado quando a entrada do histórico ativa é alterado. Se o histórico de entrada a ser ativado for criado por uma chamada <code>history.pushState() </code>ou for afetada por uma chamada <code>history.replaceState(),</code> a propriedade dos eventos<code> popstate </code>contém uma cópia do histórico de entrada do objeto.<br>
+ <br>
+ Note  que apenas chamando <code>history.pushState()</code> ou <code>history.replaceState()</code> não ira disparar um evento <code>popstate. </code>O evento <code>popstate </code>apenas é disparado após uma ação no navegador como um click no botão de voltar (ou chamando <code>history.back() por javascript</code>)<br>
+ <br>
+ Navegadores tendem a lidar com o evento <code>popstate </code>diferentemente no carregamento da página. Chrome (anterior versão 34) e Safari sempre emitem um evento <code>popstate</code> no carregamento da página, mas o Firefox não.</p>
+
+<h2 id="Informação_geral">Informação geral</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Especificação</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">PopStateEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</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;">Alvo</dt>
+ <dd style="margin: 0 0 0 120px;">defaultView</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Ação padrão</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</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 browsing context (<code>window</code>).</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>state</code> {{readonlyInline}}</td>
+   <td><em>any</em></td>
+   <td>The current history entry's state object (if any).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatiblidade_com_navegadores">Compatiblidade com navegadores</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>Suporte básico</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}[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>Suporte básico</td>
+   <td>3.0[2]</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}[1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] A implementação tem um suporte limitado.</p>
+
+<p>[2] A implementação em Android 2.2 e 2.3 tem problemas.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Um página no <code>http://example.com/example.html roda o código abaixo e irá gerar os logs indicados</code></p>
+
+<pre class="brush: js">window.onpopstate = function(event) {
+  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // Logs "location: http://example.com/example.html, state: null
+history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}
+</pre>
+
+<p>Observe que mesmo que a entrada do histórico inicial(para <code>http://example.com/example.html</code>) não tem nenhum estado associado a ele, um evento <code>popstate </code>é ainda disparado quando nós ativamos essa entrada após a segunda chamada para<code> history.back ().</code><br>
+  </p>
+
+<h2 id="Eventos_relacionados">Eventos relacionados</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla_event_reference/hashchange"><code>hashchange</code></a></li>
+</ul>
diff --git a/files/pt-br/web/api/window/print/index.html b/files/pt-br/web/api/window/print/index.html
new file mode 100644
index 0000000000..6bf664bfb0
--- /dev/null
+++ b/files/pt-br/web/api/window/print/index.html
@@ -0,0 +1,56 @@
+---
+title: Window.print()
+slug: Web/API/Window/print
+tags:
+  - DOM
+  - Window
+  - print
+translation_of: Web/API/Window/print
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p dir="ltr" id="tw-target-text">Abre a janela de impressão para imprimir o documento atual.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="eval">window.print()
+</pre>
+
+<h2 id="Specification" name="Specification">Notas</h2>
+
+<p>Começando com o  Chrome {{CompatChrome(46.0)}} este método é bloqueado dentro de um {{htmlelement("iframe")}} a menos que seu atributo sandbox tem o valor allow-modal .</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#printing', 'print()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_Navegadores">Compatibilidade entre Navegadores</h2>
+
+
+
+<p>{{Compat("api.Window.print")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en/Printing" title="en/Printing">Printing</a></li>
+ <li>{{ domxref("window.onbeforeprint") }}</li>
+ <li>{{ domxref("window.onafterprint") }}</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/DOM/window.print", "it": "it/DOM/window.print" , "zh-cn": "zh-cn/DOM/window.print" } ) }}</p>
diff --git a/files/pt-br/web/api/window/prompt/index.html b/files/pt-br/web/api/window/prompt/index.html
new file mode 100644
index 0000000000..e831fbcc4d
--- /dev/null
+++ b/files/pt-br/web/api/window/prompt/index.html
@@ -0,0 +1,66 @@
+---
+title: Window.prompt()
+slug: Web/API/Window/prompt
+translation_of: Web/API/Window/prompt
+---
+<div>{{ApiRef("Window")}}</div>
+
+<div>O <span style="font-family: Consolas,Monaco,'Andale Mono',monospace;">Window.prompt()</span> exibe uma caixa de diálogo com uma mensagem opcional solicitando ao usuário a entrada de algum texto.</div>
+
+<p> </p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>resultado</em> = window.prompt(<em>texto</em>, <em>valor</em>);
+</pre>
+
+<ul>
+ <li><code>resultado</code> é uma cadeia de caracteres contendo o texto digitado pelo usuário, ou um valor nulo.</li>
+ <li><code>texto</code> é uma cadeia de caracteres para exibir ao usuário. Este parâmetro é opcional e pode ser omitido se não há nada para mostrar na janela de prompt.</li>
+ <li><code>valor</code> é uma cadeia de caracteres contendo o valor padrão exibido na caixa de entrada de texto. É um parâmetro opcional. Note que no Internet Explorer 7 e 8, se você não fornecer este parâmetro, a cadeia de caracteres "undefined" é o valor padrão.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:js">var signo = prompt("Qual é o seu signo?");
+
+if (signo.toLowerCase() == "escorpião") {
+  alert("Legal! Eu sou de Escorpião também!");
+}
+
+// há muitas formas de se usar o recurso prompt
+var sign = window.prompt(); // abrir uma janela de promtpt em branco
+var sign = prompt();       //  abrir uma janela de promtpt em branco
+var sign = window.prompt('Você está se sentindo com sorte'); // abrir uma janela com o texto "Você está se sentindo com sorte"
+var sign = window.prompt('Você está se sentindo com sorte', 'certamente'); // abrir uma janela com o texto "Você está se sentindo com sorte" e com o valor padrão "certamente"</pre>
+
+<p>Quando o usuário pressiona o botão OK, o texto digitado no campo de texto é retornado. Se o usuário pressionar OK sem ter digitado qualquer texto, uma cadeia de caracteres vazia é retornada. Se o usuário pressionar o botão Cancelar, esta função retornará <code>null</code>.</p>
+
+<p>{{todo("external image!")}} O prompt acima aparece da seguinte forma (no Chrome do Windows 7):</p>
+
+<p><img src="https://lh4.googleusercontent.com/-uDx7r8y4tV8/UKv_PjG163I/AAAAAAAAHd0/Arwk0l4cpq0/s362/Prompt_Chrome_Windows7.png" style="width: 362px;"></p>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Uma caixa de diálogo prompt contém uma caixa de texto de linha única, um botão Cancelar, e um botão OK, e retorna o (possivelmente vazio) texto que o usuário digitou naquela caixa de texto.</p>
+
+<p><span class="comment">The following text is shared between this article, DOM:window.confirm and DOM:window.alert</span>As caixas de diálogo são janelas modais; eles impedem o usuário de acessar o resto da interface do programa até que a caixa de diálogo seja fechada. Por esta razão, você não deve abusar de qualquer função que crie uma caixa de diálogo (ou janela modal).</p>
+
+<p>Por favor, note que o resultado é uma cadeia de caracteres. Isso significa que você deve, algumas vezes, converter o valor dado pelo usuário. Por exemplo, se a resposta deve ser um número, você deve converter o valor para <code>Number:</code> <span style='background-color: #f6f6f2; font-family: "Courier New","Andale Mono",monospace; font-size: 12px; line-height: normal;'>var aNumber = Number(window.prompt("Digite um número", "")); </span></p>
+
+<p>Os códigos do <a href="/en-US/docs/Chrome" title="Chrome">Mozilla Chrome</a> (e.g. Firefox extensions) ao invés disso, devem usar os métodos da interface {{interface("nsIPromptService")}}.</p>
+
+<p>No Safari, se o usuário clicar em Cancelar, a função retornará uma cadeia de caracteres vazia. Portanto, ele não diferenciará o cancelamento do usuário de uma cadeia de caracteres vazia na caixa de texto.</p>
+
+<p>Esta função não tem efeito na versão Modern UI/Metro do Internet Explorer para Windows 8. Ele não exibe o prompt para o usuário, e sempre retornará <code>undefined</code>. Não está claro se é um erro ou um comportamento intencional. Versões desktop do IE implementam esta função.</p>
+
+<p><strong style="font-size: 30px; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Especificação</strong></p>
+
+<p>Especificado em HTML5.</p>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li>{{domxref("window.alert", "alert")}}</li>
+ <li>{{domxref("window.confirm", "confirm")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/window/requestanimationframe/index.html b/files/pt-br/web/api/window/requestanimationframe/index.html
new file mode 100644
index 0000000000..3adca4b22f
--- /dev/null
+++ b/files/pt-br/web/api/window/requestanimationframe/index.html
@@ -0,0 +1,106 @@
+---
+title: window.requestAnimationFrame()
+slug: Web/API/Window/requestAnimationFrame
+tags:
+  - API
+  - DOM
+  - Intermediário
+  - Método(2)
+  - Referência do DOM
+  - Timers JavaScript
+translation_of: Web/API/window/requestAnimationFrame
+---
+<p>{{APIRef}}<br>
+ O método <strong><code>window.requestAnimationFrame()</code></strong> fala para o navegador que deseja-se realizar uma animação e pede que o navegador chame uma função específica para atualizar um quadro de animação antes da próxima repaint (repintura). O método tem como argumento uma callback que deve ser invocado antes da repaint.</p>
+
+<div class="note"><strong>Nota: </strong>A rotina callback deve chamar <code>requestAnimationFrame()</code> se quiser animar outro quadro na próxima repaint.</div>
+
+<p>Deve-se chamar esse método sempre que estiver pronto para atualizar a animação na tela. Isso irá requisitar que a função de animação seja chamada antes que o navegador realize a próxima repaint. O número de callbacks é normalmente 60 por segundo, mas geralmente acompanha a taxa de atualização do display na maioria dos navegadores, como recomenda a W3C. A taxa de callbacks é reduzida quando executados em aba de fundo ou em {{ HTMLElement("iframe") }} escondidos para melhorar performance e vida de bateria.</p>
+
+<p>Um único argumento é passado para o método callback, um {{domxref("DOMHighResTimeStamp")}}, que indica o tempo atual no qual callbacks enfileiradas por <code>requestAnimationFrame</code> começam a disparar. Múltiplos callbacks em um único quadro, assim, cada um recebe o mesmo carimbo de data/hora . Esse carimbo de data/hora é um número decimal, em milisegundos, mas com precisão mínima de 1ms (1000 µs).</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">window.requestAnimationFrame(callback);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parâmetros</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Parâmetro especificando uma função a ser chamada quando chegar a hora de atualizar a animação para a próxima repaint. O callback possui um único argumento, um {{domxref("DOMHighResTimeStamp")}}, que indica a hora atual (a hora retornada de {{domxref('Performance.now()')}} ) para quando <code>requestAnimationFrame</code> começar a disparar callbacks.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p>Um valor inteiro <code>long</code>, a id da requisição, que identifica unicamente a entrada na lista de callbacks. Esse é um valor não-zero, mas não deve-se assumir mais nada sobre esse valor. Esse valor pode ser passado para {{domxref("window.cancelAnimationFrame()")}} para cancelar a requisição da atualização do callback.</p>
+
+<h2 id="Notes" name="Notes">Exemplo</h2>
+
+<pre class="brush: js">var start = null;
+var element = document.getElementById("ElementoQueVcQuerAnimar");
+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">Especificação</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Sem mudanças, substitui a anterior</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td>
+   <td>{{Spec2('RequestAnimationFrame')}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<div>{{Compat("api.Window.requestAnimationFrame")}}</div>
+
+<div id="compat-desktop"></div>
+
+<p>[1] Anteriro ao Gecko 11.0 {{geckoRelease("11.0")}}, mozRequestAnimationFrame() podia ser chamado sem parâmetros de entrada. Isso não é mais suportado, como provavelmente não será parte do padrão</p>
+
+<p>[2] O parâmetro do callback é {{domxref("DOMTimeStamp")}} ao invés de {{domxref("DOMHighResTimeStamp")}} se a versão prefixada do método foi utilizada <code>DOMTimeStamp</code> possui apenas precisão de milisegundo, mas <code>DOMHighResTimeStamp</code> possui precisão mínima de microsegundos.  Portanto, o tempo zero é diferente: <code>DOMHighResTimeStamp</code> possui o mesmo tempo zero que <code>performance.now()</code>, mas DOMTimeStamp possui o mesmo tempo zero que <code>Date.now().</code></p>
+
+<p>[3] A chamada correta no Chrome para cancelar a requisição é currently <code>window.cancelAnimationFrame()</code>. Versões anteriores, <code>window.webkitCancelAnimationFrame()</code> e <code>window.webkitCancelRequestAnimationFrame()</code>, foram descontinuados mas possuem suporte por enquanto.</p>
+
+<p>[4] Suporte para a versão prefixada foi removida no Firefox 42.</p>
+
+<h2 id="See_also" name="See_also">Veja também</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> - Post do blog</li>
+ <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Post do blog</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> - Post do blog</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> - Post do blog</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://www.paulirish.com/2011/requestanimationframe-for-smart-animating/" title="http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for Smart Animating</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/pt-br/web/api/window/requestidlecallback/index.html b/files/pt-br/web/api/window/requestidlecallback/index.html
new file mode 100644
index 0000000000..cdd2485d84
--- /dev/null
+++ b/files/pt-br/web/api/window/requestidlecallback/index.html
@@ -0,0 +1,70 @@
+---
+title: window.requestIdleCallback()
+slug: Web/API/Window/requestIdleCallback
+translation_of: Web/API/Window/requestIdleCallback
+---
+<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div>
+
+<p>O método <code><strong>window.requestIdleCallback()</strong></code> enfileira uma função para ser executado durante períodos onde o navegador está ocioso. Isso permite que desenvolvedores realizem tarefas de baixa prioridade em relação a o event loop em segundo plano. As funções são geralmente chamadas na ordem first-in-first-out (primeiro-a-entrar-primeiro-a-sair); Contudo, callbacks nos quais tem um timeout especificado, podem ser chamados na ordem out-of-order (fora-de-ordem) se necessário, afim de executar antes do tempo limite.</p>
+
+<p>Você pode chamar <code>requestIdleCallback()</code> com uma função callback ociosa para agendar outro callback para ter lugar não antes da próxima passagem pelo event loop.</p>
+
+<div class="note">Um <code>timeout</code> é altamento recomendado, caso contrário, é possível que vários segundos passem antes que a função callback seja chamada.</div>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><code>var <em>handle</em> = <em>window</em>.requestIdleCallback(<em>callback</em>[, <em>options</em>])</code></pre>
+
+<h3 id="Returns" name="Returns">Return value</h3>
+
+<p>An ID which can be used to cancel the callback by passing it into the {{domxref("window.cancelIdleCallback()")}} method.</p>
+
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>A reference to a function that should be called in the near future, when the event loop is idle. The callback function is passed an {{domxref("IdleDeadline")}} object describing the amount of time available and whether or not the callback has been run because the timeout period expired.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Contains optional configuration parameters. Currently only one property is defined:
+ <ul>
+  <li><code>timeout</code>: If <code>timeout</code> is specified and has a positive value, and the callback has not already been called by the time <em>timeout</em> milliseconds have passed, the callback will be called during the next idle period, even if doing so risks causing a negative performance impact.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p>See our <a href="/en-US/docs/Web/API/Background_Tasks_API#Example">complete example</a> in the article <a href="/en-US/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a>.</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Background Tasks')}}</td>
+   <td>{{Spec2('Background Tasks')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Window.requestIdleCallback")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("window.cancelIdleCallback()")}}</li>
+ <li>{{domxref("IdleDeadline")}}</li>
+ <li>{{domxref("window.setTimeout()")}}</li>
+ <li>{{domxref("window.setInterval()")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/window/resize_event/index.html b/files/pt-br/web/api/window/resize_event/index.html
new file mode 100644
index 0000000000..ac5214b5a2
--- /dev/null
+++ b/files/pt-br/web/api/window/resize_event/index.html
@@ -0,0 +1,190 @@
+---
+title: resize
+slug: Web/API/Window/resize_event
+translation_of: Web/API/Window/resize_event
+---
+<p><span class="seoSummary">O evento <strong><code>resize</code></strong> é disparado quando o document view é redimensionado.</span></p>
+
+<p>O evento manipulador pode ser registrado para o evento <code>resize</code> usando o atributo <code>window.onresize</code> ou usando <code>window.addEventListener('resize', ...)</code> </p>
+
+<p>Em alguns browsers mais recentes é possível registrar o evento manipulador <code>resize</code> em qualquer elemento HTML.  E ainda é possível adicionar atributos <code>onresize</code> ou usar {{domxref("EventTarget.addEventListener", "addEventListener()")}} para implementar o manipulador em qualquer elemento.  Entretanto, eventos <code>resize</code>  apenas são disparados sobre (enviados para) o objeto {{domxref("Window", "window")}} ({{domxref("document.defaultView")}}). Apenas manipuladores registrados no objeto <code>window</code> recebem os eventos.</p>
+
+<p>Existe uma nova proposta (2017) para permitir que todos os elementos sejam notificados de alterações de tamanho.  Veja <a href="https://wicg.github.io/ResizeObserver/">Resize Observer</a> para ler o documento rascunho, e <a href="https://github.com/WICG/ResizeObserver/issues">Github issues</a> para ler as discussões do que está ativo.</p>
+
+<h2 id="Informações_gerais">Informações gerais</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specifications</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize">DOM L3</a>, <a href="http://www.w3.org/TR/cssom-view/#resizing-viewports">CSSOM View</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</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;">Não</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Não</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">defaultView (window)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">Nenhuma</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><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>O evento alto (o primeiro alvo na árvore DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>O tipo de evento.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Se o evento normalmente bubbles ou não.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Se o evento é cancelado ou não.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> do 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="Examples">Examples</h2>
+
+<p>Como os eventos <code>resize</code> podem ser altamente executados, o evento manipulador não deve executar operações computacionais caras como modificações DOM. Em vez disso, recomenda-se diminuir o impacto do evento usando <a href="/en-US/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame">requestAnimationFrame</a>, <a href="/en-US/docs/Web/API/WindowTimers/setTimeout">setTimeout</a> ou <a href="/en-US/docs/Web/API/CustomEvent">customEvent</a>*, como a seguir:<br>
+ <br>
+ <strong>* IMPORTANT: </strong>Por favor note que IE11 precisa do <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill">customEvent</a> polyfill para funcionar corretamente.</p>
+
+<h3 id="requestAnimationFrame_customEvent">requestAnimationFrame + customEvent</h3>
+
+<pre class="brush: js">(function() {
+    var throttle = function(type, name, obj) {
+        obj = obj || window;
+        var running = false;
+        var func = function() {
+            if (running) { return; }
+            running = true;
+             requestAnimationFrame(function() {
+                obj.dispatchEvent(new CustomEvent(name));
+                running = false;
+            });
+        };
+        obj.addEventListener(type, func);
+    };
+
+    /* init - you can init any event */
+    throttle("resize", "optimizedResize");
+})();
+
+// handle event
+window.addEventListener("optimizedResize", function() {
+    console.log("Resource conscious resize callback!");
+});
+</pre>
+
+<h3 id="requestAnimationFrame">requestAnimationFrame</h3>
+
+<pre class="brush: js">var optimizedResize = (function() {
+
+    var callbacks = [],
+        running = false;
+
+    // fired on resize event
+    function resize() {
+
+        if (!running) {
+            running = true;
+
+            if (window.requestAnimationFrame) {
+                window.requestAnimationFrame(runCallbacks);
+            } else {
+                setTimeout(runCallbacks, 66);
+            }
+        }
+
+    }
+
+    // run the actual callbacks
+    function runCallbacks() {
+
+        callbacks.forEach(function(callback) {
+            callback();
+        });
+
+        running = false;
+    }
+
+    // adds callback to loop
+    function addCallback(callback) {
+
+        if (callback) {
+            callbacks.push(callback);
+        }
+
+    }
+
+    return {
+        // public method to add additional callback
+        add: function(callback) {
+            if (!callbacks.length) {
+                window.addEventListener('resize', resize);
+            }
+            addCallback(callback);
+        }
+    }
+}());
+
+// start process
+optimizedResize.add(function() {
+    console.log('Resource conscious resize callback!')
+});
+</pre>
+
+<h3 id="setTimeout">setTimeout</h3>
+
+<pre class="brush: js">(function() {
+
+  window.addEventListener("resize", resizeThrottler, false);
+
+  var resizeTimeout;
+  function resizeThrottler() {
+    // ignore resize events as long as an actualResizeHandler execution is in the queue
+    if ( !resizeTimeout ) {
+      resizeTimeout = setTimeout(function() {
+        resizeTimeout = null;
+        actualResizeHandler();
+
+       // The actualResizeHandler will execute at a rate of 15fps
+       }, 66);
+    }
+  }
+
+  function actualResizeHandler() {
+    // handle the resize event
+    ...
+  }
+
+}());</pre>
diff --git a/files/pt-br/web/api/window/scroll/index.html b/files/pt-br/web/api/window/scroll/index.html
new file mode 100644
index 0000000000..01ece16bbd
--- /dev/null
+++ b/files/pt-br/web/api/window/scroll/index.html
@@ -0,0 +1,57 @@
+---
+title: Window.scroll()
+slug: Web/API/Window/scroll
+tags:
+  - API
+  - CSSOM View
+  - Referencia
+  - metodo
+translation_of: Web/API/Window/scroll
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Resumo</h2>
+
+<p>Rola a janela para uma posição específica no documento.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">window.scroll(<em>x-coord</em>, <em>y-coord</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parâmetros</h3>
+
+<ul>
+ <li><code>x-coord</code> é o pixel que você deseja exibir ao longo do eixo horizontal do documento em relação à sua extremidade superior esquerda. </li>
+ <li><code>y-coord </code>é o pixel que você deseja exibir ao longo do eixo vertical do documento em relação à sua extremidade superior esquerda. </li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:html;htmlScript:true;">&lt;!-- disponha o centésimo pixel vertical no topo da janela --&gt;
+
+&lt;button onClick="scroll(0, 100);"&gt;clique para rolar 100 pixels para baixo&lt;/button&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p><a href="/en-US/docs/DOM/window.scrollTo">window.scrollTo</a> é essencialmente equivalente a este método. Para rolar uma distância específica repetidamente, utilize o método <a href="/en-US/docs/Window.scrollBy">window.scrollBy</a>. Veja também <a href="/en-US/docs/Window.scrollByLines">window.scrollByLines</a>, <a href="/en-US/docs/Window.scrollByPages">window.scrollByPages</a>.</p>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-scroll', 'window.scroll()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/pt-br/web/api/window/scrollby/index.html b/files/pt-br/web/api/window/scrollby/index.html
new file mode 100644
index 0000000000..c3ee906d33
--- /dev/null
+++ b/files/pt-br/web/api/window/scrollby/index.html
@@ -0,0 +1,53 @@
+---
+title: Window.scrollBy()
+slug: Web/API/Window/scrollBy
+translation_of: Web/API/Window/scrollBy
+---
+<p>{{ APIRef() }}</p>
+
+<h2 id="Summary" name="Summary">Resumo</h2>
+
+<p>Desloca o documento dentro da janela pelo valor fornecido.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="eval">window.scrollBy(<em>X</em>, <em>Y</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parâmetros</h3>
+
+<ul>
+ <li><code>X</code> é o deslocamento em pixels (px) para a rolagem horizontalmente.</li>
+ <li><code>Y</code> é o deslocamento em pixels (px) para a rolagem verticalmente.</li>
+</ul>
+
+<p>Coordenadas positivas deslocarão para a direita e para baixo. Coordenadas negativas deslocarão para a esquerda e para cima.</p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="eval">// Desloca a altura interna da janela
+window.scrollBy(0, window.innerHeight);
+</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p><a href="/en-US/docs/DOM/Window.scrollBy">window.scrollBy</a> desloca uma quantidade específical enquanto <a href="/en-US/docs/DOM/Window.scroll">window.scroll</a> desloca para uma posição absoluta no documento. Veja Também <a href="/en-US/docs/DOM/Window.scrollByLines">window.scrollByLines</a>, <a href="/en-US/docs/DOM/Window.scrollByPages">window.scrollByPages</a></p>
+
+<h2 id="Specification" name="Specification">Especificações</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('CSSOM View', '#dom-window-scrollby', 'window.scrollBy()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/pt-br/web/api/window/scrollbypages/index.html b/files/pt-br/web/api/window/scrollbypages/index.html
new file mode 100644
index 0000000000..1ad5c70c47
--- /dev/null
+++ b/files/pt-br/web/api/window/scrollbypages/index.html
@@ -0,0 +1,41 @@
+---
+title: Window.scrollByPages()
+slug: Web/API/Window/scrollByPages
+translation_of: Web/API/Window/scrollByPages
+---
+<p>{{ ApiRef() }}{{Non-standard_header}}</p>
+
+<h3 id="Summary" name="Summary">Resumo</h3>
+
+<p>Rola o documento atual para a página especificada.</p>
+
+<h3 id="Syntax" name="Syntax">Sintaxe</h3>
+
+<pre class="eval">window.scrollByPages(<em>pages</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Parâmetros</h3>
+
+<ul>
+ <li><strong><code>pages</code> </strong>é o número de páginas a serem roladas.</li>
+ <li><strong><code>pages</code></strong> pode ser um número inteiro positivo ou negativo.</li>
+</ul>
+
+<h3 id="Example" name="Example">Exemplo</h3>
+
+<pre>// rola o documento para baixo até a página 1
+window.scrollByPages(1);
+
+// rola o documento para cima até a página 1
+window.scrollByPages(-1);
+</pre>
+
+<h3 id="Notes" name="Notes">Notas</h3>
+
+<p>Veja também <a href="/en/DOM/window.scrollBy" title="en/DOM/window.scrollBy">window.scrollBy</a>, <a href="/en/DOM/window.scrollByLines" title="en/DOM/window.scrollByLines">window.scrollByLines</a>, <a href="/en/DOM/window.scroll" title="en/DOM/window.scroll">window.scroll</a>, <a href="/en/DOM/window.scrollTo" title="en/DOM/window.scrollTo">window.scrollTo</a>.</p>
+
+<h3 id="Specification" name="Specification">Specification</h3>
+
+<p>DOM Level 0. Not part of specification.</p>
+
+<p>{{ languages( { "ja": "ja/DOM/window.scrollByPages", "pl": "pl/DOM/window.scrollByPages", "zh-cn": "zh-cn/DOM/window.scrollByPages" } ) }}</p>
diff --git a/files/pt-br/web/api/window/scrollto/index.html b/files/pt-br/web/api/window/scrollto/index.html
new file mode 100644
index 0000000000..10d844a41f
--- /dev/null
+++ b/files/pt-br/web/api/window/scrollto/index.html
@@ -0,0 +1,56 @@
+---
+title: Window.scrollTo()
+slug: Web/API/Window/scrollTo
+tags:
+  - API
+  - CSSOM View
+  - NeedsCompatTable
+  - NeedsMarkupWork
+  - NeedsSpecTable
+  - Referencia
+  - metodo
+translation_of: Web/API/Window/scrollTo
+---
+<div>{{ APIRef }}</div>
+
+<h2 id="Summary" name="Summary">Resumo</h2>
+
+<p>Realiza a rolagem para um conjunto de coordenadas em particular em um documento.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><code>window.scrollTo(<em>x-coord</em>, <em>y-coord</em>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Parâmetros</h3>
+
+<ul>
+ <li><code>x-coord</code> é o pixel do eixo horizontal do documento que você quer exibir no canto superior esquerdo.</li>
+ <li><code>y-coord</code> é o pixel do eixo vertical do documento que você quer exibir no canto superior esquerdo.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:js">window.scrollTo( 0, 1000 );</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Essa função é efetivamente a mesma que <a href="/en-US/docs/DOM/Window.scroll">window.scroll</a>. Para rolagem relativa, veja <a href="/en-US/docs/DOM/Window.scrollBy">window.scrollBy</a>, <a href="/en-US/docs/DOM/Window.scrollByLines">window.scrollByLines</a> e <a href="/en-US/docs/DOM/Window.scrollByPages">window.scrollByPages</a>.</p>
+
+<h2 id="Specification" name="Specification">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-scroll', 'window.scroll()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/pt-br/web/api/window/scrolly/index.html b/files/pt-br/web/api/window/scrolly/index.html
new file mode 100644
index 0000000000..28d7fd8797
--- /dev/null
+++ b/files/pt-br/web/api/window/scrolly/index.html
@@ -0,0 +1,76 @@
+---
+title: Window.scrollY
+slug: Web/API/Window/scrollY
+translation_of: Web/API/Window/scrollY
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>Retorna o número de pixels que o documento já rolou verticalmente.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">var y = window.scrollY;
+</pre>
+
+<ul>
+ <li>y é o número atual de pixels que o documento rolou a partir do topo.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="brush:js">// verificar e ir para a segunda página
+if (window.scrollY) {
+  window.scroll(0, 0);  // reinicia a posição do scroll para a posição superior esquerda do documento.
+}
+
+window.scrollByPages(1);</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Utilize esta propriedade para verificar se o documento já foi rolado quando funções de rolagem relativa, tais como {{domxref("window.scrollBy")}}, {{domxref("window.scrollByLines")}}, ou {{domxref("window.scrollByPages")}}, forem utilizadas.</p>
+
+<p>A propriedade <code>pageYOffset é um alias para scrollY:</code></p>
+
+<pre>window.pageYOffset == window.scrollY; // always true</pre>
+
+<p>For cross-browser compatibility, use <code>window.pageYOffset</code> instead of <code>window.scrollY</code>. <strong>Additionally</strong>, older versions of Internet Explorer (&lt; 9) do not support either property and must be worked around by checking other non-standard properties. A fully compatible example:</p>
+
+<p>Para compatibilidade cross-browser, utilize window.pageYOffset em vez de window.scrollY. Além disso, versões inferiores do Internet Explorer 9 não suportam ambas as propriedades, e deve ser contornado verificando outras propriedades não padronizadas.</p>
+
+<pre class="brush:js">var supportPageOffset = window.pageXOffset !== undefined;
+var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
+
+var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
+var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+</pre>
+
+<h2 id="Specification" name="Specification">Especificação</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('CSSOM View', '#dom-window-scrolly', 'window.scrollY') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.Window.scrollY")}}</p>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li>{{domxref("window.scrollX")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/window/sessionstorage/index.html b/files/pt-br/web/api/window/sessionstorage/index.html
new file mode 100644
index 0000000000..b387b8af5b
--- /dev/null
+++ b/files/pt-br/web/api/window/sessionstorage/index.html
@@ -0,0 +1,143 @@
+---
+title: Window.sessionStorage
+slug: Web/API/Window/sessionStorage
+tags:
+  - Armazenamento
+  - Propriedade
+  - Referencia
+  - Sessão
+translation_of: Web/API/Window/sessionStorage
+---
+<p>{{APIRef()}}</p>
+
+<p>A propriedade <code>sessionStorage</code> permite acessar um objeto tipo session {{domxref("Storage")}}. A sessionStorage é similar ao <a href="/en-US/docs/Web/API/Window.localStorage"><code>localStorage</code></a>, a única diferença é que enquanto os dados armazenados no <code>localStorage</code> não expiram, os dados no sessionstorage tem os seus dados limpos ao expirar a sessão da página. A sessão da página dura enquanto o browser está aberto e se mantém no recarregamento da página. <strong>Abrir a página em uma nova aba ou nova janela irá gerar uma nova sessão, </strong>o que diferencia de como os cookies trabalham<strong>.</strong></p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush: js">// Salva os dados na sessionStorage
+sessionStorage.setItem('chave', 'valor');
+
+// Obtém os dados da sessionStorage
+var data = sessionStorage.getItem('chave');</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Objeto {{domxref("Storage")}}.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>O seguinte trecho acessa o objeto da sessão do domínio atual {{domxref("Storage")}} e adiciona um item usando o {{domxref("Storage.setItem()")}}.</p>
+
+<pre class="brush: js">sessionStorage.setItem('myCat', 'Tom');</pre>
+
+<p>O exemplo a seguir salva automaticamente o conteúdo da caixa de texto, e caso o browser seja acidentalmente recarregado, o conteúdo da caixa de texto é restaurado.</p>
+
+<pre class="brush: js">// Obtem a caixa de texto que vamos rastrear
+var field = document.getElementById("campo");
+
+// Se tivermos um valor salvo automaticamente
+// (isto só ocorrerá se a página for acidentalmente recarregada)
+if (sessionStorage.getItem("autosave")) {
+  // Restaura o conteúdo da caixa de texto
+  field.value = sessionStorage.getItem("autosave");
+}
+
+// Verifica as mudanças que ocorrem na caixa de texto
+field.addEventListener("change", function() {
+  // E salva o resultado dentro de um objeto session storage
+  sessionStorage.setItem("autosave", field.value);
+});</pre>
+
+
+
+<div class="note">
+<p><strong>Nota</strong>: Por favor use o artigo <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> para um exemplo completo.</p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentários</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatíveis">Browser compatíveis</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>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Cada browser tem o seu nível de capacidade de armazenamento para localStorage e sessionStorage. Aqui está um <a href="http://dev-test.nemikor.com/web-storage/support-test/">teste detalhado de toda a capacidade de armazenamento de vários browsers</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>desde o iOS 5.1, Safari Mobile armazena os dados do localStorage em uma pasta de cache, o que está sujeito a ocasionalmente ser limpa, de acordo com o SO, se houver pouco espaço.</p>
+</div>
+
+<h2 id="Veja_também">Veja também</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><a href="/en-US/docs/Web/API/Window.localStorage">Window.localStorage</a></li>
+</ul>
diff --git a/files/pt-br/web/api/window/setcursor/index.html b/files/pt-br/web/api/window/setcursor/index.html
new file mode 100644
index 0000000000..d85dfb7c01
--- /dev/null
+++ b/files/pt-br/web/api/window/setcursor/index.html
@@ -0,0 +1,28 @@
+---
+title: Window.setCursor()
+slug: Web/API/Window/setCursor
+translation_of: Web/API/Window/setCursor
+---
+<div>{{ ApiRef() }}</div>
+
+<div> </div>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>Altera o cursor para a janela atual.</p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<pre class="syntaxbox">function setBusyCursor(enable) {
+  window.setCursor(enable ? "wait" : "auto");
+}</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>O cursor não retornará ao seu padrão até que seja definido novamente para <code>auto</code>.</p>
+
+<p>Esta função é parte do <a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMChromeWindow">ChromeWindow interface</a>. Esta função não está habilitada para páginas web, que podem usar a propriedade CSS {{cssxref("cursor")}} em seu lugar.</p>
+
+<h2 id="Especificação">Especificação</h2>
+
+<p>{{dom0}}</p>
diff --git a/files/pt-br/web/api/window/setimmediate/index.html b/files/pt-br/web/api/window/setimmediate/index.html
new file mode 100644
index 0000000000..693c51619b
--- /dev/null
+++ b/files/pt-br/web/api/window/setimmediate/index.html
@@ -0,0 +1,107 @@
+---
+title: Window.setImmediate()
+slug: Web/API/Window/setImmediate
+translation_of: Web/API/Window/setImmediate
+---
+<div>{{APIRef("HTML DOM")}}{{Non-standard_header}}</div>
+
+<p>Esse método é usado para interromper operações de longa duração e executar uma função de retorno de chamada imediatamente após o navegador ter concluído outras operações, como eventos e atualizações de exibição.</p>
+
+<div class="note">Não se espera que este método se torne padrão, e é implementado somente por compilações recentes do Internet Explorer e Node.js 0.10+. Existem resistencias de ambos <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=686201" title="https://bugzilla.mozilla.org/show_bug.cgi?id=686201">Gecko</a> (Firefox) e <a href="http://code.google.com/p/chromium/issues/detail?id=146172" title="http://code.google.com/p/chromium/issues/detail?id=146172">Webkit</a> (Google/Apple).</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var <em>immediateID</em> = setImmediate(<em>func</em>, [<em>param1</em>, <em>param2</em>, ...]);
+var <em>immediateID</em> = setImmediate(<em>func</em>);
+</pre>
+
+<ul>
+ <li>onde <code>immediateID</code> é o ID da immediate que poderá ser usado depois com {{ domxref("window.clearImmediate") }}.</li>
+ <li><code>func</code> é a função que será executada.</li>
+</ul>
+
+<p>Todos parametros serão passados diretamente para sua função .</p>
+
+<h2 id="Notas">Notas</h2>
+
+<p>O método {{ domxref("window.clearImmediate") }} pode ser usado para limpar as ações immediate, como por exemplo {{ domxref("window.clearTimeout") }} para {{ domxref("window.setTimeout") }}.</p>
+
+<p>Esse método pode ser usado ao invés de <code>setTimeout(fn, 0)</code>, para executar <a href="http://www.nczonline.net/blog/2009/08/11/timed-array-processing-in-javascript/" title="http://www.nczonline.net/blog/2009/08/11/timed-array-processing-in-javascript/">operações pesadas</a>. </p>
+
+<p>Essa função pode ser emulada de algumas maneiras:</p>
+
+<ul>
+ <li><span style="line-height: 22px;">{{ domxref("window.postMessage") }} pode ser usada para disparar um </span>immediate mas produzindo um callback. Tenha em mente que o Internet Explorer 8 inclui uma versão síncrona do postMessage, que não deverá ser usado como alternativa.</li>
+ <li><a href="/en-US/docs/Web/API/MessageChannel" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/web-messaging.html#channel-messaging">MessageChannel</a> pode ser usado com confiança dentro de Web Workers onde a semantica do postMessage significa que não pode ser usado lá.</li>
+ <li><code>setTimeout(fn, 0)</code><em>pode</em> ser usado potencialmente, no entanto, como é apertado em 4ms para temporizadores aninhados com mais de 5 profundidades <a href="https://html.spec.whatwg.org/multipage/webappapis.html#timers">por especificação HTML</a>, não faz para um polifil adequado para o imediatismo natural de setImmediate.</li>
+</ul>
+
+<p>Todas essas técnicas são incorporadas em um <a href="https://github.com/NobleJS/setImmediate">setImmediate polyfill</a>.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<p>Não faz parte de nenhuma especificação e não em uma faixa de padrões.</p>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</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>{{ CompatNo }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>10</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>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>{{ CompatNo }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<p>{{ domxref("window.clearImmediate") }}</p>
+
+<p>{{ spec("https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/setImmediate/Overview.html", "Specification: Efficient Script Yielding") }}</p>
+
+<p><a class="external" href="http://ie.microsoft.com/testdrive/Performance/setImmediateSorting/Default.html">Microsoft setImmediate API Demo</a></p>
+
+<p>{{ languages( { "zh-cn": "zh-cn/DOM/window.setImmediate" } ) }}</p>
diff --git a/files/pt-br/web/api/window/url/index.html b/files/pt-br/web/api/window/url/index.html
new file mode 100644
index 0000000000..5c673ed4b6
--- /dev/null
+++ b/files/pt-br/web/api/window/url/index.html
@@ -0,0 +1,100 @@
+---
+title: Window.URL
+slug: Web/API/Window/URL
+translation_of: Web/API/URL
+---
+<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p>
+
+<p>A propriedade <strong><code>Window.URL</code></strong> retorna um objeto que fornece métodos estáticos usados para criar e gerenciar URLs de objeto. Também pode ser chamado como um construtor para construir objetos {{domxref("URL")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<p>Chamando um método estático:</p>
+
+<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre>
+
+<p>Construindo um novo objeto:</p>
+
+<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></pre>
+
+<h2 id="Especificação">Especificação</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#dom-url', 'URL')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</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>8.0<sup>[2]</sup></td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("19.0")}}</td>
+   <td>10.0</td>
+   <td>15.0<sup>[2]</sup></td>
+   <td>6.0<sup>[2]</sup><br>
+    7.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>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoMobile("19.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>15.0<sup>[2]</sup></td>
+   <td>6.0<sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Do Gecko 2 (Firefox 4) ao Gecko 18 incluído, o Gecko retornou um objeto com o tipo interno <code>nsIDOMMozURLProperty</code> não padrão. Na prática, isso não fez diferença.</p>
+
+<p>[2] Implementado sob o nome não padronizado <code>webkitURL</code>.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("URL")}} API.</li>
+</ul>
diff --git a/files/pt-br/web/api/window/window.localstorage/index.html b/files/pt-br/web/api/window/window.localstorage/index.html
new file mode 100644
index 0000000000..8c7c379435
--- /dev/null
+++ b/files/pt-br/web/api/window/window.localstorage/index.html
@@ -0,0 +1,123 @@
+---
+title: Window.localStorage
+slug: Web/API/Window/Window.localStorage
+tags:
+  - API
+  - Armazenamento
+  - Propriedade
+  - Referencia
+  - WindowLocalStorage
+  - localStorage
+translation_of: Web/API/Window/localStorage
+---
+<p>{{APIRef()}}</p>
+
+<p>A propriedade <code>localStorage</code> permite acessar um objeto {{domxref("Storage")}} local. A <code>localStorage</code> é similar ao <code><a href="/en-US/docs/Web/API/Window.sessionStorage">sessionStorage</a></code>. A única diferença é que enquanto os dados armazenados no localStorage não expiram, os dados no sessionStorage tem os seus dados limpos ao expirar a sessão da página — ou seja, quando a página (aba ou janela) é fechada.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush: js">meuStorage = localStorage;</pre>
+
+<h3 id="Valor">Valor</h3>
+
+<p>Objeto {{domxref("Storage")}}.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>O seguinte trecho acessa o objeto {{domxref("Storage")}} local do domínio atual e adiciona um item usando o {{domxref("Storage.setItem()")}}.</p>
+
+<pre class="brush: js">localStorage.setItem('meuGato', 'Tom');</pre>
+
+<div class="note">
+<p><strong>Nota: Por favor veja o artigo</strong> <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> <strong>para um exemplo completo.</strong></p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage', '#dom-localstorage', 'localStorage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navegadores_compatíveis">Navegadores compatíveis</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>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Cada navegador tem o seu nível de capacidade de armazenamento para <code>localStorage</code> e {{domxref("sessionStorage")}}. Aqui está um <a href="http://dev-test.nemikor.com/web-storage/support-test/">teste detalhado de toda a capacidade de armazenamento de vários browsers</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>desde o iOS 5.1, Safari Mobile armazena os dados do localStorage em uma pasta de cache, o que está sujeito a ocasionalmente ser limpa, de acordo com o SO, se houver pouco espaço. O modo de Navegação Privada do Safari Mobile não permite escrever no <code>localStorage</code> de forma alguma.</p>
+</div>
+
+<h2 id="Veja_também">Veja também</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/pt-br/web/api/windowbase64/atob/index.html b/files/pt-br/web/api/windowbase64/atob/index.html
new file mode 100644
index 0000000000..cb9058abe5
--- /dev/null
+++ b/files/pt-br/web/api/windowbase64/atob/index.html
@@ -0,0 +1,72 @@
+---
+title: WindowBase64.atob()
+slug: Web/API/WindowBase64/atob
+tags:
+  - API
+  - Referencia
+  - WindowBase64
+  - metodo
+translation_of: Web/API/WindowOrWorkerGlobalScope/atob
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>A função <strong><code>WindowBase64.atob()</code></strong> decodifica uma string de dados que foi codificada através da codificação base-64. Você pode usar o método {{domxref("WindowBase64.btoa","window.btoa()")}} para codificar e transmitir dados que, se não codificados, podem causar problemas de comunicação. Após transmití-los pode-se usar o método <code>window.atob()</code> para decodificar os dados novamente. Por exemplo, você pode codificar, transmitir,  e decodificar caracteres de controle como valores ASCII de 0 a 31.</p>
+
+<p>Para utilizar com strings Unicode ou UTF-8, veja <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding#The_.22Unicode_Problem.22">esta nota em <em>Base64 encoding and decoding</em></a> e <a href="/en-US/docs/Web/API/window.btoa#Unicode_Strings">essa nota em <code>window.btoa()</code></a>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">var dadoDecodificado = window.atob(<em>dadoCodificado</em>);</pre>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush:js">var <em>dadoCodificado </em>= window.btoa("Olá, mundo"); // codifica a string
+var dadoDecodificado = window.atob(<em>dadoCodificado</em>); // decodifica a string</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Nenhuma mudança desde a última versão, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Versão de {{SpecName("HTML WHATWG")}}. Nenhuma mudança.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Versão de {{SpecName("HTML WHATWG")}}. Criação do <code>WindowBase64</code> (antes as propriedades ficavam no target).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
+
+<div>{{Compat("api.WindowOrWorkerGlobalScope.atob")}}</div>
+
+<div id="compat-mobile"></div>
+
+<p>[1] <code>atob()</code> também está disponível para os componentes do XPCOM implementado em JavaScript, porém o objeto <code><a href="/en-US/docs/Web/API/Window">window</a></code> não é global nos componentes.</p>
+
+<p>[2] A partir do <a href="/en-US/Firefox/Releases/27/Site_Compatibility">Firefox 27</a>, <code>atob()</code> ignora todos os caracteres de espaço no argumento para seguir as últimas especificações do HTML5. ({{bug(711180)}})</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li><a href="/en-US/docs/data_URIs"><code>data</code> URIs</a></li>
+ <li>{{domxref("WindowBase64.btoa","window.btoa()")}}</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/pt-br/web/api/windowbase64/index.html b/files/pt-br/web/api/windowbase64/index.html
new file mode 100644
index 0000000000..40051820b4
--- /dev/null
+++ b/files/pt-br/web/api/windowbase64/index.html
@@ -0,0 +1,120 @@
+---
+title: WindowBase64
+slug: Web/API/WindowBase64
+tags:
+  - API
+  - HTML-DOM
+  - Helper
+  - NeedsTranslation
+  - TopicStub
+  - WindowBase64
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</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 helper neither defines nor inherits any properties.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This helper does not inherit any methods.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowBase64.atob()")}}</dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>{{domxref("WindowBase64.btoa()")}}</dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</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', '#windowbase64', 'WindowBase64')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</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)}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.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>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>[1]  <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/windoweventhandlers/index.html b/files/pt-br/web/api/windoweventhandlers/index.html
new file mode 100644
index 0000000000..5eff621233
--- /dev/null
+++ b/files/pt-br/web/api/windoweventhandlers/index.html
@@ -0,0 +1,189 @@
+---
+title: WindowEventHandlers
+slug: Web/API/WindowEventHandlers
+tags:
+  - API
+  - HTML-DOM
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/WindowEventHandlers
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>WindowEventHandlers</code></strong> descreve os manipuladores de eventos comuns a várias interfaces como {{domxref("Window")}}, ou {{domxref("HTMLBodyElement")}} e  {{domxref("HTMLFrameSetElement")}}. Cada uma dessas interfaces podendo implementar manipuladores de eventos específicos adicionais.</p>
+
+<p><code>WindowEventHandlers</code> não é uma interface e nenhum objeto desse tipo pode ser criado.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>As propriedades de evento, no formulário <code>onXYZ</code>, são definidas no {{domxref("WindowEventHandlers")}}, e implementadas por {{domxref("Window")}}, e {{domxref("WorkerGlobalScope")}} para desenvolvedores web.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>É uma {{domxref("EventHandler")}} representando o código que será chamando quando o evento {{event("afterprint")}} é invocado.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>É um {{domxref("EventHandler")}} representando o código que será chamado quando o evento {{event("beforeprint")}} é invocado.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>É um {{domxref("EventHandler")}} representando o código que será chamado quando o evento  {{event("beforeunload")}} é invocado.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
+ <dd>É um {{domxref("EventHandler")}} representando o código que será chamado quando o evento {{event("hashchange")}} é invocado.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>É um {{domxref("EventHandler")}} representando o código que será chamado quando o evento {{event("languagechange")}} é invocado.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>É um {{domxref("EventHandler")}} representando o código que será chamado quando o evento  {{event("message")}} é invocado.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>É um {{domxref("EventHandler")}} representando o código que será chamado quando o evento  {{event("offline")}} é invocado.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>É um {{domxref("EventHandler")}} representando o código que será chamado quando o evento  {{event("online")}} é invocado.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>É um {{domxref("EventHandler")}} representando o código que será chamado quando o evento {{event("pagehide")}} é invocado.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>É um {{domxref("EventHandler")}} representando o código que será chamado quando o evento {{event("pageshow")}} é invocado.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
+ <dd>É um {{domxref("EventHandler")}} representando o código que será chamado quando o evento {{event("popstate")}} é invocado.</dd>
+ <dt>{{domxref("WindowEventHandlers.onresize")}}</dt>
+ <dd>É um {{domxref("EventHandler")}} representando o código que será chamado quando o evento {{event("resize")}} é invocado.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>É um {{domxref("EventHandler")}} representando o código que será chamado quando o evento {{event("storage")}} é invocado.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>É um {{domxref("EventHandler")}} representando o código que será chamado quando o evento {{event("unload")}} é invocado.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Esta interface não define métodos.</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('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onlanguage</code> since the {{SpecName("HTML 5")}} snapshot.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowEventHandlers</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onhashchange</code></td>
+   <td>{{CompatGeckoDesktop(1.9.2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlanguage</code>{{experimental_inline}}</td>
+   <td>{{CompatGeckoDesktop(32)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onstorage</code></td>
+   <td>{{CompatNo}}</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>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>{{CompatVersionUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onhashchange</code></td>
+   <td>{{CompatGeckoMobile(1.9.2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlanguage</code>{{experimental_inline}}</td>
+   <td>{{CompatGeckoMobile(32)}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onstorage</code></td>
+   <td>{{CompatNo}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+   <td rowspan="1">{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("Window")}} e {{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/windoweventhandlers/onhashchange/index.html b/files/pt-br/web/api/windoweventhandlers/onhashchange/index.html
new file mode 100644
index 0000000000..5cca998fbe
--- /dev/null
+++ b/files/pt-br/web/api/windoweventhandlers/onhashchange/index.html
@@ -0,0 +1,158 @@
+---
+title: WindowEventHandlers.onhashchange
+slug: Web/API/WindowEventHandlers/onhashchange
+translation_of: Web/API/WindowEventHandlers/onhashchange
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>O evento <strong>hashchange </strong>é disparado quando a <em>hash</em> da <em>window</em> muda. (ver {{domxref("Window.location", "location.hash")}}).</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">window.onhashchange = funcRef;
+</pre>
+
+<p><strong>ou</strong></p>
+
+<pre class="syntaxbox">&lt;body onhashchange="funcRef();"&gt;
+</pre>
+
+<p><strong>ou</strong></p>
+
+<pre class="syntaxbox">window.addEventListener("hashchange", funcRef, false);
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>funcRef</code></dt>
+ <dd>Referência a uma função</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush:js">if ("onhashchange" in window) {
+    alert("O browser têm suporte ao evento hashchange!");
+}
+
+function locationHashChanged() {
+    if (location.hash === "#algointeressante") {
+        algoInteressante();
+    }
+}
+
+window.onhashchange = locationHashChanged;
+</pre>
+
+<h2 id="O_evento_hashchange">O evento hashchange</h2>
+
+<p>O evento hashchange disparado possui os seguintes campos</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Campo</td>
+   <td class="header">Tipo</td>
+   <td class="header">Descrição</td>
+  </tr>
+  <tr>
+   <td><code>newURL</code> {{gecko_minversion_inline("6.0")}}</td>
+   <td><code>DOMString</code></td>
+   <td>A nova URL para a qual a janela está navegando.</td>
+  </tr>
+  <tr>
+   <td><code>oldURL</code> {{gecko_minversion_inline("6.0")}}</td>
+   <td><code>DOMString</code></td>
+   <td>A antiga URL da qual a janela veio.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade dos Browsers</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>Suporte Básico</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>
+    <p>8.0</p>
+
+    <p><span style="font-size: 11.9999990463257px; line-height: 20px;">atributos </span><code style="font-size: 14px;">oldURL</code>/<code style="font-size: 14px;">newURL</code> não são suportados.</p>
+   </td>
+   <td>10.6</td>
+   <td>5.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>Suporte Básico</td>
+   <td>2.2</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating the browser history">Manipulando o histórico do browser</a>, métodos <a href="/en-US/docs/DOM/window.history" title="DOM/window.history">history.pushState() e history.replaceState()</a>, evento <a href="/en-US/docs/DOM/window.onpopstate" title="DOM/window.onpopstate">popstate</a>.</li>
+</ul>
diff --git a/files/pt-br/web/api/windoweventhandlers/onpopstate/index.html b/files/pt-br/web/api/windoweventhandlers/onpopstate/index.html
new file mode 100644
index 0000000000..78bfa8fdc1
--- /dev/null
+++ b/files/pt-br/web/api/windoweventhandlers/onpopstate/index.html
@@ -0,0 +1,61 @@
+---
+title: WindowEventHandlers.onpopstate
+slug: Web/API/WindowEventHandlers/onpopstate
+translation_of: Web/API/WindowEventHandlers/onpopstate
+---
+<div>{{APIRef}} {{gecko_minversion_header("2")}}</div>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>Um evento manipulador para um evento <code>popstate</code> na janela</p>
+
+<p>Um evento popstate é disparado para a janela toda vez que o histórico de atividades mudar entre dois históricos de entradas para o mesmo documento. Se o histórico de entrada a ser ativo for criado por uma chamada para <code>history.pushState()</code> ou for afetado por um chamada <code>history.replaceState()</code>, o estado do evento <code>popstate </code>contém uma cópia do histórico do estado de entrada do objeto.</p>
+
+<p>Note que apenas chamando <code>history.pushState()</code> ou <code>history.replaceState() </code>não irá desencadear um evento<code> popstate. </code>O evento <code>popstate </code>é apenas desencadeado  por uma ação do navegador com clicar em um botão de voltar (ou chamar <code>history.back() </code>em JavaScript). E o evento é apenas desencadeado quando o usuário navega entre dois históricos de entrada do mesmo documento.<br>
+ <br>
+ Navegadores tendem a lidar com o evento <code>popstate </code>diferente no carregamento da página. Chrome (anterior versão 34) e Safari sempre emite um evento <code>popstate</code> no carregamento da página, mas Firefox não.</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox">window.onpopstate = <var>funcRef</var>;
+</pre>
+
+<ul>
+ <li><var>funcRef</var> é uma função de manipulador.</li>
+</ul>
+
+<h2 id="The_popstate_event" name="The_popstate_event">O evento popstate</h2>
+
+<p>Como um exemplo, a página no <code><var>http://example.com/example.html</var></code> roda o seguinte código que vai gerar alertas conforme indicado:</p>
+
+<pre class="brush:js">window.onpopstate = function(event) {
+  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // alertas "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // alertas "location: http://example.com/example.html, state: null
+history.go(2);  // alertas "location: http://example.com/example.html?page=3, state: {"page":3}
+</pre>
+
+<div id="gt-src-tools">
+<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="pt"><span class="hps">Observe que mesmo que</span> <span class="hps">a entrada do histórico</span> <span class="hps">inicial (para </span></span><code><var>http://example.com/example.html</var></code><span lang="pt"><span class="hps">) </span></span>não tem objeto estado associado com ele, um evento <code>popstate</code> é ainda disparado quando nós ativamos essa entrada depois da segunda chamada do <code>history.back()</code>.<br>
+<br>
+ </div>
+</div>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate">HTML5 popstate event</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li>{{domxref("window.history")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history">Manipulating the browser history</a></li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example">Ajax navigation example</a></li>
+</ul>
diff --git a/files/pt-br/web/api/windoweventhandlers/onstorage/index.html b/files/pt-br/web/api/windoweventhandlers/onstorage/index.html
new file mode 100644
index 0000000000..48820c0bfa
--- /dev/null
+++ b/files/pt-br/web/api/windoweventhandlers/onstorage/index.html
@@ -0,0 +1,101 @@
+---
+title: WindowEventHandlers.onstorage
+slug: Web/API/WindowEventHandlers/onstorage
+tags:
+  - API
+  - Armazenamento web
+  - Propriedade
+  - Referencia
+  - WindowEventHandlers
+translation_of: Web/API/WindowEventHandlers/onstorage
+---
+<div class="syntaxbox">{{ ApiRef() }}</div>
+
+<p>A propriedade <strong><code>WindowEventHandlers.onstorage</code></strong> contém um manipulador de eventos que executa quando o evento {{event("storage")}} dispara. Isto ocorre quando a área de armazenamento é mudada. (ex. um novo item é armazenado.)</p>
+
+<h2 id="Syntax" name="Syntax">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>windowObj</em>.onstorage = function() { ... };</pre>
+
+<h2 id="Specification" name="Specification">Exemplos</h2>
+
+<pre class="brush: js">window.onstorage = function(e) {
+  console.log('The ' + e.key + ' key has been changed from ' + e.oldValue + ' to ' + e.newValue + '.');
+};</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-window-onstorage','onstorage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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>Suporte básico</td>
+   <td>{{CompatUnknown}}</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" style="line-height: 19.0909080505371px;">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</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 para Android</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/pt-br/web/api/windoworworkerglobalscope/fetch/index.html b/files/pt-br/web/api/windoworworkerglobalscope/fetch/index.html
new file mode 100644
index 0000000000..804f04fc45
--- /dev/null
+++ b/files/pt-br/web/api/windoworworkerglobalscope/fetch/index.html
@@ -0,0 +1,305 @@
+---
+title: WindowOrWorkerGlobalScope.fetch()
+slug: Web/API/WindowOrWorkerGlobalScope/fetch
+translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>O método <code><strong>fetch()</strong></code> do mixin {{domxref("WindowOrWorkerGlobalScope")}} inicia um processo de busca de um recurso da rede. Este, retorna uma promessa que resolve o objeto {{domxref("Response")}} que representa a resposta a sua requisição. </p>
+
+<p><code>WorkerOrGlobalScope</code> é implementado por {{domxref("Window")}} e {{domxref("WorkerGlobalScope")}}, o que significa que o método <code>fetch()</code> está disponível em praticamente qualquer contexto em que você possa querer obter recursos.</p>
+
+<p>Uma promessa {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} rejeita com um {{jsxref("TypeError")}} quando um erro de rede é encontrado, embora isso geralmente signifique um problema de permissões ou similar. Uma verificação precisa de um <code>fetch()</code> bem-sucedido incluiria a verificação de uma promessa resolvida, e depois verificando se a propriedade {{domxref("Response.ok")}} possui valor <code>true</code>. Um status HTTP 404 não constitui um erro de rede.</p>
+
+<p>O método <code>fetch()</code> é controlado pela diretiva <code>connect-src</code> da <a href="/en-US/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> em vez da diretiva dos recursos que está recuperando.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Os parâmetros do método <code>fetch()</code> são idênticos aos do construtor {{domxref("Request.Request","Request()")}}.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">Promise&lt;Response&gt; fetch(input[, init]);</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><em>input</em></dt>
+ <dd>Isto define o recurso que você deseja buscar. Isto pode ser:
+ <ul>
+  <li>Um {{domxref("USVString")}} contendo uma URL direta para o recurso que você quer obter. Alguns navegadores aceitam <code>blob:</code> e <code>data:</code> como esquemas.</li>
+  <li>Um objeto {{domxref("Request")}}.</li>
+ </ul>
+ </dd>
+ <dt><em>init</em> {{optional_inline}}</dt>
+ <dd>Um objeto opcional que contém configurações personalizadas que você pode aplicar à requisição. As opções possíveis são:
+ <ul>
+  <li><code>method</code>: Método HTTP, por exemplo, <code>GET</code>, <code>POST</code>.</li>
+  <li><code>headers</code>: Qualquer cabeçalho que você queira adicionar à sua requisição, contido dentro de um objeto {{domxref("Headers")}} ou um objeto literal com valores {{domxref("ByteString")}}.</li>
+  <li><code>body</code>: Qualquer corpo que você queira adicionar à sua requisição: podendo ser um {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, ou um objeto {{domxref("USVString")}}. Note que uma requisição usando os métodos <code>GET</code> ou <code>HEAD</code> não pode ter um corpo.</li>
+  <li><code>mode</code>: O modo que deseja usar para a requisição, por exemplo, <code>cors</code>, <code>no-cors</code>, ou <code>same-origin.</code></li>
+  <li><code>credentials</code>: A credencial que deseja usar para a requisição: <code>omit</code>, <code>same-origin</code>, ou <code>include</code>. Para enviar automaticamente cookies para o domínio atual, esta opção deve ser fornecida. Começando com o Chrome 50, essa propriedade também usa uma instância {{domxref("FederatedCredential")}} ou uma instância {{domxref("PasswordCredential")}}.</li>
+  <li><code>cache</code>: O modo de cache que deseja usar na requisição: <code>default</code>, <code>no-store</code>, <code>reload</code>, <code>no-cache</code>, <code>force-cache</code>, ou <code>only-if-cached</code>.</li>
+  <li><code>redirect</code>: O modo de redirecionamento pode usar: <code>follow</code> (segue automaticamente o redirecionamento), <code>error</code> (aborta com um erro se ocorrer um redirecionamento), ou <code>manual</code> (manipula redirecionamentos manualmente). No Chrome o padrão foi <code>follow</code> antes do Chrome 47 e <code>manual</code> a partir do Chrome 47.</li>
+  <li><code>referrer</code>: Um {{domxref("USVString")}} especificando <code>no-referrer</code>, <code>client</code>, ou uma URL. O padrão é <code>client</code>.</li>
+  <li><code>referrerPolicy</code>: Especifica o valor do cabeçalho HTTP referer. Pode ser um destes: <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>: Contém o valor de <a href="/en-US/docs/Web/Security/Subresource_Integrity">integridade de subrecurso</a> da requisição (por exemplo, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li>
+  <li><code>signal</code>: Uma instância do objeto {{domxref("FetchSignal")}}; permite que você se comunique com um pedido de busca e controle-o através de um {{domxref("FetchController")}}. {{non-standard_inline}}</li>
+  <li><code>observe</code>: Um objeto {{domxref("ObserverCallback")}} — o objetivo exclusivo deste objeto é fornecer uma função de retorno de chamada que é executada quando a solicitação fetch é executada. Isto retorna um objeto {{domxref("FetchObserver")}} que pode ser usado para recuperar informações sobre o status de uma solicitação fetch. {{non-standard_inline}}</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valor_de_Retorno">Valor de Retorno</h3>
+
+<p>Uma {{domxref("Promise")}} que resolve um objeto {{domxref("Response")}}.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Tipo</strong></th>
+   <th scope="col"><strong>Descrição</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>Desdo o <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>fetch()</code><br>
+    lançará um <code>TypeError</code> se a URL tiver credenciais, como <code>http://user:password@example.com</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<p>In our <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">Fetch Request example</a> (see <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) we create a new {{domxref("Request")}} object using the relevant constructor, then fetch it using a <code>fetch()</code> call. Since we are fetching an image, we run {{domxref("Body.blob()")}} on the response to give it the proper MIME type so it will be handled properly, then create an Object URL of it and display it in an {{htmlelement("img")}} element.</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>In our <a href="https://github.com/mdn/fetch-examples/blob/master/fetch-with-init-then-request/index.html">Fetch with init then Request example</a> (see <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) we do the same thing except that we pass in an init object when we invoke <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>Note that you could also pass the init object in with the <code>Request</code> constructor to get the same effect, e.g.:</p>
+
+<pre class="brush: js">var myRequest = new Request('flowers.jpg', myInit);</pre>
+
+<p>You can also use an object literal as <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="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','#fetch-method','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Defined in a <code>WindowOrWorkerGlobalScope</code> partial in the newest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Adds {{domxref("FederatedCredential")}} or {{domxref("PasswordCredential")}} instance as a possible value for <code>init.credentials</code>.</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>14</td>
+   <td>{{CompatGeckoDesktop(34)}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop(39)}}<br>
+    {{CompatGeckoDesktop(52)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>29<br>
+    28<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Streaming response body</td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>14</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Support for <code>blob:</code> and <code>data:</code></td>
+   <td>{{CompatChrome(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code></td>
+   <td>{{CompatChrome(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>39</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>signal</code> and <code>observer</code></td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}<sup>[3]</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>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>{{CompatNo}}</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>14</td>
+   <td>{{CompatGeckoMobile(52)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42)}}</td>
+  </tr>
+  <tr>
+   <td>Streaming response body</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>14</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43)}}</td>
+  </tr>
+  <tr>
+   <td>Support for <code>blob:</code> and <code>data:</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43)}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>39</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(52)}}</td>
+  </tr>
+  <tr>
+   <td><code>signal</code> and <code>observer</code></td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}<sup>[3]</sup></td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] API is implemented behind a preference.</p>
+
+<p>[2] <code>fetch()</code> now defined on {{domxref("WindowOrWorkerGlobalScope")}} mixin.</p>
+
+<p>[3] Hidden behind a preference in 55+ Nightly. In about:config, you need to create two new boolean prefs — <code>dom.fetchObserver.enabled</code> and <code>dom.fetchController.enabled</code> — and set the values of both to <code>true</code>.</p>
+
+<h2 id="See_also">See also</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/pt-br/web/api/windoworworkerglobalscope/index.html b/files/pt-br/web/api/windoworworkerglobalscope/index.html
new file mode 100644
index 0000000000..d1321eb031
--- /dev/null
+++ b/files/pt-br/web/api/windoworworkerglobalscope/index.html
@@ -0,0 +1,189 @@
+---
+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>O <a href="https://medium.com/javascript-scene/functional-mixins-composing-software-ffb66d5e731c">mixin</a> WindowOrWorkerGlobalScope descreve vários recursos comuns às interfaces Window e WorkerGlobalScope. Cada uma dessas interfaces pode, obviamente, adicionar mais recursos além dos listados abaixo.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: <code>WindowOrWorkerGlobalScope</code> é um mixin e não uma interface; você não pode atualmente criar um objeto do tipo <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', 'webappapis.html#dom-origin', '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>{{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>{{CompatGeckoDesktop(52)}}</td>
+   <td>54</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code></td>
+   <td>{{CompatGeckoDesktop(54)}}</td>
+   <td>59</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 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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>54</td>
+  </tr>
+  <tr>
+   <td><code>origin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(54)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>59</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window")}}</li>
+ <li>{{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/windoworworkerglobalscope/setinterval/index.html b/files/pt-br/web/api/windoworworkerglobalscope/setinterval/index.html
new file mode 100644
index 0000000000..b7ade5307d
--- /dev/null
+++ b/files/pt-br/web/api/windoworworkerglobalscope/setinterval/index.html
@@ -0,0 +1,629 @@
+---
+title: WindowOrWorkerGlobalScope.setInterval()
+slug: Web/API/WindowOrWorkerGlobalScope/setInterval
+translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<div> </div>
+
+<p>O método <strong><code>setInterval() </code></strong>oferecido das interfaces {{domxref("Window")}} e {{domxref("Worker")}}, repetem chamadas de funções or executam trechos de código, com um tempo de espera fixo entre cada chamada. Isso retorna um ID único para o intervalo, podendo remove-lo mais tarde apenas o chamando {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}}. Este metodo é definido pelo mixin {{domxref("WindowOrWorkerGlobalScope")}}.</p>
+
+<h2 id="Sintaxe.">Sintaxe.</h2>
+
+<pre class="syntaxbox"><em>var intervalID</em> = scope.setInterval(<em>func</em>, <em>delay</em>[, <em>param1</em>, <em>param2</em>, ...]);
+<em>var intervalID</em> = scope.setInterval(<em>code</em>, <em>delay</em>);
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>func</code></dt>
+ <dd>Uma {{jsxref("function")}} para ser executada a cada <code>delay</code> em milisegundos.  Não é passado nenhum parâmetro para a função, e não retorna nenhum valor esperado.</dd>
+ <dt><code>code</code></dt>
+ <dd>Uma sintaxe opcional permite você incuir uma string ao invés de uma função, no qual é compilado e executada a cada <code>delay</code> em milisegundos. Esta sintaxe <em>não é recomendada </em>pelos mesmos motivos que envolvem riscos de segurança de {{jsxref("eval", "eval()")}}.</dd>
+ <dt><code>delay</code></dt>
+ <dd>O tempo, em milisegundos (milésimos de segundo), o temporizador deve atrasar entre cada execução de uma especifica função ou código. Se esse parâmetro for menos que 10, um valor de 10 é usado. Note que o atraso pode vir a ser mais longo; veja {{SectionOnPage("/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout", "Reasons for delays longer than specified")}} para exemplos.</dd>
+ <dt><code>param1, ..., paramN</code> {{optional_inline}}</dt>
+ <dd>Parâmetros adicionais que são passados através da função especificada pela <em>func</em> quando o temporizador expirar.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: Passing additional parameters to <code>setInterval()</code> in the first syntax does not work in Internet Explorer 9 and earlier. If you want to enable this functionality on that browser, you must use a polyfill (see the <a href="#Callback_arguments">Callback arguments</a> section).</p>
+</div>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>O <code>intervalID</code> retornado é um número, non-zero valor que identifica o temporizador criado pela chamada do <code>setInterval()</code>; este valor pode ser passado para {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}} afim de cancelar o timeout.</p>
+
+<p>Isso pode ser útil, estar ciente que o <code>setInterval()</code> e {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} compartilham o mesmo grupo de IDs, e que o <code>clearInterval()</code> e {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} podem tecnicamente serem usados em conjunto. Para deixar claro, contudo, você deve sempre tentar evitar combina-los, afim de evitar confusão na manutenção do seu código.</p>
+
+<div class="note"><strong>Note</strong>: The <code>delay</code> parameter is converted to a signed 32-bit integer. This effectively limits <code>delay</code> to 2147483647 ms, since it's specified as a signed integer in the IDL.</div>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Exemplo_1_Sintaxe_básica">Exemplo 1: Sintaxe básica</h3>
+
+<p>O seguinte exemplo mostra a sintaxe básica do <code>setInterval()</code></p>
+
+<pre class="brush:js">var intervalID = window.setInterval(myCallback, 500);
+
+function myCallback() {
+  // Your code here
+}
+</pre>
+
+<h3 id="Exemplo_2_Alternando_duas_cores">Exemplo 2: Alternando duas cores</h3>
+
+<p>O seguinte exemplo chama a função <code>flashtext()</code> uma vez por segundo até o botão de parar ser pressionado.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;setInterval/clearInterval example&lt;/title&gt;
+
+  &lt;script&gt;
+    var nIntervId;
+
+    function changeColor() {
+      nIntervId = setInterval(flashText, 1000);
+    }
+
+    function flashText() {
+      var oElem = document.getElementById('my_box');
+      oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
+      // oElem.style.color == 'red' ? 'blue' : 'red' is a ternary operator.
+    }
+
+    function stopTextColor() {
+      clearInterval(nIntervId);
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="changeColor();"&gt;
+  &lt;div id="my_box"&gt;
+    &lt;p&gt;Hello World&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;button onclick="stopTextColor();"&gt;Stop&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Exemplo_3_Simulação_de_máquina_de_escrever">Exemplo 3: Simulação de máquina de escrever</h3>
+
+<p>O seguinte exemplo simula uma máquina de escrever primeiro limpando e digitando lentamente o conteúdo para  <code><a href="https://developer.mozilla.org/en-US/docs/DOM/NodeList">NodeList</a></code> que corresponde a um grupo especificado de seletores.</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;JavaScript Typewriter - MDN Example&lt;/title&gt;
+&lt;script&gt;
+  function Typewriter (sSelector, nRate) {
+
+  function clean () {
+    clearInterval(nIntervId);
+    bTyping = false;
+    bStart = true;
+    oCurrent = null;
+    aSheets.length = nIdx = 0;
+  }
+
+  function scroll (oSheet, nPos, bEraseAndStop) {
+    if (!oSheet.hasOwnProperty('parts') || aMap.length &lt; nPos) { return true; }
+
+    var oRel, bExit = false;
+
+    if (aMap.length === nPos) { aMap.push(0); }
+
+    while (aMap[nPos] &lt; oSheet.parts.length) {
+      oRel = oSheet.parts[aMap[nPos]];
+
+      scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
+
+      if (bEraseAndStop &amp;&amp; (oRel.ref.nodeType - 1 | 1) === 3 &amp;&amp; oRel.ref.nodeValue) {
+        bExit = true;
+        oCurrent = oRel.ref;
+        sPart = oCurrent.nodeValue;
+        oCurrent.nodeValue = '';
+      }
+
+      oSheet.ref.appendChild(oRel.ref);
+      if (bExit) { return false; }
+    }
+
+    aMap.length--;
+    return true;
+  }
+
+  function typewrite () {
+    if (sPart.length === 0 &amp;&amp; scroll(aSheets[nIdx], 0, true) &amp;&amp; nIdx++ === aSheets.length - 1) { clean(); return; }
+
+    oCurrent.nodeValue += sPart.charAt(0);
+    sPart = sPart.slice(1);
+  }
+
+  function Sheet (oNode) {
+    this.ref = oNode;
+    if (!oNode.hasChildNodes()) { return; }
+    this.parts = Array.prototype.slice.call(oNode.childNodes);
+
+    for (var nChild = 0; nChild &lt; this.parts.length; nChild++) {
+      oNode.removeChild(this.parts[nChild]);
+      this.parts[nChild] = new Sheet(this.parts[nChild]);
+    }
+  }
+
+  var
+    nIntervId, oCurrent = null, bTyping = false, bStart = true,
+    nIdx = 0, sPart = "", aSheets = [], aMap = [];
+
+  this.rate = nRate || 100;
+
+  this.play = function () {
+    if (bTyping) { return; }
+    if (bStart) {
+      var aItems = document.querySelectorAll(sSelector);
+
+      if (aItems.length === 0) { return; }
+      for (var nItem = 0; nItem &lt; aItems.length; nItem++) {
+        aSheets.push(new Sheet(aItems[nItem]));
+        /* Uncomment the following line if you have previously hidden your elements via CSS: */
+        // aItems[nItem].style.visibility = "visible";
+      }
+
+      bStart = false;
+    }
+
+    nIntervId = setInterval(typewrite, this.rate);
+    bTyping = true;
+  };
+
+  this.pause = function () {
+    clearInterval(nIntervId);
+    bTyping = false;
+  };
+
+  this.terminate = function () {
+    oCurrent.nodeValue += sPart;
+    sPart = "";
+    for (nIdx; nIdx &lt; aSheets.length; scroll(aSheets[nIdx++], 0, false));
+    clean();
+  };
+}
+
+/* usage: */
+var oTWExample1 = new Typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15);
+
+/* default frame rate is 100: */
+var oTWExample2 = new Typewriter('#controls');
+
+/* you can also change the frame rate value modifying the "rate" property; for example: */
+// oTWExample2.rate = 150;
+
+onload = function () {
+  oTWExample1.play();
+  oTWExample2.play();
+};
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+span.intLink, a, a:visited {
+  cursor: pointer;
+  color: #000000;
+  text-decoration: underline;
+}
+
+#info {
+  width: 180px;
+  height: 150px;
+  float: right;
+  background-color: #eeeeff;
+  padding: 4px;
+  overflow: auto;
+  font-size: 12px;
+  margin: 4px;
+  border-radius: 5px;
+  /* visibility: hidden; */
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;"&gt;CopyLeft 2012 by &lt;a href="https://developer.mozilla.org/" target="_blank"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/p&gt;
+&lt;p id="controls" style="text-align: center;"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="oTWExample1.play();"&gt;Play&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.pause();"&gt;Pause&lt;/span&gt; | &lt;span class="intLink" onclick="oTWExample1.terminate();"&gt;Terminate&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
+&lt;div id="info"&gt;
+Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
+&lt;/div&gt;
+&lt;h1&gt;JavaScript Typewriter&lt;/h1&gt;
+
+&lt;div id="article"&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
+&lt;form&gt;
+&lt;p&gt;Phasellus ac nisl lorem: &lt;input type="text" /&gt;&lt;br /&gt;
+&lt;textarea style="width: 400px; height: 200px;"&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/textarea&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send" /&gt;
+&lt;/form&gt;
+&lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.&lt;/p&gt;
+&lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><a href="/files/3997/typewriter.html">View this demo in action</a>. See also: <a href="/en-US/docs/DOM/window.clearInterval"><code>clearInterval()</code></a>.</p>
+
+<h2 id="Argumentos_callback">Argumentos callback</h2>
+
+<p>Como já foi discutido, Internet Explorer 9 e versões anteriores não suportam passar argumentos para a função callback em ambos <code>setTimeout()</code> ou <code>setInterval()</code>. O seguinte código <strong>IE-specific</strong> demonstra um método para superar esta limitação. Para usar, apenas adicione o seguinte código no topo do seu script.</p>
+
+<pre class="brush:js">/*\
+|*|
+|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
+|*|  callback functions of javascript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all &amp;&amp; !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all &amp;&amp; !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+</pre>
+
+<p>Outra possibilidade é uso uma função anônima para chama o callback, apesar de que esta solução seja um pouco mais pesada. Exemplo:</p>
+
+<pre class="brush:js">var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);</pre>
+
+<p>Outra possibilidade é usar o <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. Exemplo:</p>
+
+<pre class="brush:js">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre>
+
+<p>{{h3_gecko_minversion("Inactive tabs", "5.0")}}</p>
+
+<p>Starting in Gecko 5.0 {{geckoRelease("5.0")}}, intervals are clamped to fire no more often than once per second in inactive tabs.</p>
+
+<h2 id="O_problema_do_this">O problema do "<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>"</h2>
+
+<p>Quando você passa um método para <code>setInterval()</code> ou qualquer outra função, ela é chamada com o valor do <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> errado. Este problema é explicado em detalhes em <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript reference</a>.</p>
+
+<h3 id="Explicação">Explicação</h3>
+
+<p>O código executado pelo <code>setInterval()</code> roda em um contexto de execução separado da função que foi chamada. Como uma consequência, o <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> da função chamada, é setado como o objeto <code>window</code> (ou <code>global</code>), esse não é o mesmo valor do <code>this</code> para a função chamada em setTimeout. veja o seguinte exemplo (que usa <code>setTimeout()</code> ao invés de <code>setInterval()</code> - o problema segue para ambos os temporizadores)</p>
+
+<pre class="brush:js">myArray = ['zero', 'one', 'two'];
+
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"
+setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
+setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds
+// passing the 'this' object with .call won't work
+// because this will change the value of this inside setTimeout itself
+// while we want to change the value of this inside myArray.myMethod
+// in fact, it will be an error because setTimeout code expects this to be the window object:
+setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
+</pre>
+
+<p> </p>
+
+<p>Como você pode ver, não há maneiras de passar o objeto <code>this</code> para a função callback.</p>
+
+<p> </p>
+
+<h3 id="Uma_possível_solução">Uma possível solução</h3>
+
+<p>Um possível caminho para resolver o problema do <code>this</code>, é sobreescrever as duas funções globais nativas <code>setTimeout()</code> ou <code>setInterval()</code> com duas <em>non-native</em> que permitem sua invocação através do método <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/call">Function.prototype.call</a></code>. O seguinte exemplo mostra a possível substituição.</p>
+
+<pre class="brush:js">// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};</pre>
+
+<div class="note">These two replacements also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as <em>non-standard-compliant</em> polyfills also. See the <a href="#Callback_arguments">callback arguments paragraph</a> for a <em>standard-compliant</em> polyfill.</div>
+
+<p>Teste da nova implementação:</p>
+
+<pre class="brush:js">myArray = ['zero', 'one', 'two'];
+
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length &gt; 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds
+</pre>
+
+<p>Outra, mais complexa, solução para o problema do <code>this</code> é <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/setInterval$edit#A_little_framework">the following framework</a>.</p>
+
+<div class="note">JavaScript 1.8.5 introduces the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Also, ES2015 supports <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>, with lexical this allowing us to write setInterval( () =&gt; this.myMethod) if we're inside myArray method.</div>
+
+<h2 id="MiniDaemon_-_A_framework_for_managing_timers">MiniDaemon - A framework for managing timers</h2>
+
+<p>In pages requiring many timers, it can often be difficult to keep track of all of the running timer events. One approach to solving this problem is to store information about the state of a timer in an object. Following is a minimal example of such an abstraction. The constructor architecture explicitly avoids the use of closures. It also offers an alternative way to pass the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object to the callback function (see <a href="#The_.22this.22_problem">The "this" problem</a> for details). The following code is also <a href="https://github.com/madmurphy/minidaemon.js">available on GitHub</a>.</p>
+
+<div class="note">For a more complex but still modular version of it (<code><em>Daemon</em></code>) see <a href="/en-US/Add-ons/Code_snippets/Timers/Daemons">JavaScript Daemons Management</a>. This more complex version is nothing but a big and scalable collection of methods for the <code><em>Daemon</em></code> constructor. However, the <code><em>Daemon</em></code> constructor itself is nothing but a clone of <code><em>MiniDaemon</em></code> with an added support for <em>init</em> and <em>onstart</em> functions declarable during the instantiation of the <code><em>daemon</em></code>. <strong>So the <code><em>MiniDaemon</em></code> framework remains the recommended way for simple animations</strong>, because <code><em>Daemon</em></code> without its collection of methods is essentially a clone of it.</div>
+
+<h3 id="minidaemon.js">minidaemon.js</h3>
+
+<pre class="brush:js">/*\
+|*|
+|*|  :: MiniDaemon ::
+|*|
+|*|  Revision #2 - September 26, 2014
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|  https://github.com/madmurphy/minidaemon.js
+|*|
+|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/lgpl-3.0.html
+|*|
+\*/
+
+function MiniDaemon (oOwner, fTask, nRate, nLen) {
+  if (!(this &amp;&amp; this instanceof MiniDaemon)) { return; }
+  if (arguments.length &lt; 2) { throw new TypeError('MiniDaemon - not enough arguments'); }
+  if (oOwner) { this.owner = oOwner; }
+  this.task = fTask;
+  if (isFinite(nRate) &amp;&amp; nRate &gt; 0) { this.rate = Math.floor(nRate); }
+  if (nLen &gt; 0) { this.length = Math.floor(nLen); }
+}
+
+MiniDaemon.prototype.owner = null;
+MiniDaemon.prototype.task = null;
+MiniDaemon.prototype.rate = 100;
+MiniDaemon.prototype.length = Infinity;
+
+  /* These properties should be read-only */
+
+MiniDaemon.prototype.SESSION = -1;
+MiniDaemon.prototype.INDEX = 0;
+MiniDaemon.prototype.PAUSED = true;
+MiniDaemon.prototype.BACKW = true;
+
+  /* Global methods */
+
+MiniDaemon.forceCall = function (oDmn) {
+  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
+  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
+  return true;
+};
+
+  /* Instances methods */
+
+MiniDaemon.prototype.isAtEnd = function () {
+  return this.BACKW ? isFinite(this.length) &amp;&amp; this.INDEX &lt; 1 : this.INDEX + 1 &gt; this.length;
+};
+
+MiniDaemon.prototype.synchronize = function () {
+  if (this.PAUSED) { return; }
+  clearInterval(this.SESSION);
+  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
+};
+
+MiniDaemon.prototype.pause = function () {
+  clearInterval(this.SESSION);
+  this.PAUSED = true;
+};
+
+MiniDaemon.prototype.start = function (bReverse) {
+  var bBackw = Boolean(bReverse);
+  if (this.BACKW === bBackw &amp;&amp; (this.isAtEnd() || !this.PAUSED)) { return; }
+  this.BACKW = bBackw;
+  this.PAUSED = false;
+  this.synchronize();
+};
+</pre>
+
+<div class="note">MiniDaemon passes arguments to the callback function. If you want to work on it with browsers that natively do not support this feature, use one of the methods proposed above.</div>
+
+<h3 id="Syntax">Syntax</h3>
+
+<p><code>var myDaemon = new MiniDaemon(<em>thisObject</em>, <em>callback</em>[</code><code>, <em>rate</em></code><code>[, <em>length</em>]]);</code></p>
+
+<h3 id="Description">Description</h3>
+
+<p>Returns a JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> containing all information needed by an animation (like the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object, the callback function, the length, the frame-rate).</p>
+
+<h4 id="Parameters">Parameters</h4>
+
+<dl>
+ <dt><code>thisObject</code></dt>
+ <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which the <em>callback</em> function is called. It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
+ <dt><code>callback</code></dt>
+ <dd>The function that is repeatedly invoked . <strong>It is called with three parameters</strong>: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the <em>daemon</em> - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and <em>backwards</em> (a boolean expressing whether the <em>index</em> is increasing or decreasing). It is something like <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>). <strong>If the callback function returns a <code>false</code> value the <em>daemon</em> is paused</strong>.</dd>
+ <dt><code>rate (optional)</code></dt>
+ <dd>The time lapse (in number of milliseconds) between each invocation. The default value is 100.</dd>
+ <dt><code>length (optional)</code></dt>
+ <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>. The default value is <code>Infinity</code>.</dd>
+</dl>
+
+<h4 id="MiniDaemon_instances_properties"><code>MiniDaemon</code> instances properties</h4>
+
+<dl>
+ <dt><code>myDaemon.owner</code></dt>
+ <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which is executed the daemon (read/write). It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd>
+ <dt><code>myDaemon.task</code></dt>
+ <dd>The function that is repeatedly invoked (read/write). It is called with three arguments: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the daemon - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and backwards (a boolean expressing whether the <em>index</em> is decreasing or not) – see above. If the <code>myDaemon.task</code> function returns a <code>false</code> value the <em>daemon</em> is paused.</dd>
+ <dt><code>myDaemon.rate</code></dt>
+ <dd>The time lapse (in number of milliseconds) between each invocation (read/write).</dd>
+ <dt><code>myDaemon.length</code></dt>
+ <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> (read/write).</dd>
+</dl>
+
+<h4 id="MiniDaemon_instances_methods"><code>MiniDaemon</code> instances methods</h4>
+
+<dl>
+ <dt><code>myDaemon.isAtEnd()</code></dt>
+ <dd>Returns a boolean expressing whether the <em>daemon</em> is at the start/end position or not.</dd>
+ <dt><code>myDaemon.synchronize()</code></dt>
+ <dd>Synchronize the timer of a started daemon with the time of its invocation.</dd>
+ <dt><code>myDaemon.pause()</code></dt>
+ <dd>Pauses the daemon.</dd>
+ <dt><code>myDaemon.start([<em>reverse</em>])</code></dt>
+ <dd>Starts the daemon forward (<em>index</em> of each invocation increasing) or backwards (<em>index</em> decreasing).</dd>
+</dl>
+
+<h4 id="MiniDaemon_global_object_methods"><code>MiniDaemon</code> global object methods</h4>
+
+<dl>
+ <dt><code>MiniDaemon.forceCall(<em>minidaemon</em>)</code></dt>
+ <dd>Forces a single callback to the <code><em>minidaemon</em>.task</code> function regardless of the fact that the end has been reached or not. In any case the internal <code>INDEX</code> property is increased/decreased (depending on the actual direction of the process).</dd>
+</dl>
+
+<h3 id="Example_usage">Example usage</h3>
+
+<p>Your HTML page:</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;MiniDaemin Example - MDN&lt;/title&gt;
+  &lt;script type="text/javascript" src="minidaemon.js"&gt;&lt;/script&gt;
+  &lt;style type="text/css"&gt;
+    #sample_div {
+      visibility: hidden;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;p&gt;
+    &lt;input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /&gt;
+    &lt;input type="button" onclick="fadeInOut.start(true);" value="fade out"&gt;
+    &lt;input type="button" onclick="fadeInOut.pause();" value="pause" /&gt;
+  &lt;/p&gt;
+
+  &lt;div id="sample_div"&gt;Some text here&lt;/div&gt;
+
+  &lt;script type="text/javascript"&gt;
+    function opacity (nIndex, nLength, bBackwards) {
+      this.style.opacity = nIndex / nLength;
+      if (bBackwards ? nIndex === 0 : nIndex === 1) {
+        this.style.visibility = bBackwards ? 'hidden' : 'visible';
+      }
+    }
+
+    var fadeInOut = new MiniDaemon(document.getElementById('sample_div'), opacity, 300, 8);
+  &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><a href="/files/3995/minidaemon_example.html" title="MiniDaemon Example">View this example in action</a></p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>The <code>setInterval()</code> function is commonly used to set a delay for functions that are executed again and again, such as animations.</p>
+
+<p>You can cancel the interval using {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}.</p>
+
+<p>If you wish to have your function called <em>once</em> after the specified delay, use {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</p>
+
+<h3 id="Ensure_that_execution_duration_is_shorter_than_interval_frequency">Ensure that execution duration is shorter than interval frequency</h3>
+
+<p>If there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function using {{domxref("WindowOrWorkerGlobalScope.setTimeout")}}. For example, if using <code>setInterval</code> to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its allotted time. As such, you may find yourself with queued up XHR requests that won't necessarily return in order.</p>
+
+<p>In these cases, a recursive <code>setTimeout()</code> pattern is preferred:</p>
+
+<pre class="brush:js">(function loop(){
+   setTimeout(function() {
+      // Your logic here
+
+      loop();
+  }, delay);
+})();
+</pre>
+
+<p>In the above snippet, a named function <code>loop()</code> is declared and is immediately executed. <code>loop()</code> is recursively called inside <code>setTimeout()</code> after the logic has completed executing. While this pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recursing.</p>
+
+<h3 id="Throttling_of_intervals">Throttling of intervals</h3>
+
+<p><code>setInterval()</code> is subject to the same throttling restrictions in Firefox as {{domxref("WindowOrWorkerGlobalScope.setTimeout","setTimeout()")}}; see <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-setinterval', 'WindowOrWorkerGlobalScope.setInterval()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition (DOM Level 0)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/pt-br/web/api/windowtimers/cleartimeout/index.html b/files/pt-br/web/api/windowtimers/cleartimeout/index.html
new file mode 100644
index 0000000000..f03f43979f
--- /dev/null
+++ b/files/pt-br/web/api/windowtimers/cleartimeout/index.html
@@ -0,0 +1,100 @@
+---
+title: WindowTimers.clearTimeout()
+slug: Web/API/WindowTimers/clearTimeout
+tags:
+  - API
+  - Method
+  - Window
+translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout
+---
+<div>
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+</div>
+
+<h2 id="Summary" name="Summary">Sumário</h2>
+
+<p>O método <strong><code>clearTimeout()</code></strong> do escopo<em> </em>{{domxref("WindowOrWorkerGlobalScope")}} cancela um <em>timeout</em> previamente estabelecido pela função {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Síntaxe</h2>
+
+<pre class="syntaxbox"><em>escopo</em>.clearTimeout(<em>timeoutID</em>)
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>timeoutID</code></dt>
+ <dd>O ID do <em>timeout</em> que você deseja cancelar. Esse ID é o retorno da função <code>setTimeout()</code>.</dd>
+</dl>
+
+<p>É interessante ressaltar que os conjuntso de <em>ID</em>s usados pelos métodos {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} e {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} são compartilhados, o que significa que <code>clearTimeout()</code> e {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} podem ser tecnicamente utilizados de forma intercambiável. No entanto, para obter-se maior clareza, isso deve ser evitado.</p>
+
+<h2 id="Example" name="Example">Exemplo</h2>
+
+<p>Execute o script abaixo em uma página web e clique na página uma vez. Você verá uma mensagem aparecer um segundo depois. Se você continuar clicando na página várias vezes nesse intervalo de tempo, a mensagem aparecerá uma única vez.</p>
+
+<pre class="brush: js" dir="rtl">var alarme = {
+  relembrar: function(aMessage) {
+    alert(aMessage);
+    delete this.timeoutID;
+  },
+
+  setup: function() {
+    if (typeof this.timeoutID === 'number') {
+        this.cancelar();
+    }
+
+    this.timeoutID = window.setTimeout(function(msg) {
+        this.relembrar(msg);
+    }.bind(this), 1000, 'Wake up!');
+  },
+
+  cancelar: function() {
+    window.clearTimeout(this.timeoutID);
+  }
+};
+window.onclick = function() { alarme.setup() };</pre>
+
+<h2 id="Notes" name="Notes">Notas</h2>
+
+<p>Passar um <em>ID</em> inválido para <code>clearTimeout</code> não causa nenhum efeito (não lança nenhuma exceção).</p>
+
+<h2 id="Specification" name="Specification">Especificações</h2>
+
+<table class="standard-table" style="height: 166px; width: 1207px;">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'WindowOrWorkerGlobalScope.clearTimeout()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Método movido para <code>WindowOrWorkerGlobalScope</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'clearTimeout()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Compatibilidade</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.clearTimeout")}}</p>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</li>
+ <li>{{domxref("Window.requestAnimationFrame()")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/pt-br/web/api/windowtimers/index.html b/files/pt-br/web/api/windowtimers/index.html
new file mode 100644
index 0000000000..bd995e8f74
--- /dev/null
+++ b/files/pt-br/web/api/windowtimers/index.html
@@ -0,0 +1,116 @@
+---
+title: WindowTimers
+slug: Web/API/WindowTimers
+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 do not define any property, nor inherit any.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface do 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 repeated 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/pt-br/web/api/worker/index.html b/files/pt-br/web/api/worker/index.html
new file mode 100644
index 0000000000..8cf54eccb0
--- /dev/null
+++ b/files/pt-br/web/api/worker/index.html
@@ -0,0 +1,166 @@
+---
+title: Worker
+slug: Web/API/Worker
+translation_of: Web/API/Worker
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>A interface <strong>Worker </strong>da <a href="/en-US/docs/Web/API/Web_Workers_API">API do Web Worker</a> representa uma tarefa em background (segundo plano)<em> </em>que pode ser facilmente criada e emitir mensagens de volta ao seu criador. Criar um worker é possível chamando o construtor <code>Worker("path/to/worker/script")</code> e especificando um script para ser executado em sua própria thread.</p>
+
+<p>Um worker pode, por sua vez, gerar outros workers, contanto que estes estejam hospedados na mesma <a href="/en-US/docs/Web/Security/Same-origin_policy">origem</a> da página principal (Nota: workers aninhados <a href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5R3B4RN4GHU">não estão atualmente implementados no Blink</a>). Além disso, workers podem utilizar <a href="/pt-BR/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> para E/S de rede, desde que seja estipulado que os atributos <code>responseXML</code> e <code>channel</code> em <code>XMLHttpRequest</code> retornem sempre <code>null</code>.</p>
+
+<p><a href="/En/DOM/Worker/Functions_available_to_workers">Não são todas as interfaces e funções que estão disponíveis</a> para o script associado a um <code>Worker</code>.</p>
+
+<div class="blockIndicator note">
+<p>No Firefox, se você deseja utilizar workers em extensões e gostaria de ter acesso a <a href="/en/js-ctypes">js-ctypes</a>, você deveria utilizar o objeto {{ domxref("ChromeWorker") }} .</p>
+</div>
+
+<h2 id="Construtores">Construtores</h2>
+
+<dl>
+ <dt>{{domxref("Worker.Worker", "Worker()")}}</dt>
+ <dd>Cria um worker dedicado da web que executa o script especificado na URL. Workers também podem ser construídos usando <a href="/en-US/docs/Web/API/Blob">Blobs</a>.</dd>
+</dl>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<p><em>Herda as propriedades do pai, {{domxref("EventTarget")}}, e implementa as propriedades que compõem o {{domxref("AbstractWorker")}}.</em></p>
+
+<h3 id="Manipuladores_de_Eventos">Manipuladores de Eventos</h3>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>Um {{ domxref("EventListener") }} é chamado sempre quando um {{domxref("ErrorEvent")}} do tipo <code>error</code> é passado através do worker. Este é herdado pelo {{domxref("AbstractWorker")}}.</dd>
+ <dt>{{domxref("Worker.onmessage")}}</dt>
+ <dd>Um {{ domxref("EventListener") }} é chamado sempre quando um {{domxref("MessageEvent")}} do tipo <code>message</code> é passado através do worker — ou seja, quando uma mensagem é enviada para o documento pai do worker via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. A mensagem é armazenada na propriedade de dados do evento {{domxref("MessageEvent.data", "data")}}.</dd>
+</dl>
+
+<h2 id="Métodos">Métodos</h2>
+
+<p><em>Os métodos são herdados de seu pai. {{domxref("EventTarget")}}, e implementa os métodos de {{domxref("AbstractWorker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Worker.postMessage()")}}</dt>
+ <dd>Envia uma mensagem — qual pode consistir de qualquer objeto do JavaScript — para o escopo interno do worker.</dd>
+ <dt>{{domxref("Worker.terminate()")}}</dt>
+ <dd>Imediatamente encerra o worker. Isso não oferece ao worker a oportunidade de concluir suas operações; imediatamente o interrompe. <code> <a href="/pt-BR/docs/Web/API/ServiceWorker">ServiceWorker</a> </code>não suportam esse método.</dd>
+</dl>
+
+<h2 id="Eventos">Eventos</h2>
+
+<dl>
+ <dt><code><a href="/pt-BR/docs/Web/API/Worker/message_event">message </a></code></dt>
+ <dd>O evento é disparado quando o script pai do worker recebe uma mensagem do mesmo.<br>
+ Também é disponibilizado via <code><a href="/pt-BR/docs/Web/API/Worker/onmessage">onmessage</a>.</code></dd>
+ <dt><code><a href="/pt-BR/docs/Web/API/Worker/messageerror_event">messageerror</a></code></dt>
+ <dd>Dispara quando um Worker recebe uma mensagem que não pode ser <a href="/pt-BR/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">deserializada</a><br>
+ Também é disponibilizado via <code><a href="/pt-BR/docs/Web/API/Worker/onmessageerror">onmessageerror</a>.</code></dd>
+ <dt><code><a href="/pt-BR/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></code></dt>
+ <dd>Dispara sempre que um {{jsxref("Promise")}} é rejeitado, indenpendentemente de haver ou não um manipulador para capturar sua rejeição.<br>
+ Também é disponibilizado via <code><a href="/pt-BR/docs/Web/API/WindowEventHandlers/onrejectionhandled">onrejectionhandled</a>.</code></dd>
+ <dt><code><a href="pt-BR/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></code></dt>
+ <dd>Dispara sempre que um {{jsxref ("Promise")}} rejeita, independentemente de haver ou não um manipulador para capturar a rejeição. Também disponível por meio da propriedade do manipulador de eventos <code><a href="/pt-BR/docs/Web/API/WindowEventHandlers/onunhandledrejection">onunhandledrejection</a>.</code></dd>
+ <dd>.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>The following code snippet shows creation of a {{domxref("Worker")}} object using the {{domxref("Worker.Worker", "Worker()")}} constructor and usage of the object:</p>
+
+<pre class="brush: js notranslate">var myWorker = new Worker("worker.js");
+var first = document.querySelector('#number1');
+var second = document.querySelector('input#number2');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}</pre>
+
+<p>For a full example, see our<a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</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('HTML WHATWG', "#worker", "Worker")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{SpecName("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers', "#worker", "Worker")}}</td>
+   <td>{{Spec2('Web Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>Support varies for different types of workers. See each worker type's page for specifics.</p>
+
+<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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>10.0</td>
+   <td>10.6</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>Firefox OS (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>4.4</td>
+   <td>3.5</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>5.1</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/En/Using_web_workers" title="en/Using DOM workers">Using web workers</a></li>
+ <li><a href="/En/DOM/Worker/Functions_available_to_workers" title="https://developer.mozilla.org/En/DOM/Worker/Functions_available_to_workers">Functions available to workers</a></li>
+ <li>Other kind of workers: {{ domxref("SharedWorker") }} and <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker</a>.</li>
+ <li>Non-standard, Gecko-specific workers: {{ domxref("ChromeWorker") }}, used by extensions.</li>
+</ul>
diff --git a/files/pt-br/web/api/xmldocument/async/index.html b/files/pt-br/web/api/xmldocument/async/index.html
new file mode 100644
index 0000000000..63de77faea
--- /dev/null
+++ b/files/pt-br/web/api/xmldocument/async/index.html
@@ -0,0 +1,37 @@
+---
+title: Document.async
+slug: Web/API/XMLDocument/async
+translation_of: Web/API/XMLDocument/async
+---
+<p>{{APIRef("DOM")}}{{Deprecated_header}} {{Non-standard_header}}</p>
+
+<p><code>document.async </code>pode ser configurado para indicar se uma chamada {{domxref ("document.load")}} deve ser uma solicitação assíncrona ou síncrona. True é o valor padrão, indicando que os documentos devem ser carregados de forma assíncrona.</p>
+
+<p> </p>
+
+<p>(Carregamento de documentos assicronos a partir da versão 1.4 alpha.)</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush:js">function loadXMLData(e) {
+  alert(new XMLSerializer().serializeToString(e.target)); // Retorna o conteúdo de querydata.xml em String
+}
+
+var xmlDoc = document.implementation.createDocument("", "test", null);
+
+xmlDoc.async = false;
+xmlDoc.onload = loadXMLData;
+xmlDoc.load('querydata.xml');</pre>
+
+<h2 id="Specification" name="Specification">Especificação</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-LS/load-save.html#LS-DocumentLS">DOM Level 3 Load &amp; Save module</a></li>
+</ul>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/XML_in_Mozilla" title="XML_in_Mozilla">XML in Mozilla</a></li>
+ <li>{{domxref("document.load")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/xmldocument/index.html b/files/pt-br/web/api/xmldocument/index.html
new file mode 100644
index 0000000000..ddfbeaaac3
--- /dev/null
+++ b/files/pt-br/web/api/xmldocument/index.html
@@ -0,0 +1,61 @@
+---
+title: DocumentoXML
+slug: Web/API/XMLDocument
+tags:
+  - API
+  - DOM
+  - DocumentoXML
+  - Experimental
+  - Interface
+translation_of: Web/API/XMLDocument
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>A interface <strong>XMLDocument</strong> representa um document XML. Ele herda de {{DOMxRef("Document")}} e não adiciona nenhum método específico ou propriedades para este: no entanto, alguns algoritmos tem comportamento diferente com os dois tipos de documentos.</p>
+
+<h2 id="Propridades">Propridades</h2>
+
+<p><em>Esta interface não tem e nem herda nenhuma propriedade específica.</em></p>
+
+<h2 id="Metodos">Metodos</h2>
+
+<p><em>Esta interface não adiciona nenhum método novo.</em></p>
+
+<dl>
+ <dt>{{DOMxRef("XMLDocument.load()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt>
+ <dd>Carrega um documento XML</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#xmldocument", "XMLDocument")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Sem alterações.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#xmldocument", "XMLDocument")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Definição Inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_Navegadores">Compatibilidade com Navegadores</h2>
+
+<div class="hidden">A tabela de compatibilidade nesta página é gerada de dados estruturados. Se voce gostaria de contribuir com os dados, por favor, acesse <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e faça um pull request.</div>
+
+<p>{{Compat("api.XMLDocument")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">Indice de interfaces DOM</a></li>
+</ul>
diff --git a/files/pt-br/web/api/xmlhttprequest/abort/index.html b/files/pt-br/web/api/xmlhttprequest/abort/index.html
new file mode 100644
index 0000000000..52c1a52068
--- /dev/null
+++ b/files/pt-br/web/api/xmlhttprequest/abort/index.html
@@ -0,0 +1,118 @@
+---
+title: XMLHttpRequest.abort()
+slug: Web/API/XMLHttpRequest/abort
+tags:
+  - AJAX
+  - API
+  - HTTP
+  - HttpRequest
+  - Referencia
+  - XMLHttpRequest
+  - cancelando
+translation_of: Web/API/XMLHttpRequest/abort
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p>O método <strong>XMLHttpRequest.abort()</strong> aborta a requisição se ela já tiver sido enviada. Quando uma requisição é abortada, o seu readyState é modificado para 0 (Desativado), mas o evento <a href="/pt-BR/docs/Web/Events/readystatechange">readystatechange</a> não é disparado.</p>
+
+<h2 id="Sitaxe">Sitaxe</h2>
+
+<pre class="syntaxbox">xhrInstance.abort();</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<p>Nenhum.</p>
+
+<h3 id="Retorno">Retorno</h3>
+
+<p>Nenhum.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+xhr.open(method,url,true);
+
+xhr.send();
+
+xhr.abort();
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-abort()-method')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatUnknown}}</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>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>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Esse recurso foi implementado através de ActiveXObject (). O Internet Explorer implementa o padrão XMLHttpRequest desde a versão 7.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Web/API/XMLHttpRequest/Usando_XMLHttpRequest">Usando o XMLHttpRequest</a></li>
+</ul>
diff --git a/files/pt-br/web/api/xmlhttprequest/index.html b/files/pt-br/web/api/xmlhttprequest/index.html
new file mode 100644
index 0000000000..de045c5314
--- /dev/null
+++ b/files/pt-br/web/api/xmlhttprequest/index.html
@@ -0,0 +1,724 @@
+---
+title: XMLHttpRequest
+slug: Web/API/XMLHttpRequest
+tags:
+  - AJAX
+  - Fixit
+  - HTTP
+  - MakeBrowserAgnostic
+  - NeedsCleanup
+  - NeedsMobileBrowserCompatibility
+  - NeedsTranslation
+  - TopicStub
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p><code>XMLHttpRequest</code> é um objeto que fornece funcionalidade ao cliente para transferir dados entre um cliente e um servidor. Ele fornece uma maneira fácil de recuperar dados de um URL sem ter que fazer uma atualização de página inteira. Isso permite que uma página da Web atualize apenas uma parte do conteúdo sem interromper o que o usuário esteja fazendo. XMLHttpRequest é usado constantemente na programação de <a href="/pt-BR/docs/AJAX">AJAX</a>.</p>
+
+<p><code>XMLHttpRequest</code> foi originalmente projetado pela Microsoft e adotado pela Mozilla, Apple e Google. Está sendo padronizado pela <a href="https://xhr.spec.whatwg.org/">WHATWG</a>. Apesar do nome, XMLHttpRequest pode ser usado para recuperar qualquer tipo de dados, e não apenas XML, suportando também, protocolos diferentes de <a href="/en/HTTP" title="en/HTTP">HTTP</a> (incluindo file e ftp ).</p>
+
+<p>Para criar uma instância de XMLHttpRequest , basta fazer isso:</p>
+
+<pre>var myRequest = new XMLHttpRequest();
+</pre>
+
+<p>Para obter detalhes sobre como usar XMLHttpRequest , consulte <a class="internal" href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Usando XMLHttpRequest</a>.</p>
+
+<h2 id="Métodos">Métodos</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code><a class="internal" href="/en/DOM/XMLHttpRequest#XMLHttpRequest()" title="/en/DOM/XMLHttpRequest#XMLHttpRequest()">XMLHttpRequest</a>(JSObject objParameters);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#abort()" title="en/DOM/XMLHttpRequest#abort()">abort</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>DOMString <a class="internal" href="/en/DOM/XMLHttpRequest#getAllResponseHeaders()" title="en/DOM/XMLHttpRequest#getAllResponseHeaders()">getAllResponseHeaders</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>DOMString? <a class="internal" href="/en/DOM/XMLHttpRequest#getResponseHeader()" title="en/DOM/XMLHttpRequest#getResponseHeader()">getResponseHeader</a>(DOMString header);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#open()" title="en/DOM/XMLHttpRequest#open()">open</a>(DOMString method, DOMString url, optional boolean async, optional DOMString? user, optional DOMString? password);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#overrideMimeType()" title="en/DOM/XMLHttpRequest#overrideMimeType()">overrideMimeType</a>(DOMString mime);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>();</code><br>
+    <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(ArrayBuffer data);</code><br>
+    <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(Blob data);</code><br>
+    <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(Document data);</code><br>
+    <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(DOMString? data);</code><br>
+    <code>void <a class="internal" href="/en/DOM/XMLHttpRequest#send()" title="en/DOM/XMLHttpRequest#send()">send</a>(FormData data);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#setRequestHeader()" title="en/DOM/XMLHttpRequest#setRequestHeader()">setRequestHeader</a>(DOMString header, DOMString value);</code></td>
+  </tr>
+  <tr>
+   <th>Métodos não-padrão</th>
+  </tr>
+  <tr>
+   <td><code>[noscript] void <a class="internal" href="/en/DOM/XMLHttpRequest#init()" title="en/DOM/XMLHttpRequest#init()">init</a>(in nsIPrincipal principal, in nsIScriptContext scriptContext, in nsPIDOMWindow ownerWindow);</code></td>
+  </tr>
+  <tr>
+   <td><code>[noscript] void <a class="internal" href="/en/DOM/XMLHttpRequest#openRequest()" title="en/DOM/XMLHttpRequest#openRequest()">openRequest</a>(in AUTF8String method, in AUTF8String url, in boolean async, in AString user, in AString password); </code></td>
+  </tr>
+  <tr>
+   <td><code>void <a class="internal" href="/en/DOM/XMLHttpRequest#sendAsBinary()" title="en/DOM/XMLHttpRequest#sendAsBinary()">sendAsBinary</a>(in DOMString body);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propriedades">Propriedades</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Atributo</th>
+   <th>Tipo</th>
+   <th>Descrição</th>
+  </tr>
+  <tr id="onreadystatechange">
+   <td>
+    <p><code>onreadystatechange</code></p>
+   </td>
+   <td><code>Function?</code></td>
+   <td>
+    <p>A função de objeto JavaScript que é chamado sempre que o atributo readyState sofre alteração. A função de callback é chamada a partir da thread existente na interface de usuário.</p>
+
+    <div class="warning"><strong>Aviso:</strong> Este não deve ser usado com chamadas síncronas e não deve ser utilizado a partir do código nativo.</div>
+   </td>
+  </tr>
+  <tr id="readyState">
+   <td><code>readyState</code></td>
+   <td><code>retorna o cabeçalho da requisição.</code></td>
+   <td>
+    <p> </p>
+
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <td class="header">Valor</td>
+       <td class="header">Estado</td>
+       <td class="header">Descrição</td>
+      </tr>
+      <tr>
+       <td><code>0</code></td>
+       <td><code>UNSENT</code></td>
+       <td><code>open() não foi chamado ainda.</code></td>
+      </tr>
+      <tr>
+       <td><code>1</code></td>
+       <td><code>OPENED</code></td>
+       <td><code>send() não foi chamado ainda.</code></td>
+      </tr>
+      <tr>
+       <td><code>2</code></td>
+       <td><code>HEADERS_RECEIVED</code></td>
+       <td><code>send() foi chamado, e cabeçalhos e status estão disponíveis.</code></td>
+      </tr>
+      <tr>
+       <td><code>3</code></td>
+       <td><code>LOADING</code></td>
+       <td>Download; responseText contém dados parciais.</td>
+      </tr>
+      <tr>
+       <td><code>4</code></td>
+       <td><code>DONE</code></td>
+       <td>A operação está concluída.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr id="response">
+   <td><code>response</code></td>
+   <td>ArrayBuffer, Document,Blob, DOMString</td>
+   <td>
+    <p>Retorna um objeto JavaScript de tipo {{domxref("ArrayBuffer")}}, {{domxref("Blob")}} ou {{domxref("Document")}}, de acordo com  o que estiver contido no <code><a href="#responseType">responseType</a>. </code>Retorna <code>null</code> se a request não esteja completa ou não obteve sucesso.</p>
+   </td>
+  </tr>
+  <tr id="responseText">
+   <td><code>responseText</code> {{ReadOnlyInline()}}</td>
+   <td><code>DOMString</code></td>
+   <td>A resposta à <em>request</em>, em formato texto, retorna null se a solicitação não teve êxito ou que ainda não foi enviada.</td>
+  </tr>
+  <tr id="responseType">
+   <td><code>responseType</code></td>
+   <td><code>XMLHttpRequestResponseType</code></td>
+   <td>
+    <p>Pode ser configurado para alterar o tipo de resposta.</p>
+
+    <table class="standard-table" style="width: auto;">
+     <tbody>
+      <tr>
+       <td class="header">Valor</td>
+       <td class="header">Tipo de dados de <code>resposta</code> de propriedade</td>
+      </tr>
+      <tr>
+       <td><code>""</code> (string vazia)</td>
+       <td>String (este é o padrão)</td>
+      </tr>
+      <tr>
+       <td><code>"arraybuffer"</code></td>
+       <td><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a></td>
+      </tr>
+      <tr>
+       <td><code>"blob"</code></td>
+       <td>{{ domxref("Blob") }}</td>
+      </tr>
+      <tr>
+       <td><code>"document"</code></td>
+       <td>{{ domxref("Document") }}</td>
+      </tr>
+      <tr>
+       <td><code>"json"</code></td>
+       <td>Objeto JavaScript, analisado a partir de uma seqüência de caracteres JSON retornado pelo servidor.</td>
+      </tr>
+      <tr>
+       <td><code>"text"</code></td>
+       <td>String</td>
+      </tr>
+      <tr>
+       <td><code>"moz-blob"</code></td>
+       <td>Usado pelo Firefox para permitir recuperar dados parciais do tipo {{ domxref("Blob") }},de eventos de progresso. Isso permite que o manipulador de eventos de progresso iniciar o processamento de dados enquanto ele ainda está sendo recebido.</td>
+      </tr>
+      <tr>
+       <td><code>"moz-chunked-text"</code></td>
+       <td>
+        <p>Semelhante ao "text" , mas o <em>streaming </em>ainda está fluindo. Isto significa que o valor na response , só está disponível durante a expedição do "progress" do evento e contém apenas os dados recebidos desde a última "progress" do evento.</p>
+
+        <p>Quando response é acessado durante um evento "progress", este contém uma string com os dados. Caso contrário, retorna null .</p>
+
+        <p>Este modo atualmente só funciona no Firefox.</p>
+       </td>
+      </tr>
+      <tr>
+       <td><code>"moz-chunked-arraybuffer"</code></td>
+       <td>
+        <p>Semelhante ao <code>"arraybuffer"</code>, mas está fluindo. Isto significa que o valor na response , só está disponível durante a expedição do "progress" do evento e contém apenas os dados recebidos desde a última "progress" do evento.</p>
+
+        <p>Quando response é acessado durante um "progress" evento que contém uma seqüência com os dados. Caso contrário, retorna null .</p>
+
+        <p>Este modo atualmente só funciona no Firefox.</p>
+
+        <p>.</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+
+    <div class="note"><strong>Nota:</strong>  Começando com 11,0 Gecko (Firefox 11.0 / 11.0 Thunderbird / SeaMonkey 2.8), bem como WebKit construir 528, esses navegadores não permitem que você use o atributo responseType ao executar solicitações síncronas. Tentativas de fazer isso geram uma exceção do tipo NS_ERROR_DOM_INVALID_ACCESS_ERR. Esta mudança foi proposta para padronização junto à W3C.</div>
+   </td>
+  </tr>
+  <tr id="responseXML">
+   <td><code>responseXML</code> {{ReadOnlyInline()}}</td>
+   <td><code>Document?</code></td>
+   <td>
+    <p>A resposta ao pedido como um DOM <code><a class="internal" href="/en/DOM/document" title="En/DOM/Document">Document</a></code> objeto, ou null se o pedido não foi bem sucedida, ainda não foi enviado, ou não pode ser analisado como XML ou HTML. A resposta é analisado como se fosse um <code>text/html</code> stream. Quando o responseType está definido para "document" e que a solicitação tenha sido feita de forma assíncrona, a resposta é analisado como se fosse um <code>text/html</code> stream.</p>
+
+    <div class="note"><strong>Nota:</strong> Se o servidor não se aplica o text/xml cabeçalho Content-Type, você pode usar overrideMimeType() para forçar XMLHttpRequest para analisá-lo como XML de qualquer maneira.</div>
+   </td>
+  </tr>
+  <tr id="status">
+   <td><code>status</code> {{ReadOnlyInline()}}</td>
+   <td><code>unsigned short</code></td>
+   <td>O status de resposta da requisição. Este é o retorno do codigo da requisição HTTP (por exemplo, status é 200 qual a solicitação for bem-sucedida).</td>
+  </tr>
+  <tr id="statusText">
+   <td><code>statusText</code> {{ReadOnlyInline()}}</td>
+   <td><code>DOMString</code></td>
+   <td>A cadeia de resposta retornado pelo servidor HTTP. Ao contrário do status , o que inclui todo o texto da mensagem de resposta (" 200 OK ", por exemplo).</td>
+  </tr>
+  <tr id="timeout">
+   <td><code>timeout</code></td>
+   <td><code>unsigned long</code></td>
+   <td>
+    <p>    <br>
+     O número de milissegundos de um pedido pode tomar antes de ser automaticamente encerrada. Um valor de 0 (que é o padrão) significa que não há tempo limite.</p>
+
+    <div class="note"><strong>Nota:</strong> Você não pode usar um tempo limite para solicitações síncronas com uma janela proprietária.</div>
+   </td>
+  </tr>
+  <tr id="upload">
+   <td><code>upload</code></td>
+   <td><code>XMLHttpRequestUpload</code></td>
+   <td>O processo de upload pode ser rastreado através da ação de retorno de um evento para upload.</td>
+  </tr>
+  <tr id="withCredentials">
+   <td><code>withCredentials</code></td>
+   <td><code>boolean</code></td>
+   <td>
+    <p>Indica se ou não de cross-site Access-Control solicitações devem ser feitas usando credenciais, como cookies ou cabeçalhos de autorização. O padrão é false .</p>
+
+    <div class="note"><strong>Nota:</strong> Esta não afeta as solicitações no mesmo local.</div>
+
+    <div class="note"><strong>Nota:</strong> Começando com 11,0 Gecko (Firefox 11.0 / 11.0 Thunderbird / SeaMonkey 2.8), Gecko não permite que você use os atributos withCredentials ao realizar solicitações síncronas. Ao tentar fazer isso o sistema gera uma exceção do tipo NS_ERROR_DOM_INVALID_ACCESS_ERR.</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Propriedades_não-padrão">Propriedades não-padrão</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Attribute</th>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+  <tr id="channel">
+   <td><code>channel</code> {{ReadOnlyInline()}}</td>
+   <td>{{Interface("nsIChannel")}}</td>
+   <td>O canal utilizado pelo objecto aquando da execução do pedido. Esta é null se o canal não foi criado ainda. No caso de um pedido de múltiplas partes, isto é o canal inicial, não as diferentes partes do pedido de várias partes. <strong>Requer privilégios elevados para o acesso.​​</strong></td>
+  </tr>
+  <tr id="mozAnon">
+   <td><code>mozAnon</code> {{ReadOnlyInline()}}</td>
+   <td><code>boolean</code></td>
+   <td>
+    <p>Se for verdadeiro (true) o pedido será enviado sem cabeçalhos de cookies e autenticação.</p>
+   </td>
+  </tr>
+  <tr id="mozSystem">
+   <td><code>mozSystem</code> {{ReadOnlyInline()}}</td>
+   <td><code>boolean</code></td>
+   <td>
+    <p>Se for verdadeiro (true) , a política de mesma origem não será aplicada sobre o pedido.</p>
+   </td>
+  </tr>
+  <tr id="mozBackgroundRequest">
+   <td><code>mozBackgroundRequest</code></td>
+   <td><code>boolean</code></td>
+   <td>
+    <p>Indica se o objeto representa uma solicitação de serviço de fundo. Se true , nenhum grupo carga está associada com o pedido, e diálogos de segurança estão impedidos de ser mostrado para o usuário. <strong>Requer privilégios elevados para o acesso.</strong></p>
+
+    <p>Nos casos em que uma caixa de diálogo de segurança (como a autenticação ou uma notificação certificado ruim) normalmente seriam mostrados, o pedido simplesmente falhar em seu lugar.</p>
+
+    <div class="note"><strong>Nota: </strong>Esta propriedade deve ser definida antes de chamar open().</div>
+   </td>
+  </tr>
+  <tr id="mozResponseArrayBuffer">
+   <td><code>mozResponseArrayBuffer</code> {{ obsolete_inline("6") }} {{ReadOnlyInline()}}</td>
+   <td><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a></td>
+   <td>A resposta ao pedido, como uma matriz de JavaScript digitado. Esta é NULL se o pedido não foi bem-sucedida, ou se não foi enviada ainda.</td>
+  </tr>
+  <tr id="multipart">
+   <td><code>multipart</code> {{ obsolete_inline("22") }}</td>
+   <td><code>boolean</code></td>
+   <td>
+    <p><strong>Este Gecko somente recurso foi removido no Firefox / Gecko 22.</strong> Por favor Utilize <a href="/en-US/docs/Server-sent_events" title="/en-US/docs/Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">Web Sockets</a> ou <code>responseText</code> de eventos de progresso em seu lugar.</p>
+
+    <p>Indica se ou não a resposta está prevista para ser uma corrente de, possivelmente, vários documentos XML. Se definido como true , o tipo de conteúdo da resposta inicial deve ser multipart/x-mixed-replace ou ocorrerá um erro. Todos os pedidos devem ser assíncrona.</p>
+
+    <p>Isso permite o suporte para servidor push; para cada documento XML que está escrito a este pedido, um novo documento XML DOM é criado eo onload manipulador é chamado entre os documentos.</p>
+
+    <div class="note"><strong>Nota:</strong> Quando este estiver definido, o onload manipulador e outros manipuladores de eventos não são repostas após a primeira XmlDocument é carregado, eo onload manipulador é chamado após cada parte da resposta é recebida.</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Construtor">Construtor</h2>
+
+<h3 id="XMLHttpRequest()" name="XMLHttpRequest()">XMLHttpRequest()</h3>
+
+<p>O construtor inicia um XMLHttpRequest. Ele deve ser chamado antes de quaisquer outras chamadas de método.</p>
+
+<p>Gecko/Firefox 16 acrescenta um parâmetro não-padrão para o construtor que pode ativar o modo anônimo (veja <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=692677" title="692677 – Relax same-origin XHR restrictions for privileged applications">Bug 692677</a>). Definir o mozAnon bandeira de true eficácia se assemelha a <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest" title="see AnonXMLHttpRequest in the XMLHttpRequest specification"><code>AnonXMLHttpRequest()</code></a> construtor descrito na especificação XMLHttpRequest que não tenha sido implementado em qualquer navegador ainda (em setembro de 2012).</p>
+
+<pre>XMLHttpRequest (
+  JSObject objParameters
+);</pre>
+
+<h5 id="Parâmetros_(não-padrão)">Parâmetros (não-padrão)</h5>
+
+<dl>
+ <dt><code>objParameters</code></dt>
+ <dd>Há dois sinalizadores que você pode definir:
+ <dl>
+  <dt><code>mozAnon</code></dt>
+  <dd>Boolean: Definir esse sinalizador de true fará com que o navegador para não expor a origem e as <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">credenciais do usuário</a> ao buscar recursos. Mais importante, isto significa que os cookies não será enviado a menos que explicitamente adicionado usando setRequestHeader.</dd>
+  <dt><code>mozSystem</code></dt>
+  <dd>Boolean: Definir esse sinalizador de true . permite fazer conexões entre sites sem a necessidade de o servidor para opt-in usando CORS requer a configuração mozAnon: true . Ou seja, este não pode ser combinada com o envio de cookies ou outras credenciais do usuário. Isso<em> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=692677#c68" title="Bug 692677 comment 68">só funciona em privilegiados (revisto) Apps</a>;ele não funciona em páginas da web arbitrários carregados no Firefox.</em></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Métodos_2">Métodos</h2>
+
+<h3 id="abort()" name="abort()">abort()</h3>
+
+<p>Aborta o pedido, se já foi enviada.</p>
+
+<h3 id="getAllResponseHeaders()" name="getAllResponseHeaders()">getAllResponseHeaders()</h3>
+
+<pre>DOMString getAllResponseHeaders();</pre>
+
+<p>Retorna todos os cabeçalhos de resposta como uma string, ou null se nenhuma resposta foi recebida.<strong> Nota:</strong> Para os pedidos de várias partes, isso retorna os cabeçalhos da parte atual da solicitação, não a partir do canal original.</p>
+
+<h3 id="getResponseHeader()" name="getResponseHeader()">getResponseHeader()</h3>
+
+<pre>DOMString? getResponseHeader(DOMString <var>header</var>);</pre>
+
+<p>Retorna a string contendo o texto do cabeçalho especificado, ou null se quer a resposta ainda não foi recebida ou o cabeçalho não existe na resposta.</p>
+
+<h3 id="open()" name="open()">open()</h3>
+
+<p>Inicializa um pedido. Este método é para ser usado a partir do código JavaScript; para inicializar um pedido do código nativo, use <a class="internal" href="/en/nsIXMLHttpRequest#openRequest()" title="/en/XMLHttpRequest#openRequest()"><code>openRequest()</code></a> em seu lugar.​</p>
+
+<div class="note"><strong>Nota:</strong> Chamar esse método uma solicitação já está ativo (aquele para o qual open() ou openRequest() já foi chamado) é o equivalente de chamar abort().</div>
+
+<pre>void open(
+   DOMString <var>method</var>,
+   DOMString <var>url</var>,
+   optional boolean <var>async</var>,
+   optional DOMString <var>user</var>,
+   optional DOMString <var>password</var>
+);
+</pre>
+
+<h6 id="Parameters">Parameters</h6>
+
+<dl>
+ <dt><code>method</code></dt>
+ <dd>O método HTTP para usar, como "GET", "POST", "PUT", "DELETE", etc. ignorado para URLs não-HTTP (S).</dd>
+ <dt><code>url</code></dt>
+ <dd>O URL para o qual enviar a solicitação.</dd>
+ <dt><code>async</code></dt>
+ <dd>Um parâmetro booleano opcional, por padrão true , indicando se a operação deve ou não ser executada de forma assíncrona. Se esse valor for false , o send() método não retorna até que a resposta seja recebida. Se true , a notificação de uma transação concluída é fornecida usando ouvintes de evento. Isso deve ser true se o multipart atributo for true , ou uma exceção será lançada.</dd>
+ <dt><code>user</code></dt>
+ <dd>O nome de usuário opcional para usar para fins de autenticação; por padrão, essa é uma seqüência vazia.</dd>
+ <dt><code>password</code></dt>
+ <dd>A senha opcional para usar para fins de autenticação; por padrão, essa é uma seqüência vazia.</dd>
+</dl>
+
+<h3 id="overrideMimeType()" name="overrideMimeType()">overrideMimeType()</h3>
+
+<p>Substitui o tipo de MIME retornado pelo servidor. Isto pode ser utilizado, por exemplo, para forçar uma corrente a ser tratada e analisada como text/xml, mesmo que o servidor não relatam como método. Este método deve ser chamado antes send() .</p>
+
+<pre>void overrideMimeType(DOMString <var>mimetype</var>);</pre>
+
+<h3 id="send()" name="send()">send()</h3>
+
+<p>Envia a solicitação. Se o pedido é assíncrono (que é o padrão), este método retorna assim que o pedido for enviado. Se o pedido é síncrono, este método não retorna até a resposta chegar.</p>
+
+<div class="note"><strong>Nota:</strong>  Qualquer ouvintes de eventos que pretende definir tem de ser definida antes de chamar send().</div>
+
+<pre>void send();
+void send(ArrayBuffer <var>data</var>);
+void send(Blob <var>data</var>);
+void send(Document <var>data</var>);
+void send(DOMString? <var>data</var>);
+void send(FormData <var>data</var>);</pre>
+
+<h6 id="Notas">Notas</h6>
+
+<p>Se os dados são um Document , ele é serializado antes de serem enviados. Ao enviar um documento, as versões do Firefox antes da versão 3 sempre enviavam a solicitação usando codificação UTF-8; <a href="/en/Firefox_3" rel="internal" title="en/Firefox_3">Firefox 3</a> envia corretamente o documento usando a codificação especificada por body.xmlEncoding , ou UTF-8 se nenhum encoding é especificado.</p>
+
+<p>Se são uma nsIInputStream , deve ser compatível com nsIUploadChannel 's setUploadStream() método. Nesse caso, um cabeçalho Content-Length é adicionado ao pedido, com o seu valor obtido usando nsIInputStream 's available() método. Quaisquer cabeçalhos incluídos na parte superior da corrente são tratados como parte do corpo da mensagem. MIMEType da transmissão deve ser especificado definindo o cabeçalho Content-Type usando o <a class="internal" href="/en/nsIXMLHttpRequest#setRequestHeader()" title="/en/XMLHttpRequest#setRequestHeader()"><code>setRequestHeader()</code></a> método antes de chamar send().</p>
+
+<p>A melhor maneira de enviar conteúdo binário (como em arquivos de upload) está usando<a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffers</a> ou <a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob">Blobs</a>  em conjuncton com o send() método. No entanto, se você quiser enviar uma <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> dados brutos, use o <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()" title="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> método em vez disso.</p>
+
+<h3 id="setRequestHeader()" name="setRequestHeader()">setRequestHeader()</h3>
+
+<p>Define o valor de uma solicitação HTTP header. Você deve chamar setRequestHeader() após open() , mas antes de send().</p>
+
+<pre>void setRequestHeader(
+   DOMString <var>header</var>,
+   DOMString <var>value</var>
+);
+</pre>
+
+<h6 id="Parametros">Parametros</h6>
+
+<dl>
+ <dt><code>header</code></dt>
+ <dd>O nome do cabeçalho cujo valor deve ser definido.</dd>
+ <dt><code>value</code></dt>
+ <dd>O valor definido como o corpo do cabeçalho.</dd>
+</dl>
+
+<h3 id="Métodos_não-padrão">Métodos não-padrão</h3>
+
+<h4 id="init()">init()</h4>
+
+<p>Inicializa o objeto para uso a partir do código C ++.</p>
+
+<div class="warning"><strong>Nota:</strong> Este método não deve ser chamado a partir do JavaScript.</div>
+
+<pre>[noscript] void init(
+   in nsIPrincipal principal,
+   in nsIScriptContext scriptContext,
+   in nsPIDOMWindow ownerWindow
+);
+</pre>
+
+<h5 id="Parametros_2">Parametros</h5>
+
+<dl>
+ <dt><code>principal</code></dt>
+ <dd>O principal a ser usado para o pedido; não deve ser null.</dd>
+ <dt><code>scriptContext</code></dt>
+ <dd>O contexto de script a ser usada para o pedido; não deve ser null.</dd>
+ <dt><code>ownerWindow</code></dt>
+ <dd>A janela associada com o pedido; pode ser <code>null</code>.</dd>
+</dl>
+
+<h4 id="openRequest()">openRequest()</h4>
+
+<p>Inicializa um pedido. Este método é para ser usado a partir do código nativo; para inicializar um pedido do código JavaScript, usar <code><a class="internal" href="/en/nsIXMLHttpRequest#open()" title="/en/XMLHttpRequest#open()">open()</a> em seu lugar. Consulte a documentação do open() .</code></p>
+
+<h4 id="sendAsBinary()">sendAsBinary()</h4>
+
+<p>Uma variante do send() método que envia dados binários.</p>
+
+<pre>void sendAsBinary(
+   in DOMString body
+);
+</pre>
+
+<p>Este método, usado em conjuncton com o <a href="/en-US/docs/DOM/FileReader#readAsBinaryString()" title="/en-US/docs/DOM/FileReader#readAsBinaryString()"><code>readAsBinaryString</code></a>  método do <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API tornar possível <a href="https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">read and <strong>upload</strong> any type of file</a> e para  <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringify</a> os dados brutos.</p>
+
+<h5 id="Parametros_3">Parametros</h5>
+
+<dl>
+ <dt><code>body</code></dt>
+ <dd>O corpo da solicitação como um DOMString. Estes dados poderão ser convertidos para uma seqüência de caracteres de byte único por truncamento (removendo o byte de mais alta ordem de cada personagem).</dd>
+</dl>
+
+<h5 id="sendAsBinary()_polyfill"><code>sendAsBinary()</code> polyfill</h5>
+
+<p>Desde sendAsBinary() é um recurso experimental, aqui está uma polyfill para navegadores que não suportam o sendAsBinary() método, mas o apoio <a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">typed arrays</a>.</p>
+
+<pre class="brush: js">/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polifyll ::
+|*|
+|*|  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); */
+  };
+}</pre>
+
+<div class="note"><strong>Nota:</strong> É possível construir este polyfill colocar dois tipos de dados como argumento para send() : um <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> (ui8Data.buffer - o código comentado) ou um ArrayBufferView ( ui8Data , que é uma <a href="/en-US/docs/JavaScript/Typed_arrays/Uint8Array" title="/en-US/docs/JavaScript/Typed_arrays/Uint8Array">typed array of 8-bit unsigned integers</a> – descomentada código). No entanto, no Google Chrome, quando você tenta enviar uma ArrayBuffer , a seguinte mensagem de aviso aparecerá: ArrayBuffer is deprecated in XMLHttpRequest.send(). Use ArrayBufferView instead. ArrayBuffer is deprecated in XMLHttpRequest.send(). Use ArrayBufferView instead.</div>
+
+<h2 id="Notas_2">Notas</h2>
+
+<ul>
+ <li class="note">Por padrão, o Firefox 3 limita o número de XMLHttpRequest conexões por servidor a 6 (versões anteriores limitar esta para 2 por servidor). Alguns sites interativos podem manter um XMLHttpRequest conexão aberta, de modo que a abertura de várias sessões para esses sites pode resultar no navegador pendurado de tal forma que a janela já não repaints e controles não respondem. Este valor pode ser alterado através da edição do network.http.max-persistent-connections-per-server preferência no <code><a class="linkification-ext" href="/about:config" title="Linkification: about:config">about:config</a></code>.</li>
+ <li class="note">Do Gecko 7 cabeçalhos estabelecidos pela {{ manch("setRequestHeader") }} asão enviados com o pedido, quando na sequência de um redirecionamento. Anteriormente, estes cabeçalhos não iria ser enviado.</li>
+ <li class="note"><code>XMLHttpRequest é implementado em Gecko usando os</code> {{ interface("nsIXMLHttpRequest") }}, {{ interface("nsIXMLHttpRequestEventTarget") }}, e {{ interface("nsIJSXMLHttpRequest") }} interfaces.</li>
+</ul>
+
+<h4 class="note" id="Eventos">Eventos</h4>
+
+<p><code>onreadystatechange</code> como uma propriedade do <code>XMLHttpRequest</code> instância é suportado em todos os navegadores.</p>
+
+<p>Desde então, foram implementadas uma série de manipuladores de eventos adicionais em vários navegadores ( onload , onerror , onprogress , etc.). Estes são suportados no Firefox. Em particular, veja {{ interface("nsIXMLHttpRequestEventTarget") }} and <a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p>
+
+<p>avegadores mais recentes, incluindo o Firefox, também suporta ouvir as XMLHttpRequest eventos via padrão <code><a href="/en/DOM/element.addEventListener" title="element.addEventListener">addEventListener</a></code> APIs Além de definir on* propriedades para uma função de manipulador.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade do navegador</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 (XHR1)</td>
+   <td>1</td>
+   <td>1.0</td>
+   <td>5 (via ActiveXObject)<br>
+    7 (XMLHttpRequest)</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>1.2</td>
+  </tr>
+  <tr>
+   <td><code>send(ArrayBuffer)</code></td>
+   <td>9</td>
+   <td>9</td>
+   <td>{{ compatUnknown() }}</td>
+   <td>11.60</td>
+   <td>{{ compatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>send(Blob)</code></td>
+   <td>7</td>
+   <td>3.6</td>
+   <td>{{ compatUnknown() }}</td>
+   <td>12</td>
+   <td>{{ compatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>send(FormData)</code></td>
+   <td>6</td>
+   <td>4</td>
+   <td>{{ compatUnknown() }}</td>
+   <td>12</td>
+   <td>{{ compatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>sendAsBinary(DOMString)</code></td>
+   <td>{{ compatNo() }} – use the <a href="#sendAsBinary%28%29_polyfill" title="sendAsBinary() polyfill">polyfill</a></td>
+   <td>1.9</td>
+   <td>{{ compatUnknown() }}</td>
+   <td>{{ compatUnknown() }}</td>
+   <td>{{ compatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>response</code></td>
+   <td>10</td>
+   <td>6</td>
+   <td>10</td>
+   <td>11.60</td>
+   <td>{{ compatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>responseType</code> = 'arraybuffer'</td>
+   <td>10</td>
+   <td>6</td>
+   <td>10</td>
+   <td>11.60</td>
+   <td>{{ compatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>responseType</code> = 'blob'</td>
+   <td>19</td>
+   <td>6</td>
+   <td>10</td>
+   <td>12</td>
+   <td>{{ compatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>responseType</code> = 'document'</td>
+   <td>18</td>
+   <td>11</td>
+   <td>10</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>responseType</code> = 'json'</td>
+   <td>{{ CompatNo() }}</td>
+   <td>10</td>
+   <td>{{ CompatNo() }}</td>
+   <td>12</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>Progress Events</td>
+   <td>7</td>
+   <td>3.5</td>
+   <td>10</td>
+   <td>12</td>
+   <td>{{ compatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>withCredentials</code></td>
+   <td>3</td>
+   <td>3.5</td>
+   <td>10</td>
+   <td>12</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td><code>timeout</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>12.0</td>
+   <td>8</td>
+   <td>{{ compatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td><code>responseType</code> = 'moz-blob'</td>
+   <td>{{ CompatNo() }}</td>
+   <td>12.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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>0.16</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notas_Gecko">Notas Gecko</h3>
+
+<p>Gecko 11.0 {{ geckoRelease("11.0") }} removeu o suporte para o uso do <code>responseType</code> e <code>withCredentials</code> atribui ao realizar solicitações síncronas. Tentativa de fazer isso gera uma <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code> exception. Esta mudança foi proposta para o W3C para a normalização.</p>
+
+<p>Gecko 12.0 {{ geckoRelease("12.0") }} e suporte posteriormente usando XMLHttpRequest para ler a partir <a href="/en/data_URIs" title="en/data_URIs"><code>data:</code> URLs</a>.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>MDN artigos sobre XMLHttpRequest:
+  <ul>
+   <li><a href="/en/AJAX/Getting_Started" title="en/AJAX/Getting_Started">AJAX - Getting Started</a></li>
+   <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="En/Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+   <li><a href="/en/HTML_in_XMLHttpRequest" title="en/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
+   <li><a href="/en/DOM/XMLHttpRequest/FormData" title="en/XMLHttpRequest/FormData"><code>FormData</code></a></li>
+  </ul>
+ </li>
+ <li>XMLHttpRequest referencias da W3C  e navegador fornecedores:
+  <ul>
+   <li><a class="external" href="http://www.w3.org/TR/XMLHttpRequest1/">W3C: XMLHttpRequest</a> (base features)</li>
+   <li><a class="external" href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html" title="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">W3C: XMLHttpRequest</a> (latest editor's draft with extensions to the base functionality, formerly XMLHttpRequest Level 2</li>
+   <li><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li>
+   <li><a class="external" href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Apple developers' reference</a></li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li>
+ <li><a class="external" href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li>
+ <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks - New Tricks in XMLHttpRequest2</a></li>
+</ul>
+
+<p>{{ languages( { "es": "es/XMLHttpRequest", "fr": "fr/XMLHttpRequest", "it": "it/XMLHttpRequest", "ja": "ja/XMLHttpRequest", "ko": "ko/XMLHttpRequest", "pl": "pl/XMLHttpRequest", "zh-cn": "zh-cn/DOM/XMLHttpRequest" } ) }}</p>
diff --git a/files/pt-br/web/api/xmlhttprequest/onreadystatechange/index.html b/files/pt-br/web/api/xmlhttprequest/onreadystatechange/index.html
new file mode 100644
index 0000000000..b67e816ae4
--- /dev/null
+++ b/files/pt-br/web/api/xmlhttprequest/onreadystatechange/index.html
@@ -0,0 +1,120 @@
+---
+title: XMLHttpRequest.onreadystatechange
+slug: Web/API/XMLHttpRequest/onreadystatechange
+tags:
+  - AJAX
+  - API
+  - Evento
+  - Manipulador de eventos
+  - XHR
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/onreadystatechange
+---
+<div>{{APIRef}}</div>
+
+<p>Um <a href="https://developer.mozilla.org/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> é chamado sempre que o atributo <code>readyState</code> é modificado. O callback é chamado a partir da interface do usuário. A propriedade <strong><code>XMLHttpRequest.onreadystatechange</code></strong> contém o manipulador de eventos que é chamado quando o evento <a href="/pt-BR/docs/Web/Events/readystatechange">readystatechange</a> é disparado, ou seja, toda vez que a propriedade {{domxref("XMLHttpRequest.readyState", "readyState")}} do {{domxref("XMLHttpRequest")}} é modificada.</p>
+
+<div class="warning">
+<p><strong>Atenção:</strong> Isso não deve ser usado com solicitações síncronas e não deve ser usado como código nativo.</p>
+</div>
+
+<p>O evento <code>readystatechange</code> não será chamado quando a <code>XMLHttpRequest</code> request for cancelada pelo método <a href="/pt-BR/docs/Web/API/XMLHttpRequest/abort">abort()</a>.</p>
+
+<div class="note">
+<p><strong>Atualização</strong>: Está disparando na última versão de navegadores (Firefox 51.0.1, Opera 43.0.2442.991, Safari 10.0.3 (12602.4.8), Chrome 54.0.2840.71, Edge, IE11). Exemplo <a href="https://jsfiddle.net/merksam/ve5oc0gn/">aqui</a> - <em>basta recarregar a página algumas vezes</em>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Sitaxe</h2>
+
+<pre class="syntaxbox"><em>XMLHttpRequest</em>.onreadystatechange = <em>callback</em>;</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<ul>
+ <li><code><em>callback</em></code> é a função que será executada quando o readyState mudar.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemplo</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="Especificação">Especificação</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</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(1)}}</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>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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer versão 5 e 6 suportam chamadas ajax usando <code>ActiveXObject()</code>.</p>
diff --git a/files/pt-br/web/api/xmlhttprequest/open/index.html b/files/pt-br/web/api/xmlhttprequest/open/index.html
new file mode 100644
index 0000000000..131d78d21f
--- /dev/null
+++ b/files/pt-br/web/api/xmlhttprequest/open/index.html
@@ -0,0 +1,72 @@
+---
+title: XMLHttpRequest.open()
+slug: Web/API/XMLHttpRequest/open
+tags:
+  - Referencia
+  - metodo
+translation_of: Web/API/XMLHttpRequest/open
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>O {{domxref("XMLHttpRequest")}} método<code><strong>open()</strong></code> inicializa uma nova requisição, ou reinicializa uma requisição já existente.</p>
+
+<div class="note"><strong>Note:</strong> Chamar este método para uma requisição já ativada  (uma que <code>open()</code> já tenha sido chamada) é equivalente a chamar {{domxref("XMLHttpRequest.abort", "abort()")}}.</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>XMLHttpRequest</em>.open(<var>method</var>,<var> url</var>)
+<em>XMLHttpRequest</em>.open(<var>method</var>,<var> url</var>,<var> async)</var>
+<em>XMLHttpRequest</em>.open(<var>method</var>,<var> url</var>,<var> async</var>,<var> user</var>)
+<em>XMLHttpRequest</em>.open(<var>method</var>,<var> url</var>,<var> async</var>,<var> user</var>,<var> password</var>)
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>method</code></dt>
+ <dd>O <a href="/en-US/docs/Web/HTTP/Methods">método de requisição HTTP</a> para ser usado, como <code>"GET"</code>, <code>"POST"</code>, <code>"PUT"</code>, <code>"DELETE"</code>, etc. Ignorado para URLs não-HTTP(S).</dd>
+ <dt><code>url</code></dt>
+ <dd>Um {{domxref("DOMString")}} representando a URL para enviar a requisição.</dd>
+ <dt><code>async</code> {{optional_inline}}</dt>
+ <dd>Parâmetro booleano opcional, valor padrão <code>true</code>, indica quando realizar a operação de forma assíncrona. Se este valor for <code>false</code>, o método <code>send()</code> não retorna nada até que a resposta da requisição seja recebida. Se o valor for <code>true</code>, notificação de uma transação concluída é provida usando event listeners. Isso <em>deve</em> ser verdadeiro se o atributo <code>multipart</code> é <code>true</code>, ou uma exceção será lançada.
+ <div class="note"><strong>Nota:</strong> Requisições Síncronas no thread principal podem ser facilmente disruptivas para a experiência de usuário e devem ser evitadas; de fato, muitos navegadores descontinuaram inteiramente o suporte para XHR síncrono no thread principal. Requisições síncronas são permitidas nos {{domxref("Worker")}}s.</div>
+ </dd>
+ <dt><code>user</code> {{optional_inline}}</dt>
+ <dd>O nome de usuário opcional para ser usado em autenticação; por padrão, isso é o valor <code>null</code>.</dd>
+ <dt><code>password</code> {{optional_inline}}</dt>
+ <dd>A senha de usuário opcional para ser usado em autenticação; por padrão, isso é o valor <code>null</code>.</dd>
+</dl>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>
+    <p>Padrão WHATWG</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_Navegador">Compatibilidade de Navegador</h2>
+
+<p class="hidden">A tabela de compatibilidade nessa página é gerada por dados estruturados. Se voce gostaria de contribuir para os dados, favor verificar <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e nos envie um <em>pull request</em>.</p>
+
+<p>{{Compat("api.XMLHttpRequest.open")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Usando XMLHttpRequest</a></li>
+ <li>Métodos Relacionados ao {{domxref("XMLHttpRequest")}}: {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}},{{domxref("XMLHttpRequest.send", "send()")}}, e {{domxref("XMLHttpRequest.abort", "abort()")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/xmlhttprequest/readystate/index.html b/files/pt-br/web/api/xmlhttprequest/readystate/index.html
new file mode 100644
index 0000000000..77474ae587
--- /dev/null
+++ b/files/pt-br/web/api/xmlhttprequest/readystate/index.html
@@ -0,0 +1,154 @@
+---
+title: XMLHttpRequest.readyState
+slug: Web/API/XMLHttpRequest/readyState
+tags:
+  - AJAX
+  - Property
+  - Reference
+  - XML
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/readyState
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p>A propriedade <strong>XMLHttpRequest.readyState</strong> retorna o estado de um XMLHttpRequest. Uma requisição <abbr title="XMLHttpRequest">XHR</abbr> que existe em um dos seguintes estados:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Valor</td>
+   <td class="header">Estado</td>
+   <td class="header">Descrição</td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>UNSENT</code></td>
+   <td>Um cliente foi criado. Mas o método <code>open()</code>  não foi chamado ainda.</td>
+  </tr>
+  <tr>
+   <td><code>1</code></td>
+   <td><code>OPENED</code></td>
+   <td><code>O método open() foi chamado</code>.</td>
+  </tr>
+  <tr>
+   <td><code>2</code></td>
+   <td><code>HEADERS_RECEIVED</code></td>
+   <td><code>o método send()</code> foi chamado e os cabeçalhos e status estão disponíveis .</td>
+  </tr>
+  <tr>
+   <td><code>3</code></td>
+   <td><code>LOADING</code></td>
+   <td>Baixando e <code>responseText</code> contem os dados parciais.</td>
+  </tr>
+  <tr>
+   <td><code>4</code></td>
+   <td><code>DONE</code></td>
+   <td>Operação concluída.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>UNSENT</dt>
+ <dd>O XMLHttpRequest foi criado. Mas o método open() não foi chamado ainda.</dd>
+ <dt>OPENED</dt>
+ <dd>O método open() foi invocado. Durante esse estado, os headers da requisição podem ser inseridos usando o método <a href="/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader">setRequestHeader()</a>  e o método <a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a> pode ser chamado, iniciando a busca.</dd>
+ <dt>HEADERS_RECEIVED</dt>
+ <dd>O método send() foi chamado e os cabeçalhos de respostas foram recebidos.</dd>
+ <dt>LOADING</dt>
+ <dd>A resposta da requisição está sendo recebida. se o <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> for "text" ou  um texto em branco, o <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseText">responseText</a></code> terá o texto parcial da resposta conforme seu carregamento.</dd>
+ <dt>DONE</dt>
+ <dd>A Operação de busca está completa. Isso pode significar que a trasferência foi concluída com êxito ou que falhou.</dd>
+</dl>
+
+<div class="note">
+<p>Os nomes de estado são diferentes no Internet Explorer. Ao invés de <code>UNSENT</code>, <code>OPENED</code>,<code> HEADERS_RECEIVED</code>,<code> LOADING <font face="Open Sans, Arial, sans-serif">e </font></code><code>DONE, os nomes usados são: READYSTATE_UNINITIALIZED</code> (0), <code>READYSTATE_LOADING</code> (1), <code>READYSTATE_LOADED</code> (2), <code>READYSTATE_INTERACTIVE</code> (3) e <code>READYSTATE_COMPLETE</code> (4).</p>
+</div>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+console.log('UNSENT', xhr.readyState); // readyState will be 0
+
+xhr.open('GET', '/api', true);
+console.log('OPENED', xhr.readyState); // readyState will be 1
+
+xhr.onprogress = function () {
+    console.log('LOADING', xhr.readyState); // readyState will be 3
+};
+
+xhr.onload = function () {
+    console.log('DONE', xhr.readyState); // readyState will be 4
+};
+
+xhr.send(null);
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentários</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#states')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Suporte</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatChrome(1)}}</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>Suporte</th>
+   <th>Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/pt-br/web/api/xmlhttprequest/requisicoes_sincronas_e_assincronas/index.html b/files/pt-br/web/api/xmlhttprequest/requisicoes_sincronas_e_assincronas/index.html
new file mode 100644
index 0000000000..81b8fb8d3e
--- /dev/null
+++ b/files/pt-br/web/api/xmlhttprequest/requisicoes_sincronas_e_assincronas/index.html
@@ -0,0 +1,234 @@
+---
+title: Requisições síncronas e assíncronas
+slug: Web/API/XMLHttpRequest/Requisicoes_sincronas_e_assincronas
+translation_of: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
+---
+<p><code>XMLHttpRequest</code> suporta comunicações síncronas e assíncronas. No geral, entretando, requisições assíncronas devem prevalecer sobre requisições síncronas por questões de performance.</p>
+
+<p>Requisições síncronas podem bloquear a execução do codigo, gerando um "congelamento" da tela, prejudicando a experiência do usuário. </p>
+
+<h2 id="Requisição_assíncrona">Requisição assíncrona</h2>
+
+<p>Se você usa <code>XMLHttpRequest</code> de uma extensão, você deveria usá-la de forma assíncrona. Neste caso, você recebe um callback quando os dados forem recebidos, o que permite que o browser continue seu trabalho normalmente enquanto sua requisição estiver sendo processada.</p>
+
+<h3 id="Exemplo_envie_um_arquivo_para_o_console_de_log">Exemplo: envie um arquivo para o console de log</h3>
+
+<p>Esse é o exemplo mais simples de uso do <code>XMLHttpRequest assíncrono.</code></p>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open("GET", "/bar/foo.txt", true);
+xhr.onload = function (e) {
+  if (xhr.readyState === 4) {
+    if (xhr.status === 200) {
+      console.log(xhr.responseText);
+    } else {
+      console.error(xhr.statusText);
+    }
+  }
+};
+xhr.onerror = function (e) {
+  console.error(xhr.statusText);
+};
+xhr.send(null); </pre>
+
+<p>A Linha 2 define o terceiro parâmetro como true, indicando que a requisição deve ser tratada assincronamente.</p>
+
+<p>A Linha 3 cria um objeto função do tipo <em>event handler </em>e atribui ele ao atributo <strong>onload<em> </em></strong>da requisição.</p>
+
+<p>Na LInha 4, Este <em>handler </em>verifica o estado da requisição, através da variável <em>readyState, </em>para ver se a transação está completa, e se o status do HTTP é 200. Em caso positivo lê o conteúdo recebido. Se um erro ocorrer, uma mensagem de erro será exibida no console.</p>
+
+<p>A requisição é, de fato, realizada na Linha 15. A rotina de <em>callback</em> é invocada quando o estado da requisição muda.</p>
+
+<h3 id="Exemplo_Criando_uma_função_standard_para_ler_arquivos_externos">Exemplo: Criando uma função standard para ler arquivos externos</h3>
+
+<p>Em alguns casos, você pode precisar ler muitos arquivos externos. Esta é uma função padrão que utiliza o objeto <code>XMLHttpRequest</code> de forma assíncrona para alternar o conteúdo do arquivo legível para um listener especificado.</p>
+
+<pre class="brush: js">function xhrSuccess () { this.callback.apply(this, this.arguments); }
+
+function xhrError () { console.error(this.statusText); }
+
+function loadFile (sURL, fCallback /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oReq = new XMLHttpRequest();
+  oReq.callback = fCallback;
+  oReq.arguments = Array.prototype.slice.call(arguments, 2);
+  oReq.onload = xhrSuccess;
+  oReq.onerror = xhrError;
+  oReq.open("get", sURL, true);
+  oReq.send(null);
+}
+</pre>
+
+<p>Uso:</p>
+
+<pre class="brush: js">function showMessage (sMsg) {
+  alert(sMsg + this.responseText);
+}
+
+loadFile("message.txt", showMessage, "New message!\n\n");
+</pre>
+
+<p>A assinatura da função <em><strong>loadFile</strong></em> declara (i) uma URL de destino que será lida (via HTTP GET), (ii) uma função de callback para executar na conclusão bem-sucedida da instância xhr, e (iii) uma lista opcional de argumentos adicionais que são "passados através" do objeto XHR caso a função de callback seja bem-sucedida.</p>
+
+<p>A linha 1 declara uma função que será invocada quando a operação XHR for completada com sucesso.  Isso, por sua vez, invoca uma função de callback especificada na invocação da função loadFile (neste caso, a função showMessage) que foi atribuída a propriedade do objeto XHR (Linha 7). Os  argumentos adicionais (caso existam) fornecem a invocação da função loadFile são "aplicados" para a execução da função de callback..</p>
+
+<p>A linha 3 declara uma função que será invocada quando a operação XHR não for completada com sucesso.</p>
+
+<p>A linha 7 define no objeto XHR  the success callback function given as the second argument to loadFile.</p>
+
+<p>Line 8 slices the arguments array given to the invocation of loadFile. Starting with the third argument, all remaining arguments are collected, assigned to the arguments property of the variable oReq, passed to the success callback function xhrSuccess., and ultimately supplied to the callback function (in this case, showMessage) which is invoked by function xhrSuccess.</p>
+
+<p>Line 9 designates the function xhrSuccess as the callback to be invoked when the onload event fires, that is, when the XHR sucessfully completes.  </p>
+
+<p>Line 10 designates the function xhrError as the callback to be invoked when the XHR requests fails to complete.</p>
+
+<p>Line 11 specifies <code>true</code> for its third parameter to indicate that the request should be handled asynchronously.</p>
+
+<p>Line 12 actually initiates the request.</p>
+
+<h3 id="Example_using_a_timeout">Example: using a timeout</h3>
+
+<p>You can use a timeout to prevent hanging your code forever while waiting for a read to occur. This is done by setting the value of the <code>timeout</code> property on the <code>XMLHttpRequest</code> object, as shown in the code below:</p>
+
+<pre class="brush: js">function loadFile(sUrl, timeout, callback){
+
+    var args = arguments.slice(3);
+    var xhr = new XMLHttpRequest();
+    xhr.ontimeout = function () {
+        console.error("The request for " + url + " timed out.");
+    };
+    xhr.onload = function() {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                callback.apply(xhr, args);
+            } else {
+                console.error(xhr.statusText);
+            }
+        }
+    };
+    xhr.open("GET", url, true);
+    xhr.timeout = timeout;
+    xhr.send(null);
+}</pre>
+
+<p>Notice the addition of code to handle the "timeout" event by setting the <code>ontimeout</code> handler.</p>
+
+<p>Usage:</p>
+
+<pre class="brush: js">function showMessage (sMsg) {
+  alert(sMsg + this.responseText);
+}
+
+loadFile("message.txt", 2000, showMessage, "New message!\n");
+</pre>
+
+<p>Here, we're specifying a timeout of 2000 ms.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Support for <code>timeout</code> was added in {{Gecko("12.0")}}.</p>
+</div>
+
+<h2 id="Synchronous_request">Synchronous request</h2>
+
+<div class="note"><strong>Note:</strong> Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.</div>
+
+<p>Em casos raros, o uso do método síncrono é preferível ao invés do método assíncrono.</p>
+
+<h3 id="Example_HTTP_synchronous_request">Example: HTTP synchronous request</h3>
+
+<p>This example demonstrates how to make a simple synchronous request.</p>
+
+<pre class="brush: js">var request = new XMLHttpRequest();
+request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
+request.send(null);
+
+if (request.status === 200) {
+  console.log(request.responseText);
+}
+</pre>
+
+<p>Line 3 sends the request.  The <code>null</code> parameter indicates that no body content is needed for the <code>GET</code> request.</p>
+
+<p>Line 5 checks the status code after the transaction is completed.  If the result is 200 -- HTTP's "OK" result -- the document's text content is output to the console.</p>
+
+<h3 id="Example_Synchronous_HTTP_request_from_a_Worker">Example: Synchronous HTTP request from a <code>Worker</code></h3>
+
+<p>One of the few cases in which a synchronous request does not usually block execution is the use of <code>XMLHttpRequest</code> within a <code><a href="/en/DOM/Worker" title="/en/DOM/Worker">Worker</a></code>.</p>
+
+<p><code><strong>example.html</strong></code> (the main page):</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&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+  var worker = new Worker("myTask.js");
+  worker.onmessage = function(event) {
+    alert("Worker said: " + event.data);
+  };
+
+  worker.postMessage("Hello");
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><code><strong>myFile.txt</strong></code> (the target of the synchronous <code><a href="/en/DOM/XMLHttpRequest" title="/en/XMLHttpRequest">XMLHttpRequest</a></code> invocation):</p>
+
+<pre>Hello World!!
+</pre>
+
+<p><code><strong>myTask.js</strong></code> (the <code><a href="/en/DOM/Worker" title="/en/DOM/Worker">Worker</a></code>):</p>
+
+<pre class="brush: js">self.onmessage = function (event) {
+  if (event.data === "Hello") {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "myFile.txt", false);  // synchronous request
+    xhr.send(null);
+    self.postMessage(xhr.responseText);
+  }
+};
+</pre>
+
+<div class="note"><strong>Note:</strong> The effect, because of the use of the <code>Worker</code>, is however asynchronous.</div>
+
+<p>It could be useful in order to interact in background with the server or to preload some content. See <a class="internal" href="/En/DOM/Using_web_workers" title="en/Using DOM workers">Using web workers</a> for examples and details.</p>
+
+<h3 id="Adapting_Sync_XHR_usecases_to_the_Beacon_API">Adapting Sync XHR usecases to the Beacon API</h3>
+
+<p>There are some cases in which the synchronous usage of XMLHttpRequest was not replaceable, like during the <a class="internal" href="/en/DOM/window.onunload" title="en/DOM/window.onunload"><code>window.onunload</code></a> and <a class="internal" href="/en/DOM/window.onbeforeunload" title="en/DOM/window.onbeforeunload"><code>window.onbeforeunload</code></a> events.  The <a href="/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a> API can support these usecases typically while delivering a good UX.</p>
+
+<p><span>The following example (from the <a href="/en-US/docs/Web/API/Navigator/sendBeacon">sendBeacon docs</a>) shows a theoretical analytics code that attempts to submit data to a server by using a synchronous XMLHttpRequest in an unload handler. This results in the unload of the page to be delayed.</span></p>
+
+<pre class="brush: js">window.addEventListener('unload', logData, false);
+
+function logData() {
+    var client = new XMLHttpRequest();
+    client.open("POST", "/log", false); // third parameter indicates sync xhr. :(
+    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+    client.send(analyticsData);
+}
+</pre>
+
+<p>Using the <strong><code>sendBeacon()</code></strong> method, the data will be transmitted asynchronously to the web server when the User Agent has had an opportunity to do so, <strong>without delaying the unload or affecting the performance of the next navigation.</strong></p>
+
+<p>The following example shows a theoretical analytics code pattern that submits data to a server using the by using the <strong><code>sendBeacon()</code></strong> method.</p>
+
+<pre class="brush: js">window.addEventListener('unload', logData, false);
+
+function logData() {
+    navigator.sendBeacon("/log", analyticsData);
+}
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest" title="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest" title="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a></li>
+ <li><code><a href="/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a></code></li>
+</ul>
+
+<p>{{ languages( {"zh-cn": "zh-cn/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" } ) }}</p>
diff --git a/files/pt-br/web/api/xmlhttprequest/send/index.html b/files/pt-br/web/api/xmlhttprequest/send/index.html
new file mode 100644
index 0000000000..21fa359025
--- /dev/null
+++ b/files/pt-br/web/api/xmlhttprequest/send/index.html
@@ -0,0 +1,129 @@
+---
+title: XMLHttpRequest.send()
+slug: Web/API/XMLHttpRequest/send
+tags:
+  - AJAX
+  - API
+  - Método HTTP
+  - NeedsExample
+  - Referencia
+  - Requisição HTTP
+  - Requisição XHR
+  - XHR
+  - XMLHttpRequest
+  - send
+translation_of: Web/API/XMLHttpRequest/send
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p>O método <code><strong>send()</strong></code>, do {{domxref("XMLHttpRequest")}}, envia uma requisição para o servidor.Se a solicitação for assíncrona (que é o padrão), esse método retornará assim que a solicitação for enviada e o resultado for entregue usando eventos. Se a solicitação for síncrona, esse método não retornará até que a resposta chegue.</p>
+
+<p><code>send()</code> aceita um parâmetro opcional que permite especificar o corpo da solicitação; isso é usado principalmente para solicitações como {{HTTPMethod("PUT")}}. Se o método de solicitação for {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}}, o parâmetro <code>body</code> será ignorado e o corpo da solicitação será definido como <code>null</code>.</p>
+
+<p>Se nenhum cabeçalho {{HTTPHeader("Accept")}} tiver sido definido usando {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}, um cabeçalho <code>Accept</code> com o tipo <code>"*/*"</code> (qualquer tipo) é enviado.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><var>XMLHttpRequest</var>.send(<var>body</var>)
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>body</code> {{optional_inline}}</dt>
+ <dd>Um corpo de dados a ser enviado na solicitação XHR. Isso pode ser:
+ <ul>
+  <li>Um {{domxref("Document")}}, caso em que é serializado antes de ser enviado.</li>
+  <li>Um <code>BodyInit</code>, que <a href="https://fetch.spec.whatwg.org/#bodyinit">conforme a espeficicação Fetch</a>, pode ser um objeto {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("ReadableStream")}} ou {{domxref("USVString")}}.</li>
+ </ul>
+ Se nenhum valor for  espeficicado para o corpo, o valor padrão de <code>null</code> é usado.</dd>
+</dl>
+
+<p>A melhor maneira de enviar conteúdo binário (por exemplo, em uploads de arquivos) é usando um {{domxref("ArrayBufferView")}} ou {{domxref("Blob")}} em conjunto com o método <code>send()</code>.</p>
+
+<h3 id="Valor_retornado">Valor retornado</h3>
+
+<p><code>undefined.</code></p>
+
+<h3 id="Exceções">Exceções</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exceção</th>
+   <th scope="col">Descrição</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td><code>send()</code> já foi invocado para a requisição, e/ou a requisição está completa.</td>
+  </tr>
+  <tr>
+   <td><code>NetworkError</code></td>
+   <td>O tipo de recurso a ser buscada é um {{domxref("Blob")}} e o método não é <code>GET</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemplo_GET">Exemplo: GET</h2>
+
+<pre class="syntaxbox">var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.onload = function () {
+  // Requisição finalizada. Faça o processamento aqui.
+};
+
+xhr.send(null);
+// xhr.send('string');
+// xhr.send(new Blob());
+// xhr.send(new Int8Array());
+// xhr.send(document);</pre>
+
+<h2 id="Exemplo_POST">Exemplo: POST</h2>
+
+<pre class="syntaxbox">var xhr = new XMLHttpRequest();
+xhr.open("POST", '/server', true);
+
+// Envia a informação do cabeçalho junto com a requisição.
+xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+
+xhr.onreadystatechange = function() { // Chama a função quando o estado mudar.
+    if (this.readyState === XMLHttpRequest.DONE &amp;&amp; this.status === 200) {
+        // Requisição finalizada. Faça o processamento aqui.
+    }
+}
+xhr.send("foo=bar&amp;lorem=ipsum");
+// xhr.send(new Int8Array());
+// xhr.send(document);</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-send()-method', 'send()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2>
+
+<div>{{Compat("api.XMLHttpRequest.send")}}</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Web/API/XMLHttpRequest/Usando_XMLHttpRequest">Usando XMLHttpRequest</a></li>
+ <li><a href="/pt-BR/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">Obter arquivo HTML usando XMLHttpRequest</a></li>
+</ul>
diff --git a/files/pt-br/web/api/xmlhttprequest/setrequestheader/index.html b/files/pt-br/web/api/xmlhttprequest/setrequestheader/index.html
new file mode 100644
index 0000000000..246692fa09
--- /dev/null
+++ b/files/pt-br/web/api/xmlhttprequest/setrequestheader/index.html
@@ -0,0 +1,77 @@
+---
+title: XMLHttpRequest.setRequestHeader()
+slug: Web/API/XMLHttpRequest/setRequestHeader
+tags:
+  - API
+  - Cabeçalho HTTP
+  - HTTP
+  - XHR
+  - XMLHttpRequest
+  - header
+  - metodo
+  - setRequestHeader
+translation_of: Web/API/XMLHttpRequest/setRequestHeader
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<div> </div>
+
+<p>O método <code><strong>setRequestHeader()</strong></code> de {{domxref("XMLHttpRequest")}} define o valor do cabeçalho de uma requisição HTTP. Ao usar <code>setRequestHeader()</code>, você deve chamá-lo depois de chamar o método {{domxref("XMLHttpRequest.open", "open()")}}, mas antes de chamar o método {{domxref("XMLHttpRequest.send", "send()")}}. Se esse método é chamado muitas vezes com o mesmo cabeçalho, os valores são somados em um único cabeçalho de requisição HTTP.</p>
+
+<p>A cada vez que você chama <code>setRequestHeader()</code> depois de ter chamado-o pelo menos uma vez, o texto especificado é somado ao final do conteúdo do cabeçalho existente.</p>
+
+<p>Se nenhum cabeçalho {{HTTPHeader("Accept")}} foi definido usando este método, um cabeçalho <code>Accept</code> com o tipo <code>"*/*"</code> é enviado com a requisição quando {{domxref("XMLHttpRequest.send", "send()")}} é chamado.</p>
+
+<p>Por razões de segurança, alguns cabeçalhos só podem ser controlados pelo agente do usuário. Esses cabeçalhos incluem o cabeçalho {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} e o cabeçalho {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.</p>
+
+<div class="note">
+<p><strong>Observação:</strong> Para seu campos personalizados, você pode encontrar uma exceção "<strong>not allowed by Access-Control-Allow-Headers in preflight response</strong>" quando você envia requisições através de domínios. Neste caso, você precisa definir o cabeçalho {{HTTPHeader("Access-Control-Allow-Headers")}} no seu cabeçalho de resposta no lado do servidor.</p>
+</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox"><em>XMLHttpRequest</em>.setRequestHeader(<var>header</var>, <var>value</var>)
+</pre>
+
+<h3 id="Parâmetros">Parâmetros</h3>
+
+<dl>
+ <dt><code>header</code></dt>
+ <dd>O nome do cabeçalho cujo valor está para ser definido.</dd>
+ <dt><code>value</code></dt>
+ <dd>O valor a ser definido como o corpo do cabeçalho.</dd>
+</dl>
+
+<h3 id="Valor_de_retorno">Valor de retorno</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-setRequestHeader()-method', 'setRequestHeader()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>
+
+
+
+<p>{{Compat("api.XMLHttpRequest.setRequestHeader")}}</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Usando XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML em XMLHttpRequest</a></li>
+</ul>
diff --git a/files/pt-br/web/api/xmlhttprequest/timeout/index.html b/files/pt-br/web/api/xmlhttprequest/timeout/index.html
new file mode 100644
index 0000000000..d80b67d77d
--- /dev/null
+++ b/files/pt-br/web/api/xmlhttprequest/timeout/index.html
@@ -0,0 +1,51 @@
+---
+title: XMLHttpRequest.timeout
+slug: Web/API/XMLHttpRequest/timeout
+translation_of: Web/API/XMLHttpRequest/timeout
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>A propriedade <code><strong>XMLHttpRequest.timeout</strong></code> é um <code>unsigned long</code> que representa o número de milisegundos que uma requisição deve esperar até ser automaticamente terminada. O valor padrão para essa propriedade é 0, o que significa que o navegador deverá esperar uma resposta indefinidamente. A propriedade Timeout não deveria ser usada para requisições XMLHttpRequests síncronas em um {{Glossary('document environment')}} ou uma exceção do tipo <code>InvalidAccessError</code> será lançada. Quando um timeout ocorre, o evento <a href="/en-US/docs/Web/Events/timeout">timeout</a> é disparado. {{gecko_minversion_inline("12.0")}}</p>
+
+<dl>
+ <dd>
+ <div class="note"><strong>Nota:</strong> Você não pode usar um timeout para requisições síncronas dentro de uma janela.</div>
+ </dd>
+ <dd><a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Example_using_a_timeout">Utilizando um timeout com uma requisição assíncrona</a> </dd>
+</dl>
+
+<p>No Internet Explorer, a propriedade timeout pode ser usada apenas depois de o método <a href="/en-US/docs/Web/API/XMLHttpRequest/open">open()</a> ter sido invocado e antes de se chamar o método <a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a>.</p>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.timeout = 2000; // tempo em milisegundos
+
+xhr.onload = function () {
+  // Requisição finalizada. O processamento deve ser colocado aqui.
+};
+
+xhr.ontimeout = function (e) {
+  // Timeout na chamada XMLHttpRequest. Ação de timeout aqui.
+};
+
+xhr.send(null);</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentários</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-timeout-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/pt-br/web/api/xmlhttprequest/usando_xmlhttprequest/index.html b/files/pt-br/web/api/xmlhttprequest/usando_xmlhttprequest/index.html
new file mode 100644
index 0000000000..b541e64bc1
--- /dev/null
+++ b/files/pt-br/web/api/xmlhttprequest/usando_xmlhttprequest/index.html
@@ -0,0 +1,688 @@
+---
+title: Usando XMLHttpRequest
+slug: Web/API/XMLHttpRequest/Usando_XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest
+---
+<p><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest"><code>XMLHttpRequest</code></a> torna o envio de requisições HTTP muito fácil.  Basta criar uma instância do objeto, abrir uma url e enviar uma requisição. O <a href="/en-US/docs/HTTP/HTTP_response_codes" title="HTTP response codes">status</a> <a href="/en-US/docs/HTTP/HTTP_response_codes" title="HTTP response codes">HTTP </a>do resultado assim como o seu conteúdo estarão disponíveis quando a transação for completada. Esta página descreve alguns casos comuns de uso desse poderoso objeto JavaScript.</p>
+
+<pre class="brush: js">function reqListener () {
+  console.log(this.responseText);
+};
+
+var oReq = new XMLHttpRequest();
+oReq.onload = reqListener;
+oReq.open("get", "yourFile.txt", true);
+oReq.send();</pre>
+
+<h2 id="Tipos_de_Requisições">Tipos de Requisições</h2>
+
+<p>Uma requisição feita via XMLHttpRequest pode buscar dados de duas maneiras, sícrona e assíncrona. <span style="line-height: 1.5;">O tipo de requisição é dado pelo argumento <code>async</code> que é opcional (terceiro argumento) e é definido no método XMLHttpRequest </span><a href="/en-US/docs/DOM/XMLHttpRequest#open()" style="line-height: 1.5;" title="DOM/XMLHttpRequest#open()">open()</a><span style="line-height: 1.5;">. Se esse argumento for <code>true</code> ou não especificado, o <code>XMLHttpRequest</code> será processado de maneira assíncrona, caso contrário o processamento será síncrono. Uma discussão detalhada e demonstrações desses dois tipos podem ser encontradas na página </span><a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" style="line-height: 1.5;" title="Synchronous and Asynchronous Requests">requisições síncronas e assíncronas</a><span style="line-height: 1.5;">. No geral a melhor prática é a das solicitações assíncronas.</span></p>
+
+<h2 id="Manipulando_Respostas">Manipulando Respostas</h2>
+
+<p>Existem vários tipos de <a href="http://www.w3.org/TR/XMLHttpRequest2/#response" title="http://www.w3.org/TR/XMLHttpRequest2/#response">atributos de resposta</a> definidos pela especificação da W3C para o  XMLHttpRequest.  Eles informam ao cliente que efetuou a requisição XMLHttpRequest informações importantes sobre o status da resposta. Em alguns casos onde se lida com tipos de resposa de não-texto, os tipos de resposta podem envolver alguma manipulação e/ou análise conforme descrito nas seções seguintes<span style="line-height: 1.572;">.</span></p>
+
+<h3 id="Analisando_e_manipulando_a_propriedade_responseXML">Analisando e manipulando a propriedade <code>responseXML</code></h3>
+
+<p>Se você utiliza o <code>XMLHttpRequest </code>para obter o conteúdo de um documento XML remoto, a propriedade <code>responseXML</code> será um objeto DOM que contém um documento XML, o que pode dificultar a manipulação e análise.</p>
+
+<p>As cinco formas mais utilizadas para análisar e manipular um arquivo XML são:</p>
+
+<ol>
+ <li>Usando <a href="/en-US/docs/XPath" title="XPath">XPath</a> para análisar parte deles.</li>
+ <li>Usando <a href="/en-US/docs/JXON" title="JXON">JXON</a> para converter em um Objeto JavaScript.</li>
+ <li>Manualmente <a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">Parsing and serializing XML</a> para strings ou objetos.</li>
+ <li>Usando <a href="/en-US/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a> para serializar <strong>árvores do DOM para strings ou para arquivos</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>pode ser usado se você souber de antemão qual é o conteúdo do XML. Você pode remover quebras de linhas, usando a RegExp para procurar as quebras de linha. No entanto, este é o "último método", caso o código do XML sofra alterações, o método se torna falho.</li>
+</ol>
+
+<h3 id="Analisando_e_manipulando_uma_propriedade_responseText_contendo_um_documento_HTML">Analisando e manipulando uma propriedade <code>responseText</code> contendo um documento HTML</h3>
+
+<div class="note"><strong>Nota:</strong> A especificação W3C do <a href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> permite analisar HTML através da propriedade <code>XMLHttpRequest.responseXML</code> . Leia o artigo sobre <a href="https://developer.mozilla.org/en-US/docs/HTML_in_XMLHttpRequest" title="HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a> para maiores detalhes.</div>
+
+<p>Se você usa o <code>XMLHttpRequest</code> para recuperar o conteúdo de uma página HTML remota, a propriedade <code>responseText</code> será uma string contendo um a "sopa" de todos as tags HTML, o que pode ser difícil de manipular e analizar. Existem três formas básicas para analizar esta sopa de string HTML:</p>
+
+<ol>
+ <li>Use a propriedade  <code>XMLHttpRequest.responseXML</code>.</li>
+ <li>Introduza o conteúdo dentro do corpo de um <a href="https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment">document fragment</a> Através de <code>fragment.body.innerHTML</code> e percorra o fragmento do DOM.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/regexp">RegExp </a>pode se usada se você sempre conhece o conteúdo HTML <code>responseText </code>de que tem em mãos. Você pode quere remover quebras de linha, se você usar RegExp para varrer no que diz respeito a quebra de linhas. Contudo, este método é um "último recurso" uma vez que se o código HTML mudar um pouco, o método provavelmente irá falhar.</li>
+</ol>
+
+<h2 id="Manipulação_de_dados_binários"><span class="short_text" id="result_box" lang="pt"><span class="hps">Manipulação</span> <span class="hps">de dados binários</span></span></h2>
+
+<p>Apesar de <code>XMLHttpRequest</code> ser mais comumente usado para enviar e receber dados textual, <span id="result_box" lang="pt"><span class="hps">ele pode</span> <span class="hps">ser</span> <span class="hps">utilizado</span> <span class="hps">para enviar</span> <span class="hps">e</span> <span class="hps">receber</span> <span class="hps">conteúdo binário</span></span>.<span id="result_box" lang="pt"><span class="hps"> Existem vários</span> <span class="hps">métodos</span> <span class="hps">bem</span> <span class="hps">testados</span> <span class="hps">para</span> <span class="alt-edited hps">forçar</span> <span class="hps">a</span> <span class="hps">resposta</span> <span class="hps">de</span> <span class="hps">um XMLHttpRequest</span> <span class="hps">para</span> <span class="hps">o envio de dados</span> <span class="hps">binário</span></span>. Eles envolvem a utilização do método  .overrideMimeType()  sobre o objeto  XMLHttpRequest e é uma solução viável.</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+oReq.open("GET", url, true);
+// recupera dados não processados como uma string binária
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+</pre>
+
+<p>A especificação XMLHttpRequest Level 2  adiciona novo <a href="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute" title="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute">responseType attributes</a> que tornam o envio e recebimento de dados muito mais fácil.</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; // não é responseText
+  /* ... */
+}
+oReq.send();
+</pre>
+
+<p>Para mais exemplos confira a página <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="Monitorando_o_progresso">Monitorando o progresso</h2>
+
+<p><code>XMLHttpRequest</code> <span id="result_box" lang="pt"><span class="hps">fornece a capacidade de</span> <span class="hps">ouvir vários</span> <span class="hps">eventos que podem</span> <span class="hps">ocorrer</span> <span class="hps">enquanto o</span> <span class="hps">pedido está sendo processado</span></span>. <span id="result_box" lang="pt"><span class="alt-edited">Isso inclui notificações periódicas de progresso, notificações de erro e assim por diante</span></span>.</p>
+
+<p>Suporte para evento de progresso DOM monitorando a conexão <code>XMLHttpRequest</code> transfers siga a Web API <a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">specification for progress events</a>: estes eventos implementam a interface {{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();
+
+// ...A transferência foi cancelada pelo usuário
+
+// <span id="result_box" lang="pt"><span class="hps">progresso</span> <span class="alt-edited hps">de transferências do</span> <span class="hps">servidor para o cliente</span> <span class="atn hps">(</span><span>downloads)</span></span>
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total;
+    // ...
+  } else {
+    // <span id="result_box" lang="pt"><span class="hps">Não é possível</span> <span class="hps">calcular</span> <span class="hps">informações de progresso</span> <span class="alt-edited hps">uma vez que</span> <span class="alt-edited hps">a dimensão total</span> <span class="alt-edited hps">é desconhecida</span></span>
+  }
+}
+
+function transferComplete(evt) {
+  alert("<span class="short_text" id="result_box" lang="pt"><span class="hps">A</span> <span class="alt-edited hps">transferência foi concluída</span></span>.");
+}
+
+function transferFailed(evt) {
+  alert("<span class="short_text" id="result_box" lang="pt"><span class="alt-edited hps">Um erro ocorreu</span> <span class="hps">durante a transferência</span> <span class="hps">do arquivo</span></span>.");
+}
+
+function transferCanceled(evt) {
+  alert("<span class="short_text" id="result_box" lang="pt"><span class="hps">A transferência</span> <span class="hps">foi cancelada</span> <span class="hps">pelo usuário</span></span>.");
+}</pre>
+
+<p>Lines 3-6 adiciona receptores de eventos (event listeners) para os vários que são enviados ao executar uma transferência de dados usando <code>XMLHttpRequest</code>.</p>
+
+<div class="note"><strong>Nota:</strong> Você precisa adicionar os receptores de eventos (event listeners) antes de chamar <code>open()</code> sobre a requisição.  Caso contrário, os eventos de prograsso não dispararão..</div>
+
+<p>O manipulador de evento  de prograsso, especificado pela função <code>updateProgress()</code> neste exemplo, recebe o número total de bytes para transferir, bem como o número de bytes transferidos até o momento em total de eventos e campos  carregados . No entanto, se o campo lengthComputable é false, o comprimento total não é conhecido e será zero..</p>
+
+<p><span id="result_box" lang="pt"><span class="alt-edited">Eventos de progresso existem para ambos as transferências de download e upload.</span></span> The download events are fired on the <code>XMLHttpRequest</code> object itself, as shown in the above sample. The upload events are fired on the <code>XMLHttpRequest.upload</code> object, as shown below:</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> <span id="result_box" lang="pt"><span class="alt-edited hps">eventos de progresso</span> <span class="hps">não estão disponíveis para</span> <span class="hps">o arquivo</span></span><code>:</code> protocol.</div>
+
+<div class="note"><strong>Nota</strong>: Atualmente, existem bugs em aberto para o evento de progresso que continua fetando a versão 25 do Firefox sobre <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> Iniciando no {{Gecko("9.0")}}, <span id="result_box" lang="pt"><span class="hps">eventos de progresso</span> <span class="alt-edited hps">agora podem</span> <span class="alt-edited hps">ser invocados</span> <span class="alt-edited hps">a entrar para</span> <span class="hps">cada</span> <span class="hps">pedaço de</span> <span class="hps">dados recebidos</span></span>, <span id="result_box" lang="pt"><span class="alt-edited">incluindo o último bloco, nos casos em que o último pacote é recebido e a conexão fechada antes do evento progresso ser disparado</span></span>. Neste caso, o evento de progresso é automaticamente <span id="result_box" lang="pt"><span class="hps">acionado quando o</span> <span class="alt-edited hps">evento load</span> <span class="hps">ocorre para</span> <span class="alt-edited hps">esse pacote</span></span>. <span id="result_box" lang="pt"><span class="alt-edited">Isso permite que você agora acompanhe de forma confiável apenas observando o evento de progresso</span></span></p>
+</div>
+
+<div class="note">
+<p><strong>Nota:</strong> A partir do {{Gecko("12.0")}}, se o seu evento de progresso e chamado com um <code>responseType</code> de "moz-blob", o valor da resposta será um {{domxref("Blob")}} <span class="short_text" id="result_box" lang="pt"><span class="hps">contendo</span> <span class="hps">os</span> <span class="hps">dados recebidos</span> <span class="hps">até agora</span></span>r.</p>
+</div>
+
+<p>POde-se também detectar todas as três condições de fim de carga (<code>abort</code>, <code>load</code>, or <code>error</code>) usando o evento <code>loadend</code>:</p>
+
+<pre class="brush:js">req.addEventListener("loadend", loadEnd, false);
+
+function loadEnd(e) {
+  alert("<span class="short_text" id="result_box" lang="pt"><span class="hps">A</span> <span class="hps">transferência</span> <span class="alt-edited hps">terminou</span></span> (<span class="short_text" id="result_box" lang="pt"><span class="hps">embora</span> <span class="hps">não sabemos</span> <span class="hps">se ele</span> <span class="hps">conseguiu</span> <span class="hps">ou não</span></span>).");
+}
+</pre>
+
+<p><span id="result_box" lang="pt"><span class="alt-edited hps">Note que</span> <span class="hps">não há nenhuma</span> <span class="hps">maneira de ter certeza</span> <span class="alt-edited hps">a partir da</span> <span class="hps">informação recebida</span> <span class="hps">pelo evento</span> <span class="hps">loadend</span> <span class="hps">sobre qual</span> <span class="hps">condição</span> <span class="hps">causou a</span> <span class="hps">operação</span> <span class="alt-edited hps">de encerrar</span><span>;</span> <span class="hps">no entanto, você</span> <span class="hps">pode usar isso para</span> <span class="hps">lidar com tarefas</span> <span class="hps">que</span> <span class="hps">precisam ser realizadas</span> <span class="hps">em todos os cenários</span> <span class="hps">de fim-de</span><span class="atn">-</span><span>transferência.</span></span></p>
+
+<h2 id="Submitting_forms_and_uploading_files">Submitting forms and uploading files</h2>
+
+<p>Instances of <code>XMLHttpRequest</code> can be used to submit forms in two ways:</p>
+
+<ul>
+ <li>using nothing but <em>pure</em> AJAX,</li>
+ <li>using the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> API.</li>
+</ul>
+
+<p>The <strong>second way</strong> (using the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> API) is the simplest and the fastest, but has the disadvantage that <strong>the data thus collected can not be <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringified</a></strong>: they are in every way <em>a blob</em>. It is the best solution for simple cases.<br>
+ The <strong>first way</strong> (<em>pure</em> AJAX) is instead the most complex, but in compensation is also the most flexible and powerful: it lends itself to wider uses and <strong>the data thus collected can be <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringified</a></strong><strong> and reused for other purposes</strong> such as, for example, populating the <em>status object</em> during a <a href="/en-US/docs/DOM/Manipulating_the_browser_history" title="/en-US/docs/DOM/Manipulating_the_browser_history">manipulation of the browser history</a>, or other.</p>
+
+<h3 id="Using_nothing_but_pure_AJAX">Using nothing but <em>pure</em> AJAX</h3>
+
+<p>Submitting forms without the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> API does not require other APIs, except that, only <strong>if you want to upload one or more files</strong>, the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API.</p>
+
+<h4 id="A_brief_introduction_to_the_submit_methods">A brief introduction to the submit methods</h4>
+
+<p>An html {{ HTMLElement("form") }} can be sent in four ways:</p>
+
+<ul>
+ <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>application/x-www-form-urlencoded</code> (default);</li>
+ <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>text/plain</code>;</li>
+ <li>using the <code>POST</code> method and setting the <code>enctype</code> attribute to <code>multipart/form-data</code>;</li>
+ <li>using the <code>GET</code> method (in this case the <code>enctype</code> attribute will be ignored).</li>
+</ul>
+
+<p>Now, consider to submit a form containing only two fields, named <code>foo</code> and <code>baz</code>. If you are using the <code>POST</code> method, the server will receive a string similar to one of the following three ones depending on the encoding type you are using:</p>
+
+<ul>
+ <li>
+  <p>Method: <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>Method: <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>Method: <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>Instead, if you are using the <code>GET</code> method, a string like the following will be simply added to the URL:</p>
+
+<pre>?foo=bar&amp;baz=The%20first%20line.%0AThe%20second%20line.</pre>
+
+<h4 id="A_little_vanilla_framework">A little <em>vanilla</em> framework</h4>
+
+<p>All these things are done automatically by the web browser whenever you submit a {{ HTMLElement("form") }}. But if you want to do the same things using JavaScript you have to instruct the interpreter about <em>all</em> things. So, how to send forms in <em>pure</em> AJAX is too complex to be explained in detail here. For this reason we posted here <strong>a complete (but still didactic) framework</strong>, which is able to use all the four ways of <em>submit</em> and, also, to <strong>upload files</strong>:</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() Polifyll ::
+|*|
+|*|  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>To test it, please, create a<span class="long_text short_text" id="result_box" lang="en"><span class="hps"> </span></span>page named <strong>register.php</strong> (which is the <code>action</code> attribute of these sample forms) and just put the following <em><span class="long_text short_text" id="result_box" lang="en"><span class="hps">minimalistic </span></span></em>content:</p>
+
+<pre class="brush: php">&lt;?php
+
+  /* register.php */
+
+  header("Content-type: text/plain");
+
+  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);
+
+?&gt;</pre>
+
+<p>The syntax of this script is the following:</p>
+
+<pre class="syntaxbox">AJAXSubmit(myForm);</pre>
+
+<div class="note"><strong>Note:</strong> This little <em>vanilla</em> framework <strong>uses the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API</strong>, which is <em>a recent technique</em> (but only when there are files to upload, the <code>method</code> of the {{ HTMLElement("form") }} is <code>POST</code> and the <code>enctype</code> attribute is setted to <code>multipart/form-data</code>). For this reason, <strong>the <em>pure-AJAX</em> upload is to be considered an experimental technique</strong>. Instead, if you don't want to upload files, this framework will not use any recent API.<br>
+Note also that <strong>the best way to send binary content is using <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffers</a> or <a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob">Blobs</a> in conjuncton with the <a href="/en-US/docs/DOM/XMLHttpRequest#send%28%29" title="/en-US/docs/DOM/XMLHttpRequest#send()"><code>send()</code></a> method and, possibly, with the <a href="/en-US/docs/DOM/FileReader#readAsArrayBuffer()" title="/en-US/docs/DOM/FileReader#readAsArrayBuffer()"><code>readAsArrayBuffer()</code></a> method of the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API</strong>. But, since the aim of this little script is to work with a <em><a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a></em> raw data, we used the <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29" title="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> method in conjunction with the <a href="/en-US/docs/DOM/FileReader#readAsBinaryString%28%29" title="/en-US/docs/DOM/FileReader#readAsBinaryString()"><code>readAsBinaryString()</code></a> method of the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API. So, this is <strong>the best solution when working with a relatively few data which must be <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringified</a> in order to be reused later</strong>. Anyhow, since working with strings instead of <a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">typed arrays</a> implies a greater waste of resources, this script makes sense only when you are dealing with <em>small</em> files (like images, documents, mp3, etc.). Otherwise, if you don't want to stringify the submitted or uploaded data, in addition to <a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">typed arrays</a>, consider also the use of <strong>the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> API</strong>.</div>
+
+<h3 id="Using_FormData_objects">Using FormData objects</h3>
+
+<p>The <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> constructor lets you compile a set of key/value pairs to send using <code>XMLHttpRequest</code>. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's <code>submit()</code> method would use to send the data if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples and explanations of how one can utilize FormData with XMLHttpRequests see the <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="Using FormData Objects">Using FormData Objects</a> page. For didactic purpose only we post here <strong>a <em>translation</em> of <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">the previous example</a> transformed so as to make use of the <code>FormData</code> API</strong>. Note the brevity of the code:</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>Note:</strong> As we said, <strong><code>FormData</code> objects are not <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">stringifiable</a> objects</strong>. If you want to stringify a submitted data, use <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">the previous <em>pure</em>-AJAX example</a>. Note also that, although in this example there are some <code>file</code> {{ HTMLElement("input") }} fields, <strong>when you submit a form through the <code>FormData</code> API you do not need to use the <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> API also</strong>: files are automatically loaded and uploaded.</div>
+
+<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..XMLHttpRequest.open</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");
+var oReq = XMLHttpRequest();</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 = XMLHttpRequest();
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ol>
+ <li><a href="/en-US/docs/AJAX/Getting_Started" title="AJAX/Getting_Started">MDC 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>
+</ol>