initial commit

42 files changed, 9538 insertions, 0 deletions

diff --git a/files/pt-br/web/guide/ajax/getting_started/index.html b/files/pt-br/web/guide/ajax/getting_started/index.html
new file mode 100644
index 0000000000..6cdddaddce
--- /dev/null
+++ b/files/pt-br/web/guide/ajax/getting_started/index.html
@@ -0,0 +1,290 @@
+---
+title: Primeiros passos
+slug: Web/Guide/AJAX/Getting_Started
+tags:
+  - AJAX
+  - XMLHttpRequest
+translation_of: Web/Guide/AJAX/Getting_Started
+---
+<p>Esse artigo guia você através dos princípios do AJAX e oferece dois exemplos práticos simples para poder começar.</p>
+
+<h3 id="O_que_é_AJAX">O que é AJAX?</h3>
+
+<p>AJAX significa Asynchronous JavaScript e XML. Em poucas palavras, é o uso do objeto <code><a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></code> para se comunicar com os scripts do lado do servidor. Ele pode enviar bem como receber informações em uma variedade de formatos, incluindo JSON, XML, HTML, e até mesmo arquivos de texto. Porém a característica mais atraente do AJAX, é a sua natureza "assíncrona", o que significa que ele pode fazer tudo isso sem a necessidade de atualizar a página. Isso permite a você atualizar partes de uma página com base em eventos do usuário.</p>
+
+<p>Os dois recursos em questão que você pode utilizar são:</p>
+
+<ul>
+ <li>Fazer requisições para o servidor sem recarregar a página</li>
+ <li>Receber e trabalhar com dados do servidor</li>
+</ul>
+
+<h3 id="Passo_1_-_Como_fazer_uma_requisição_HTTP">Passo 1 - Como fazer uma requisição HTTP</h3>
+
+<p>Para fazer uma requisição <a href="/en/HTTP" title="en/HTTP">HTTP</a> ao servidor usando JavaScript, você precisa de uma instância de uma classe que fornece essa funcionalidade. Este é o lugar onde o<code> XMLHttpRequest</code> entra. Essa classe foi originalmente introduzida no Internet Explorer como um objeto ActiveX chamado <code>XMLHTTP</code>. Então, Mozilla, Safari e outros navegadores o seguiram, implementando uma classe <code>XMLHttpRequest</code> que suporta os métodos e propriedades do objeto ActiveX original da Microsoft. </p>
+
+<p>Como resultado, a fim de criar uma instância (objeto) compatível com multiplos navegadores da classe requerida, você pode fazer o seguinte:</p>
+
+<pre class="brush: js">var httpRequest;
+if (window.XMLHttpRequest) { // Mozilla, Safari, ...
+    httpRequest = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE 8 and older
+    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+}
+</pre>
+
+<div class="note"><strong>Nota:</strong> Para fins de ilustração, o que precede é uma versão um tanto simplificada do código necessário para criar uma instância XMLHTTP. Para um exemplo mais real, consulte o passo 3 deste artigo.</div>
+
+<p>Em seguida, você precisa decidir o que quer fazer depois de receber a resposta do servidor ao seu pedido. Nesta etapa, você somente precisa dizer ao objeto requisição HTTP qual função JavaScript irá manipular o processamento da resposta. Isto é feito definindo a propriedade <code>onreadystatechange</code> do objeto para o nome da função JavaScript que deve ser chamada quando o estado da requisição muda, desse jeito:</p>
+
+<pre><code>httpRequest.onreadystatechange = nameOfTheFunction;</code></pre>
+
+<p>Observe que não existem parênteses depois do nome da função e nenhum parâmetro é passado, porque você está simplesmente atribuindo uma referência à função, ao invés de realmente chamá-la. Além disso, em vez de dar um nome de função, você pode usar a técnica JavaScript de definir funções dinâmicamente (chamadas "funções anônimas") e definir as ações que irão processar de imediato a resposta, dessa forma:</p>
+
+<pre class="brush: js">httpRequest.onreadystatechange = function(){
+    // processar a resposta do servidor
+};
+</pre>
+
+<p>Em seguida, depois de ter declarado o que vai acontecer assim que receber a resposta, você precisa realmente fazer a requisição. Você precisa chamar os métodos <code>open()</code> e <code>send()</code> da classe requisição HTTP, dessa forma:</p>
+
+<pre class="brush: js">httpRequest.open('GET', 'http://www.example.org/some.file', true);
+httpRequest.send(null);
+</pre>
+
+<ul>
+ <li>O primeiro parâmetro da chamada <code>para open()</code> é o método da requisição HTTP – GET, POST, HEAD ou qualquer outro método que você deseja usar e que é suportado pelo seu servidor. Mantenha o método em letras maiúsculas de acordo com o padrão HTTP; caso contrário, alguns navegadores (como o Firefox) podem não processar a requisição. Para mais informações sobre os possíveis métodos de requisição HTTP verifique as <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">especificações do W3C</a>.</li>
+ <li>O segundo parâmetro é a URL da página que você está requisitando. Como um recurso de segurança, você não pode chamar páginas em domínios de terceiros. Certifique-se de usar o nome exato do domínio em todas as suas páginas ou irá obter um erro de "permissão negada" quando chamar o <code>open()</code>. Uma cilada comum é acessar o seu site pelo <code>domain.tld</code>, mas tentar chamar páginas com <code>www.domain.tld</code>. Se você realmente precisa enviar uma requisição para outro domínio, veja <a href="/En/HTTP_access_control" title="https://developer.mozilla.org/en/HTTP_access_control">controle de acesso HTTP</a>.</li>
+ <li>O terceiro parâmetro opcional define se a requisição é assíncrona. Se <code>TRUE</code> (o padrão), a execução da função JavaScript irá continuar enquanto a resposta do servidor não chegar. Isso é o A no AJAX.</li>
+</ul>
+
+<p>O parâmetro para o método <code>send()</code> pode ser qualquer dado que você deseja enviar para o servidor se a requisição for <code>POST</code>. Dados de formulário devem ser enviados em um formato que o servidor possa facilmente analisar. Isso pode ser feito através de uma string de consulta, como:</p>
+
+<pre><code>"name=value&amp;anothername="+encodeURIComponent(myVar)+"&amp;so=on"</code></pre>
+
+<p>ou em vários outros formatos, incluindo JSON, SOAP, etc.</p>
+
+<p>Observe que se você deseja utilizar <code>POST</code>,  você pode ter que definir o tipo de solicitação como MIME. Por exemplo, use a linha a seguir antes de chamar <code>send()</code> para os dados do formulário enviados como uma string de consulta:</p>
+
+<pre class="brush: js">httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+</pre>
+
+<h3 id="Passo_2_-_Manipulando_a_resposta_do_servidor">Passo 2 - Manipulando a resposta do servidor</h3>
+
+<p>Lembre-se que quando você estava enviando a requisição, você forneceu o nome de uma função JavaScript que foi projetada para lidar com a resposta.</p>
+
+<pre class="brush: js">httpRequest.onreadystatechange = nameOfTheFunction;
+</pre>
+
+<p>Vamos ver o que essa função deve fazer. Primeiro, a função precisa checar o estado da requisição. Se o estado da requisição tem o valor igual a "4", significa que a resposta do servidor foi recebida por completo e está tudo OK para continuar o processo.</p>
+
+<pre class="brush: js">if (httpRequest.readyState === 4) {
+    // everything is good, the response is received
+} else {
+    // still not ready
+}
+</pre>
+
+<p><span style="line-height: 1.5;">A lista completa dos valores <code>readyState</code> é a seguinte:</span></p>
+
+<ul>
+ <li>0 (não inicializado)</li>
+ <li>1 (carregando)</li>
+ <li>2 (carregado)</li>
+ <li>3 (interativo)</li>
+ <li>4 (completo)</li>
+</ul>
+
+<p>* readyState é algo como "estado de prontidão", mostra qual é o status do processo que está sendo executado e se está sendo executado.</p>
+
+<p>(<a class="external" href="http://msdn.microsoft.com/en-us//library/ms534361%28en-us,VS.85%29.aspx" title="http://msdn.microsoft.com/en-us//library/ms534361(en-us,VS.85).aspx">Fonte</a>)</p>
+
+<p>A próxima coisa a se checar é o <a href="/en/HTTP#HTTP_Response_Codes" title="en/HTTP#HTTP Response Codes">código de resposta</a> do servidor HTTP. Todos os possíveis códigos estão listados no site do <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">W3C</a>. No exemplo a seguir, nós tratamos do retorno bem sucedido ou mal sucedido da requisição HTTP do AJAX, verificando se o código de resposta for <a href="/en/HTTP/HTTP_response_codes#200" title="https://developer.mozilla.org/en/HTTP/HTTP_response_codes#200"><code>200</code></a>.</p>
+
+<pre class="brush: js">if (httpRequest.status === 200) {
+    // perfect!
+} else {
+    // there was a problem with the request,
+    // for example the response may contain a 404 (Not Found)
+    // or 500 (Internal Server Error) response code
+}
+</pre>
+
+<p>Agora, após você ter checado o estado da requisição e o código de status do HTTP da resposta, caberá a você fazer o que quiser com os dados que o servidor lhe enviou.<span id="result_box" lang="pt"> <span class="hps">Você tem duas opções</span> <span class="hps">para acessar esses dados</span><span>:</span></span></p>
+
+<ul>
+ <li><code>httpRequest.responseText</code> – retorna a resposta do servidor como uma string de texto</li>
+ <li><code>httpRequest.responseXML</code> – retorna a resposta do servidor como um objeto XMLDocument no qual você poderá percorrer usando as funções DOM do JavaScript</li>
+</ul>
+
+<p><span id="result_box" lang="pt"><span class="hps">Note que os passos</span> <span class="hps">acima são</span> <span class="hps">válidos somente</span> <span class="hps">se você usou</span> <span class="hps">uma solicitação assíncrona</span> <span class="atn hps">(</span><span>terceiro parâmetro</span> <span class="hps">de</span> <code><span class="hps">open()</span></code> <span class="hps">foi</span> <span class="hps">definido como</span> <span class="hps"><code>true</code>)</span><span>.</span> <span class="hps">Se você usou</span> <span class="hps">um</span> <span class="hps">pedido</span> <strong><span class="hps">síncrono</span></strong> <span class="hps">você não</span> <span class="hps">precisa especificar</span> <span class="hps">uma função,</span> <span class="hps">você pode acessar</span> <span class="hps">o retorno</span> <span class="hps">de dados</span> <span class="hps">pelo servidor</span> <span class="hps">diretamente</span> <span class="hps">depois de chamar</span> <code><span class="hps">send()</span></code><span>,</span> <span class="hps">porque o script</span> <span class="hps">irá parar e</span> <span class="hps">esperar pela resposta</span> <span class="hps">do servidor.</span></span></p>
+
+<h3 id="Passo_3_–_Um_simples_exemplo">Passo 3 – Um simples exemplo</h3>
+
+<p>Vamos colocar tudo junto e fazer uma simples requisição HTTP. Nosso JavaScript irá solicitar um documento HTML (<code>test.html</code>) com o conteúdo "I'm a test." e depois utilizaremos <code>alert()</code> para ver o conteúdo do arquivo <code>test.html</code>.</p>
+
+<pre class="brush: html">&lt;span id="ajaxButton" style="cursor: pointer; text-decoration: underline"&gt;
+  Make a request
+&lt;/span&gt;
+&lt;script type="text/javascript"&gt;
+(function() {
+  var httpRequest;
+  document.getElementById("ajaxButton").onclick = function() { makeRequest('test.html'); };
+
+  function makeRequest(url) {
+    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
+      httpRequest = new XMLHttpRequest();
+    } else if (window.ActiveXObject) { // IE
+      try {
+        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
+      }
+      catch (e) {
+        try {
+          httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+        }
+        catch (e) {}
+      }
+    }
+
+    if (!httpRequest) {
+      alert('Giving up :( Cannot create an XMLHTTP instance');
+      return false;
+    }
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('GET', url);
+    httpRequest.send();
+  }
+
+  function alertContents() {
+    if (httpRequest.readyState === 4) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('There was a problem with the request.');
+      }
+    }
+  }
+})();
+&lt;/script&gt;
+</pre>
+
+<p><br>
+ Neste exemplo:</p>
+
+<ul>
+ <li>O usuário clica no link "Make a request" em seu browser (navegador);</li>
+ <li>O manipulador de eventos chama a função makeRequest()  com um parâmetro - o nome <code>test.html</code> de um arquivo HTML no mesmo diretório.</li>
+ <li>A requisição é realizada e então (<code>onreadystatechange</code>) a execução é passada para <code>alertContents()</code>;</li>
+ <li><code>alertContents()</code> checa se a resposta foi recebida e se está OK, então <code>alert()</code> mostra o conteúdo do arquivo <code>test.html.</code></li>
+</ul>
+
+<div class="note"><strong>Nota</strong>: <span id="result_box" lang="pt"><span class="hps"><span id="result_box" lang="pt"><span class="alt-edited hps">Se você está enviando</span> <span class="alt-edited hps">uma solicitação para um</span> <span class="hps">pedaço de código</span> <span class="alt-edited hps">que retornará</span> <span class="hps">XML</span><span>, ao invés de</span> <span class="hps">um arquivo</span> <span class="hps">XML</span> <span class="hps">estático</span><span>, é necessário definir</span> <span class="hps">alguns</span> <span class="hps">cabeçalhos de resposta</span> <span class="hps">se a sua página</span> <span class="alt-edited hps">é para trabalhar</span> <span class="alt-edited hps">com o Internet Explorer e com o</span> <span class="hps">Mozilla.</span> <span class="hps">Se</span> <span class="hps">você não definir</span> <span class="hps">cabeçalho</span> <code><span class="hps">Content-Type</span><span>: application/</span><span class="hps">xml</span></code><span>, o IE irá</span> <span class="hps">lançar um erro</span> <span class="hps">JavaScript,</span> <span class="atn hps">"</span><span>Objeto esperado</span><span>"</span><span>,</span> <span class="hps">após a linha</span> <span class="hps">onde você tentar</span> <span class="hps">acessar um elemento</span> <span class="hps">XML.</span></span>.</span></span></div>
+
+<div class="note"><strong>Nota 2</strong>: <span id="result_box" lang="pt"><span class="hps">Se</span> <span class="hps">você não definir</span> <span class="hps">cabeçalho</span> <code><span class="atn hps">Cache-</span><span>Control: no</span><span>-cache</span></code> <span class="alt-edited hps">o navegador</span> <span class="alt-edited hps">armazenará em cache</span> <span class="hps">a resposta</span> <span class="alt-edited hps">e jamais</span> <span class="alt-edited hps">voltará a submeter</span> <span class="hps">o pedido</span><span>, tornando</span> <span class="hps">a depuração</span> <span class="atn hps">"</span><span class="alt-edited">desafiadora".</span> <span class="alt-edited hps">Também é</span> <span class="alt-edited hps">possível acrescentar</span> <span class="hps">um parâmetro</span> <span class="hps">GET</span> <span class="hps">adicional</span> <span class="hps">sempre</span> <span class="hps">diferente,</span> <span class="hps">como o</span> <span class="hps">timestamp</span> <span class="hps">ou</span> <span class="hps">um número aleatório</span> <span class="atn hps">(</span><span>veja</span> <a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache" title="https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache">bypassing the cache</a><span class="hps">).</span></span></div>
+
+<div class="note"><strong>Nota 3</strong>: <span id="result_box" lang="pt"><span class="hps">Se a variável</span> <span class="hps">httpRequest</span> <span class="alt-edited hps">é utilizada</span> <span class="hps">globalmente</span><span class="alt-edited">, funções</span> <span class="alt-edited hps">concorrentes</span> <span class="hps">chamando</span> <code><span class="hps">makeRequest</span></code><span class="alt-edited hps"><code>()</code> podem</span> <span class="alt-edited hps">sobrescrever</span> uma à<span class="hps"> outra,</span> <span class="hps">causando</span> <span class="hps">uma condição de corrida</span><span>.</span> <span class="hps">Declarando</span> <span class="hps">o</span> <span class="hps">httpRequest</span> <span class="hps">variável local para</span> <span class="hps">um <a href="https://developer.mozilla.org/en/JavaScript/Guide/Closures" title="https://developer.mozilla.org/en/JavaScript/Guide/Closures">closure</a></span> <span class="hps">contendo as funções</span> <span class="hps">AJAX</span> <span class="hps">impede</span> <span class="hps">a condição de corrida</span><span>.</span></span></div>
+
+<p>Caso ocorra um erro de comunicação (tal como a queda de do servidor web), uma exceção será lançada no método onreadystatechange quando o campo status for acessado. Tenha a certeza de envolver sua declaração if...then dentro de um bloco try...catch.</p>
+
+<pre class="brush: js">function alertContents() {
+  try {
+    if (httpRequest.readyState === 4) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('There was a problem with the request.');
+      }
+    }
+  }
+  catch( e ) {
+    alert('Caught Exception: ' + e.description);
+  }
+}
+</pre>
+
+<h3 id="Passo_4_–_Trabalhando_com_a_resposta_XML">Passo 4 – Trabalhando com a resposta XML</h3>
+
+<p>Nos exemplos anteriores, após a resposta para a requisição HTTP ser recebida nós utilizamos a propriedade <code>responseText</code> do objeto solicitado,  que continha o conteúdo de arquivo  <code>test.html</code> file. Agora, vamos experimentar a propriedade <code>responseXML</code>.</p>
+
+<p>Em primeiro lugar, vamos criar um documento XML válido para solicitarmos mais tarde. O documento  (<code>test.xml</code>) possui o seguinte conteúdo:</p>
+
+<pre class="brush: html">&lt;?xml version="1.0" ?&gt;
+&lt;root&gt;
+    I'm a test.
+&lt;/root&gt;
+</pre>
+
+<p>No script nós precisamos apenas alterar a linha da requisição para:</p>
+
+<pre class="brush: html">...
+onclick="makeRequest('test.xml')"&gt;
+...
+</pre>
+
+<p>Em seguida,  dentro de <code>alertContents() precisamos substituir a linha</code> <code>alert(httpRequest.responseText);</code> para:</p>
+
+<pre class="brush: js">var xmldoc = httpRequest.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+</pre>
+
+<p>Este código pega o objeto <code>XMLDocument</code> obtido por <code>responseXML</code> e utiliza métodos DOM para acessar alguns dados contidos no documento XML. Você pode ver o <code>test.xml</code> <a class="external" href="http://www.w3clubs.com/mozdev/test.xml">aqui</a> e o script de teste atualizado <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html">aqui</a>.</p>
+
+<h3 id="Passo_5_–_Trabalhando_com_os_dados">Passo 5 – Trabalhando com os dados</h3>
+
+<p>Finalmente, vamos enviar algum dado para o servidor e obter a resposta. Desta vez, nosso JavaScript solicitará um página dinâmica (<code>test.php</code>)  que receberá os dados que enviamos e retornará um string computada - "<code>Hello,[user data]!</code>" - visualizada através de <code>alert().</code></p>
+
+<p>Primeiro, vamos adicionar uma text box em nosso HTML de modo que o usuário possa digitar o seu nome:</p>
+
+<pre class="brush: html">&lt;label&gt;Your name:
+  &lt;input type="text" id="ajaxTextbox" /&gt;
+&lt;/label&gt;
+&lt;span id="ajaxButton" style="cursor: pointer; text-decoration: underline"&gt;
+  Make a request
+&lt;/span&gt;</pre>
+
+<p>Vamos, também, adicionar uma linha para nosso manipulador de eventos obter os dados do usuário da text box e enviá-lo para função <code>makeRequest()</code> juntamente com a URL do nosso script do lado do servidor (server-side):</p>
+
+<pre class="brush: js">  document.getElementById("ajaxButton").onclick = function() {
+      var userName = document.getElementById("ajaxTextbox").value;
+      makeRequest('test.php',userName);
+  };
+</pre>
+
+<p><span id="result_box" lang="pt"><span class="hps">Precisamos</span> <span class="hps">modificar</span> <code><span class="hps">makeRequest</span> </code><span class="hps"><code>()</code> para aceitar</span> <span class="hps">os dados do usuário</span> <span class="hps">e</span> <span class="hps">passá-lo para</span> <span class="hps">o servidor</span></span>. Vamos mudar o método de requisição de <code>GET</code> para <code>POST</code>, e incluir nossos dados como um parâmetro na chamada para <code>httpRequest.send()</code>:</p>
+
+<pre class="brush: js">  function makeRequest(url, userName) {
+
+    ...
+
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('POST', url);
+    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    httpRequest.send('userName=' + encodeURIComponent(userName));
+  }
+</pre>
+
+<p>A função <code>alertContents()</code> pode ser escrita da mesma forma que se encontrava no <strong>Passo 3</strong> para alertar (<code>alert()</code>) nossa string computada,  se isso for tudo o que o servidor retorna. No entanto, vamos dizer que  o servidor irá retornar tanto a sequência computada como o dados original do usuário. Portanto, se o usuário digitou "Jane" na text box, a resposta do servidor ficaria assim:</p>
+
+<p><code>{"userData":"Jane","computedString":"Hi, Jane!"}</code></p>
+
+<p><span class="short_text" id="result_box" lang="pt"><span class="hps">Para utilizar</span> <span class="hps">estes dados</span> <span class="hps">dentro de </span></span><code>alertContents()</code>, nós não podemos simplesmente exibir com <code>alert()</code>  a propriedade <code>responseText</code>. Temos que analisar (parse) e então alertar (<code>alert()</code>) <code>computedString,</code> a propriedade que queremos:</p>
+
+<pre class="brush: js">function alertContents() {
+    if (httpRequest.readyState === 4) {
+      if (httpRequest.status === 200) {
+        var response = JSON.parse(httpRequest.responseText);
+        alert(response.computedString);
+    } else {
+      alert('There was a problem with the request.');
+    }
+}</pre>
+
+<p>O arquivo test.php possui o seguinte código</p>
+
+<pre class="brush: php">$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name';
+$computedString = "Hi, " . $name;
+$array = ['userName' =&gt; $name, 'computedString' =&gt; $computedString];
+echo json_encode($array);</pre>
+
+<p>Para mais métodos DOM, não deixe de conferir a documentação <a class="external" href="http://www.mozilla.org/docs/dom/">Mozilla's DOM implementation</a>.</p>
diff --git a/files/pt-br/web/guide/ajax/index.html b/files/pt-br/web/guide/ajax/index.html
new file mode 100644
index 0000000000..acb1d7c5f6
--- /dev/null
+++ b/files/pt-br/web/guide/ajax/index.html
@@ -0,0 +1,92 @@
+---
+title: AJAX
+slug: Web/Guide/AJAX
+translation_of: Web/Guide/AJAX
+---
+<div class="callout-box"><strong><a href="/en-US/docs/AJAX/Getting_Started" title="en-US/docs/AJAX/Getting_Started">Primeiros passos</a></strong><br>
+Uma introdução ao AJAX.</div>
+
+<div>
+<p><strong>AJAX</strong> é o acrônimo para <strong>JavaScript assíncrono + XML.</strong> Não é exatamente uma tecnologia nova, mas um termo empregado em 2005 por Jesse James Garrett para descrever uma nova forma de utilizar em conjunto algumas tecnologias, incluindo <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a> ou <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOMl</a>, <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>, <a href="/en-US/docs/XSLT" title="en-US/docs/XSLT">XSLT</a>, e o mais importante: <a href="/en-US/docs/DOM/XMLHttpRequest">objeto XMLHttpRequest</a>.<br>
+ Quando essas tecnologias são combinadas no modelo AJAX, as aplicações web que a utilizam são capazes de fazer rapidamente atualizações incrementais para a interface do usuário sem recarregar a página inteira do navegador. Isso torna a aplicação mais rápida e sensível às ações do usuário.</p>
+
+<p>Embora a letra X em AJAX corresponda ao XML, atualmente o <a href="/en-US/docs/JSON" title="https://developer.mozilla.org/en-US/docs/JSON">JSON</a> é mais utilizado que o XML devido às suas vantagens, como ser mais leve e ser parte do JavaScript. Ambos (JSON e XML) são utilizados ​​para obter informações do pacote no modelo AJAX.</p>
+</div>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Documentação</h2>
+
+    <dl>
+     <dt><a href="/en-US/docs/AJAX/Getting_Started" title="en-US/docs/AJAX/Getting_Started">AJAX: Primeiros passos</a></dt>
+     <dd>Este artigo orientará o básico sobre AJAX e fornecerá dois exemplos para você começar.</dd>
+     <dt><a class="external" href="http://www.webreference.com/programming/ajax_tech/">Alternate Ajax Techniques</a></dt>
+     <dd>Most articles on Ajax have focused on using XMLHttp as the means to achieving such communication, but Ajax techniques are not limited to just XMLHttp. There are several other methods.</dd>
+     <dt><a class="external" href="http://www.adaptivepath.com/publications/essays/archives/000385.php">Ajax: A New Approach to Web Applications</a></dt>
+     <dd>Jesse James Garrett, of <a class="external" href="http://www.adaptivepath.com">adaptive path</a>, wrote this article in February 2005, introducing AJAX and its related concepts.</dd>
+     <dt><a class="external" href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html">A Simpler Ajax Path</a></dt>
+     <dd>"As it turns out, it's pretty easy to take advantage of the XMLHttpRequest object to make a web app act more like a desktop app while still using traditional tools like web forms for collecting user input."</dd>
+     <dt><a class="external" href="http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps/" title="http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps/">Fixing the Back Button and Enabling Bookmarking for AJAX Apps</a></dt>
+     <dd>Mike Stenhouse has penned this article, detailing some methods you can use to fix back button and bookmarking issues when developing AJAX applications.</dd>
+     <dt><a class="external" href="http://alexbosworth.backpackit.com/pub/67688">Ajax Mistakes</a></dt>
+     <dd>Alex Bosworth has written this article outlining some of the mistakes AJAX application developers can make.</dd>
+     <dt><a class="external" href="http://www.xul.fr/en-xml-ajax.html">Tutorial</a> com exemplos.</dt>
+     <dd> </dd>
+     <dt><a href="/en-US/docs/HTML_in_XMLHttpRequest" title="en-US/docs/HTML_in_XMLHttpRequest">HTML no XMLHttpRequest</a></dt>
+     <dd> </dd>
+     <dt><a class="external" href="http://www.w3.org/TR/XMLHttpRequest/">Especificação XMLHttpRequest</a></dt>
+     <dd>W3C Working draft</dd>
+     <dt><a href="/en-US/docs/AJAX/Other_Resources" title="en-US/docs/AJAX/Other_Resources">Outros recursos</a></dt>
+     <dd>Outros recursos do AJAX que podem ser úteis.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/en-US/docs/tag/AJAX" title="en-US/docs/tag/AJAX">Ver todos...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Community" id="Community" name="Community">Comunidade</h2>
+
+    <ul>
+     <li>Consulte os fóruns da Mozilla...</li>
+    </ul>
+
+    <div>{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}</div>
+
+    <ul>
+     <li><a href="/en-US/docs/AJAX/Community" title="en-US/docs/AJAX/Community">Links da comunidade AJAX</a></li>
+    </ul>
+
+    <h2 class="Tools" id="Tools" name="Tools">Ferramentas</h2>
+
+    <ul>
+     <li><a class="external" href="http://www.ajaxprojects.com">Toolkits and frameworks</a></li>
+     <li><a class="external" href="http://www.getfirebug.com/">Firebug - Ajax/Web development tool</a></li>
+     <li><a class="external" href="http://blog.monstuff.com/archives/000252.html">AJAX Debugging Tool</a></li>
+     <li><a class="external" href="http://www.osflash.org/doku.php?id=flashjs">Flash/AJAX Integration Kit</a></li>
+     <li><a class="external" href="http://xkr.us/code/javascript/XHConn/">A Simple XMLHTTP Interface Library</a></li>
+    </ul>
+
+    <p><span class="alllinks"><a href="/en-US/docs/AJAX:Tools" title="en-US/docs/AJAX:Tools">Ver todos...</a></span></p>
+
+    <h2 id="Examples" name="Examples">Exemplos</h2>
+
+    <ul>
+     <li><a class="external" href="http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller">AJAX poller script</a></li>
+     <li><a class="external" href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=9">Ajax Chat Tutorial</a></li>
+     <li><a class="external" href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=13">RSS Ticker with AJAX</a></li>
+     <li><a class="external" href="http://www.jamesdam.com/ajax_login/login.html#login">AJAX Login System using XMLHttpRequest</a></li>
+     <li><a class="external" href="http://www.thinkvitamin.com/features/ajax/create-your-own-ajax-effects">Create your own Ajax effects</a></li>
+     <li><a class="external" href="http://codinginparadise.org/weblog/2005/08/ajax-creating-huge-bookmarklets.html">AJAX: Creating Huge Bookmarklets</a></li>
+     <li><a class="external" href="http://www.hotajax.org">AJAX: Hot!Ajax There are many cool examples</a></li>
+    </ul>
+
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Tópicos relacionados</h2>
+
+    <p><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>, <a href="/en-US/docs/nsIXMLHttpRequest" title="en-US/docs/XMLHttpRequest">XMLHttpRequest</a>, <a href="/en-US/docs/XSLT" title="en-US/docs/XSLT">XSLT</a>, <a href="/en-US/docs/DHTML" title="en-US/docs/DHTML">DHTML</a>, <a href="/en-US/docs/HTML/Canvas" title="en-US/docs/HTML/Canvas">Canvas</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/pt-br/web/guide/api/camera/index.html b/files/pt-br/web/guide/api/camera/index.html
new file mode 100644
index 0000000000..c5350e2f82
--- /dev/null
+++ b/files/pt-br/web/guide/api/camera/index.html
@@ -0,0 +1,220 @@
+---
+title: Introdução da API de Câmera
+slug: Web/Guide/API/Camera
+translation_of: Archive/B2G_OS/API/Camera_API/Introduction
+---
+<p><span class="seoSummary">Através  da <a class="link-https" href="https://wiki.mozilla.org/Platform/Features/Camera_API">Camera API</a>, é possivel tirar fotos com a câmera de seu dispositivo e enviá-las para a atual página da web.</span> Isso é obtido pelo elemento <code>input</code> com <code>type="file"</code> e um atributo <code>accept</code> para declarar que aceita imagens. O HTML se parece com esse:</p>
+<pre class="brush: html">&lt;input type="file" id="take-picture" accept="image/*"&gt;
+</pre>
+<p>Quando usuários escolhem ativar esse elemento HTML, é apresentado a eles uma opção para escolher um arquivo, onde a câmera do dispositivo é uma das opções. Se selecionarem a câmera, entrará no modo de captura de imagem. Depois que a imagem for tirada, será apresentada a escolha de aceita-lá ou descartar-lá. Se aceita, será enviada ao elemento <code>&lt;input type="file"&gt;</code> e isso acionará o evento <code>onchange</code>.</p>
+<h2 id="Obter_uma_referencia_para_a_foto_tirada">Obter uma referencia para a foto tirada</h2>
+<p>Com a ajuda da <a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">File API</a> você pode acessar a imagem capturada ou escolher um arquivo:</p>
+<pre class="brush: js">var takePicture = document.querySelector("#take-picture");
+takePicture.onchange = function (event) {
+    // Obtenha uma referencia para a imagem capturada ou escolha um arquivo
+    var files = event.target.files,
+        file;
+    if (files &amp;&amp; files.length &gt; 0) {
+        file = files[0];
+    }
+};
+</pre>
+<h2 id="Mostrando_a_imagem_na_página_web">Mostrando a imagem na página web</h2>
+<p>Uma vez que você tem a referencia da imagem capturada (i.e., arquivo), você pode usar {{ domxref("window.URL.createObjectURL()") }} para criar uma URL referenciando a foto e configurando como o <code>src</code> de uma imagem:</p>
+<pre class="brush: js">// Image reference
+var showPicture = document.querySelector("#show-picture");
+
+// Get window.URL object
+var URL = window.URL || window.webkitURL;
+
+// Create ObjectURL
+var imgURL = URL.createObjectURL(file);
+
+// Set img src to ObjectURL
+showPicture.src = imgURL;
+
+// For performance reasons, revoke used ObjectURLs
+URL.revokeObjectURL(imgURL);
+</pre>
+<p>Se <code>createObjectURL()</code> não é suportado, uma alternativa é voltar ao {{ domxref("FileReader") }}:</p>
+<pre class="brush: js">// Fallback if createObjectURL is not supported
+var fileReader = new FileReader();
+fileReader.onload = function (event) {
+    showPicture.src = event.target.result;
+};
+fileReader.readAsDataURL(file);
+</pre>
+<h2 id="Exemplo_Completo">Exemplo Completo</h2>
+<p>Se você quiser ver isso em ação, dê uma olhada em <a class="external" href="http://robnyman.github.com/camera-api/">complete working Camera API example</a>.</p>
+<p>Aqui está o código usado nessa demo:</p>
+<h3 id="Página_HTML">Página HTML</h3>
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+    &lt;head&gt;
+        &lt;meta charset="utf-8"&gt;
+        &lt;title&gt;Camera API&lt;/title&gt;
+        &lt;link rel="stylesheet" href="css/base.css" type="text/css" media="screen"&gt;
+    &lt;/head&gt;
+
+    &lt;body&gt;
+
+        &lt;div class="container"&gt;
+            &lt;h1&gt;Camera API&lt;/h1&gt;
+
+            &lt;section class="main-content"&gt;
+                &lt;p&gt;A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).&lt;/p&gt;
+
+                &lt;p&gt;
+                    &lt;input type="file" id="take-picture" accept="image/*"&gt;
+                &lt;/p&gt;
+
+                &lt;h2&gt;Preview:&lt;/h2&gt;
+                &lt;p&gt;
+                    &lt;img src="about:blank" alt="" id="show-picture"&gt;
+                &lt;/p&gt;
+
+                &lt;p id="error"&gt;&lt;/p&gt;
+
+            &lt;/section&gt;
+
+            &lt;p class="footer"&gt;All the code is available in the &lt;a href="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api"&gt;Camera API repository on GitHub&lt;/a&gt;.&lt;/p&gt;
+        &lt;/div&gt;
+
+
+        &lt;script src="js/base.js"&gt;&lt;/script&gt;
+
+
+    &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Arquivo_JavaScript">Arquivo JavaScript</h3>
+<pre class="brush: js">(function () {
+    var takePicture = document.querySelector("#take-picture"),
+        showPicture = document.querySelector("#show-picture");
+
+    if (takePicture &amp;&amp; showPicture) {
+        // Set events
+        takePicture.onchange = function (event) {
+            // Get a reference to the taken picture or chosen file
+            var files = event.target.files,
+                file;
+            if (files &amp;&amp; files.length &gt; 0) {
+                file = files[0];
+                try {
+                    // Get window.URL object
+                    var URL = window.URL || window.webkitURL;
+
+                    // Create ObjectURL
+                    var imgURL = URL.createObjectURL(file);
+
+                    // Set img src to ObjectURL
+                    showPicture.src = imgURL;
+
+                    // Revoke ObjectURL
+                    URL.revokeObjectURL(imgURL);
+                }
+                catch (e) {
+                    try {
+                        // Fallback if createObjectURL is not supported
+                        var fileReader = new FileReader();
+                        fileReader.onload = function (event) {
+                            showPicture.src = event.target.result;
+                        };
+                        fileReader.readAsDataURL(file);
+                    }
+                    catch (e) {
+                        //
+                        var error = document.querySelector("#error");
+                        if (error) {
+                            error.innerHTML = "Neither createObjectURL or FileReader are supported";
+                        }
+                    }
+                }
+            }
+        };
+    }
+})();
+</pre>
+<h2 id="Compatibilidade_dos_navegadores">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</th>
+   </tr>
+   <tr>
+    <td>Camera API</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code><a href="/en-US/docs/DOM/window.URL.createObjectURL" title="/en-US/docs/DOM/window.URL.createObjectURL">createObjectURL()</a></code></td>
+    <td>16</td>
+    <td>{{CompatGeckoDesktop("8.0")}}</td>
+    <td>10+</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatNo()}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("FileReader")}}</td>
+    <td>16</td>
+    <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+    <td>10+</td>
+    <td>11.6+</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>Camera API</td>
+    <td>3.0</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatGeckoMobile("10.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code><a href="/en-US/docs/DOM/window.URL.createObjectURL" title="/en-US/docs/DOM/window.URL.createObjectURL">createObjectURL()</a></code></td>
+    <td>4</td>
+    <td>{{CompatVersionUnknown()}}</td>
+    <td>{{CompatGeckoMobile("10.0")}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>{{CompatNo()}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("FileReader")}}</td>
+    <td>3</td>
+    <td>{{CompatVersionUnknown()}}</td>
+    <td>{{CompatGeckoMobile("10.0")}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>11.1</td>
+    <td>{{CompatNo()}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p> </p>
diff --git a/files/pt-br/web/guide/api/index.html b/files/pt-br/web/guide/api/index.html
new file mode 100644
index 0000000000..4e0e34c483
--- /dev/null
+++ b/files/pt-br/web/guide/api/index.html
@@ -0,0 +1,26 @@
+---
+title: Guide to Web APIs
+slug: Web/Guide/API
+tags:
+  - API
+  - Guide
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Web/Guide/API
+---
+<p>Here you'll find links to each of the guides introducing and explaining each of the APIs that make up the Web development architecture.</p>
+
+<h2 id="Web_APIs_from_A_to_Z">Web APIs from A to Z</h2>
+
+<p>{{ListGroups}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API">Web API interface reference</a> (an index of all of the interfaces comprising all of these APIs)</li>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a> (DOM)</li>
+ <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li>
+ <li><a href="/en-US/docs/Learn">Learning web development</a></li>
+</ul>
diff --git a/files/pt-br/web/guide/css/css_media_queries/index.html b/files/pt-br/web/guide/css/css_media_queries/index.html
new file mode 100644
index 0000000000..4b9728eebd
--- /dev/null
+++ b/files/pt-br/web/guide/css/css_media_queries/index.html
@@ -0,0 +1,639 @@
+---
+title: Usando Media Queries
+slug: Web/Guide/CSS/CSS_Media_queries
+tags:
+  - CSS
+  - Desenho Responsivo
+  - Design Responsivo
+translation_of: Web/CSS/Media_Queries/Using_media_queries
+---
+<p>Uma <strong>media query</strong> consiste de um <em>media type </em>e pelo menos uma expressão que limita o escopo das folhas de estilo usando <em>media features</em>, tal como largura, altura e cor. <em>Media queries</em>, adicionadas no<span class="seoSummary"> <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, </span>deixam a apresentação do conteúdo adaptado a uma gama especifica de dispositivos não precisando mudar o conteúdo em si.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<p><em>Media queries</em> consistem de um <em><a href="en-US/docs/Web/CSS/@media">media type</a></em> e podem, a partir de uma especificação CSS3, contendo uma ou mais expressões, expressa em <em>media features</em>, que determinam ou verdadeiro ou falso. Os resultados da <em>query</em> são verdadeiros se o <em>media type</em> especificado na <em>media query</em> corresponde ao tipo do documento exibido no dispositivo e todas as expressões na <em>media query</em> são verdadeiras.</p>
+
+<pre class="brush: html">&lt;!-- CSS media query em um elemento de link --&gt;
+&lt;link rel="stylesheet" media="(max-width: 800px)" href="example.css" /&gt;
+
+&lt;!-- CSS media query dentro de um stylesheet --&gt;
+
+&lt;style&gt;
+@media (max-width: 600px)
+{
+  .facet_sidebar
+   {
+    display: none;
+   }
+}
+&lt;/style&gt;</pre>
+
+<p>Quando uma <em>media query</em> é verdadeira, a camada de estilo ou as regras de estilos correspondentes são aplicadas, seguindo o padrão de regras de cascatas. Camadas de estilos com <em>media queries</em> ligadas a tag &lt;link&gt; <a href="http://scottjehl.github.com/CSS-Download-Tests/">vão fazer download</a> mesmo se suas <em>medias queries</em> retornarem falso (eles não se aplicam, no entanto).</p>
+
+<p>A menos que você use os operadores <code>not</code> ou <code>only</code>, o <em>media type</em> é opcional e o tipo <code>all</code> será implícito.</p>
+
+<h3 id="Operadores_lógicos">Operadores lógicos</h3>
+
+<p>Você pode compor <em>media queries</em> complexos usando operadores lógicos, incluindo <code>not</code>, <code>and</code>, e <code>only</code>. O operador <code>and</code> é usado para combinar múltiplas <em><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries$edit#Media_features">media features</a></em> em uma mesma <em>media query</em>, requerendo que cada sequência de características, retorne verdadeiro na ordem para que a <em>query</em> seja verdadeiro. O operador <code>not</code> é usado para negar uma <em>media query</em> inteira. O operador <code>only</code> é usado para aplicar um estilo apenas se a <em>query</em> inteira for igual, útil para previnir que navegadores antigos apliquem os estilos selecionados. Se você usar os operadores <code>not</code> ou <code>only</code>, você tem que especificar um tipo de <em>media</em> explícito.</p>
+
+<p>Você também pode combinar múltiplas <em>medias queries</em> em uma  lista separadas por vírgulas, se qualquer uma das <em>media queries</em> na lista é verdadeira, toda a instrução retorna verdadeira. Isto é equivalente a um operador <code>or</code>.</p>
+
+<h4 id="and"><strong>and</strong></h4>
+
+<p>A palavra-chave <code>and</code> é usada para combinar múltiplas <em>media features</em>, bem como combinar <em>media features</em> com <em>media types</em>. Uma <em>media query</em> básica, uma<em> media feature</em> simples com a <em>media type</em> <code>all</code>, pode parecer com isso:</p>
+
+<pre class="brush: css">@media (min-width: 700px) { ... }</pre>
+
+<p>Se, no entanto, você desejar que isso se aplique apenas para telas em landscape, você pode usar o operador <code>and</code> para deixar todas as <em>media features</em> juntas.</p>
+
+<pre class="brush: css">@media (min-width: 700px) and (orientation: landscape) { ... }</pre>
+
+<p>Agora, a <em>media query</em> acima vai apenas retorna verdadeira se o viewport for 700px, <em>wide</em> ou <em>wider</em> e a tela estiver em <em>landscape</em>. Se, no entanto, você deseja apenas que isso seja aplicado se a tela em questão for <em>media type</em> TV, você pode encadear essas <em>features</em> com a <em>media type</em> usando o operador <code>and</code>.</p>
+
+<pre class="brush: css">@media tv and (min-width: 700px) and (orientation: landscape) { ... }</pre>
+
+<p>Agora, a <em>media query</em> acima vai ser aplicada apenas se a <em>media type</em> for TV, o <em>viewport</em> for 700px <em>wide</em> ou <em>wider</em>, e a tela estiver em paisagem.</p>
+
+<h4 id="Listas_separadas_por_vírgula">Listas separadas por vírgula</h4>
+
+<p>Listas separadas por vírgulas comportam-se como o operador <code>or</code> quando utilizadas em <em>media queries</em>. Quando utilizamos <em>media queries</em> com uma lista separada por vírgulas, se qualquer <em>media queries</em> retornar verdadeiro, os estilos ou folhas de estilos serão aplicadas. Cada <em>media query</em> em um lista separa por vírgulas é tratada como uma <em>query</em> individual, e qualquer operador aplica em uma <em>media query</em> não afeta os outros. Isto significa que <em>media queries</em> separadas por vírgulas podem ter objetivos diferentes de <em>media</em> <em>features</em>, <em>types</em> e <em>states</em>.</p>
+
+<p>Por exemplo, se você quiser aplicar um conjunto de estilos se o dispositivo de visualização tiver um largura mínima de 700px ou estiver sendo segurando em paisagem, você pode escrever o seguinte:</p>
+
+<pre class="brush: css">@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre>
+
+<p>Acima, se eu estivesse em um dispositivo <code>screen</code> com um <em>viewport</em> largura de 800px, a afirmação retorna verdadeiro por que a primeira parte, interpretada como <code>@media all and (min-width: 700px)</code> será aplicada no meu dispositivo e portanto retorna verdadeiro, apesar do fato que meu dispositivo <code>screen</code> iria falhar no <em>media type</em> <code>handheld</code> na segunda <em>media query</em>. Do mesmo modo, se eu estivesse segurando um dispositivo em paisagem com um <em>viewport</em> de largura de 500px, enquanto a primeira media query falha devido a largura do <em>viewport</em>, a segunda <em>media query</em> teria sucesso e assim o <em>media statement</em> retorna verdadeiro.</p>
+
+<h4 id="not">not</h4>
+
+<p>A palavra chave <code>not</code> se aplica em toda a <em>media query</em> e retorna verdadeiro, caso contrário retorna falso (tal como monochrome como cor de tela ou uma tela de largura de 600px com um <code>min-width: 700px</code> recurso consultado). Um not vai apenas negar a <em>media query</em> que é aplicada, de modo não toda a <em>media query</em> que apresente uma <em>media querie</em> com uma lista separada por vírgulas. A palavra chave <code>not</code> não pode ser usada para negar uma característica individual da <em>query</em>, apenas uma <em>media query</em> inteira. Por exemplo, o <code>not</code> é avaliado por último na <em>query</em> seguinte:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not all and (monochrome) { ... }
+</pre>
+
+<p>Isto significa que a <em>query</em> é avaliada assim:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not (all and (monochrome)) { ... }
+</pre>
+
+<p>... em vez disso:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media (not all) and (monochrome) { ... }</pre>
+
+<p>Um outro exemplo, veja a <em>media query</em> seguinte:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media not screen and (color), print and (color)
+</pre>
+
+<p>É avalida desta forma:</p>
+
+<pre class="brush: css" style="font-size: 14px;">@media (not (screen and (color))), print and (color)</pre>
+
+<h4 id="only">only</h4>
+
+<p><span style="line-height: 21px;">A palavra chave </span><em><code style="font-size: 14px;">only</code></em><span style="line-height: 21px;"> previne que navegadores antigos que não suportam media queries com media features de aplicar os estilos dados:</span></p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="only screen and (color)" href="example.css" /&gt;
+</pre>
+
+<h3 id="Pseudo-BNF">Pseudo-BNF</h3>
+
+<pre>media_query_list: &lt;media_query&gt; [, &lt;media_query&gt; ]*
+media_query: [[only | not]? &lt;media_type&gt; [ and &lt;expression&gt; ]*]
+  | &lt;expression&gt; [ and &lt;expression&gt; ]*
+expression: ( &lt;media_feature&gt; [: &lt;value&gt;]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid</pre>
+
+<p><em>Media queries</em> são <em>case insensitive</em>.  <em>Media queries</em> envolvidas em <em>media types</em> desconhecidos serão sempre falsas.</p>
+
+<div class="note"><strong>Nota:</strong> Parenteses são obrigatórios em volta de expressões; a falta deles é um erro.</div>
+
+<h2 id="Características_de_mídia">Características de mídia</h2>
+
+<p>A maioria das <em>media features</em> podem ter prefixo “min-” ou “max-“ para expressar as restrições “maior ou igual” ou “menor ou igual”. Isto evita o uso dos símbolos  “&lt;” e “&gt;” , que entrem em conflito com HTML e XML. Se você usar uma <em>media feature</em> sem especificar um valor, a expressão retorna verdadeiro, se o valor da <em>feature</em> for diferente de zero.</p>
+
+<div class="note"><strong>Nota:</strong> Se uma media feature não se aplicar ao dispositivo onde o navegador esta sendo executado, as expressões que envolvem essa media feature são sempre falsas. Por exemplo, consultar um aspecto de um dispositivo sonoro, sempre resulta em falso.</div>
+
+<h3 id="cor">cor</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;color&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> sim</p>
+
+<p>Indica o número de bits por componente de cor no dispositivo de saída. Se o dispositivo não é um dispositivo de cor, o valor é zero.</p>
+
+<div class="note"><strong>Nota:</strong> Se os componentes de cor têm diferentes números de bits por componente de cor, o menor valor é utilizado. Por exemplo, se o display usa 5 bits para azul e vermelho e 6 bits para verde, então o dispositivo considera 5 bits por componente de cor. Se o dispositivo usar cores indexadas, o menor número de bits por componente de cor na tabela de cores é usado.</div>
+
+<h4 id="Exemplos">Exemplos</h4>
+
+<p>Aplicar uma folha de estilo a todos dispositivos:</p>
+
+<pre class="brush: css">@media all and (color) { ... }
+</pre>
+
+<p>Aplicar uma folha de estilo a todos dispositivos com no mínimo 4 bits de color componente:</p>
+
+<pre class="brush: css">@media all and (min-color: 4) { ... }
+</pre>
+
+<h3 id="color-index">color-index</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> Sim</p>
+
+<p>Indica o número de entradas na tabela de consulta de cores para o dispositivo de saída.</p>
+
+<h4 id="Exemplos_2">Exemplos</h4>
+
+<p>Para indicar que uma folha de estilo deve ser aplicada para todos os dispositivos que usam cores indexadas, você pode fazer:</p>
+
+<pre class="brush: css">@media all and (color-index) { ... }
+</pre>
+
+<p>Para aplicar uma folha de estilo em um dispositivo com cores indexadas menor que 256 cores:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /&gt;
+</pre>
+
+<h3 id="aspect-ratio">aspect-ratio</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;ratio&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Aceita prefixos min/max:</strong> sim</p>
+
+<p>Descreve o aspecto da relação da área do display do dispositivo de saída. Este valor consiste de dois inteiros positivos separados por um caractere barra (“/”). Isto representa a relação entre pixels horizontais (primeiro termo) para pixels verticais (segundo termo).</p>
+
+<h4 id="Exemplo">Exemplo</h4>
+
+<p>A seguir selecionamos uma folha de estilo especial para usarmos quando a área do display é pelo menos mais larga do que alta.</p>
+
+<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) { ... }</pre>
+
+<p>Isto seleciona o estilo quando a relação de aspecto seja 1:1 ou maior. Em outras palavras, estes estilos serão aplicados apenas quando a área de visualização for quadrada ou paisagem.</p>
+
+<h3 id="device-aspect-ratio">device-aspect-ratio</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;ratio&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Aceita prefixos min/max:</strong> sim</p>
+
+<p>Descreve a relação de aspecto do dispositivo de saída. Este valor consiste de dois inteiros positivos separados pelo carácter barra (“/”). Isto representa a relação de pixels horizontais (primeiro termo) por pixels verticais (segundo termo).</p>
+
+<h4 id="Exemplo_2">Exemplo</h4>
+
+<p>A seguir, selecionamos uma folha de estilo especial para usar em telas widescreen.</p>
+
+<pre class="brush: css">@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre>
+
+<p>Isso seleciona o estilo quando a relação de aspecto é 16:9 ou 16:10.</p>
+
+<h3 id="device-height">device-height</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Aceita prefixos min/max:</strong> sim</p>
+
+<p>Descreve a altura do dispositivo de saída( ou seja, toda a tela ou página, em vez de apenas a área de renderização, tal como a janela do documento).</p>
+
+<h4 id="Exemplo_3">Exemplo</h4>
+
+<p>Para aplicar uma folha de estilo a um documento quando exibido em uma tela menor que 800 pixels de altura, você pode usar isso:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="screen and (max-device-height: 799px)" /&gt;
+</pre>
+
+<h3 id="device-width">device-width</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Aceita prefixos min/max:</strong> sim</p>
+
+<p>Descreve a largura do dispositivo e saída (ou seja, toda a tela ou página, em vez de apenas a área de renderização, tal como a janela do documento).</p>
+
+<h4 id="Exemplo_4">Exemplo</h4>
+
+<p>Para aplicar uma folha de estilo a um documento quando exibido em uma tela menor que 800px de largura, você pode usar isso:</p>
+
+<pre class="brush: html" style="font-size: 14px;">&lt;link rel="stylesheet" media="screen and (max-device-width: 799px)" /&gt;</pre>
+
+<h3 id="grid">grid</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> todas<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Determina se o dispositivo de saída é um dispositivo grade ou um dispositivo bitmap. Se o dispositivo é baseado em grade(tal como um terminal TTY ou uma tela de telefone com apenas um tipo de letra), o valor é 1. De outro modo é zero.</p>
+
+<h4 id="Exemplo_5">Exemplo</h4>
+
+<p>Para aplicar um estilo a dispositivos postáteis com 15-carácteres ou uma tela mais estreita:</p>
+
+<pre class="brush: css">@media handheld and (grid) and (max-width: 15em) { ... }
+</pre>
+
+<div class="note"><strong>Nota:</strong>  A unidade "em" tem um significado especial para dispositivos de grade, uma vez que a exata largura de um "em" não pode ser determinada, 1em é assumido para ser a largura de uma célula da grade horizontalmente, e a altura de uma célula verticalmente.</div>
+
+<h3 id="height">height</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Aceita prefixos min/max:</strong> yes</p>
+
+<p>A característica <code>height</code> descreve a altura da superfície de renderização do dispositivo de saída (tal como a altura do viewport ou da caixa de página em uma impressora).</p>
+
+<div class="note"><strong>Nota:</strong> Como o usuário redimensiona a janela, o Firefox muda as folhas de estilo como apropriado, com base nas media queries, usando as media features <code>width</code> e <code>height</code>.</div>
+
+<h3 id="monochrome">monochrome</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> sim</p>
+
+<p>Indica o número de bits por pixel em um dispositivo monocromático (greyscale). Se o dispositivo não for monocromático, o valor é 0.</p>
+
+<h4 id="Exemplos_3">Exemplos</h4>
+
+<p>Para aplicar uma folha de estilo em todos os dispositivos monocromáticos:</p>
+
+<pre class="brush: css">@media all and (monochrome) { ... }
+</pre>
+
+<p>Para aplicar uma folha de estilo em dispositivos monocromáticos com pelo menos 8 bits por pixel:</p>
+
+<pre class="brush: css">@media all and (min-monochrome: 8) { ... }
+</pre>
+
+<h3 id="orientation">orientation</h3>
+
+<p><strong>Valor:</strong> <code>landscape</code> | <code>portrait</code><br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Indica se o <em>viewport</em> é modo <em>landscape</em> (o visor é mais largo do que mais alto) ou <em>portrait</em> (o visor é mais alto do que mais largo).</p>
+
+<h4 id="Exemplo_6">Exemplo</h4>
+
+<p>Para aplicar a folha de estilo apenas em orientação <em>portrait</em>:</p>
+
+<pre class="brush: css">@media all and (orientation: portrait) { ... }</pre>
+
+<div class="note"><strong>Nota: </strong>Este valor não corresponde com a orientação real do dispositivo. Abrindo o teclado virtual na maioria dos dispositivos na orientação retrato fará com que o viewport torne-se mais largo do que alto, fazendo assim que o navegador use estilos de paisagem em vez de retrato.</div>
+
+<h3 id="resolution">resolution</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;resolution&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br>
+ <strong>Aceita prefixos min/max:</strong> sim</p>
+
+<p>Indica a resolução (densidade de pixel) da saída do dispositivo. A resolução pode ser especificada em pontos por inch(dpi) ou pontos por centímetro(dpcm).</p>
+
+<h4 id="Exemplos_4">Exemplos</h4>
+
+<p>Para aplicar a folha de estilo em dispositivos com resolução de pelo menos 300 pontos por inch:</p>
+
+<pre class="brush: css">@media print and (min-resolution: 300dpi) { ... }
+</pre>
+
+<p>Para substituir a antiga sintaxe (min-device-pixel-ratio: 2):</p>
+
+<pre class="brush: css">@media screen and (min-resolution: 2dppx) { ... }</pre>
+
+<h3 id="scan">scan</h3>
+
+<p><strong>Valor:</strong> <code>progressive</code> | <code>interlace</code><br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/TV")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Descreve o processo de digitalização de dispositivos saída de televisão.</p>
+
+<h4 id="Exemplo_7">Exemplo</h4>
+
+<p>Para aplicar uma folha de estilo apenas para televisores de varredura progressiva:</p>
+
+<pre class="brush: css">@media tv and (scan: progressive) { ... }
+</pre>
+
+<h3 id="width">width</h3>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;length&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br>
+ <strong>Aceita prefixos min/max:</strong> sim</p>
+
+<p>A <em>media feature</em> <code>width </code>descreve a largura da superficie de renderização do dispositivo de saída (tal como a largura da janela do documento, ou a largura da caixa de página em uma impressora).</p>
+
+<p><strong>Nota:</strong><br>
+ Como o usuário redimensiona a janela, o Firefox muda as folhas de estilos como apropriado baseado em <em>media queries </em>usando media features <code>width</code> e <code>height</code>.</p>
+
+<h4 id="Exemplos_5">Exemplos</h4>
+
+<p>Se você quiser especificar uma folha de estilo para dispositivos portáteis, ou dispositivos screen com uma largura maior que 20em, você pode usar essa <em>query</em>:</p>
+
+<pre class="brush: css">@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+</pre>
+
+<p>Essa <em>media query </em>especifica uma folha de estilo que aplica-se para mídias impressas maiores que 8.5 inches.</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" /&gt;
+</pre>
+
+<p>Essa <em>query </em>especifica uma folha de estilo que é usada quano o viewport está entre 500 e 800 pixels de largura:</p>
+
+<pre class="brush: css">@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+</pre>
+
+<h2 id="Especificação_da_Mozilla_para_mídias_características">Especificação da Mozilla para mídias características</h2>
+
+<p>Mozilla oferece várias <em>media features</em> para específicos <em>Gecko</em> . Algumas dessas podem ser sugeridas como <em>media features</em> oficiais.</p>
+
+<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Se o dispositivo permite aparecer imagens nos menus, o valor é 1; caso contrário, o valor é 0. Isto corresponde ao {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong>no</p>
+
+<p>Se o usuário tenha configurado seu dispositivo para usar a aparência <em>"Graphite"</em> no <em>Mac OS X</em>, o valor é 1. Se o usuário está usando a aparência padrão <em>blue</em>, ou não está num <em>Mac OS X</em>, o valor é 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Se o usuário está usando <em>Maemo </em>com o tema original, o valor é 1; Se está usando o mais novo tema <em>Fremantle</em>, o valor é 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&amp;16") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;number&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> sim</p>
+
+<p>Dar o número de pixels do dispositivo por pixels do CSS.</p>
+
+<div class="geckoVersionNote">
+<p><strong>Não use este recurso. </strong></p>
+
+<p>Em vez disso, use o recurso <em><code>resolution</code></em> com a unidade <code>dppx</code>.<br>
+ <br>
+ <code>-moz-device-pixel-ratio</code> pode ser usada para compatibilidade com Firefox mais velho que a versão 16 e <code>-webkit-device-pixel-ratio</code> com navegadores baseados no WebKit que não suportam <code>dppx</code>.</p>
+
+<p>Exemplo:</p>
+
+<pre>@media (-webkit-min-device-pixel-ratio: 2), /* Navegadores baseados no Webkit */
+       (min--moz-device-pixel-ratio: 2),    /* Navegadores mais antigos do Firefox (antes do Firefox 16) */
+       (min-resolution: 2dppx),             /* Forma padrão */
+       (min-resolution: 192dpi)             /* dppx fallback */ </pre>
+
+<p>Veja este artigo <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">CSSWG</a> para ccompatibilidade de boas práticas em relação a <em><code>resolution</code></em> e <em><code>dppx</code></em>.</p>
+</div>
+
+<div class="note"><strong>Nota</strong>: Esta <em>media feature</em> é também implementada pelo Webkit e pelo <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 para Windows Phone 8.1</a>como <span style="font-family: courier new;">-webkit-device-pixel-ratio</span>. Os prefixos min e max implementados pelo Gecko são nomeados <span style="font-family: courier new;">min--moz-device-pixel-ratio</span> e <span style="font-family: courier new;">max--moz-device-pixel-ratio</span>; mas os mesmos prefixos implementados pelo Webkit são chamados <span style="font-family: courier new;">-webkit-min-device-pixel-ratio</span> e <span style="font-family: courier new;">-webkit-max-device-pixel-ratio</span>.</div>
+
+<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p>
+
+<p><strong>Valor:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8</code><br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Indica qual versão do sistema operacional está sendo usado atualmente. Atualmente apenas implementada no Windows. Possíveis valores são:</p>
+
+<ul>
+ <li><code>windows-xp</code></li>
+ <li><code>windows-vista</code></li>
+ <li><code>windows-win7</code></li>
+ <li><code>windows-win8</code></li>
+</ul>
+
+<p>Isto é fornecido pelas <em>skins das aplicações</em> e outros códigos do chrome para serem capazes de se adaptar para funcionar bem com a versão atual do sistema operacional.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Se a interface do usuário do dispositivo exibe uma seta para trás no final da barra de rolagem, o valor é 1. Caso contrário, é 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Se a interface do usuário do dispositivo a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Se a interface do usuário do dispositivo a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Se a interface do usuário do dispositivo a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Se a interface do usuário do dispositivo the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<h4 id="Exemplo_8">Exemplo</h4>
+
+<p>You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.</p>
+
+<p>Isto corresponde ao {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}</p>
+
+<p><strong>Valor:</strong> {{cssxref("&lt;integer&gt;")}}<br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.</p>
+
+<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p>
+
+<p><strong>Valor:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br>
+ <strong style="font-weight: bold;">Mídia</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Aceita prefixos min/max:</strong> não</p>
+
+<p>Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:</p>
+
+<ul>
+ <li><code>aero</code></li>
+ <li><code>luna-blue</code></li>
+ <li><code>luna-olive</code></li>
+ <li><code>luna-silver</code></li>
+ <li><code>royale</code></li>
+ <li><code>generic</code></li>
+ <li><code>zune</code></li>
+</ul>
+
+<p>Isto é previsto para <em>skins</em> de aplicativo e outro código de aplicações de chrome a ser capaz de se adaptar a funcionar bem com o actual tema do Windows.</p>
+
+<h2 id="Compatibilidade_no_navegador">Compatibilidade no 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("21") }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatIE("9.0") }}</td>
+   <td>{{ CompatOpera("9") }}</td>
+   <td>{{ CompatSafari("4") }}</td>
+  </tr>
+  <tr>
+   <td>Grade</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }} (<code>grid</code> media type is not supported)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Resolução</td>
+   <td>{{ CompatChrome("29") }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }} supports {{cssxref("&lt;integer&gt;")}} values;<br>
+    {{ CompatGeckoDesktop("8.0") }} supports {{cssxref("&lt;number&gt;")}} values, as per the spec.</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Scan</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }} (<code>tv</code> media type is not supported)</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>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li>
+ <li><a class="internal" href="/en-US/docs/CSS/@media" title="En/CSS/@media">Media types</a></li>
+ <li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li>
+ <li><a href="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/">List of mobile and tablet viewport sizes with pixel ratios and physical sizes</a></li>
+ <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a> by David Walsh</li>
+</ul>
diff --git a/files/pt-br/web/guide/css/css_media_queries_(consultas_de_mídia_em_css)/index.html b/files/pt-br/web/guide/css/css_media_queries_(consultas_de_mídia_em_css)/index.html
new file mode 100644
index 0000000000..c2f5f9f4ce
--- /dev/null
+++ b/files/pt-br/web/guide/css/css_media_queries_(consultas_de_mídia_em_css)/index.html
@@ -0,0 +1,20 @@
+---
+title: Usando CSS media queries (consultas de mídia em CSS)
+slug: Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS)
+tags:
+  - CSS
+  - Guía
+  - Iniciante
+  - media query
+---
+<p><span class="seoSummary">Uma media query (consulta de mídia) consiste de um tipo de mídia e de, ao menos, uma expressão que restringe o escopo dos estilos CSS pelo uso de propriedades de mídia, como width (largura), height (altura) e color (cor). Media queries, incluídas na especificação CSS3, permitem que a apresentação do conteúdo se adapte a uma variedade de dispositivos de exibição sem a necessidade de mudar o próprio conteúdo.</span></p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<p>Consultas de mídia consistem em tipos de mídia opcional e podem, de acordo com a especificação CSS3, conter entre nenhuma ou mais expressões, declararadas como propriedades de mídia, que podem conter condições de estado verdadeiras ou falsas. O resultado de uma query (consulta) será verdadeiro se o tipo de mídia especificado nela corresponder ao tipo do dispositivo onde o documento é exibido e todas as expressões contidas na consulta forem verdadeiras.</p>
+
+<p>Fonte:</p>
+
+<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries</a></p>
+
+<p> </p>
diff --git a/files/pt-br/web/guide/css/scaling_background_images/index.html b/files/pt-br/web/guide/css/scaling_background_images/index.html
new file mode 100644
index 0000000000..e9f7296721
--- /dev/null
+++ b/files/pt-br/web/guide/css/scaling_background_images/index.html
@@ -0,0 +1,108 @@
+---
+title: Alterando a escala das imagens de background
+slug: Web/Guide/CSS/Scaling_background_images
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
+---
+<p><span class="seoSummary">A propriedade CSS {{ cssxref("background-size") }} possibilita o ajuste das imagens do background, ao invés do comportamento padrão do navegador de mostrar a imagem no seu tamanho real.</span> Você pode tanto aumentar como diminuir a imagem.</p>
+
+<h2 id="Tiling_a_large_image" name="Tiling_a_large_image">Duplicando uma imagem grande</h2>
+
+<p>Vamos considerar uma imagem grande, a image da logo do Firefox com 2982x2808 . Nós queremos (por alguma razão, envolvendo um site com um design ruim) quatro cópia desta imagem em um quadrado de 300x300 pixel, resultando nesse visual:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8965/ss1.png"></p>
+
+<p><span class="short_text" id="result_box" lang="pt"><span class="hps">Isto pode ser conseguido</span> <span class="hps">usando</span> <span class="hps">o</span> <span class="hps">seguinte</span> <span class="hps">CSS</span></span>:</p>
+
+<pre class="brush: css;  highlight:[8]">.square {
+  width: 300px;
+  height: 300px;
+  background-image: url(firefox_logo.png);
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+  background-size: 150px;
+}
+</pre>
+
+<p>O {{ cssxref("background-size") }} não precisa mais de nenhum prefixo, mas <span id="result_box" lang="pt"><span class="hps">você pode</span> <span class="hps">considerar a adição de</span> <span class="hps">uma versão</span> <span class="hps">pré-fixada</span> <span class="hps">se você</span> <span class="hps">está focando em </span><span class="hps">browsers</span> <span class="hps">muito antigos.</span></span></p>
+
+<h2 id="Stretching_an_image" name="Stretching_an_image">Esticando uma imagem</h2>
+
+<p><span id="result_box" lang="pt"><span class="hps">Você também pode especificar</span> <span class="hps">ambos</span> <span class="hps">os</span> <span class="hps">tamanhos,</span> <span class="hps">horizontal e vertical</span> <span class="hps">da imagem,</span> <span class="hps">assim</span><span>:</span></span></p>
+
+<pre class="brush:css">background-size: 300px 150px;
+</pre>
+
+<p>O resultado fica assim:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8967/ss2.png"></p>
+
+<h2 id="Scaling_an_image_up" name="Scaling_an_image_up"><span class="short_text" id="result_box" lang="pt"><span class="hps">Aumentando escala de uma</span> <span class="hps">imagem</span></span></h2>
+
+<p><span id="result_box" lang="pt"><span class="hps">Na outra extremidade</span> <span class="hps">do espectro</span><span>, é possível</span> <span class="hps">dimensionar</span><span>-se</span> <span class="hps">uma imagem</span> <span class="hps">no</span> <span class="hps">fundo</span><span>.</span> <span class="hps">Aqui nós</span> aumentamos a escala de <span class="hps">um</span> <span class="hps">favicon</span> <span class="hps">de pixel</span> <span class="hps">32x32</span> para <span class="hps">300x300</span> <span class="hps">pixels</span><span>:</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8969/ss3.png"></p>
+
+<pre class="brush: css; highlight:[5]">.square2 {
+  width: 300px;
+  height: 300px;
+  background-image: url(favicon.png);
+  background-size: 300px;
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+</pre>
+
+<p><span id="result_box" lang="pt"><span class="hps">Como você pode ver</span><span>, o</span> <span class="hps">CSS</span> <span class="hps">é, na verdade</span><span>, essencialmente</span> <span class="hps">idêntico, salvo</span> <span class="hps">o nome do</span> <span class="hps">arquivo de imagem.</span></span></p>
+
+<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">Valores especiais: "contain" e "cover"</h2>
+
+<p>Da mesma maneira que o {{cssxref("&lt;length&gt;")}}, a <span id="result_box" lang="pt"><span class="hps">propriedade</span> <span class="hps">CSS</span> de </span>{{ cssxref("background-size") }} <span id="result_box" lang="pt"><span class="hps">oferece dois</span> <span class="hps">valores de tamanho</span> <span class="hps">especial,</span> contain <span class="hps">e</span> cover<span class="hps">.</span> <span class="hps">Vamos dar uma</span> <span class="hps">olhada nestes</span><span>.</span></span></p>
+
+<h3 id="contain" name="contain"><code>contain</code></h3>
+
+<p><span id="result_box" lang="pt"><span class="hps">O</span> <span class="hps">valor</span> contain <span class="hps">especifica</span> <span class="hps">que, independentemente</span> <span class="hps">do</span> <span class="hps">tamanho</span> <span class="hps">da caixa que contém</span><span>,</span> <span class="hps">a imagem de fundo</span> <span class="hps">deve</span> <span class="hps">ser</span> <span class="hps">dimensionado</span> <span class="hps">de modo a que</span> <span class="hps">cada</span> <span class="hps">lado</span> <span class="hps">seja tão grande quanto</span> <span class="hps">possível ao mesmo tempo</span> <span class="hps">que não exceda</span> <span class="hps">o</span> <span class="hps">comprimento do lado</span> <span class="hps">correspondente do recipiente</span><span>.</span> <span class="hps">Tente redimensionar</span> <span class="hps">a janela</span> <span class="hps">usando um navegador que</span> <span class="hps">suporta</span> <span class="hps">imagens de fundo</span> <span class="hps">de escala</span> <span class="hps">(como o</span> <span class="hps">Firefox 3.6</span> <span class="hps">ou posterior) para</span> <span class="hps">ver isso em ação</span> <span class="hps">no exemplo</span> <span class="hps">vivo</span> <span class="hps">abaixo.</span></span></p>
+
+<figure>
+<p>{{ EmbedLiveSample("contain", "100%", "220") }}</p>
+</figure>
+
+<pre class="brush:html">&lt;div class="bgSizeContain"&gt;
+  &lt;p&gt;Tente redimensionar a janela e ver o que acontece.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;highlight:[4]">.bgSizeContain {
+  height: 200px;
+  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
+  background-size: contain;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+}</pre>
+
+<h3 id="cover" name="cover"><code>cover</code></h3>
+
+<p><span id="result_box" lang="pt"><span class="hps">O</span> <span class="hps">valor</span> cover <span class="hps">especifica</span> <span class="hps">que</span> <span class="hps">a imagem de fundo</span> <span class="hps">deve ser dimensionado</span> <span class="hps">de modo que seja</span> <span class="hps">tão pequena quanto</span> <span class="hps">possível ao mesmo tempo</span> <span class="hps">assegurar</span> <span class="hps">que ambas as dimensões</span> <span class="hps">são maiores</span> <span class="hps">do que</span> <span class="hps">ou igual</span> <span class="hps">à dimensão</span> <span class="hps">correspondente do recipiente</span><span>.</span></span></p>
+
+<figure>{{ EmbedLiveSample("cover", "100%", "220") }}</figure>
+
+<p>Os exemplos à seguir usam HTML &amp; CSS:</p>
+
+<pre class="brush:html">&lt;div class="bgSizeCover"&gt;
+  &lt;p&gt;Tente redimensionar a janela e ver o que acontece.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;highlight:[4]">.bgSizeCover {
+  height: 200px;
+  background-image: url('https://mdn.mozillademos.org/files/8971/firefox_logo.png');
+  background-size: cover;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+</pre>
+
+<h2 id="See_also" name="See_also">Veja Também</h2>
+
+<ul>
+ <li>{{ cssxref("background-size") }}</li>
+ <li>{{ cssxref("background") }}</li>
+</ul>
diff --git a/files/pt-br/web/guide/css/understanding_z_index/index.html b/files/pt-br/web/guide/css/understanding_z_index/index.html
new file mode 100644
index 0000000000..488ca0f600
--- /dev/null
+++ b/files/pt-br/web/guide/css/understanding_z_index/index.html
@@ -0,0 +1,48 @@
+---
+title: Understanding CSS z-index
+slug: Web/Guide/CSS/Understanding_z_index
+tags:
+  - CSS
+  - Entendendo_CSS_z-index
+  - Guía
+  - Web
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
+---
+<p>Normalmente páginas HTML podem ser consideradas bi-dimensionais, pois texto, imagens e outros elementos podem ser dispostos na página sem sobreposição. Há apenas um fluxo de renderização e todos os elementos sabem do espaço ocupado por outros. O atributo {{cssxref("z-index")}} lhe permite ajustar a ordem de sobreposição dos objetos ao renderizar o conteúdo.</p>
+
+<blockquote>
+<p style=""><em>Em CSS 2.1, cada caixa tem uma posição nas três dimensões. Em adição às suas posições na horizontal e vertical, caixas ficam no "eixo-z" e são formatadas uma em cima da outra. Posições no Eixo-Z são particularmente relevantes quando caixas se sobrepõem visualmente.</em></p>
+</blockquote>
+
+<p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p>
+
+<p>Isso significa que as regras de CSS te permitem posicionar caixas em camadas em adição ao <em>render</em> normal da camada (level 0). A posição Z de cada camada é expressa como um inteiro representando a ordem da pilha para renderização. Números maiores significam que são mais próximos do observador. A posição Z pode ser controlada pela propriedade CSS {{ cssxref("z-index")}}.</p>
+
+<p>Usar z-index aparenta ser extremamente fácil: uma única propriedade, endereçada a um único número inteiro, com um comportamento fácil-de-entender. No entanto, quando o z-index é aplicado para a hierarquia complexa dos elementos de HTML, seu comportamento pode ser difícil de entender ou até imprevisível. Isso é devido às complexas regras de <em>stacking</em>. Uma sessão dedicada foi  reservada na especificação do CSS  <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> para explicar melhor essas regras.</p>
+
+<p>Esse artigo tentará explicar essas regras, com algumas simplificações e vários exemplos.</p>
+
+<ol>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Regras padrões de empilhamento</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : Como lidar com elementos que usam <em>float</em></li>
+ <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Usando index-z para mudar o empilhamento padrão</li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notas sobre contexto do empilhamento</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarquia, z-index no último <em>level</em></li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarquia, z-index em todos os <em>levels</em></li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarquia, z-index no segundo <em>level</em></li>
+</ol>
+
+<p><small><em>Note of the author: Thanks to Wladimir Palant and Rod Whiteley for the review.</em> </small></p>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author(s): Paolo Lombardi</li>
+ <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+ <li>Last Updated Date: July 9th, 2005</li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/pt-br/web/guide/events/criando_e_disparando_eventos/index.html b/files/pt-br/web/guide/events/criando_e_disparando_eventos/index.html
new file mode 100644
index 0000000000..632b54df75
--- /dev/null
+++ b/files/pt-br/web/guide/events/criando_e_disparando_eventos/index.html
@@ -0,0 +1,145 @@
+---
+title: Criando e disparando eventos
+slug: Web/Guide/Events/criando_e_disparando_eventos
+tags:
+  - Avançado
+  - DOM
+  - Guía
+  - JavaScript
+  - eventos
+translation_of: Web/Guide/Events/Creating_and_triggering_events
+---
+<p>Este artigo demonstra como criar e disparar eventos DOM. Tais eventos são comumente chamados <strong>eventos sintéticos</strong>, oposto aos eventos disparados pelo próprio navegador.</p>
+
+<h2 id="Criando_eventos_customizados">Criando eventos customizados</h2>
+
+<p>Eventos podem ser criados com o construtor <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> da seguinte forma:</p>
+
+<pre class="brush: js">var event = new Event('build');
+
+// Ouve pelo evento.
+elem.addEventListener('build', function (e) { ... }, false);
+
+// Dispara o evento.
+elem.dispatchEvent(event);</pre>
+
+<p>Este construtor é suportado na maioria dos navegadores modernos (com o Internet Explorer sendo exceção). Para uma abordagem mais verbosa (a qual é suportada pelo Internet Explorer), veja <a href="#The_old-fashioned_way" title="#The_old-fashioned_way">a forma antiga</a> abaixo.</p>
+
+<h3 id="Adicionando_dados_customizados_–_CustomEvent()">Adicionando dados customizados – CustomEvent()</h3>
+
+<p>Para adicionar mais dados ao objeto do evento, usa-se a interface <a href="/en-US/docs/Web/API/CustomEvent">CustomEvent</a>, a qual possui a propriedade <u><strong>detail</strong></u> que pode ser utilizada para fornecer dados customizados.</p>
+
+<p><span style="line-height: 1.5;">Por exemplo, o evento pode ser criado da seguinte forma:</span></p>
+
+<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre>
+
+<p>Isso permitirá que você acesse dados customizados no listener do evento:</p>
+
+<pre class="brush: js">function eventHandler(e) {
+  console.log('The time is: ' + e.detail);
+}
+</pre>
+
+<h3 id="A_forma_antiga">A forma antiga</h3>
+
+<p>A forma antiga de criar eventos possui uma abordagem mais verbosa, tendo APIs inspiradas em Java. Abaixo temos um exemplo:</p>
+
+<pre class="brush: js">// Cria o evento.
+var event = <a href="/en-US/docs/Web/API/Document/createEvent">document.createEvent</a>('Event');
+
+// Define que o nome do evento é 'build'.
+event.initEvent('build', true, true);
+
+// Ouve pelo evento.
+elem.addEventListener('build', function (e) {
+  // e.target é igual a elem, neste caso
+}, false);
+
+// O alvo do evento pode ser qualquer instância de Element ou EventTarget.
+elem.dispatchEvent(event);
+
+</pre>
+
+<h2 id="Disparando_eventos_nativos">Disparando eventos nativos</h2>
+
+<p>Este exemplo mostra a simulação de um clique (isto é, gera um um clique de forma programatica) sobre um checkbox usando métodos DOM. <a class="external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">Veja o exemplo em ação.</a></p>
+
+<pre class="brush: js">function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+
+  var cb = document.getElementById('checkbox');
+  var cancelled = !cb.dispatchEvent(event);
+
+  if (cancelled) {
+    // Um listener invocou o método preventDefault.
+    alert("Cancelado");
+  } else {
+    // Nenhum listener invocou o método preventDefault.
+    alert("Não cancelado");
+  }
+}</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Compatibilidade entre navegadores</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;">Edge</th>
+   <th style="line-height: 16px;">Internet Explorer</th>
+   <th style="line-height: 16px;">Opera</th>
+   <th style="line-height: 16px;">Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td><code>construtor Event()</code></td>
+   <td>15</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>11.60</td>
+   <td>6</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;">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>Suporte básico</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("document.createEvent()")}}</li>
+ <li>{{domxref("Event.initEvent()")}}</li>
+ <li>{{domxref("EventTarget.dispatchEvent()")}}</li>
+ <li>{{domxref("EventTarget.addEventListener()")}}</li>
+</ul>
diff --git a/files/pt-br/web/guide/events/event_handlers/index.html b/files/pt-br/web/guide/events/event_handlers/index.html
new file mode 100644
index 0000000000..f558992d27
--- /dev/null
+++ b/files/pt-br/web/guide/events/event_handlers/index.html
@@ -0,0 +1,164 @@
+---
+title: DOM onevent handlers
+slug: Web/Guide/Events/Event_handlers
+translation_of: Web/Guide/Events/Event_handlers
+---
+<p>A plataforma web oferece várias maneiras de trabalhar com o <span class="seoSummary"><a href="/en-US/docs/Web/Events">DOM events</a>. </span>Duas abordagens comuns são:<span class="seoSummary"> {{domxref("EventTarget.addEventListener", "addEventListener()")}} e o específico <code>on<em>event</em></code> que dispara um evento.</span> Este artigo se concentra em como o último funciona.</p>
+
+<h2 id="Registering_onevent_handlers">Registering onevent handlers</h2>
+
+<p>The <strong><code>on<em>event</em></code></strong> handlers are properties on certain DOM elements to manage how that element reacts to events. Elements can be interactive (links, buttons, images, forms, and so forth) or non-interactive (such as the base <code>&lt;body&gt;</code> element). Events are actions like:</p>
+
+<ul>
+ <li>Being clicked</li>
+ <li>Detecting pressed keys</li>
+ <li>Getting focus</li>
+</ul>
+
+<p>The on-event handler is usually named with the event it reacts to, like <code>on<em>click</em></code>, <code>on<em>keypress</em></code>, <code>on<em>focus</em></code>, etc.</p>
+
+<p>You can specify an <code>on<em>&lt;…&gt;</em></code> event handler for a particular event (such as {{event("click")}}) for a given object in different ways:</p>
+
+<ul>
+ <li>Adding an HTML {{Glossary("attribute")}} named <code>on<em>&lt;eventtype&gt;</em></code>:<br>
+  <code>&lt;button <strong>onclick="handleClick()"</strong>&gt;</code>,</li>
+ <li>Or by setting the corresponding {{Glossary("property/JavaScript", "property")}} from JavaScript:<br>
+  <code>document.querySelector("button")<strong>.onclick = function(event) { … }</strong></code>.</li>
+</ul>
+
+<p>An <code>on<em>event</em></code> event handler property serves as a placeholder of sorts, to which a single event handler can be assigned. In order to allow multiple handlers to be installed for the same event on a given object, you can call its {{domxref("EventTarget.addEventListener", "addEventListener()")}} method, which manages a list of handlers for the given event on the object. A handler can then be removed from the object by calling its {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} function.</p>
+
+<p>When an event occurs that applies to an element, each of its event handlers is called to allow them to handle the event, one after another. You don't need to call them yourself, although you can do so in many cases to easily simulate an event taking place. For example, given a button object <code>myButton</code>, you can do <code>myButton.onclick(myEventObject)</code> to call the event handler directly. If the event handler doesn't access any data form the event object, you can leave out the event when calling <code>onclick()</code>.</p>
+
+<p>This continues until every handler has been called, unless one of the event handlers explicitly halts the processing of the event by calling {{domxref("Event.stopPropagation", "stopPropagation()")}} on the event object itself.</p>
+
+<h3 id="Non-element_objects">Non-element objects</h3>
+
+<p>Event handlers can also be set with properties on non-element objects that generate events, like {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, and others. For example, for the <code>progress</code> event on instances of <code>XMLHttpRequest</code>:</p>
+
+<pre class="brush: js notranslate">const xhr = new XMLHttpRequest();
+xhr.onprogress = function() { … };</pre>
+
+<h2 id="HTML_onevent_attributes">HTML onevent attributes</h2>
+
+<p>HTML elements have attributes named <code>on<em>event</em></code> which can be used to register a handler for an event directly within the HTML code. When the element is built from the HTML, the value of its <code>on<em>event</em></code> attributes are copied to the DOM object that represents the element, so that accessing the attributes' values using JavaScript will get the value set in the HTML.</p>
+
+<p>Further changes to the HTML attribute value can be done via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute"><code>setAttribute</code> </a>method; Making changes to the JavaScript property will have no effect.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Given this HTML document:</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Demonstrating quirks of &lt;code&gt;on&lt;em&gt;event&lt;/em&gt;&lt;/code&gt; HTML attributes on
+   &lt;a onclick="log('Click!')"&gt;these three words&lt;/a&gt;.
+&lt;/p&gt;
+
+&lt;div&gt;&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Then this JavaScript demonstrates that the value of the HTML attribute is unaffected by changes to the JavaScript object's property.</p>
+
+<pre class="brush: js notranslate">let logElement = document.querySelector('div');
+let el = document.querySelector("a");
+
+function log(msg) { logElement.innerHTML += `${msg}&lt;br&gt;` };
+function anchorOnClick(event) { log("Changed onclick handler") };
+
+// Original Handler
+log(`Element's onclick as a JavaScript property: &lt;code&gt; ${el.onclick.toString()} &lt;/code&gt;`);
+
+//Changing handler using .onclick
+log('&lt;br&gt;Changing onclick handler using &lt;strong&gt; onclick property &lt;/strong&gt; ');
+
+el.onclick = anchorOnClick;
+
+log(`Changed the property to: &lt;code&gt; ${el.onclick.toString()} &lt;/code&gt;`);
+log(`But the HTML attribute is unchanged: &lt;code&gt; ${el.getAttribute("onclick")} &lt;/code&gt;&lt;br&gt;`);
+
+//Changing handler using .setAttribute
+log('&lt;hr/&gt;&lt;br&gt; Changing onclick handler using &lt;strong&gt; setAttribute method &lt;/strong&gt; ');
+el.setAttribute("onclick", 'anchorOnClick(event)');
+
+log(`Changed the property to: &lt;code&gt; ${el.onclick.toString()} &lt;/code&gt;`);
+log(`Now even the HTML attribute has changed: &lt;code&gt; ${el.getAttribute("onclick")} &lt;/code&gt;&lt;br&gt;`);</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{ EmbedLiveSample('HTML_onevent_attributes', '', '', '', 'Web/Guide/Events/Event_handlers') }}</p>
+
+<p>For historical reasons, some attributes/properties on the {{HTMLElement("body")}} and {{HTMLElement("frameset")}} elements instead set event handlers on their parent {{domxref("Window")}} object. (The HTML specification names these: <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">onblur</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onerror">onerror</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">onfocus</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code>, and <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onscroll">onscroll</a></code>.)</p>
+
+<h3 id="Event_handlers_parameters_this_binding_and_the_return_value">Event handler's parameters, <code>this</code> binding, and the return value</h3>
+
+<p>When the event handler is specified as <strong>an HTML attribute</strong>, the specified code is wrapped into a function with <strong>the following parameters</strong>:</p>
+
+<ul>
+ <li><code>event</code> — for all event handlers except {{domxref("GlobalEventHandlers.onerror", "onerror")}}.</li>
+ <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, and <code>error</code> for the {{domxref("GlobalEventHandlers.onerror", "onerror")}} event handler. Note that the <code>event</code> parameter actually contains the error message as a string.</li>
+</ul>
+
+<p>When the event handler is invoked, the <code>this</code> keyword inside the handler is set to the DOM element on which the handler is registered. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_inline_event_handler">the <code>this</code> keyword documentation</a>.</p>
+
+<p>The return value from the handler determines if the event is canceled. The specific handling of the return value depends on the kind of event; for details, see <a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">"The event handler processing algorithm" in the HTML specification</a>.</p>
+
+<h3 id="When_the_event_handler_is_invoked">When the event handler is invoked</h3>
+
+<div class="blockIndicator note">
+<p>TBD (non-capturing listener)</p>
+</div>
+
+<h3 id="Terminology">Terminology</h3>
+
+<p>The term <strong>event handler</strong> may refer to:</p>
+
+<ul>
+ <li>Any function or object that is registered to be notified of events</li>
+ <li>Or more specifically, to the mechanism of registering event listeners via <code>on…</code> attributes in HTML or properties in Web APIs, such as <code>&lt;button onclick="alert(this)"&gt;</code> or <code>window.onload = function() { … }</code>.</li>
+</ul>
+
+<p>When discussing the various methods of listening to events:</p>
+
+<ul>
+ <li><strong>Event listener</strong> refers to a function or object registered via {{domxref("EventTarget.addEventListener()")}}</li>
+ <li><strong>Event handler</strong> refers to a function registered via <code>on…</code> attributes or properties</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
+
+<h4 id="Detecting_the_presence_of_event_handler_properties">Detecting the presence of event handler properties</h4>
+
+<p>You can detect the presence of an event handler property with the JavaScript <a href="/en-US/JavaScript/Reference/Operators/in" title="en/JavaScript/Reference/Operators/in"><code>in</code></a> operator. For example:</p>
+
+<pre class="brush: js notranslate">if ("onsomenewfeature" in window) {
+  /* do something amazing */
+}
+</pre>
+
+<h4 id="Event_handlers_and_prototypes">Event handlers and prototypes</h4>
+
+<p>You can't set or access the values of any IDL-defined attributes on DOM prototype objects. That means you can't, for example, change <code>Window.prototype.onload</code>. In the past, event handlers (<code>onload</code>, etc.) weren't implemented as IDL attributes in Gecko, so you were able to do this for those. Now you can't. This improves compatibility.</p>
diff --git a/files/pt-br/web/guide/events/index.html b/files/pt-br/web/guide/events/index.html
new file mode 100644
index 0000000000..65b5775a16
--- /dev/null
+++ b/files/pt-br/web/guide/events/index.html
@@ -0,0 +1,36 @@
+---
+title: Event developer guide
+slug: Web/Guide/Events
+tags:
+  - DOM
+  - Event
+  - Guide
+  - NeedsTranslation
+  - TopicStub
+  - events
+translation_of: Web/Guide/Events
+---
+<p>{{draft()}}</p>
+<p>Events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.</p>
+<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">overview page</a> provides an introduction to the design pattern and a summary of the types of incidents which are defined and reacted to by modern web browsers.</p>
+<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">custom events page</a> describes how the event code design pattern can be used in custom code to define new event types emitted by user objects, register listener functions to handle those events, and trigger the events in user code.</p>
+<p>The remaining pages describe how to use events of different kinds defined by web browsers. Unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers.</p>
+<p>The <strong>device</strong> on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> and the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. That is different, but similar, to the change in device vertical orientation. </p>
+<p>The <strong>window</strong> in which the browser is displayed which might trigger events, for example, change size if the user maximizes the window or otherwise changes it.</p>
+<p>The <strong>process</strong> loading of a web page might trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for display to the user.</p>
+<p>The <strong>user interaction</strong> with the web page contents might trigger events. The events triggered by user interaction evolved during the early years of browser design and include a complicated system defining the sequence in which events will be called and the manner in which that sequence can be controlled. The different types of user interaction driven events include:</p>
+<ul>
+ <li>the original 'click' event,</li>
+ <li>mouse events,</li>
+ <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events">mouse gesture events</a>, and</li>
+ <li>both <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a> and the earlier, but deprecated, <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">mozilla experimental touch events</a>.</li>
+</ul>
+<p>The <strong>modification of the web page</strong> in structure or content might trigger some events, as is explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a>, but the use of these events has been deprecated in favour of the lighter <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> approach.</p>
+<p>The <strong>media streams</strong> embedded in the HTML documents might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Media_events">media events</a> page.</p>
+<p>The <strong>network requests</strong> made by a web page might trigger some events.</p>
+<p>There are many other sources of events defined by web browsers for which pages are not yet available in this guide.</p>
+<div class="note">
+ <p>Note: This Event Developer Guide needs substantial work. The structure needs to be reorganized and the pages rewritten. Our hope is that everything you need to know about events will go under here.</p>
+</div>
+<h2 id="Docs">Docs</h2>
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/pt-br/web/guide/events/mutation_events/index.html b/files/pt-br/web/guide/events/mutation_events/index.html
new file mode 100644
index 0000000000..582670fb98
--- /dev/null
+++ b/files/pt-br/web/guide/events/mutation_events/index.html
@@ -0,0 +1,62 @@
+---
+title: Mutation events
+slug: Web/Guide/Events/Mutation_events
+translation_of: Web/Guide/Events/Mutation_events
+---
+<p>{{deprecated_header()}}</p>
+
+<p><strong>Mutation events</strong> fornecem um mecanismo, para uma página web ou uma extensão, de notificação sobre as alterações feitas no DOM. <span style="background-color: #ffff00;">Utilize ao invés, se possível, <a href="/en-US/docs/Web/API/MutationObserver" title="/en-US/docs/Web/API/MutationObserver">Mutation Observers</a>.</span></p>
+
+<h2 id="Prefácio">Prefácio</h2>
+
+<p>Os eventos de mutação foram marcados como em desuso na <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents">DOM Events specification</a> pelo fato do projeto da API ser falho (veja detalhes no "DOM Mutation Events Replacement: The Story So Far / Existing Points of Consensus" publicado em <span id="to"><a class="external" href="http://lists.w3.org/Archives/Public/public-webapps/2011JulSep/0779.html">public-webapps</a>)</span>.</p>
+
+<p id="Replacement.3A_mutation_observers"><a href="/en-US/docs/Web/API/MutationObserver">Mutation Observers</a> são a proposta de substituição para eventos de mutação no DOM4. Eles devem ser incluídos no Firefox 14 e <a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" title="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers">Chrome 18</a>.</p>
+
+<p>As razões práticas para evitar os eventos de mutação são <strong>problemas de desempenho</strong> e suporte <strong>cross-browser.</strong></p>
+
+<h3 id="Performance">Performance</h3>
+
+<p>Adicionando listeners de mutação do DOM a um documento <a class="external" href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/2f42f1d75bb906fb?pli=1" rel="external" title="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/2f42f1d75bb906fb?pli=1">degrada o desempenho profundamente</a> de outras modificações DOM para esse documento (tornando-os 1.5 - 7 vezes mais lento!). Além disso, remover os listeners não reverte o dano.</p>
+
+<p>O efeito de desempenho é <a class="link-https" href="https://groups.google.com/forum/#!topic/mozilla.dev.platform/UH2VqFQRTDA" title="https://groups.google.com/forum/#!topic/mozilla.dev.platform/UH2VqFQRTDA">limitado aos documentos que têm os listeners de evento de mutação</a>.</p>
+
+<h3 id="Suporte_cross-browser">Suporte cross-browser</h3>
+
+<p>Esses eventos não são implementados de forma consistente entre os diferentes navegadores, por exemplo:</p>
+
+<ul>
+ <li>IE anteriores à versão 9 não suportavam os eventos de mutação por completo e em alguns aspectos não implementa corretamente na versão 9 (<a class="external" href="http://help.dottoro.com/ljmcxjla.php" title="http://help.dottoro.com/ljmcxjla.php">por exemplo, DOMNodeInserted</a>)</li>
+ <li>WebKit não suporta DOMAttrModified (veja <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=8191" title="https://bugs.webkit.org/show_bug.cgi?id=8191">webkit bug 8191</a> e <a class="external" href="http://about.silkapp.com/page/Mutation%20Events:%20What%20Happen" title="http://about.silkapp.com/page/Mutation%20Events:%20What%20Happen">the workaround</a>)</li>
+ <li>"mutation name events", por exemplo DOMElementNameChanged e DOMAttributeNameChanged não são suportados no Firefox (a partir da versão 11), e provavelmente em outros navagedores também.</li>
+ <li>...</li>
+</ul>
+
+<p>Dottoro <a class="external" href="http://help.dottoro.com/ljfvvdnm.php#additionalEvents" title="http://help.dottoro.com/ljfvvdnm.php#additionalEvents">suporte a eventos de mutação nos navegadores</a>.</p>
+
+<h2 id="Lista_de_mutation_events">Lista de mutation events</h2>
+
+<p>Listado a seguir todos os eventos de mutação, como definido no <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents">DOM Level 3 Events specification</a>:</p>
+
+<ul>
+ <li><code>DOMAttrModified</code></li>
+ <li><code>DOMAttributeNameChanged</code></li>
+ <li><code>DOMCharacterDataModified</code></li>
+ <li><code>DOMElementNameChanged</code></li>
+ <li><code>DOMNodeInserted</code></li>
+ <li><code>DOMNodeInsertedIntoDocument</code></li>
+ <li><code>DOMNodeRemoved</code></li>
+ <li><code>DOMNodeRemovedFromDocument</code></li>
+ <li><code>DOMSubtreeModified</code></li>
+</ul>
+
+<h2 id="Uso">Uso</h2>
+
+<p>Você pode registrar um listener para eventos de mutação usando <a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">element.addEventListener</a>, como mostrado a seguir:</p>
+
+<pre><code>element.addEventListener("DOMNodeInserted", function (event) {</code>
+  // ...
+<code>}, false);</code>
+</pre>
+
+<p>O objeto event é transmitido para o listener em um {{ domxref("MutationEvent") }} (veja <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-MutationEvent" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-MutationEvent">sua definição na especificação</a>) para a maioria dos eventos, e {{ domxref("MutationNameEvent") }} para <code>DOMAttributeNameChanged</code> e <code>DOMElementNameChanged</code>.</p>
diff --git a/files/pt-br/web/guide/events/overview_of_events_and_handlers/index.html b/files/pt-br/web/guide/events/overview_of_events_and_handlers/index.html
new file mode 100644
index 0000000000..2593d5641e
--- /dev/null
+++ b/files/pt-br/web/guide/events/overview_of_events_and_handlers/index.html
@@ -0,0 +1,132 @@
+---
+title: Uma visão geral sobre Events e Handlers
+slug: Web/Guide/Events/Overview_of_Events_and_Handlers
+translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers
+---
+<div class="summary">
+<p>Este artigo apresenta uma visão geral sobre o design pattern usado para reagir a alterações que ocorrem quando o navegador acessa uma página, e dá um resumo sobre como os navegadores modernos reagem a eles.</p>
+</div>
+
+<p>Eventos e a manipulação de eventos fornecem uma técnica essencial em JavaScript para reagir a algum incidente quando o navegador acessa uma página, incluindo eventos de preparação para exibir a página, ou interação com algum conteúdo da página que estejam relacionados com o dispositivo onde o navagador está rodando, e muitas outras, como reprodução de áudio ou vídeo.</p>
+
+<p>A manipulação de eventos tornou-se imprescindível com a evolução e mudança na arquitetura de renderização dos navegadores em relação a forma de busca e carregamento de informações na página. No início, os navegadores esperavam e recebiam os dados e recursos associados a página para analisar, processar e apresentar a página ao usuário. A página permanecia inalterada até uma requisição para um novo link. Atualmente, com a mudança para páginas dinâmicas, os navegadores estão sempre em um loop contínuo, processando, desenhando, apresentando conteúdo e esperando de algum novo evento. Os gatilhos (triggers) de evento podem ser a conclusão do carregamento de um arquivo na rede, por exemplo, uma imagem que agora pode ser mostrada na tela, a conclusão da análise de um recurso pelo navegador, o processamento do conteúdo HTML de uma página, a interação de um usuário com o conteúdo da página, com o clique em um botão. Douglas Crockford explica essa mudança de maneira eficaz em sua palestra, <em>An Inconvenient API: The Theory of the DOM.</em></p>
+
+<p>With the change to dynamic page rendering, browsers loop continuously between processing, drawing, presenting content, and waiting for some new event trigger. Event triggers include the completion of the loading of a resource on the network <em>e.g.,</em> downloads an image that can now be drawn on the screen, the completion of parsing a resource by the browser <em>e.g.</em>, processes the HTML content of a page, the interaction of a user with the contents of the page <em>e.g.,</em> clicks a button. Douglas Crockford explains this change effectively in several lectures, notably his talk, <em>An Inconvenient API: The Theory of the DOM,</em> which shows the change in flow from the original browser flow</p>
+
+<div style="margin: 0 auto; width: 68%;"><img alt="A comparison of the sequential and event-driven browser load sequences." src="https://mdn.mozillademos.org/files/6641/Browser_sequence_comparitive.svg" style="height: 454px; width: 1857px;"></div>
+
+<p>to the event driven browser. The latter approach changes the last steps from a single flow into a perpetual loop, where waiting for and handling the incidence of new events follows painting. The innovation of the dynamic approach allows for a page to be partially rendered even when the browser has not finished retrieving all resources; this approach also allows for event driven actions, which JavaScript leverages. (The talk is available from several sources, including <a href="http://www.youtube.com/watch?v=Y2Y0U-2qJMs">this one</a>.) Currently, all execution environments for JavaScript code use events and event handling.</p>
+
+<h2 id="The_event_design_pattern">The event design pattern</h2>
+
+<p>The event system, at its core, is simply a programming design pattern. The pattern starts with an agreement over a kind of event and:</p>
+
+<ul>
+ <li>the name String used for the event,</li>
+ <li>the type of the data structure used to represent the key properties of that event, and</li>
+ <li>the JavaScript object which will 'emit' that event.</li>
+</ul>
+
+<p>The pattern is implemented by</p>
+
+<ul>
+ <li>defining a JavaScript function which takes as an argument the data structure which was agreed upon, and</li>
+ <li>registering the function using the name String with the object which will emit the event.</li>
+</ul>
+
+<p>The function is said to be a 'listener' or a 'handler' with both names used interchangeably. This pattern can easily be followed using completely custom code, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">article on custom events</a>. The pattern is also used by modern web browsers which define many events emitted in response to user input or browser activity.</p>
+
+<p>Modern web browsers follow the event pattern using a standardized approach. Browsers use as the data structure for the properties of the event, an object derived from the <code>EventPrototype</code> object. Browsers use as the registration method for the function which will handle those data structures a method called <code>addEventListener</code> which expects as arguments a string event type name and the handler function. Finally, browsers define a large number of objects as event emitters and define a wide variety of event types generated by the objects.</p>
+
+<h2 id="Button_Event_Handler" name="Button_Event_Handler">Button Event Handler Demo</h2>
+
+<p>For example, browser <code>button</code> elements are intended to emit events named <code>'click'</code> in response to a mouse click or, when displayed in touch sensitive surfaces, to a finger tap. We could define in the HTML page a <code>button</code> as:</p>
+
+<pre class="brush: html notranslate">&lt;button id="buttonOne"&gt;Click here to emit a 'click' event&lt;/button&gt;</pre>
+
+<p>and, in our JavaScript code, we could first define a function to listen to that <code>'click'</code> event:</p>
+
+<pre class="brush: js notranslate">var example_click_handler = function (ev){
+    var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype";
+    alert("We got a click event at " + ev.timeStamp + " with an argument object derived from: " + objKind );
+};</pre>
+
+<p>and second register our function with the the <code>Button</code> object, either on the scripting side using the DOM (Document Object Model) representation of the HTML page:</p>
+
+<pre class="brush: js notranslate">var buttonDOMElement = document.querySelector('#buttonOne');
+buttonDOMElement.addEventListener('click', example_click_handler);</pre>
+
+<p>or within the HTML page by adding the function as the value of the <code>'onclick'</code> attribute, although this second approach is usually only used in very simple web pages.</p>
+
+<p>{{ EmbedLiveSample('Button_Event_Handler') }}</p>
+
+<p>This code relies on the agreement that there is a kind of event called <code>'click'</code> which will call any listener (or 'handler') function with an <code>Event</code> object argument (actually, in this case a derivative <code>MouseEvent</code> object) and which will be fired by HTML <code>button</code> elements after user interaction. The code has no visible effect until a user interacts with the button either by placing the mouse pointer over the HTML button and clicking on the left mouse button or by placing a finger or stylus of some kind on the screen above the HTML button; when that happens, the <code>buttonDOMElement</code> JavaScript object would call the <code>example_click_handler</code> function with an <code>Event</code> object as an argument. The function, in turn, would perform whatever action was chosen by the programmer, in this case to open an HTML alert dialog. Note that the handler has access to the <code>ev</code> object since it is passed as an argument; the object has information about the event, notably the time at which the event occurred.</p>
+
+<p>As a second example, much modern JavaScript integrated into web pages is wrapped into an event function call to ensure that the code is only executed when the HTML has been processed and is available for alteration or decoration. For example, code might be attached as:</p>
+
+<pre class="brush: js notranslate">var funcInit = function(){
+    // user code goes here and can safely address all the HTML elements from the page
+    // since the document has successfully been 'loaded'
+}
+document.addEventListener('DOMContentLoaded', funcInit);
+</pre>
+
+<p>so that this code will only be executed after the <code>document</code> object emits the <code>'DOMContentLoaded'</code> event because the HTML has been parsed and Javasript objects created representing each of the nodes of the HTML document. Note that in this example, the code does not even name the event argument to the function because the code never needs to use the data structure describing the event; rather, the code merely needs to wait to run until after then event has happened.</p>
+
+<p>The pattern is therefore easy to learn and implement. The difficulty with events comes from learning the wide variety of events which are generated in modern web browsers. There is also some subtlety in learning how to write the handler functions since such code works asynchronously and potentially will run repeatedly but in slightly different situations.</p>
+
+<h2 id="Notable_events">Notable events</h2>
+
+<p>Web browsers define a large number of events so it is not practical to list them all. The <a href="/en-US/docs/Web/Reference/Events">Event Reference</a> attempts to maintain a list of the standard Events used in modern web browsers.</p>
+
+<p>In general, we can distinguish events of different kinds based on the object emitting the event including:</p>
+
+<ul>
+ <li>the <code>window</code> object, such as due to resizing the browser,</li>
+ <li>the <code>window.screen</code> object, such as due to changes in device orientation,</li>
+ <li>the <code>document</code> object, including the loading, modification, user interaction, and unloading of the page,</li>
+ <li>the objects in the DOM (document object model) tree including user interactions or modifications,</li>
+ <li>the <code>XMLHttpRequest</code> objects used for network requests, and</li>
+ <li>the media objects such as <code>audio</code> and <code>video</code>, when the media stream players change state.</li>
+</ul>
+
+<p>although this list is currently incomplete.</p>
+
+<p>Some notable events are:</p>
+
+<div class="note">
+<p><strong>Note:</strong> This list of events will need work to make relevant; that work is awaiting some global reorganization work on the documents. This will also need finding a good explanation of the events involved during page loading, such as discussed partially in <em><a href="http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload">this web page</a> or in <a href="http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page">this Stack Overflow question</a>. </em></p>
+</div>
+
+<ul>
+ <li>the global object <a href="/en-US/docs/Web/API/Window"><code>window</code></a> emits an event called <a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)"><code>'load'</code></a> when the page has finished rendering, meaning that all resources have been downloaded and acted upon, so that the scripts have been run and the images displayed,</li>
+ <li>the global object <a href="/en-US/docs/Web/API/Window"><code>window</code></a> emits an event called <a href="/en-US/docs/Web/Reference/Events/resize"><code>'resize'</code></a> when the height or the width of the browser window is changed by a user,</li>
+ <li>the DOM object <a href="/en-US/docs/Web/API/Document"><code>document</code></a> representing the HTML document emits an event called<code> <a href="/en-US/docs/Web/Reference/Events/DOMContentLoaded">'DOMContentLoaded'</a></code> when the document has finished loading,</li>
+ <li>the DOM node objects such as <a href="/en-US/docs/Web/HTML/Element/div"><code>div</code></a> or <a href="/en-US/docs/Web/HTML/Element/button"><code>button</code></a> emit an event called <a href="/en-US/docs/Web/Reference/Events/click"><code>'click'</code></a> when the user presses the mouse button while the mouse pointer is on top of the DOM node in the HTML page.</li>
+</ul>
+
+
+
+<h2 id="The_Event_object_hierarchy">The Event object hierarchy</h2>
+
+<p>The web browser defines many events of different kinds. Each definition includes, as the data structure passed to the handler function, an object which inherits from the <code>EventPrototype</code> object.</p>
+
+<p>A partial diagram of the class hierarchy of event objects is:</p>
+
+<div class="note">
+<p><strong>Note:</strong> This diagram is incomplete.</p>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6633/Js_Event_Object_Hierarchy.svg" style="height: 496px; width: 1417px;"></p>
+
+<p>The Web API Documentation contains <a href="/en-US/docs/Web/API/Event">a page defining the Event object</a> which also includes the known DOM event subclasses of the <code>Event</code> object.</p>
+
+<h2 id="Documents">Documents</h2>
+
+<p>Three sources on the MDN (Mozilla Developer Network) web site are particularly useful for programmers wanting to work with events:</p>
+
+<ul>
+ <li>this <a href="/en-US/docs/Web/Guide/API/DOM/Events">Event Guide</a> which is part of the <a href="/en-US/docs/Web/Guide">Web Developers' Guide</a>,</li>
+ <li>the <a href="/en-US/docs/Web/Reference/Events">Event Reference</a>,</li>
+ <li>the Web API documentation for the <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> object.</li>
+</ul>
diff --git a/files/pt-br/web/guide/events/touch_events/index.html b/files/pt-br/web/guide/events/touch_events/index.html
new file mode 100644
index 0000000000..df21cdf335
--- /dev/null
+++ b/files/pt-br/web/guide/events/touch_events/index.html
@@ -0,0 +1,353 @@
+---
+title: Eventos do Toque
+slug: Web/Guide/Events/Touch_events
+tags:
+  - Avançado
+  - DOM
+  - Evento
+  - Guía
+  - Mobile
+  - Visualização
+translation_of: Web/API/Touch_events
+---
+<p>Com a finalidade de fornecer suporte de qualidade para interfaces baseadas em toque (touch), os eventos de touch oferecem a capacidade de interpretar a atividade em telas sensíveis ao toque ou trackpads.</p>
+
+<h2 id="Definições">Definições</h2>
+
+<dl>
+ <dt>Surface</dt>
+ <dd>A superfície sensível ao toque. Pode ser uma tela ou trackpad.</dd>
+</dl>
+
+<dl>
+ <dt><strong style="font-weight: bold;">T</strong>ouch point</dt>
+ <dd>Um ponto de contato com a superfície. Pode ser um dedo (ou cotovelo, orelha, nariz, o que seja, mas provavelmente, um dedo) ou uma caneta.</dd>
+</dl>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{ domxref("TouchEvent") }}</dt>
+ <dd>Representa um evento quando ocorre o estado de toque na superfície.</dd>
+ <dt>{{ domxref("Touch") }}</dt>
+ <dd>Representa um único ponto de contato entre o usuário e a superfície sensível a toque.</dd>
+ <dt>{{ domxref("TouchList") }}</dt>
+ <dd>Representa um grupo de toques, isto é usado quando usuário tem por exemplo, vários dedos ao mesmo tempo sobre a superfície.</dd>
+ <dt>{{ domxref("DocumentTouch") }}</dt>
+ <dd>Contém métodos de conveniência para criar {{ domxref("Touch") }} e objetos {{ domxref("TouchList") }} .</dd>
+</dl>
+
+<h2 id="Exemplo">Exemplo</h2>
+
+<p>Este exemplo acompanha múltiplos pontos de contato de cada vez, permitindo o usuário desenhe em um {{ HTMLElement("canvas") }} com mais de um dedo por vez. Ele só funcionará em um browser que tenha suporte a eventos de toque.</p>
+
+<div class="note"><strong>Nota:</strong> O texto a seguir utiliza o termo "finger" quando descreve o contato com a superfície, mas poderia, é claro, ser também uma caneta ou outro método de contato.</div>
+
+<h3 id="Crie_um_canvas">Crie um canvas</h3>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="600" height="600" style="border:solid black 1px;"&gt;
+  Seu browser não tem suporte ao elemento canvas.
+&lt;/canvas&gt;
+&lt;br&gt;
+&lt;button onclick="startup()"&gt;Initialize&lt;/button&gt;
+&lt;br&gt;
+Log: &lt;pre id="log" style="border: 1px solid #ccc;"&gt;&lt;/pre&gt;
+</pre>
+
+<h3 id="Configurado_os_eventos">Configurado os eventos</h3>
+
+<p>Quando uma página é carregada, a função <code>startup()</code> mostrada abaixo deve ser chamada pelo nosso elemento {{ HTMLElement("body") }} através do atributo <code>onload</code> (Mas no exemplo usamos um botão para adicioná-lo, devido as limitações do MDN live example system).</p>
+
+<pre class="brush: js">function startup() {
+  var el = document.getElementsByTagName("canvas")[0];
+  el.addEventListener("touchstart", handleStart, false);
+  el.addEventListener("touchend", handleEnd, false);
+  el.addEventListener("touchcancel", handleCancel, false);
+  el.addEventListener("touchleave", handleEnd, false);
+  el.addEventListener("touchmove", handleMove, false);
+  log("initialized.");
+}
+</pre>
+
+<p>Define simplesmento todos os ouvintes dos eventos do nosso elemento {{ HTMLElement("canvas") }} para que possamos trabalhar com os eventos de toque quando eles ocorrerem<span style="line-height: 1.5;">.</span></p>
+
+<h4 id="Rastreando_novos_toques" style="line-height: 18px;">Rastreando novos toques</h4>
+
+<p>Vamos acompanhar os toques em seu progresso.</p>
+
+<pre class="brush: js" style="font-size: 12px;">var ongoingTouches = new Array; </pre>
+
+<p><span style="line-height: 1.5;">Quando ocorre um evento </span><code style="font-size: 14px;">touchstart</code><span style="line-height: 1.5;">, indicando que um novo toque na superfície tenha ocorrido, a função abaixo </span><code style="font-size: 14px;">handleStart()</code><span style="line-height: 1.5;"> é chamada. </span></p>
+
+<pre class="brush: js">function handleStart(evt) {
+  evt.preventDefault();
+  log("touchstart.");
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i &lt; touches.length; i++) {
+    log("touchstart:"+i+"...");
+    ongoingTouches.push(copyTouch(touches[i]));
+    var color = colorForTouch(touches[i]);
+    ctx.beginPath();
+    ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0,2*Math.PI, false);  // a circle at the start
+    ctx.fillStyle = color;
+    ctx.fill();
+    log("touchstart:"+i+".");
+  }
+}
+</pre>
+
+<p>A chamada {{ domxref("event.preventDefault()") }} mantem o browser a processa o evento de toque ( isso também previne que um mouse event seja despachado). Então, temos o contexto e puxamos a lista de pontos de contato disparados noa propriedade do evento {{ domxref("TouchEvent.changedTouches") }}.</p>
+
+<p>Depois disso, nós iteramos sobre todos os objetos {{ domxref("Touch") }} da lista e os adicionamos em um array de pontos de contatos ativos e definimos o ponto inicial para desenhar um pequeno circulo; estamos usando um raio de 4 pixels, então um círculo de 4 pixels irá aparecer em nosso canvas.</p>
+
+<h4 id="Desenhando_movimento_do_toque">Desenhando movimento do toque</h4>
+
+<p>Cada vez que um ou mais dedos se movem, um evento de TouchMove é disparado, assim chamando nossa função handleMove(). A sua responsabilidade neste exemplo é atualizar as informações armazenadas e desenhar uma linha a partir da posição anterior para a atual de cada toque.</p>
+
+<pre class="brush: js">function handleMove(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i &lt; touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if(idx &gt;= 0) {
+      log("continuing touch "+idx);
+      ctx.beginPath();
+      log("ctx.moveTo("+ongoingTouches[idx].pageX+", "+ongoingTouches[idx].pageY+");");
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      log("ctx.lineTo("+touches[i].pageX+", "+touches[i].pageY+");");
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.lineWidth = 4;
+      ctx.strokeStyle = color;
+      ctx.stroke();
+
+      ongoingTouches.splice(idx, 1, copyTouch(touches[i]));  // swap in the new touch record
+      log(".");
+    } else {
+      log("can't figure out which touch to continue");
+    }
+  }
+}
+</pre>
+
+<p>Esta interação sobre os toques também muda, mas parece em cache as  informações em um array para cada toque anterior, a fim de determinar um pont de partida e o destino para o desenho do trajeto. Isto é feito para olhar cada touch da propriedade {{ domxref("Touch.identifier") }}. Esta propriedade é um número inteiro único para cada toque, e mantém-se consistente para cada evento durante o tempo de contato de cada dedo como a superfície.</p>
+
+<p>Isto permite obter as coordenadas da posição anterior de cada contato e usar os métodos de contexto apropriado para desenhar uma linha que une as duas posições.</p>
+
+<p>Depois de desenhar a linha, nós chamamos <a href="/en/JavaScript/Reference/Global_Objects/Array/splice" title="en/JavaScript/Reference/Global Objects/Array/splice"><code>Array.splice()</code></a> para substituir as informações previas sobre o ponto de toque com a informação atual no array <code>ongoingTouches</code>.</p>
+
+<h4 id="Gerenciando_o_final_do_evento_de_toque">Gerenciando o final do evento de toque </h4>
+
+<p>Quando o usuário retira o dedo da superfície , um evento <code>touchend</code> é disparado.  Da mesma forma, se o dedo deslisa para fora do canvas, nós teremos um evento <code>touchleave</code> disparado. Nós tratamos da mesma forma em ambos os casos:  chamamos  a função <code>handleEnd()</code>. A sua missão é desenhar uma linha para o final do ponto de toque e remover o ponto de toque da lista ongoing.</p>
+
+<pre class="brush: js">function handleEnd(evt) {
+  evt.preventDefault();
+  log("touchend/touchleave.");
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i &lt; touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if(idx &gt;= 0) {
+      ctx.lineWidth = 4;
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.fillRect(touches[i].pageX-4, touches[i].pageY-4, 8, 8);  // and a square at the end
+      ongoingTouches.splice(idx, 1);  // remove it; we're done
+    } else {
+      log("can't figure out which touch to end");
+    }
+  }
+}
+</pre>
+
+<p>Isto é muito semelhante a função anterior, as únicas diferenças reais são o desenho de um pequeno quadrado para marcar o fim e quando chamamos <a href="/en/JavaScript/Reference/Global_Objects/Array/splice" title="en/JavaScript/Reference/Global Objects/Array/splice"><code style="font-size: 14px;">Array.splice()</code></a>, nós simplesmente removemos a antiga entrada da lista de toque do ongoing, sem adição das informações atualizadas. O resultado é que paramos o tracking do ponto de contato.</p>
+
+<h4 id="Tratando_toques_cancelados">Tratando toques cancelados</h4>
+
+<p>Se o dedo do usuário deslisa em uma UI de um navegador, ou o toque de outra forma precisa ser cancelado, o evento touchcancel é disparado e nos chamamaos a função <code>handleCancel()</code>.</p>
+
+<pre class="brush: js">function handleCancel(evt) {
+  evt.preventDefault();
+  log("touchcancel.");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i &lt; touches.length; i++) {
+    ongoingTouches.splice(i, 1);  // remove it; we're done
+  }
+}
+</pre>
+
+<p>Uma vez que a idéia dé cancelar imediatamento o toque, nós simplesmente removemos da lista de ongoing sem desenhar uma linha final.</p>
+
+<h3 id="Funções_de_conveniência">Funções de conveniência</h3>
+
+<p>Este exemplo usa duas funções de conveniência que deve ser olhado rapidamente para ajudar a fazer o resto do código mais claro</p>
+
+<h4 id="Selecionando_a_cor_para_cada_toque">Selecionando a cor para cada toque</h4>
+
+<p>A fim de fazer cada toque desenhar com uma cor diferente, a função  <code>colorForTouch()</code>  é usada para escolher uma cor com base em um identificador único do toque, Este identificador é um número opaco, mas pelo menos podemos conta com ele diferindo entre os toques ativos no momento.</p>
+
+<pre class="brush: js">function colorForTouch(touch) {
+  var r = touch.identifier % 16;
+  var g = Math.floor(touch.identifier / 3) % 16;
+  var b = Math.floor(touch.identifier / 7) % 16;
+  r = r.toString(16); // make it a hex digit
+  g = g.toString(16); // make it a hex digit
+  b = b.toString(16); // make it a hex digit
+  var color = "#" + r + g + b;
+  log("color for touch with identifier " + touch.identifier + " = " + color);
+  return color;
+}
+</pre>
+
+<p>O resultado desta função é uma string que pode ser usada ao chamar as funções {{ HTMLElement("canvas") }} para setar a cor do desenho. Por exemplo, para um valor  {{ domxref("Touch.identifier") }} de 10, o resultado será a string "#aaa".</p>
+
+<h4 id="Copiando_touch_objects">Copiando touch objects</h4>
+
+<p>Alguns browsers (mobile Safari, por exemplo) re-usa touch objects entre os eventos, por isso é melhor ter cuidado para copiar os bits, em vez de fazer referência a todo objeto.</p>
+
+<pre class="brush: js">function copyTouch(touch) {
+  return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY };
+}</pre>
+
+<h4 id="Encontrando_um_toque_ongoing">Encontrando um toque ongoing</h4>
+
+<p>A função <code>ongoingTouchIndexById()</code> abaixo verifica através do array <code>ongoingTouches</code> para encontrar o toque correspondente ao indentificador passado, então ele retorna o índice do touch no array.</p>
+
+<pre class="brush: js">function ongoingTouchIndexById(idToFind) {
+  for (var i=0; i &lt; ongoingTouches.length; i++) {
+    var id = ongoingTouches[i].identifier;
+
+    if (id == idToFind) {
+      return i;
+    }
+  }
+  return -1;    // não econtrado
+}
+</pre>
+
+<h4 id="Mostrando_o_que_está_acontecendo">Mostrando o que está acontecendo</h4>
+
+<pre class="brush: js">function log(msg) {
+  var p = document.getElementById('log');
+  p.innerHTML = msg + "\n" + p.innerHTML;
+}</pre>
+
+<p>If your browser supports it, you can {{ LiveSampleLink('Example', 'see it live') }}.</p>
+
+<p><a href="http://jsfiddle.net/Darbicus/z3Xdx/10/" title="http://jsfiddle.net/Darbicus/z3Xdx/10/">jsFiddle example</a></p>
+
+<h2 id="Additional_tips">Additional tips</h2>
+
+<p>This section provides additional tips on how to handle touch events in your web application.</p>
+
+<h3 id="Handling_clicks">Handling clicks</h3>
+
+<p>Since calling <code>preventDefault()</code> on a <code>touchstart</code> or the first <code>touchmove</code> event of a series prevents the corresponding mouse events from firing, it's common to call <code>preventDefault()</code> on <code>touchmove</code> rather than <code>touchstart</code>. That way, mouse events can still fire and things like links will continue to work. Alternatively, some frameworks have taken to refiring touch events as mouse events for this same purpose. (This example is oversimplified and may result in strange behavior. It is only intended as a guide.)</p>
+
+<pre class="brush: js">function onTouch(evt) {
+  evt.preventDefault();
+  if (evt.touches.length &gt; 1 || (evt.type == "touchend" &amp;&amp; evt.touches.length &gt; 0))
+    return;
+
+  var newEvt = document.createEvent("MouseEvents");
+  var type = null;
+  var touch = null;
+  switch (evt.type) {
+    case "touchstart":    type = "mousedown";    touch = evt.changedTouches[0];break;
+    case "touchmove":        type = "mousemove";    touch = evt.changedTouches[0];break;
+    case "touchend":        type = "mouseup";    touch = evt.changedTouches[0];break;
+  }
+  newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0,
+    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
+    evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
+  evt.originalTarget.dispatchEvent(newEvt);
+}
+</pre>
+
+<h3 id="Calling_preventDefault()_only_on_a_second_touch">Calling preventDefault() only on a second touch</h3>
+
+<p>One technique for preventing things like <code>pinchZoom</code> on a page is to call <code>preventDefault()</code> on the second touch in a series. This behavior is not well defined in the touch events spec, and results in different behavior for different browsers (i.e., iOS will prevent zooming but still allow panning with both fingers; Android will allow zooming but not panning; Opera and Firefox currently prevent all panning and zooming.) Currently, it's not recommended to depend on any particular behavior in this case, but rather to depend on meta viewport to prevent zooming.</p>
+
+<dl>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome("22.0") }}</td>
+   <td>{{ CompatGeckoDesktop("18.0") }}<br>
+    Disabled with 24 ({{ bug(888304) }})</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>(Yes)</td>
+   <td>{{ CompatGeckoMobile("6.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko_notes">Gecko notes</h3>
+
+<p>The <code>dom.w3c_touch_events.enabled</code> tri-state preference can be used to disable (0), enable (1), and auto-detect(2) support for standard touch events; by default, they're on auto-detect(2). After changing the preference, you must restart the browser for the changes to take effect.</p>
+
+<div class="note">
+<p>Prior to {{Gecko("12.0")}}, Gecko did not support multi-touch; only one touch at a time was reported.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> As of {{Gecko("24.0")}}, the touch events support introduced with {{Gecko("18.0")}} has been disabled on the <strong>desktop</strong> version of Firefox, as some popular sites including Google and Twitter are not working properly. Once the bug is fixed, the API will be enabled again. To enable it anyway, open <code>about:config</code> and set the <code>dom.w3c_touch_events.enabled</code> pref to <code>2</code>. The mobile versions including <a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a> and <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> are not affected by this change. Also, the API has been enabled on the Metro-style version of Firefox for Windows 8.</p>
+</div>
+
+<div class="note"><strong>Note: </strong>Prior to {{Gecko("6.0") }}, Gecko offered a <a href="/en/DOM/Touch_events_(Mozilla_experimental)" title="en/DOM/Touch events (Mozilla experimental)">proprietary touch event API</a>. That API is now deprecated; you should switch to this one.</div>
diff --git a/files/pt-br/web/guide/gráficos/index.html b/files/pt-br/web/guide/gráficos/index.html
new file mode 100644
index 0000000000..6abc792433
--- /dev/null
+++ b/files/pt-br/web/guide/gráficos/index.html
@@ -0,0 +1,49 @@
+---
+title: Gráficos na Web
+slug: Web/Guide/Gráficos
+tags:
+  - 2D
+  - 3D
+  - Canvas
+  - Gráficos(2)
+  - HTML5
+  - SVG
+  - Web
+  - WebGL
+  - WebRTC
+translation_of: Web/Guide/Graphics
+---
+<p><span class="seoSummary">Sites modernos da Web e aplicativos frequentemente precisam exibir gráficos.</span> Imagens estáticas podem ser exibidas facilmente usando o elemento {{HTMLElement("img")}} ou configurando o background de elementos HTML usando a propriedade {{cssxref("background-image")}}. Você também pode construir gráficos em tempo real ou manipular imagens depois de criadas. <span class="seoSummary">Esses artigos fornecem conhecimento de como você pode realizar isto.</span></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Gráficos_2D">Gráficos 2D</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Canvas">Canvas</a></dt>
+ <dd>Um guia introdutório do uso do elemento {{HTMLElement("canvas")}} para desenhar gráficos 2D usando JavaScript.</dd>
+ <dt><a href="/pt-BR/docs/SVG">SVG</a></dt>
+ <dd><em>Scalable Vector Graphics</em> (SVG) ou Gráficos de Vetor Escalável permite que você use linhas, curvas e outras formas geométricas para renderizar gráficos. Com vetores, você pode criar imagens que se redimensionam perfeitamente para qualquer tamanho.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="https://developer.mozilla.org/en-US/docs/tag/Graphics">Ver todos...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Gráficos_3D">Gráficos 3D</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/WebGL">WebGL</a></dt>
+ <dd>Um guia para começar com WebGL, a API gráfica 3D para a Web. Esta tecnologia permite que você use o padrão OpenGL ES em conteúdo Web.</dd>
+</dl>
+
+<h2 id="Video">Video</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Usando áudio e vídeo em HTML5</a></dt>
+ <dd>Embarcando vídeo ou áudio na página web e controlando a reprodução desses elementos.</dd>
+ <dt><a href="/pt-BR/docs/WebRTC">WebRTC</a></dt>
+ <dd><span id="result_box" lang="pt"><span>O RTC in WebRTC é um padrão para <em>Real-Time Communications </em>(comunicação em tempo real), tecnologia que permite a</span></span> <span class="short_text" id="result_box" lang="pt"><span>transmissão</span></span> <span lang="pt"><span> de áudio ou vídeo e o compartilhamento de dados entre os clientes de navegadores (<em>peers</em>).</span></span></dd>
+</dl>
+</div>
+</div>
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/advanced_animations/index.html b/files/pt-br/web/guide/html/canvas_tutorial/advanced_animations/index.html
new file mode 100644
index 0000000000..23f072420e
--- /dev/null
+++ b/files/pt-br/web/guide/html/canvas_tutorial/advanced_animations/index.html
@@ -0,0 +1,386 @@
+---
+title: Advanced animations
+slug: Web/Guide/HTML/Canvas_tutorial/Advanced_animations
+tags:
+  - Animation
+  - Animations
+  - Canvas
+  - animated
+  - efeitos em animações
+translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div>
+
+<div class="summary">
+<p>No último capítulo nós fizemos algumas <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">animações básicas </a> e fomos conhecer caminhos para conseguir com que as coisas se movessem. Nesta parte prestaremos mais atenção nos movimentos e vamos adicionar algumas físicas para fazer nossas animações mais avançadas.</p>
+</div>
+
+<h2 id="Desenhe_uma_bola">Desenhe uma bola</h2>
+
+<p>Nós estamos indo usar uma bola para nossa animação estudada. Então vamos pintar aquela bola desenhada no canvas. O seguinte código configurará.</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="600" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p> Como usual, nós precisamos de um contexto de desenho primeiro. Para desenhar a bola, nós criaremos um objeto bola ao qual contém propriedades e um método draw() para pintar no canvas.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();</pre>
+
+<p>Nada de especial aqui, a bola é atualmente um simples círculos e desenha com ajuda de </p>
+
+<p>{{domxref("CanvasRenderingContext2D.arc()", "arc()")}} method.</p>
+
+<h2 id="Adicionando_velocidade">Adicionando velocidade</h2>
+
+<p>Agora que você tem a bola, Nós estamos prontos para adicionar uma animação como nós temos aprendido no <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">último capítulo</a> deste tutorial. Denovo, {{domxref("window.requestAnimationFrame()")}} ajuda-nos a controlar a animação. a bola pega o movimento adicionando um vetor de velocidade para a posição. Para cada frame, N[ós também {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}}o canvas para remover velhor círculos da prioridade dos frames.</p>
+
+<pre class="brush: js; highlight:[8,9,24,25]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+</pre>
+
+<h2 id="Limites">Limites</h2>
+
+<p>Sem um teste de limite de colisão nossa bola correria para fora do canvas rapidamente. Nós precisamos checar se a posição x e y da bola está fora das dimensões do canvas e invertida a direção do vetor de velocidade. Para fazer isto, Nós adicionamos a seguinte checagem para o método draw():</p>
+
+<pre class="brush: js">if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+  ball.vx = -ball.vx;
+}</pre>
+
+<h3 id="Primeira_demonstração">Primeira demonstração</h3>
+
+<p>Deixe-me ver como isto fica em ação até agora. Mova seu mouse dentro do canvas para iniciar a animação.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("First_demo", "610", "310")}}</p>
+
+<h2 id="Aceleração">Aceleração</h2>
+
+<p>Para fazer o movimento tão real, você para jogar com a velocidade como isto, por exemplo:</p>
+
+<pre class="brush: js">ball.vy *= .99;
+ball.vy += .25;</pre>
+
+<p>Esta diminuição da velocidade vertical para cada frame. Assim que a bola somente saltar no chão no final.</p>
+
+<div class="hidden">
+<h6 id="Second_demo">Second demo</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  ball.vy *= .99;
+  ball.vy += .25;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Second_demo", "610", "310")}}</p>
+
+<h2 id="Efeito_de_arrastar">Efeito de arrastar</h2>
+
+<p>Até agora nós temos feito uso do {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} méthodo quando limpar as prioridades do frame.Se você substituir este método com um semi-transparente {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, você pode fácilmente criar um efeito de arrastar.</p>
+
+<pre class="brush: js">ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+ctx.fillRect(0, 0, canvas.width, canvas.height);</pre>
+
+<div class="hidden">
+<h6 id="Third_demo">Third demo</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  ball.vy *= .99;
+  ball.vy += .25;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Third_demo", "610", "310")}}</p>
+
+<h2 id="Adicione_um_controle_de_mouse">Adicione um controle de mouse</h2>
+
+<p> </p>
+
+<p>Para conseguir alguns controles sobre a bola, nós podemos fazer isto seguindo nosso mouse usando o evento <a href="/en-US/docs/Web/Reference/Events/mousemove">mouseover</a>, por exemplo. O <a href="/en-US/docs/Web/Events/click">clique </a>por exemplo. O evento <code><a href="/en-US/docs/Web/Events/click">clique </a>que</code> libera a bola e deixa seu limite de novo.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e) {
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener('click', function(e) {
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+</pre>
+
+<p>Mova a bola usando seu mouse e libere - o com um clique.</p>
+
+<p>{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}</p>
+
+<h2 id="Sair">Sair</h2>
+
+<p>Este curto capítulo somente explica algumas técnicas para criar as mais avançadas animações. Há muito mais! Como adicionar um paddle, alguns bricks, e tornar este demo dentro de um jogo <a href="http://en.wikipedia.org/wiki/Breakout_%28video_game%29">Breakout</a>? Cheque a nossa área de Desenvolvimento de jogos para mais artigos de jogos.</p>
+
+<h2 id="Veja_também">Veja também:</h2>
+
+<ul>
+ <li>{{domxref("window.requestAnimationFrame()")}}</li>
+ <li><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Efficient animation for web games</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</p>
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html b/files/pt-br/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html
new file mode 100644
index 0000000000..f711570b9f
--- /dev/null
+++ b/files/pt-br/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html
@@ -0,0 +1,725 @@
+---
+title: Aplicando estilos e cores
+slug: Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors
+translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</div>
+
+<div class="summary">
+<p><span id="result_box" lang="pt"><span>No capítulo sobre</span></span> <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Web/Guide/HTML/Canvas_tutorial/Drawing_shapes">desenhando formas com canvas</a>, <span id="result_box" lang="pt"><span>usamos apenas os estilos padrões de preenchimento e linha.</span> <span>Aqui vamos explorar as opções do canvas que temos à nossa disposição para tornar nossos desenhos um pouco mais atraentes.</span> <span>Você aprenderá a adicionar cores diferentes, estilos de linhas, gradientes, padrões e sombras aos seus desenhos.</span></span></p>
+</div>
+
+<h2 id="Colors" name="Colors">Cores</h2>
+
+<p><span id="result_box" lang="pt"><span>Até agora só vimos métodos do contexto de desenho.</span> <span>Se quisermos aplicar cores a uma forma, existem duas propriedades importantes que podemos utilizar:</span></span> <code>fillStyle</code> e <code>strokeStyle</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}</dt>
+ <dd><span class="short_text" id="result_box" lang="pt"><span>Define o estilo usado ao preencher (fill) formas</span></span>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}</dt>
+ <dd><span class="short_text" id="result_box" lang="pt"><span>Define o estilo para os contornos (strokes) das formas.</span></span></dd>
+</dl>
+
+<p><code>color</code> é uma string que representa um CSS {{cssxref("&lt;color&gt;")}}, um objeto gradiente, ou um objeto padrão. <span id="result_box" lang="pt"><span>Examinaremos sobre objetos de gradiente e padrão mais tarde.</span> <span>Por padrão, a cor do contorno (stroke color) e a cor de preenchimento (fill color) estão definidos como preto</span></span> (valor de cor no CSS é <code>#000000</code>).</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Quando você definir as propriedades <code>strokeStyle</code> e/ou <code>fillStyle</code> , o novo valor será o padrão para todas as formas desenhadas a partir de então.  Para toda forma que você quiser uma cor diferente, você vai precisar alterar o valor da propriedade <code>fillStyle</code> ou <code>strokeStyle</code>.</p>
+</div>
+
+<p>As strings validas que você pode inserir devem, de acordo com a especificação ser valores CSS {{cssxref("&lt;color&gt;")}}. Cada um dos exemplos a seguir, descrevem a mesma cor.</p>
+
+<pre class="brush: js notranslate">// these all set the fillStyle to 'orange'
+
+ctx.fillStyle = 'orange';
+ctx.fillStyle = '#FFA500';
+ctx.fillStyle = 'rgb(255, 165, 0)';
+ctx.fillStyle = 'rgba(255, 165, 0, 1)';
+</pre>
+
+<h3 id="A_fillStyle_example" name="A_fillStyle_example">Um <code>fillStyle</code> exemplo</h3>
+
+<p>Neste exemplo, nós vamos mais uma vez utilizar dois <code>for</code> loops para desenhar uma grade de retângulos, cada um com uma cor diferente. A imagem do resultado, deve parecer como a captura de tela. Não existe nada de muito espetacular acontecendo aqui. Nós usamos as duas variéveis <code>i</code> and <code>j</code> para gerar uma única cor em RGB para cada quadrado, e apenas modificando os valores vermelho e verde. O canal azul possui um valor fixo. Modificando os canais, você pode gerar todos os tipos de paletas. Aumentando os passos, você pode alcançar algo que se parece com a paleta de cores dos usuários de Photoshop.</p>
+
+<pre class="brush: js;highlight[5,6] notranslate">function draw() {
+  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>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>O resultado se parece com isto:</p>
+
+<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p>
+
+<h3 id="A_strokeStyle_example" name="A_strokeStyle_example">Um <code>strokeStyle</code> exemplo</h3>
+
+<p>Este exemplo é similar com o anterior, porém utiliza a propriedade <code>strokeStyle</code> para alterar a cor de contorno das formas. Nós usamos o método <code>arc()</code>  para desenhar círculos ao invés de quadrados.</p>
+
+<pre class="brush: js;highlight[5,6] notranslate">  function draw() {
+    var ctx = document.getElementById('canvas').getContext('2d');
+    for (var i = 0; i &lt; 6; i++) {
+      for (var j = 0; j &lt; 6; j++) {
+        ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' +
+                         Math.floor(255 - 42.5 * j) + ')';
+        ctx.beginPath();
+        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
+        ctx.stroke();
+      }
+    }
+  }
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>O resultado se parece com isto:</p>
+
+<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p>
+
+<h5 id="Transparency" name="Transparency">Transparência<br>
+ Além de desenhar formas opacas na tela, também podemos desenhar formas semi-transparentes (ou translúcidas). Isso é feito definindo a propriedade globalAlpha ou atribuindo uma cor semitransparente ao estilo de stroke e / ou fill style.</h5>
+
+<dl>
+ <dt>
+ <h5 id="domxrefCanvasRenderingContext2D.globalAlpha_globalAlpha_transparencyValue">{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}</h5>
+ </dt>
+ <dd>
+ <p>Aplica o valor de transparência especificado a todas as formas futuras desenhadas na tela. O valor deve estar entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco). Este valor é 1.0 (totalmente opaco) por padrão.<br>
+  A propriedade globalAlpha pode ser útil se você quiser desenhar muitas formas na tela com transparência semelhante, mas, caso contrário, geralmente é mais útil definir a transparência em formas individuais ao definir suas cores.</p>
+
+ <p>Como as propriedades strokeStyle e fillStyle aceitam os valores de cor CSS rgba, podemos usar a notação a seguir para atribuir uma cor transparente a eles.</p>
+ </dd>
+</dl>
+
+<pre class="brush: js notranslate">// Assigning transparent colors to stroke and fill style
+
+ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
+ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+</pre>
+
+<p>A função rgba () é semelhante à função rgb (), mas possui um parâmetro extra. O último parâmetro define o valor da transparência dessa cor específica. O intervalo válido é novamente entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).</p>
+
+<h3 id="A_globalAlpha_example" name="A_globalAlpha_example">Um exemplo globalAlpha</h3>
+
+<p>Neste exemplo, desenharemos um plano de fundo de quatro quadrados coloridos diferentes. Além disso, desenharemos um conjunto de círculos semi-transparentes. A propriedade globalAlpha é configurada em 0.2, que será usada para todas as formas a partir desse ponto. Cada passo no loop for desenha um conjunto de círculos com um raio crescente. O resultado final é um gradiente radial. Ao sobrepor cada vez mais círculos um sobre o outro, reduzimos efetivamente a transparência dos círculos que já foram desenhados. Ao aumentar a contagem de etapas e, com efeito, desenhar mais círculos, o plano de fundo desapareceria completamente do centro da imagem.</p>
+
+<pre class="brush: js;highlight[15] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // draw background
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0, 0, 75, 75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75, 0, 75, 75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0, 75, 75, 75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75, 75, 75, 75);
+  ctx.fillStyle = '#FFF';
+
+  // set transparency value
+  ctx.globalAlpha = 0.2;
+
+  // Draw semi transparent circles
+  for (i = 0; i &lt; 7; i++) {
+    ctx.beginPath();
+    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p>
+
+<h3 id="An_example_using_rgba" name="An_example_using_rgba()">Um exemplo usando o <code>rgba()</code></h3>
+
+<p>Neste segundo exemplo, fazemos algo semelhante ao anterior, mas em vez de desenhar círculos uns sobre os outros, desenhei pequenos retângulos com crescente opacidade. O uso de rgba () oferece um pouco mais de controle e flexibilidade, pois podemos definir o estilo de preenchimento e traçado/stroke individualmente.</p>
+
+<pre class="brush: js;highlight[16] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Draw background
+  ctx.fillStyle = 'rgb(255, 221, 0)';
+  ctx.fillRect(0, 0, 150, 37.5);
+  ctx.fillStyle = 'rgb(102, 204, 0)';
+  ctx.fillRect(0, 37.5, 150, 37.5);
+  ctx.fillStyle = 'rgb(0, 153, 255)';
+  ctx.fillRect(0, 75, 150, 37.5);
+  ctx.fillStyle = 'rgb(255, 51, 0)';
+  ctx.fillRect(0, 112.5, 150, 37.5);
+
+  // Draw semi transparent rectangles
+  for (var i = 0; i &lt; 10; i++) {
+    ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')';
+    for (var j = 0; j &lt; 4; j++) {
+      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
+    }
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p>
+
+<h2 id="Line_styles" name="Line_styles">Line styles</h2>
+
+<p>Existem várias propriedades que permitem estilizar linhas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}</dt>
+ <dd>Define a largura das linhas desenhadas no futuro.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}</dt>
+ <dd>Define a aparência dos fins das linhas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}</dt>
+ <dd>Define a aparência dos "cantos" onde as linhas se encontram.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}</dt>
+ <dd>Estabelece um limite na mitra quando duas linhas se juntam em um ângulo agudo, para permitir controlar a espessura da junção.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}</dt>
+ <dd>Retorna a matriz de padrão de traço de linha atual que contém um número par de números não negativos</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}</dt>
+ <dd><span style="">Define o padrão de traço da linha atual.</span></dd>
+ <dd><strong style="">{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}</strong></dd>
+ <dd>Especifica onde iniciar uma matriz de traços em uma linha.</dd>
+</dl>
+
+<p>Você entenderá melhor o que eles fazem observando os exemplos abaixo.</p>
+
+<h3 id="A_lineWidth_example" name="A_lineWidth_example"><span style="">Um exemplo lineWidth</span></h3>
+
+<p>A largura da linha é a espessura do traçado centralizado no caminho especificado. Em outras palavras, a área desenhada se estende até a metade da largura da linha em ambos os lados do caminho.</p>
+
+<p>  Como as coordenadas da tela não fazem referência direta aos pixels, deve-se tomar cuidado especial para obter linhas horizontais e verticais nítidas.</p>
+
+<p>No exemplo abaixo, 10 linhas retas são desenhadas com larguras de linhas crescentes. A linha na extrema esquerda tem 1,0 unidades de largura. No entanto, as linhas de espessura à esquerda e todas as outras linhas com número inteiro ímpar não aparecem nítidas, devido ao posicionamento do caminho.</p>
+
+<pre class="brush: js;highlight[4] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i &lt; 10; i++) {
+    ctx.lineWidth = 1 + i;
+    ctx.beginPath();
+    ctx.moveTo(5 + i * 14, 5);
+    ctx.lineTo(5 + i * 14, 140);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p>
+
+<p>A obtenção de linhas nítidas requer a compreensão de como os caminhos são traçados. Nas imagens abaixo, a grade representa a grade de coordenadas da tela. Os quadrados entre as linhas de grade são pixels reais na tela. Na primeira imagem da grade abaixo, um retângulo de (2,1) a (5,5) é preenchido. A área inteira entre eles (vermelho claro) cai nos limites dos pixels, portanto, o retângulo preenchido resultante terá bordas nítidas.<br>
+ <img alt="" class="internal" src="https://mdn.mozillademos.org/files/201/Canvas-grid.png"></p>
+
+<p>Se você considerar um caminho de (3,1) a (3,5) com uma espessura de linha de 1,0, você terminará com a situação na segunda imagem. A área real a ser preenchida (azul escuro) se estende apenas até a metade dos pixels dos dois lados do caminho. Uma aproximação disso deve ser renderizada, o que significa que esses pixels são sombreados apenas parcialmente e resultam em toda a área (azul claro e azul escuro) sendo preenchida com uma cor apenas metade da escuridão da cor real do traço. É o que acontece com a linha de largura 1.0 no código de exemplo anterior.</p>
+
+<p>Para corrigir isso, você precisa ser muito preciso na criação do seu caminho. Sabendo que uma linha de largura 1,0 estenderá meia unidade para ambos os lados do caminho, criar o caminho de (3,5,1) a (3,5,5) resulta na situação da terceira imagem - a largura da linha 1,0 termina completamente e preenchendo com precisão uma única linha vertical de pixel.<br>
+  </p>
+
+<div class="note">
+<p><strong>Nota: Esteja ciente de que, no nosso exemplo de linha vertical, a posição Y ainda faz referência a uma posição de linha de grade inteira - se não tivesse, veríamos pixels com meia cobertura nos pontos de extremidade (mas observe também que esse comportamento depende do estilo lineCap atual cujo valor padrão é butt; você pode calcular traçados consistentes com coordenadas de meio pixel para linhas de largura ímpar, configurando o estilo lineCap como quadrado, para que a borda externa do traçado ao redor do ponto de extremidade seja estendida automaticamente para cobrir o pixel inteiro exatamente).</strong></p>
+
+<p>Observe também que apenas os pontos de extremidade inicial e final de um caminho são afetados: se um caminho for fechado com closePath (), não haverá ponto inicial e final; em vez disso, todos os pontos de extremidade no caminho são conectados ao segmento anterior e ao próximo anexado usando a configuração atual do estilo lineJoin, cujo valor padrão é mitra, com o efeito de estender automaticamente as bordas externas dos segmentos conectados ao seu ponto de interseção. que o traçado renderizado cobrirá exatamente os pixels completos centralizados em cada ponto final se esses segmentos conectados forem horizontais e / ou verticais). Veja as próximas duas seções para demonstrações desses estilos de linha adicionais.</p>
+</div>
+
+<p>Para linhas de largura uniforme, cada metade acaba sendo uma quantidade inteira de pixels, portanto, você deseja um caminho entre pixels (ou seja, (3,1) a (3,5)), em vez de no meio dos pixels .</p>
+
+<p>Embora seja um pouco doloroso ao trabalhar inicialmente com gráficos 2D escalonáveis, prestar atenção à grade de pixels e à posição dos caminhos garante que seus desenhos pareçam corretos, independentemente da escala ou de qualquer outra transformação envolvida. Uma linha vertical de 1,0 largura desenhada na posição correta se tornará uma linha nítida de 2 pixels quando aumentada em 2 e aparecerá na posição correta.</p>
+
+<h3 id="A_lineCap_example" name="A_lineCap_example">Exemplo lineCap.</h3>
+
+<p>A propriedade lineCap determina como os pontos finais de cada linha são desenhados. Existem três valores possíveis para essa propriedade e são: bunda, redondo e quadrado. Por padrão, essa propriedade está configurada para butt.<img alt="" src="https://mdn.mozillademos.org/files/236/Canvas_linecap.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>butt</code></dt>
+ <dd>As extremidades das linhas são quadradas nos pontos finais.</dd>
+ <dt><code>round</code></dt>
+ <dd>As extremidades das linhas são arredondadas.<br>
+ arredondadas.</dd>
+ <dt><code>square</code></dt>
+ <dd>As extremidades das linhas são ajustadas ao quadrado, adicionando uma caixa com a mesma largura e metade da altura da espessura da linha.</dd>
+</dl>
+
+<p>Neste exemplo, desenharemos três linhas, cada uma com um valor diferente para a propriedade lineCap. Também adicionei dois guias para ver as diferenças exatas entre os três. Cada uma dessas linhas começa e termina exatamente nesses guias.</p>
+
+<p>A linha à esquerda usa a opção de topo padrão. Você notará que está desenhado completamente alinhado com as guias. O segundo está definido para usar a opção redonda. Isso adiciona um semicírculo ao final que tem um raio com metade da largura da linha. A linha à direita usa a opção quadrada. Isso adiciona uma caixa com largura igual e metade da altura da espessura da linha.</p>
+
+<pre class="brush: js;highlight[18] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineCap = ['butt', 'round', 'square'];
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10, 10);
+  ctx.lineTo(140, 10);
+  ctx.moveTo(10, 140);
+  ctx.lineTo(140, 140);
+  ctx.stroke();
+
+  // Draw lines
+  ctx.strokeStyle = 'black';
+  for (var i = 0; i &lt; lineCap.length; i++) {
+    ctx.lineWidth = 15;
+    ctx.lineCap = lineCap[i];
+    ctx.beginPath();
+    ctx.moveTo(25 + i * 50, 10);
+    ctx.lineTo(25 + i * 50, 140);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p>
+
+<h3 id="A_lineJoin_example" name="A_lineJoin_example">Um exemplo de lineJoin</h3>
+
+<p>A propriedade lineJoin determina como dois segmentos de conexão (de linhas, arcos ou curvas) com comprimentos diferentes de zero em uma forma são unidos (segmentos degenerados com comprimentos zero, cujos pontos finais e pontos de controle especificados são exatamente na mesma posição, são ignorados) .</p>
+
+<p>Existem três valores possíveis para essa propriedade: round, chanfro e mitra. Por padrão, essa propriedade está configurada para mitra. Observe que a configuração lineJoin não terá efeito se os dois segmentos conectados tiverem a mesma direção, porque nenhuma área de junção será adicionada neste caso.<img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>round</code></dt>
+ <dd>Arredonda os cantos de uma forma preenchendo um setor adicional de disco centralizado no ponto final comum dos segmentos conectados. O raio desses cantos arredondados é igual à metade da largura da linha.</dd>
+ <dt><code>bevel</code></dt>
+ <dd>Preenche uma área triangular adicional entre o ponto final comum dos segmentos conectados e os cantos retangulares externos separados de cada segmento.</dd>
+ <dt><code>miter</code></dt>
+ <dd>Os segmentos conectados são unidos estendendo suas bordas externas para se conectarem em um único ponto, com o efeito de preencher uma área adicional em forma de losango. Essa configuração é efetuada pela propriedade miterLimit, explicada abaixo.</dd>
+</dl>
+
+<p>O exemplo abaixo desenha três caminhos diferentes, demonstrando cada uma dessas três configurações de propriedade lineJoin; a saída é mostrada acima.</p>
+
+<pre class="brush: js;highlight[6] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineJoin = ['round', 'bevel', 'miter'];
+  ctx.lineWidth = 10;
+  for (var i = 0; i &lt; lineJoin.length; i++) {
+    ctx.lineJoin = lineJoin[i];
+    ctx.beginPath();
+    ctx.moveTo(-5, 5 + i * 40);
+    ctx.lineTo(35, 45 + i * 40);
+    ctx.lineTo(75, 5 + i * 40);
+    ctx.lineTo(115, 45 + i * 40);
+    ctx.lineTo(155, 5 + i * 40);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p>
+
+<h3 id="A_demo_of_the_miterLimit_property" name="A_demo_of_the_miterLimit_property">Uma demonstração da propriedade miterLimit</h3>
+
+<p>Como você viu no exemplo anterior, ao unir duas linhas com a opção de esquadria, as bordas externas das duas linhas de junção são estendidas até o ponto em que elas se encontram. Para linhas com ângulos amplos entre si, esse ponto não está longe do ponto de conexão interno. No entanto, à medida que os ângulos entre cada linha diminuem, a distância (comprimento da mitra) entre esses pontos aumenta exponencialmente.</p>
+
+<p>A propriedade miterLimit determina a que distância o ponto de conexão externo pode ser colocado do ponto de conexão interno. Se duas linhas excederem esse valor, uma junção de chanfro será desenhada. Observe que o comprimento máximo da esquadria é o produto da largura da linha medida no sistema de coordenadas atual, pelo valor dessa propriedade miterLimit (cujo valor padrão é 10.0 no HTML {{HTMLElement ("canvas")}}}), portanto, o O miterLimit pode ser definido independentemente da escala de exibição atual ou de quaisquer transformações afins de caminhos: apenas influencia a forma efetivamente renderizada das arestas da linha.</p>
+
+<p>Mais exatamente, o limite da mitra é a proporção máxima permitida do comprimento da extensão (na tela HTML, é medida entre o canto externo das arestas unidas da linha e o ponto de extremidade comum dos segmentos de conexão especificados no caminho) pela metade do espessura da linha. Pode ser definido de maneira equivalente como a proporção máxima permitida da distância entre os pontos interno e externo da junção das arestas e a largura total da linha. Em seguida, é igual ao coecante da metade do ângulo interno mínimo dos segmentos de conexão abaixo dos quais nenhuma junção de esquadria será renderizada, mas apenas uma junção de chanfro:</p>
+
+<ul>
+ <li><code>miterLimit</code> = <strong>max</strong> <code>miterLength</code> / <code>lineWidth</code> = 1 / <strong>sin</strong> ( <strong>min</strong> <em>θ</em> / 2 )</li>
+ <li>O limite padrão de esquadria de 10.0 removerá todos os mitros para ângulos agudos abaixo de 11 graus.</li>
+ <li>Um limite de esquadria igual a √2 ≈ 1.4142136 (arredondado para cima) retira os mitros para todos os ângulos agudos, mantendo as juntas de esquadria apenas para ângulos obtusos ou retos.</li>
+ <li>Um limite de mitra igual a 1,0 é válido, mas desativará todos os atenuadores.</li>
+ <li>Valores abaixo de 1,0 são inválidos para o limite de mitra.</li>
+</ul>
+
+<p>Aqui está uma pequena demonstração na qual você pode definir o mitreLimit dinamicamente e ver como isso afeta as formas na tela. As linhas azuis mostram onde estão os pontos inicial e final de cada uma das linhas no padrão em zigue-zague.</p>
+
+<p>Se você especificar um valor de miterLimite abaixo de 4.2 nesta demonstração, nenhum dos cantos visíveis poderá ser uma extensão de mitra, mas apenas com um pequeno canal próximo às linhas azuis; com um limite máximo acima de 10, a maioria dos cantos nesta demonstração deve ser levada a uma meia-esquadria das linhas azuis e a altura está diminuindo entre os cantos da esquerda para a direita porque eles estão conectados com ângulos crescentes; com valores intermediários, os cantos do lado esquerdo ou apenas um canto próximo às linhas azuis e os cantos do lado direito com uma extensão de esquadria (também com uma altura decrescente).</p>
+
+<pre class="brush: js;highlight[18] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Clear canvas
+  ctx.clearRect(0, 0, 150, 150);
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.lineWidth   = 2;
+  ctx.strokeRect(-5, 50, 160, 50);
+
+  // Set line styles
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 10;
+
+  // check input
+  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
+    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
+  } else {
+    alert('Value must be a positive number');
+  }
+
+  // Draw lines
+  ctx.beginPath();
+  ctx.moveTo(0, 100);
+  for (i = 0; i &lt; 24 ; i++){
+    var dy = i % 2 == 0 ? 25 : -25 ;
+    ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
+  }
+  ctx.stroke();
+  return false;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;&lt;/td&gt;
+    &lt;td&gt;Change the &lt;code&gt;miterLimit&lt;/code&gt; by entering a new value below and clicking the redraw button.&lt;br&gt;&lt;br&gt;
+      &lt;form onsubmit="return draw();"&gt;
+        &lt;label&gt;Miter limit&lt;/label&gt;
+        &lt;input type="text" size="3" id="miterLimit"/&gt;
+        &lt;input type="submit" value="Redraw"/&gt;
+      &lt;/form&gt;
+    &lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<pre class="brush: js notranslate">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit;
+draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}</p>
+
+<h3 id="Usando_linhas_tracejadas">Usando linhas tracejadas</h3>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">O método </span></font>setLineDash</code> e a propriedade <code>lineDashOffset</code> especificam o padrão de traço para as linhas. O método <code>setLineDash</code> aceita uma lista de números que especificam distâncias para desenhar alternadamente entre uma linha e uma lacuna. Já a propriedade <code>lineDashOffset</code> define a distância até onde se deve iniciar a linha.</p>
+
+<p>Neste exemplo, criaremos um efeito de formigas caminhando. É uma técnica de animação frequentemente usada em computação gráfica, pois ajuda o usuário a fazer uma distinção entre a borda e o plano de fundo animando a borda. Mais tarde neste tutorial, você aprenderá como fazer <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">animações básicas</a>.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="110" height="110"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js;highlight[6] notranslate">var ctx = document.getElementById('canvas').getContext('2d');
+var offset = 0;
+
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10, 10, 100, 100);
+}
+
+function march() {
+  offset++;
+  if (offset &gt; 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();</pre>
+
+<p>{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}</p>
+
+<h2 id="Gradients" name="Gradients">Gradients</h2>
+
+<p>Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a {{domxref("CanvasGradient")}} object by using one of the following methods. We can then assign this object to the <code>fillStyle</code> or <code>strokeStyle</code> properties.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}</dt>
+ <dd>Creates a linear gradient object with a starting point of (<code>x1</code>, <code>y1</code>) and an end point of (<code>x2</code>, <code>y2</code>).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}</dt>
+ <dd>Creates a radial gradient. The parameters represent two circles, one with its center at (<code>x1</code>, <code>y1</code>) and a radius of <code>r1</code>, and the other with its center at (<code>x2</code>, <code>y2</code>) with a radius of <code>r2</code>.</dd>
+</dl>
+
+<p>For example:</p>
+
+<pre class="brush: js notranslate">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+</pre>
+
+<p>Once we've created a <code>CanvasGradient</code> object we can assign colors to it by using the <code>addColorStop()</code> method.</p>
+
+<dl>
+ <dt>{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}</dt>
+ <dd>Creates a new color stop on the <code>gradient</code> object. The <code>position</code> is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the <code>color</code> argument must be a string representing a CSS {{cssxref("&lt;color&gt;")}}, indicating the color the gradient should reach at that offset into the transition.</dd>
+</dl>
+
+<p>You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.</p>
+
+<pre class="brush: js notranslate">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+lineargradient.addColorStop(0, 'white');
+lineargradient.addColorStop(1, 'black');
+</pre>
+
+<h3 id="A_createLinearGradient_example" name="A_createLinearGradient_example">A <code>createLinearGradient</code> example</h3>
+
+<p>In this example, we'll create two different gradients. As you can see here, both the <code>strokeStyle</code> and <code>fillStyle</code> properties can accept a <code>canvasGradient</code> object as valid input.</p>
+
+<pre class="brush: js;highlight[5,11] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#26C000');
+  lingrad.addColorStop(1, '#fff');
+
+  var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
+
+  // assign gradients to fill and stroke styles
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+
+  // draw shapes
+  ctx.fillRect(10, 10, 130, 130);
+  ctx.strokeRect(50, 50, 50, 50);
+
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.</p>
+
+<p>In the second gradient, we didn't assign the starting color (at position 0.0) since it wasn't strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.</p>
+
+<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}</p>
+
+<h3 id="A_createRadialGradient_example" name="A_createRadialGradient_example">A <code>createRadialGradient</code> example</h3>
+
+<p>In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).</p>
+
+<pre class="brush: js;highlight[5,10,15,20] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
+  radgrad.addColorStop(0, '#A7D30C');
+  radgrad.addColorStop(0.9, '#019F62');
+  radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)');
+
+  var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
+  radgrad2.addColorStop(0, '#FF5F98');
+  radgrad2.addColorStop(0.75, '#FF0188');
+  radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)');
+
+  var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
+  radgrad3.addColorStop(0, '#00C9FF');
+  radgrad3.addColorStop(0.8, '#00B5E2');
+  radgrad3.addColorStop(1, 'rgba(0, 201, 255, 0)');
+
+  var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
+  radgrad4.addColorStop(0, '#F4F201');
+  radgrad4.addColorStop(0.8, '#E4C700');
+  radgrad4.addColorStop(1, 'rgba(228, 199, 0, 0)');
+
+  // draw shapes
+  ctx.fillStyle = radgrad4;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad3;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad2;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0, 0, 150, 150);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.</p>
+
+<p>The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient <code>#019F62 = rgba(1,159,98,1)</code>.</p>
+
+<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}</p>
+
+<h2 id="Patterns" name="Patterns">Patterns</h2>
+
+<p>In one of the examples on the previous page, we used a series of loops to create a pattern of images. There is, however, a much simpler method: the <code>createPattern()</code> method.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}</dt>
+ <dd>Creates and returns a new canvas pattern object. <code>image</code> is a {{domxref("CanvasImageSource")}} (that is, an {{domxref("HTMLImageElement")}}, another canvas, a {{HTMLElement("video")}} element, or the like. <code>type</code> is a string indicating how to use the image.</dd>
+</dl>
+
+<p>The type specifies how to use the image in order to create the pattern, and must be one of the following string values:</p>
+
+<dl>
+ <dt><code>repeat</code></dt>
+ <dd>Tiles the image in both vertical and horizontal directions.</dd>
+ <dt><code>repeat-x</code></dt>
+ <dd>Tiles the image horizontally but not vertically.</dd>
+ <dt><code>repeat-y</code></dt>
+ <dd>Tiles the image vertically but not horizontally.</dd>
+ <dt><code>no-repeat</code></dt>
+ <dd>Doesn't tile the image. It's used only once.</dd>
+</dl>
+
+<p>We use this method to create a {{domxref("CanvasPattern")}} object which is very similar to the gradient methods we've seen above. Once we've created a pattern, we can assign it to the <code>fillStyle</code> or <code>strokeStyle</code> properties. For example:</p>
+
+<pre class="brush: js notranslate">var img = new Image();
+img.src = 'someimage.png';
+var ptrn = ctx.createPattern(img, 'repeat');
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Like with the <code>drawImage()</code> method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly.</p>
+</div>
+
+<h3 id="A_createPattern_example" name="A_createPattern_example">A <code>createPattern</code> example</h3>
+
+<p>In this last example, we'll create a pattern to assign to the <code>fillStyle</code> property. The only thing worth noting is the use of the image's <code>onload</code> handler. This is to make sure the image is loaded before it is assigned to the pattern.</p>
+
+<pre class="brush: js;highlight[10] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // create new image object to use as pattern
+  var img = new Image();
+  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+  img.onload = function() {
+
+    // create pattern
+    var ptrn = ctx.createPattern(img, 'repeat');
+    ctx.fillStyle = ptrn;
+    ctx.fillRect(0, 0, 150, 150);
+
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+
+<p>The result looks like this:</p>
+</div>
+
+<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}</p>
+
+<h2 id="Shadows">Shadows</h2>
+
+<p>Using shadows involves just four properties:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}</dt>
+ <dd>Indicates the horizontal distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}</dt>
+ <dd>Indicates the vertical distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}</dt>
+ <dd>Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}</dt>
+ <dd>A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.</dd>
+</dl>
+
+<p>The properties <code>shadowOffsetX</code> and <code>shadowOffsetY</code> indicate how far the shadow should extend from the object in the X and Y directions; these values aren't affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.</p>
+
+<p>The <code>shadowBlur</code> property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.</p>
+
+<p>The <code>shadowColor</code> property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Shadows are only drawn for <code>source-over</code> <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Web/Guide/HTML/Canvas_tutorial/Compositing">compositing operations</a>.</p>
+</div>
+
+<h3 id="A_shadowed_text_example">A shadowed text example</h3>
+
+<p>This example draws a text string with a shadowing effect.</p>
+
+<pre class="brush: js;highlight[4,5,6,7] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowBlur = 2;
+  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
+
+  ctx.font = '20px Times New Roman';
+  ctx.fillStyle = 'Black';
+  ctx.fillText('Sample String', 5, 30);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="80"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p>
+
+<p>We will look at the <code>font</code> property and <code>fillText</code> method in the next chapter about <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">drawing text</a>.</p>
+
+<h2 id="Canvas_fill_rules">Canvas fill rules</h2>
+
+<p>When using <code>fill</code> (or {{domxref("CanvasRenderingContext2D.clip", "clip")}} and {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersects itself or is nested.<br>
+ <br>
+ Two values are possible:</p>
+
+<ul>
+ <li><code><strong>"nonzero</strong></code>": The <a class="external external-icon" href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero winding rule</a>, which is the default rule.</li>
+ <li><code><strong>"evenodd"</strong></code>: The <a class="external external-icon" href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd winding rule</a>.</li>
+</ul>
+
+<p>In this example we are using the <code>evenodd</code> rule.</p>
+
+<pre class="brush: js;highlight[6] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.beginPath();
+  ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
+  ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
+  ctx.fill('evenodd');
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="100" height="100"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</p>
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/basic_animations/index.html b/files/pt-br/web/guide/html/canvas_tutorial/basic_animations/index.html
new file mode 100644
index 0000000000..125e0874a7
--- /dev/null
+++ b/files/pt-br/web/guide/html/canvas_tutorial/basic_animations/index.html
@@ -0,0 +1,331 @@
+---
+title: Basic animations
+slug: Web/Guide/HTML/Canvas_tutorial/Basic_animations
+translation_of: Web/API/Canvas_API/Tutorial/Basic_animations
+---
+<p>Já que estamos usando JavaScript para controlar {{HTMLElement("canvas")}} elementos, também é muito fácil criar animações interativas. Fazer animações mais complexas pode levar um tempo extra; esperamos introduzir um novo artigo para auxiliar sobre isso em breve.</p>
+
+<p>Provavelmente a maior limitação é que uma vez que uma forma é desenhada, ela permanece assim. Se precisarmos mover, temos que redesenhar-lá e tudo que foi desenhado antes. Demora muito tempo pra redesenhar frames complexos e a desempenho depende altamente da velocidade do computador em que está rodando.</p>
+
+<h2 id="Basic_animation_steps" name="Basic_animation_steps">Passos para animação básica</h2>
+
+<p>Estes são os passos que você precisa para desenhar um frame:</p>
+
+<ol>
+ <li><strong>Limpe o canvas</strong><br>
+  A menos que a forma que você vai desenhar preencha o canvas completo(por exemplo, uma imagem de fundo), você precisa limpar todas as formas que foram desenhadas anteriormente. O caminho mais fácil para fazer isso é usando o método clearRect().</li>
+ <li><strong>Salve o estado da tela</strong><br>
+  Se você estiver mudando alguma configuração(como estilos, transformações, etc.) que afete o estado do canvas e você quer garantir que o estado original seja usado sempre que um quadro é desenhado, você precisa salvar esse estado original.</li>
+ <li><strong>Desenhe formas animadas</strong><br>
+  A etapa em que você faz a renderização real do quadro.</li>
+ <li><strong>Restaure o estado do canvas</strong><br>
+  Se você salvou o estado, restaure-o antes de desenhar um novo quadro.</li>
+</ol>
+
+<h2 id="Controlling_an_animation" name="Controlling_an_animation">Controlando uma animação</h2>
+
+<p>Formas são desenhos na tela usando os canvas métodos diretamente ou chamando personalizadas. Em circunstancias normais, nós somente vemos esses resultados aparecerem na tela quando o script termina de ser executado. Por exemplo, não é possível fazer uma animação dentro de um loop for.</p>
+
+<p>Isso significa que precisamos de um jeito para executar nossas funções de desenho durante um período de tempo. Existem dois jeitos para controlar uma animação como essa.</p>
+
+<h3 id="Atualizações_agendadas">Atualizações agendadas</h3>
+
+<p>Primeiramente há as funções {{domxref("window.setInterval()")}} e {{domxref("window.setTimeout()")}}, que podem ser usadas para chamar uma função específica durante um certo período definido de tempo.</p>
+
+<div class="note">
+<p>Nota: O método {{domxref("window.requestAnimationFrame()")}} agora é a maneira recomendada de programar animações. Vamos atualizar esse tutorial para abortar isso em breve.</p>
+</div>
+
+<dl>
+ <dt><code>setInterval(<em>função</em>,<em>atraso</em>)</code></dt>
+ <dd>Inicia repetidamente executando a função específica pela função a cada milissegundo de atraso.</dd>
+ <dt><code>setTimeout(<em>função</em>,<em>atraso</em>)</code></dt>
+ <dd>Executa a função especificada pela função em milissegundos de atraso.</dd>
+</dl>
+
+<p>Se você não quer nenhuma interação do usuário, é melhor usar a função setInterval() que executa repeditamente o código fornecido.</p>
+
+<h3 id="Atualizar_na_interação_do_usuário">Atualizar na interação do usuário</h3>
+
+<p>O segundo método que nós podemos usar para controlar uma animação é a entrada do usuário. Se nós quiséssimos criar um jogo, nós poderiamos usar os eventos do teclado ou mouse para controlar a animação. Ao definir {{domxref("EventListener")}}s, nós pegamos qualquer interação do usuário e executamos nossas funções da animação. </p>
+
+<p>Se você quer a interação do usuário, você pode usar uma versão menor ou a versão principal do nosso framework pra animação:</p>
+
+<pre>var myAnimation = new MiniDaemon(null, animateShape, 500, Infinity);</pre>
+
+<p>ou</p>
+
+<pre>var myAnimation = new Daemon(null, animateShape, 500, Infinity);</pre>
+
+<p>Nos exemplos abaixo, no entanto, usamos o método {{domxref("window.setInterval()")}} para controlar a animação. Na parte inferior dessa página há alguns links de exemplos que usam {{domxref("window.setTimeout()")}}.</p>
+
+<h4 id="Um_sistema_solar_animado">Um sistema solar animado</h4>
+
+<p>Esse exemplo anima um pequeno modelo do nosso sistema solar.</p>
+
+<pre class="brush: js">var sun = new Image();
+var moon = new Image();
+var earth = new Image();
+function init(){
+  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
+  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
+  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  setInterval(draw,100);
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.clearRect(0,0,300,300); // clear canvas
+
+  ctx.fillStyle = 'rgba(0,0,0,0.4)';
+  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
+  ctx.save();
+  ctx.translate(150,150);
+
+  // Earth
+  var time = new Date();
+  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
+  ctx.translate(105,0);
+  ctx.fillRect(0,-12,50,24); // Shadow
+  ctx.drawImage(earth,-12,-12);
+
+  // Moon
+  ctx.save();
+  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
+  ctx.translate(0,28.5);
+  ctx.drawImage(moon,-3.5,-3.5);
+  ctx.restore();
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
+  ctx.stroke();
+
+  ctx.drawImage(sun,0,0,300,300);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">init();</pre>
+</div>
+
+<p>{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}</p>
+
+<h4 id="Um_relógio_animado">Um relógio animado</h4>
+
+<p>Esse exemplos desenha um relógio animado, mostrando sua hora atual.</p>
+
+<pre class="brush: js">function init(){
+  clock();
+  setInterval(clock,1000);
+}
+
+function clock(){
+  var now = new Date();
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0,0,150,150);
+  ctx.translate(75,75);
+  ctx.scale(0.4,0.4);
+  ctx.rotate(-Math.PI/2);
+  ctx.strokeStyle = "black";
+  ctx.fillStyle = "white";
+  ctx.lineWidth = 8;
+  ctx.lineCap = "round";
+
+  // Hour marks
+  ctx.save();
+  for (var i=0;i&lt;12;i++){
+    ctx.beginPath();
+    ctx.rotate(Math.PI/6);
+    ctx.moveTo(100,0);
+    ctx.lineTo(120,0);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // Minute marks
+  ctx.save();
+  ctx.lineWidth = 5;
+  for (i=0;i&lt;60;i++){
+    if (i%5!=0) {
+      ctx.beginPath();
+      ctx.moveTo(117,0);
+      ctx.lineTo(120,0);
+      ctx.stroke();
+    }
+    ctx.rotate(Math.PI/30);
+  }
+  ctx.restore();
+
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr&gt;=12 ? hr-12 : hr;
+
+  ctx.fillStyle = "black";
+
+  // write Hours
+  ctx.save();
+  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20,0);
+  ctx.lineTo(80,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // write Minutes
+  ctx.save();
+  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28,0);
+  ctx.lineTo(112,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // Write seconds
+  ctx.save();
+  ctx.rotate(sec * Math.PI/30);
+  ctx.strokeStyle = "#D40000";
+  ctx.fillStyle = "#D40000";
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30,0);
+  ctx.lineTo(83,0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0,0,10,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95,0,10,0,Math.PI*2,true);
+  ctx.stroke();
+  ctx.fillStyle = "rgba(0,0,0,0)";
+  ctx.arc(0,0,3,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0,0,142,0,Math.PI*2,true);
+  ctx.stroke();
+
+  ctx.restore();
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">init();</pre>
+</div>
+
+<p>{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}</p>
+
+<h4 id="Um_panorama_em_loop">Um panorama  em loop</h4>
+
+<p>Nesse exemplos, um panorama é rolado da esquerda pra direita. Nós estamos usando uma imagem do Parque Nacional de Yosemite que tiramos da Wikipedia, mas você pode usar qualquer imagem que fosse maior que a tela.</p>
+
+<pre class="brush: js">var img = new Image();
+
+// User Variables - customize these to change the image being scrolled, its
+// direction, and the speed.
+
+img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; //lower is faster
+var scale = 1.05;
+var y = -4.5; //vertical offset
+
+// Main program
+
+var dx = 0.75;
+var imgW;
+var imgH;
+var x = 0;
+var clearX;
+var clearY;
+var ctx;
+
+img.onload = function() {
+    imgW = img.width*scale;
+    imgH = img.height*scale;
+    if (imgW &gt; CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas
+    if (imgW &gt; CanvasXSize) { clearX = imgW; } // image larger than canvas
+    else { clearX = CanvasXSize; }
+    if (imgH &gt; CanvasYSize) { clearY = imgH; } // image larger than canvas
+    else { clearY = CanvasYSize; }
+    //Get Canvas Element
+    ctx = document.getElementById('canvas').getContext('2d');
+    //Set Refresh Rate
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    //Clear Canvas
+    ctx.clearRect(0,0,clearX,clearY);
+    //If image is &lt;= Canvas Size
+    if (imgW &lt;= CanvasXSize) {
+        //reset, start from beginning
+        if (x &gt; (CanvasXSize)) { x = 0; }
+        //draw aditional image
+        if (x &gt; (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }
+    }
+    //If image is &gt; Canvas Size
+    else {
+        //reset, start from beginning
+        if (x &gt; (CanvasXSize)) { x = CanvasXSize-imgW; }
+        //draw aditional image
+        if (x &gt; (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
+    }
+    //draw image
+    ctx.drawImage(img,x,y,imgW,imgH);
+    //amount to move
+    x += dx;
+}
+</pre>
+
+<p>Abaixo é o {{HTMLElement("canvas")}} em que a imagem é rolada. Note que a largura e a altura especificadas aqui devem corresponder aos valores das variáveis ​​CanvasXZSize e CanvasYSize no código JavaScript. </p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="800" height="200"&gt;&lt;/canvas&gt;</pre>
+
+<p><strong>Live sample</strong></p>
+
+<p>{{EmbedLiveSample("A_looping_panorama", "830", "230")}}</p>
+
+<h2 id="Other_examples" name="Other_examples">Outros exemplos</h2>
+
+<dl>
+ <dt><a class="external" href="http://www.gartic.net/" title="http://www.gartic.net/">Gartic</a></dt>
+ <dd>Jogo de desenho para multiplayers.</dd>
+ <dt><a class="external" href="http://www.abrahamjoffe.com.au/ben/canvascape/">Canvascape</a></dt>
+ <dd>Um jogo de aventura 3D (tiro em primeira pessoa).</dd>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster" title="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster">A basic ray-caster</a></dt>
+ <dd>Um bom exemplo de como fazer animações usando os controles do teclado.</dd>
+ <dt><a class="external" href="http://andrewwooldridge.com/canvas/canvasgame001/canvasgame002.html">canvas adventure</a></dt>
+ <dd>Outro bom exemplo que usa controles de teclado.</dd>
+ <dt><a class="external" href="http://www.blobsallad.se/">An interactive Blob</a></dt>
+ <dd>Divirta-se com Blob.</dd>
+ <dt><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Flying through a starfield</a></dt>
+ <dd>Voe através de estrelas, círculos ou quadrados.</dd>
+ <dt><a class="external" href="http://igrapher.com/" title="http://igrapher.com/">iGrapher</a></dt>
+ <dd>Um exemplo que ilustra os dados do mercado de ações.</dd>
+</dl>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/JavaScript/Timers" title="/en-US/docs/JavaScript/Timers">JavaScript timers</a></li>
+ <li><a href="/en-US/docs/DOM/window.setInterval#A_little_framework" title="/en-US/docs/DOM/window.setInterval#A_little_framework"><code>setInterval</code> – A little framework</a></li>
+ <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons">JavaScript Daemons Management</a></li>
+ <li><a href="/en-US/docs/DOM/HTMLCanvasElement" title="/en-US/docs/DOM/HTMLCanvasElement">HTMLCanvasElement</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Compositing", "Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas")}}</p>
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/compositing/exemplo/index.html b/files/pt-br/web/guide/html/canvas_tutorial/compositing/exemplo/index.html
new file mode 100644
index 0000000000..87de5aa19d
--- /dev/null
+++ b/files/pt-br/web/guide/html/canvas_tutorial/compositing/exemplo/index.html
@@ -0,0 +1,294 @@
+---
+title: Exemplo de Composição
+slug: Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo
+tags:
+  - Canvas
+  - Example
+  - HTML5
+  - Tutorial
+translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example
+---
+<div>{{CanvasSidebar}}</div>
+
+<p>Esse exemplo demonstra várias <a href="/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation">operações de composição</a>. A saída se parece assim:</p>
+
+<p>{{ EmbedLiveSample('Exemplo_de_composição', '', '7240px', '', 'Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo') }}</p>
+
+<h2 id="Exemplo_de_composição">Exemplo de composição</h2>
+
+<p><span id="result_box" lang="pt"><span>Este código configura os valores globais usados pelo restante do programa.</span></span></p>
+
+<pre class="brush: js">var canvas1 = document.createElement("canvas");
+var canvas2 = document.createElement("canvas");
+var gco = [ 'Source-over','Source-in','Source-out','Source-atop',
+            'Destination-over','Destination-in','Destination-out','Destination-atop',
+            'Lighter', 'Copy','XOR', 'Multiply', 'Screen', 'Overlay', 'Darken',
+            'Lighten', 'Color-dodge', 'Color-burn', 'Hard-light', 'Soft-light',
+            'Difference', 'Exclusion', 'HUE', 'Saturation', 'Color', 'Luminosity'
+          ].reverse();
+var gcoText = [
+'<span id="result_box" lang="pt"><span>Essa é a configuração padrão e desenha novas formas sobre o conteúdo da tela (canvas) existente</span></span>.',
+'<span id="result_box" lang="pt"><span class="alt-edited">A nova forma é desenhada apenas onde a nova forma e a tela (canvas) de destino se sobrepõem.</span> <span class="alt-edited">Todo o resto é transparente.</span></span> ',
+'A nova forma é desenhada onde ela não sobrepõe o conteúdo da tela (canvas) existente.',
+'A nova forma é somente desenahda onde ela sobrepõe o conteúdo da tela (canvas) existente.',
+'Novas formas são desenhadas por trás do conteúdo da tela (canvas) existente.',
+'O conteúdo da tela (canvas) existente é mantido onde ambos, a nova forma e o conteúdo da tela (canvas) existente, se sobrepõe. Todo o resto é transparente.',
+'O conteúdo existente é mantido onde ele não sobrepõe a nova forma.',
+'A tela (canvas) existente só é mantida onde ela sobrepõe a nova forma. A nova forma é desenahda por trás do conteúdo canvas.',
+'Onde ambas formas se sebrepõem a cor é determinada adicionando seus respectivos valores de cores.',
+'Somente a nova forma é mostrada.',
+'Formas são feitas transparentes onde ambos se sobrepõem e todo o resto é desenhado normalmente.',
+'<span id="result_box" lang="pt"><span>Os pixels da camada superior são multiplicados pelo pixel correspondente da camada inferior.</span> <span>Uma imagem mais escura é o resultado.</span></span> ',
+'<span id="result_box" lang="pt"><span>Os pixels são invertidos, multiplicados e invertidos novamente.</span> <span>Uma imagem mais clara é o resultado (oposto de multiplicar)</span></span>',
+'<span id="result_box" lang="pt"><span>Uma combinação de multiplicação e tela.</span> <span>As partes escuras na camada base tornam-se mais escuras e as partes claras tornam-se mais claras.</span></span>',
+'Mantêm os pixels mais escuro de ambas camadas.',
+'Mantêm os pixels mais claro de ambas camadas.',
+'<span id="result_box" lang="pt"><span>Divide a camada inferior pela camada superior invertida.</span></span>',
+'<span id="result_box" lang="pt"><span>Divide a camada inferior invertida pela camada superior e, em seguida, inverte o resultado.</span></span>',
+'<span id="result_box" lang="pt"><span>Uma combinação de multiplicação e tela como sobreposição, mas com a camada superior e inferior trocada.</span></span>',
+'<span id="result_box" lang="pt"><span>Uma versão mais suave da luz.</span> <span>Preto ou branco puro não resulta em preto ou branco puro.</span></span>',
+'<span id="result_box" lang="pt"><span>Subtrai a camada inferior da camada superior ou vice-versa para obter sempre um valor positivo.</span></span>',
+'<span class="short_text" id="result_box" lang="pt"><span>Como diferença, mas com menor contraste.</span></span>',
+'<span id="result_box" lang="pt"><span>Preserva o luma e o croma da camada inferior, enquanto adota a tonalidade da camada superior.</span></span>',
+'<span id="result_box" lang="pt"><span>Preserva o luma e a tonalidade da camada inferior, enquanto adota o croma da camada superior.</span></span>',
+'<span id="result_box" lang="pt"><span>Preserva a luma da camada inferior, enquanto adota a tonalidade e o croma da camada superior.</span></span>',
+'<span id="result_box" lang="pt"><span>Preserva a tonalidade e o croma da camada inferior, enquanto adota a luma da camada superior.</span></span>'
+          ].reverse();
+var width = 320;
+var height = 340;</pre>
+
+<h3 id="Programa_principal">Programa principal</h3>
+
+<p><span id="result_box" lang="pt"><span>Quando a página é carregada, esse código é executado para configurar e executar o exemplo:</span></span></p>
+
+<pre class="brush: js">window.onload = function() {
+    // lum em sRGB
+    var lum = {
+        r: 0.33,
+        g: 0.33,
+        b: 0.33
+    };
+    // redimensiona canvas
+    canvas1.width = width;
+    canvas1.height = height;
+    canvas2.width = width;
+    canvas2.height = height;
+    lightMix();
+    colorSphere();
+    runComposite();
+    return;
+};
+</pre>
+
+<p><span id="result_box" lang="pt"><span>E esse código, <code>runComposite ()</code>, manipula a maior parte do trabalho, contando com várias funções utilitárias para fazer as partes difíceis.</span></span></p>
+
+<pre class="brush: js">function createCanvas() {
+    var canvas = document.createElement("canvas");
+    canvas.style.background = "url("+op_8x8.data+")";
+    canvas.style.border = "1px solid #000";
+    canvas.style.margin = "5px";
+    canvas.width = width/2;
+    canvas.height = height/2;
+    return canvas;
+}
+
+function runComposite() {
+    var dl = document.createElement("dl");
+    document.body.appendChild(dl);
+    while(gco.length) {
+        var pop = gco.pop();
+        var dt = document.createElement("dt");
+        dt.textContent = pop;
+        dl.appendChild(dt);
+        var dd = document.createElement("dd");
+        var p = document.createElement("p");
+        p.textContent = gcoText.pop();
+        dd.appendChild(p);
+
+        var canvasToDrawOn = createCanvas();
+        var canvasToDrawFrom = createCanvas();
+        var canvasToDrawResult = createCanvas();
+
+        var ctx = canvasToDrawResult.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = pop;
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = "source-over";
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText(pop, 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawOn.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('Conteúdo existente', 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawFrom.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('Novo conteúdo', 5, height/2 - 5);
+        ctx.restore();
+
+        dd.appendChild(canvasToDrawOn);
+        dd.appendChild(canvasToDrawFrom);
+        dd.appendChild(canvasToDrawResult);
+
+        dl.appendChild(dd);
+    }
+};
+</pre>
+
+<h3 id="Funções_Utilitárias">Funções Utilitárias</h3>
+
+<p><span id="result_box" lang="pt"><span>O programa depende de várias funções utilitárias.</span></span></p>
+
+<pre class="brush: js">var lightMix = function() {
+    var ctx = canvas2.getContext("2d");
+    ctx.save();
+    ctx.globalCompositeOperation = "lighter";
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(255,0,0,1)";
+    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,0,255,1)";
+    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,255,0,1)";
+    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
+    ctx.fill();
+    ctx.restore();
+    ctx.beginPath();
+    ctx.fillStyle = "#f00";
+    ctx.fillRect(0,0,30,30)
+    ctx.fill();
+};
+</pre>
+
+<pre class="brush: js">var colorSphere = function(element) {
+    var ctx = canvas1.getContext("2d");
+    var width = 360;
+    var halfWidth = width / 2;
+    var rotate = (1 / 360) * Math.PI * 2; // per degree
+    var offset = 0; // scrollbar offset
+    var oleft = -20;
+    var otop = -20;
+    for (var n = 0; n &lt;= 359; n ++) {
+        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
+        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
+        gradient.addColorStop(0, "rgba(0,0,0,0)");
+        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
+        gradient.addColorStop(1, "rgba(255,255,255,1)");
+        ctx.beginPath();
+        ctx.moveTo(oleft + halfWidth, otop);
+        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
+        ctx.lineTo(oleft + halfWidth + 6, otop);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+        ctx.translate(oleft + halfWidth, otop + halfWidth);
+        ctx.rotate(rotate);
+        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
+    }
+    ctx.beginPath();
+    ctx.fillStyle = "#00f";
+    ctx.fillRect(15,15,30,30)
+    ctx.fill();
+    return ctx.canvas;
+};
+</pre>
+
+<pre class="brush: js">// HSV (1978) = H: Hue (tom)
+//              S: Saturation (Saturação)
+//              V: Value (Valor)
+Color = {};
+Color.HSV_RGB = function (o) {
+    var H = o.H / 360,
+        S = o.S / 100,
+        V = o.V / 100,
+        R, G, B;
+    var A, B, C, D;
+    if (S == 0) {
+        R = G = B = Math.round(V * 255);
+    } else {
+        if (H &gt;= 1) H = 0;
+        H = 6 * H;
+        D = H - Math.floor(H);
+        A = Math.round(255 * V * (1 - S));
+        B = Math.round(255 * V * (1 - (S * D)));
+        C = Math.round(255 * V * (1 - (S * (1 - D))));
+        V = Math.round(255 * V);
+        switch (Math.floor(H)) {
+            case 0:
+                R = V;
+                G = C;
+                B = A;
+                break;
+            case 1:
+                R = B;
+                G = V;
+                B = A;
+                break;
+            case 2:
+                R = A;
+                G = V;
+                B = C;
+                break;
+            case 3:
+                R = A;
+                G = B;
+                B = V;
+                break;
+            case 4:
+                R = C;
+                G = A;
+                B = V;
+                break;
+            case 5:
+                R = V;
+                G = A;
+                B = B;
+                break;
+        }
+    }
+    return {
+        R: R,
+        G: G,
+        B: B
+    };
+};
+
+var createInterlace = function (size, color1, color2) {
+    var proto = document.createElement("canvas").getContext("2d");
+    proto.canvas.width = size * 2;
+    proto.canvas.height = size * 2;
+    proto.fillStyle = color1; // top-left
+    proto.fillRect(0, 0, size, size);
+    proto.fillStyle = color2; // top-right
+    proto.fillRect(size, 0, size, size);
+    proto.fillStyle = color2; // bottom-left
+    proto.fillRect(0, size, size, size);
+    proto.fillStyle = color1; // bottom-right
+    proto.fillRect(size, size, size, size);
+    var pattern = proto.createPattern(proto.canvas, "repeat");
+    pattern.data = proto.canvas.toDataURL();
+    return pattern;
+};
+
+var op_8x8 = createInterlace(8, "#FFF", "#eee");</pre>
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/compositing/index.html b/files/pt-br/web/guide/html/canvas_tutorial/compositing/index.html
new file mode 100644
index 0000000000..6d9ff5c33d
--- /dev/null
+++ b/files/pt-br/web/guide/html/canvas_tutorial/compositing/index.html
@@ -0,0 +1,112 @@
+---
+title: Compositing and clipping
+slug: Web/Guide/HTML/Canvas_tutorial/Compositing
+translation_of: Web/API/Canvas_API/Tutorial/Compositing
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</div>
+
+<div class="summary">
+<p>Em todo os nossos <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations">exemplos prévios</a>, formas estavam sempre desenhadas uma em cima das outras. Este é mais do que adequado para a maioria das situações, mas é limita a ordem no qual a composição das formas são construídas.</p>
+
+<p>Nós podemos, no entanto, mudar este comportamento por configurar a propriedade <code>globalCompositeOperation</code>. Além disto, a propriedade clipe permite-nos esconder indesejáveis partes da forma.</p>
+</div>
+
+<h2 id="globalCompositeOperation" name="globalCompositeOperation"><code>globalCompositeOperation</code></h2>
+
+<p>Nós podemos somente desenhar novas formas atrás das existentes formas mas nós podemos também usar isto para mascarar certas áreas, limpar seções do canvas(não limitado para retângulos como o {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} métodos faz) e mais.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}</dt>
+ <dd>Este conjunto de operações compostas para aplicar quando desenha novas formas, onde type é uma string identificando quais das 12 operações compostas usar.</dd>
+</dl>
+
+<p>Veja os seguintes <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing/Example">exemplos de composição</a> para o código dos seguintes exemplos.</p>
+
+<p>{{ EmbedLiveSample('Exemplo_de_composição', '', '', '', 'Web/Guide/HTML/Canvas_tutorial/Compositing/Exemplo') }}</p>
+
+<h2 id="Clipping_paths" name="Clipping_paths">Caminhos de recorte (Clipping path)</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;">Um caminho de recorte (Clipping path) é como uma forma normal canvas mas isto age como uma máscara para esconder indesejáveis partes de formas. Isto é visualizado na imagem na direita. A forma da estrela vermelha é nosso caminho de recorte. Tudo que cai do lado de fora deste caminho não sai desenhado no canvas.</p>
+
+<p>Se nós compararmos caminho de recorte para a propriedade <code>globalCompositeOperation</code> nós temos visto acima, nós veremos dois modelos de composição que alcança mais ou menos o mesmo efeito no source-in e source-atop. A mais importante diferença entre os dois é que o caminho de recorte nunca desenha algo na tela e o caminho de recorte nunca afeta por adicionar novas formas. Isto faz o caminho do recorte ideal para desenhar múltiplos na área restrita.</p>
+
+<p>No capítulo sobre <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">formas de desenho (drawing shapes)</a> eu somente mencionei os métodos stroke() e fill(), mas há um método que nós podemos usar com caminhos chamado clip().</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.clip", "clip()")}}</dt>
+ <dd>Volta o caminho atualmente sendo construído no caminho de recorte atual.</dd>
+</dl>
+
+<p>Você usou clip() em vez de closePath() para fechar um caminho e voltar para dentro de um caminho de recorte em vez de contornar (stroking) ou completar (filling) o caminho.</p>
+
+<p>Por padrão o elemento {{HTMLElement("canvas")}} tem um caminho de recorte que é exatamente o mesmo tamanho do canvas em si. Em outras palavras, nenhum recorte ocorreu.</p>
+
+<h3 id="A_clip_example" name="A_clip_example">Um exemplo do recorte</h3>
+
+<p>Neste exemplo, Nós usaremos um recorte circular para restringir o desenho do conjunto de inícios randômicos para uma região particular</p>
+
+<pre class="brush: js;highlight[9]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.translate(75, 75);
+
+  // Create a circular clipping path
+  ctx.beginPath();
+  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
+  ctx.clip();
+
+  // draw background
+  var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
+  lingrad.addColorStop(0, '#232256');
+  lingrad.addColorStop(1, '#143778');
+
+  ctx.fillStyle = lingrad;
+  ctx.fillRect(-75, -75, 150, 150);
+
+  // draw stars
+  for (var j = 1; j &lt; 50; j++) {
+    ctx.save();
+    ctx.fillStyle = '#fff';
+    ctx.translate(75 - Math.floor(Math.random() * 150),
+                  75 - Math.floor(Math.random() * 150));
+    drawStar(ctx, Math.floor(Math.random() * 4) + 2);
+    ctx.restore();
+  }
+
+}
+
+function drawStar(ctx, r) {
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(r, 0);
+  for (var i = 0; i &lt; 9; i++) {
+    ctx.rotate(Math.PI / 5);
+    if (i % 2 === 0) {
+      ctx.lineTo((r / 0.525731) * 0.200811, 0);
+    } else {
+      ctx.lineTo(r, 0);
+    }
+  }
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">canvas id="canvas" width="150" height="150" /canvas</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>Nas primeiras linhas de código, nós desenhamos um retângulo negro do tamanho do canvas como um pano de fundo, então traduzido da origem para o centro. Próximo, nós criamos o recorte circular do caminho recortado para desenhar um arco e chamá-lo clip(). Caminho de recortes são também parte do canvas com estado salvo. Se nós procuramos guardar o caminho do recorte original nós podemos ter salvo o estado do canvas antes de criar mais um.</p>
+
+<p>Tudo que for desenhado depois de criado o caminho de recorte somente aparecerá dentro daquele caminho. Você pode ver isto claramente no gradiente linear que está desenhado adiante. Depois deste conjunto de de 50 randomicamente posicionadas e escaladas estrelas for desenhada. Usando a função customizada drawStar(). De novo as estrelas somente aparecerão dentro do caminho de recorte definido.</p>
+
+<p>Um exemplo de recorte:</p>
+
+<p><img src="https://mdn.mozillademos.org/files/208/Canvas_clip.png"></p>
+
+<p>{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</p>
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/conclusão/index.html b/files/pt-br/web/guide/html/canvas_tutorial/conclusão/index.html
new file mode 100644
index 0000000000..9cd393b652
--- /dev/null
+++ b/files/pt-br/web/guide/html/canvas_tutorial/conclusão/index.html
@@ -0,0 +1,49 @@
+---
+title: Conclusão
+slug: Web/Guide/HTML/Canvas_tutorial/Conclusão
+translation_of: Web/API/Canvas_API/Tutorial/Finale
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</div>
+
+<div class="summary">
+<p>Parabéns! Você terminou o <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a>! Este conhecimento ajudará você a fazer ótimos gráficos 2D na web.</p>
+</div>
+
+<h2 id="Mais_exemplos_e_tutoriais">Mais exemplos e tutoriais</h2>
+
+<p>Há uma variedade de demonstrações e mais explicações sobre canvas nesses sites:</p>
+
+<dl>
+ <dt><a href="http://codepen.io/search?q=canvas">Codepen.io</a></dt>
+ <dd>Front End Developer Playground &amp; Code Editor no navegador.</dd>
+ <dt><a href="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></dt>
+ <dd>Exemplos para a maioria das APIs canvas.</dd>
+ <dt><a href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of Canvas tutorials</a></dt>
+ <dd><span id="result_box" lang="pt"><span>Uma ótima fundação para codificação visual em JavaScript</span></span> .</dd>
+ <dt><a href="/en-US/docs/Games">Game development</a></dt>
+ <dd><span id="result_box" lang="pt"><span>O jogo é uma das atividades de computador mais populares.</span> <span>Novas tecnologias estão chegando constantemente para possibilitar o desenvolvimento de jogos melhores e mais poderosos que podem ser executados em qualquer navegador da Web compatível com os padrões.</span></span></dd>
+</dl>
+
+<h2 id="Outras_Web_APIs">Outras Web APIs</h2>
+
+<p>Essas APIs podem ser úteis, quando trabalhando mais com canvas e gráficos:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt>
+ <dd>API para renderização interativa de gráficos 3D.</dd>
+ <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt>
+ <dd><span id="result_box" lang="pt"><span>Scalable Vector Graphics permitem que você descreva imagens como conjuntos de vetores (linhas) e formas, a fim de permitir que eles sejam redimensionados sem problemas, independentemente do tamanho em que são desenhados.</span></span></dd>
+ <dt><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio</a></dt>
+ <dd><span id="result_box" lang="pt"><span>A Web Audio API fornece um sistema poderoso e versátil para controlar o áudio na Web, permitindo que os desenvolvedores escolham fontes de áudio, adicionem efeitos ao áudio, criem visualizações de áudio, apliquem efeitos espaciais (como panning) e muito mais.</span></span></dd>
+</dl>
+
+<h2 id="Questions">Questions</h2>
+
+<dl>
+ <dt><a href="http://stackoverflow.com/questions/tagged/canvas">Stackoverflow</a></dt>
+ <dd>Perguntas marcadas como "canvas".</dd>
+ <dt><a href="/en-US/docs/MDN">Comentários sobre esse tutorial – A comunidade MDN de documentação</a></dt>
+ <dd><span id="result_box" lang="pt"><span>Se você tiver algum comentário sobre este tutorial ou quiser nos agradecer, fique à vontade para entrar em contato conosco!</span></span></dd>
+</dl>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}</p>
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/drawing_shapes/index.html b/files/pt-br/web/guide/html/canvas_tutorial/drawing_shapes/index.html
new file mode 100644
index 0000000000..f54fca780e
--- /dev/null
+++ b/files/pt-br/web/guide/html/canvas_tutorial/drawing_shapes/index.html
@@ -0,0 +1,581 @@
+---
+title: Desenhando formas com canvas
+slug: Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
+tags:
+  - Canvas
+  - Gráficos(2)
+  - HTML
+  - HTML Canvas
+  - HTML5
+  - Intermediário
+  - Tutorial
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div>
+
+<div class="summary">
+<p>Agora que criamos nosso <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/Canvas_API/Tutorial/Basic_usage">ambiente em canvas</a>, podemos entrar nos detalhes de como desenhar no canvas. No final deste artigo, você terá aprendido a desenhar retângulos, triângulos, linhas, arcos e curvas, proporcionando familiaridade com algumas das formas básicas. Trabalhar com caminhos (<em>shapes</em>) é essencial ao desenhar objetos na tela e veremos como isso pode ser feito.</p>
+</div>
+
+<h2 id="A_grade">A grade</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">Antes que possamos começar a desenhar, precisamos falar sobre a grade de tela ou <strong>espaço de coordenadas</strong>. O modelo HTML na página anterior tinha um elemento canvas de 150 pixels de largura e 150 pixels de altura. À direita, você verá este canvas com a grade padrão sobreposta. Normalmente 1 unidade na grade corresponde a um pixel na tela. A origem desta grade está posicionada no canto superior esquerdo (coordenadas (0,0)). Todos os elementos são colocados em relação a esta origem. Assim, a posição do canto superior esquerdo do quadrado azul, se torna x pixels dos pixels da esquerda e y a partir do topo (coordenadas (x,y)). Mais tarde nesse tutorial vamos ver como podemos traduzir a origem para uma posição diferente, girar a grade e até mesmo escaloná-la. Por enquanto vamos ficar com o padrão.</p>
+
+<h2 id="Desenhando_retângulos">Desenhando retângulos</h2>
+
+<p>Diferente do {{Glossary("SVG")}} , o {{HTMLElement("canvas")}} suporta somente formas primitivas: retângulos. Todas as outras formas são criadas a partir da combinação de um ou mais caminhos (<em>paths</em>), lista de pontos conectados por uma linha. Felizmente, temos uma variedade de funções de desenho que tornam possíveis criar formas muito complexas.</p>
+
+<p>Primeiramente vamos olhar o retângulo. Aqui está listado três funções para desenhar retângulos pelo canvas:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}</dt>
+ <dd>Desenha um retângulo preenchido.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}</dt>
+ <dd>Desenha a borda do retângulo.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}</dt>
+ <dd>Limpa um retângulo específico, tornando-o totalmente transparente.</dd>
+</dl>
+
+<p>Cada umas das funções recebem os mesmos parâmetros. <code>x</code> e <code>y</code> determinam a posição no canvas (em relação a origem) no canto superior esquerdo do retângulo. O <code>width</code> (largura) e o <code>height</code> (altura) definem o tamanho do retângulo.</p>
+
+<p>Abaixo esta listado a função <code>draw()</code> da página anterior, porém utilizando as três funções.</p>
+
+<h3 id="Exemplo_de_forma_retangular">Exemplo de forma retangular</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25, 25, 100, 100);
+    ctx.clearRect(45, 45, 60, 60);
+    ctx.strokeRect(50, 50, 50, 50);
+  }
+}</pre>
+
+<p>O resultado desse exemplo é mostrado abaixo.</p>
+
+<p>{{EmbedLiveSample('Exemplo_de_forma_retangular', 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p>
+
+<p>A função <code>fillRect()</code> desenha um grande quadrado preto de 100 pixels. A função <code>clearRect()</code> por sua vez apaga um quadrado de 60x60 pixels a partir do centro, por fim, a função <code>strokeRect()</code> é chamada para criar uma borda de 50x50 pixels em volta do quadrado apagado.</p>
+
+<p>Posteriormente veremos duas alternativas à função <code>clearRect()</code>, nós também aprenderemos como alterar a cor e o estilo das linhas nas camadas renderizadas.</p>
+
+<p>Ao contrário das funções de <em>paths</em> que veremos na próxima seção, todas as três funções de retângulo desenham imediatamente no canvas.</p>
+
+<h2 id="Desenhando_caminhosregiões_paths">Desenhando caminhos/regiões (paths)</h2>
+
+<p>Para criar uma camada usando caminhos (regiões ou <em>paths</em>) é necessário alguns passos extras. Primeiro, cria-se a região de desenho. Depois usa-se comandos de desenho para desenhar nesta região. Por fim, você limita a região (path). Uma vez que a região de desenho está criada, você pode traçar ou preencher o caminho para que seja renderizado. Aqui estão as funções utilizadas para isso:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}</dt>
+ <dd>Cria um novo path. Uma vez criado, futuros comandos de desenho são direcionados do path atual para a construção de um novo path no canvas.</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/API/CanvasRenderingContext2D#Paths">Métodos de Caminhos (Path)</a></dt>
+ <dd>Métodos para manipuliar diferentes paths para objetos.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}</dt>
+ <dd>Finaliza o path para futuros comandos de desenho, fazendo com que voltem a ser direcionados ao contexto.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}</dt>
+ <dd>Desenha uma borda na camada.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.fill", "fill()")}}</dt>
+ <dd>Desenha uma forma sólida através de preenchimento.</dd>
+</dl>
+
+<p>O primeiro passo para criar um caminho é chamar o <code>beginPath()</code>. Internamente, caminhos são armazenados como uma lista de sub-caminhos (linhas, arcos, etc.) que juntos formam uma forma (<em>shape</em>). Sempre que esse método é chamado, a lista é redefinida e podemos começar a desenhar novas formas.</p>
+
+<div class="note"><strong>Nota:</strong> Quando o caminho atual está vazio, assim como imediatamente depois de chamar <code>beginPath()</code>, ou em uma tela recém-criada, o primeiro comando de construção de caminho é sempre tratado como um <code>moveTo()</code>, independentemente do que ele seja realmente. Por essa razão, você quase sempre vai precisar definir especificamente sua posição inicial após redefinir um caminho.</div>
+
+<p>A segunda etapa é chamar os métodos que realmente especificam os caminhos a serem desenhados. Vamos ver isso em breve.</p>
+
+<p><br>
+ O terceiro, e um passo opcional, é chamar <code>closePath()</code>. Este método tenta fechar a forma desenhando uma linha reta do ponto atual para o início. Se a forma (<em>shape</em>) já foi fechada ou existe apenas um ponto na lista, esta função não faz nada.</p>
+
+<div class="note"><strong>Nota:</strong> Quando você chama <code>fill()</code>, todas as formas abertas são fechadas automaticamente, assim você não precisa chamar <code>closePath()</code>. Isso <strong>não acontece</strong> quando você chamar <code>stroke()</code>.</div>
+
+<h3 id="Desenhando_um_triângulo">Desenhando um triângulo</h3>
+
+<p>Por exemplo, o código para desenhar um triângulo seria algo parecido com isto:</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75,50);
+    ctx.lineTo(100,75);
+    ctx.lineTo(100,25);
+    ctx.fill();
+  }
+}
+</pre>
+
+<p>O resultado se parece com isso:</p>
+
+<p>{{EmbedLiveSample('Desenhando_um_triângulo', 160, 160, "https://mdn.mozillademos.org/files/9847/triangle.png")}}</p>
+
+<h3 id="Desenhando">Desenhando</h3>
+
+<p>Uma função muito útil, que na verdade não desenha nada, mas torna-se parte da lista de caminhos descritos acima, é a função <code>moveTo()</code>. Você provavelmente pode imaginar melhor isso como se fosse o levantar uma caneta ou lápis de um ponto em um pedaço de papel e colocá-lo no próximo ponto.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}</dt>
+ <dd>Move a caneta (<em>pen</em>) para as coordenadas especificadas por <code>x</code> e <code>y</code>.</dd>
+</dl>
+
+<p>Quando o canvas é inicializado ou <code>beginPath()</code> é chamado, você normalmente vai querer usar a função <code>moveTo()</code> para colocar o ponto inicial em outro lugar. Poderíamos também usar <code>moveTo()</code> para desenhar caminhos não conectados. Dê uma olhada no rosto sorridente abaixo. Eu marquei os lugares onde eu usei o método <code>moveTo()</code> (as linhas vermelhas).</p>
+
+<p>Caso queira tentar fazer isso, você pode usar o snippet de código abaixo. Basta colá-lo na função <code>draw()</code> que vimos anteriormente.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Círculo exterior
+    ctx.moveTo(110, 75);
+    ctx.arc(75, 75, 35, 0, Math.PI, false);  // Boca (sentido horário)
+    ctx.moveTo(65, 65);
+    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Olho esquerdo
+    ctx.moveTo(95, 65);
+    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Olho direito
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>O resultado aparece como:</p>
+
+<p>{{EmbedLiveSample("Desenhando", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p>
+
+<p>Se você não gosta de ver linhas conectadas, você pode remover as linhas que chamam a função <code>moveTo()</code>.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Para aprender mais sobre a função <code>arc()</code>, veja sobre {{anch("Arcos")}}.</p>
+</div>
+
+<h3 id="Linhas">Linhas</h3>
+
+<p>Para desenhar linhas retas, use o método <code>lineTo().</code></p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}</dt>
+ <dd>Desenha uma linha do ponto atual a até a posição especificada por <code>x</code> e <code>y</code>.</dd>
+</dl>
+
+<p>Esse método recebe dois argumentos, <code>x</code> e <code>y</code>, que são as coordenadas do ponto final da linha. O ponto inicial é dependente de caminhos previamente desenhados, onde o ponto final do caminho anterior é o ponto inicial para o seguinte, e assim por diante. O ponto inicial também pode ser alterado usando o método <code>moveTo()</code>.<br>
+ <br>
+ O exemplo abaixo desenha dois triângulos, um preenchido e um delineado.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Filled triangle
+    ctx.beginPath();
+    ctx.moveTo(25,25);
+    ctx.lineTo(105,25);
+    ctx.lineTo(25,105);
+    ctx.fill();
+
+    // Stroked triangle
+    ctx.beginPath();
+    ctx.moveTo(125,125);
+    ctx.lineTo(125,45);
+    ctx.lineTo(45,125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>Isso começa chamando o método <code>beginPath()</code> para iniciar um novo <em>shape path</em>. Em seguida, usamos o método <code>moveTo()</code> para mover o ponto inicial para a posição desejada. Logo abaixo, duas linhas, que compõem os dois lados do triângulo, são desenhadas.</p>
+
+<p>{{EmbedLiveSample("Linhas", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p>
+
+<p>Você notará a diferença entre o triângulo preenchido (<em>filled</em>) e não prenchido (<em>stroked</em>). Isto ocorre, como mencionado acima, porque as formas são automaticamente fechadas quando um caminho é preenchido, mas não quando são não preenchidos. Se deixássemos de fora o <code>closePath()</code> para os triângulos não preenchidos, apenas duas linhas teriam sido desenhadas, não um triângulo completo.</p>
+
+<h3 id="Arcos">Arcos</h3>
+
+<p>Para desenhar arcos, nós usamos os métodos <code>arc()</code> ou <code>arcTo()</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}</dt>
+ <dd>Desenha um arco centralizado na posição <em>(x, y)</em> com um raio <em>r</em> iniciando em <em>startAngle e</em> terminando em <em>endAngle</em> apontando na direção indicada pelo sentido anti-horário (padronizando para o sentido horário).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}</dt>
+ <dd>Desenha um arco com os pontos de controle e raio, conectados ao ponto anterior por uma linha reta.</dd>
+</dl>
+
+<p>Vamos dar uma olhada mais detalhada sobre o método <code>arc</code>, que tem seis parâmetros: <code>x</code> e <code>y</code> são as coordenadas do centro do círculo em que o arco deve ser desenhado. <code>radius</code> é o raio. Os parâmetros <code>startAngle</code> e <code>endAngle</code> definem os pontos inicial e final do arco em radianos, ao longo da curva do círculo. Estes são medidos a partir do eixo <code>x</code>. O parâmetro <code>anticlockwise</code> é um valor Booleano que, quando verdadeiro, desenha o arco no sentido anti-horário; Caso contrário, o arco é desenhado no sentido horário.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Os ângulos na função <code>arc</code> são medidos em radianos, não em graus. Para converter graus em radianos você pode usar a seguinte expressão JavaScript: <code>radians = (Math.PI/180)*degrees</code>.</p>
+</div>
+
+<p>O exemplo a seguir é um pouco mais complexo do que os que vimos anteriormente. Ele desenha 12 arcos diferentes, todos com diferentes ângulos e preenchimentos.</p>
+
+<p>Os dois laços <code>for</code> são para iterar através das linhas e colunas de arcos. Para cada arco, é criado um novo caminho chamando <code>beginPath()</code>. No código, cada um dos parâmetros para o arco estão em uma variável somente para demonstração, assim você não precisa fazer isso na vida real.</p>
+
+<p>As coordenadas <code>x</code> e <code>y</code> devem ser suficientemente claras. O parâmetros <code>radius</code> e <code>startAngle</code> são fixos. O <code>endAngle</code> começa em 180 graus (metade de um círculo) na primeira coluna e aumenta gradualmente em 90 graus, culminando em um círculo completo na última coluna.</p>
+
+<p>A manipulação do parâmetro <code>clockwise</code> faz com que a primeira e terceira linhas sejam desenhadas como arcos no sentido horário, e a segunda e quarta linhas como arcos no sentido anti-horário. Finalmente, a instrução <code>if</code> faz com que a metade superior dos arcos não sejam preenchidos e a metade inferior dos arcos sejam.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Este exemplo requer um canvas um pouco maior que as outras desta página: 150 x 200 pixels.</p>
+</div>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    for(var i=0;i&lt;4;i++){
+      for(var j=0;j&lt;3;j++){
+        ctx.beginPath();
+        var x              = 25+j*50;               // coordenada x
+        var y              = 25+i*50;               // coordenada y
+        var radius         = 20;                    // Raio do Arco
+        var startAngle     = 0;                     // Ponto inicial no círculo
+        var endAngle       = Math.PI+(Math.PI*j)/2; // Ponto final no círculo
+        var anticlockwise  = i%2==0 ? false : true; // horário ou anti-horário
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i&gt;1){
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Arcos", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}</p>
+
+<h3 id="Curvas_de_Bézier_Cúbicas_e_Quadráticas">Curvas de Bézier Cúbicas e Quadráticas</h3>
+
+<p>O próximo tipo de caminhos disponíveis são as Curvas de Bézier, disponíveis nas variedades cubícas e quadráticas. Elas são geralmente usadas para desenhar complexas formas orgânicas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}</dt>
+ <dd>Desenha uma curva de Bézier quadrática da posição atual indicada pelo cursor, até a posição final especificada por <code>x</code> e <code>y</code>, usando o controle de pontos guiados por <code>cp1x</code> <code>e cp1y</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}</dt>
+ <dd>Desenha uma curva de Bézier cúbica partindo da posição atual indicada pelo cursor, até a posição final especificada por <code>x</code> e <code>y</code>, usando o controle de pontos guiados por (<code>cp1x</code>, <code>cp1y</code>) e (cp2x, cp2y).</dd>
+</dl>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">A diferença entre estes métodos pode ser descrita de forma melhor usando a imagem à direita. Uma curva quadrática de Bézier tem um ponto inicial e final (pontos azuis) e apenas um ponto de controle (indicado pelo ponto vermelho) enquanto que uma curva cúbica de Bézier utiliza dois pontos de controles.</p>
+
+<p>Os parâmetros <code>x</code> e <code>y</code> em ambos os métodos são as coordenadas do ponto final. <code>cp1x</code> e<code> cp1y</code> são as coordenadas do primeiro ponto de controle, e <code>cp2x</code> e <code>cp2y</code> são as coordenadas do segundo ponto de controle.</p>
+
+<p>Usando curvas de Bézier quadráticas e cúbicas pode ser algo bastante desafiador, porque ao contrário de um software de desenho vetorial, como o Adobe Illustrator, não temos resultados visuais imediatos sobre o que estamos fazendo. Isso torna bastante difícil desenhar formas complexas. No exemplo a seguir, vamos desenhar algumas formas orgânicas simples, mas se você tiver tempo e, acima de tudo, paciência, formas muito mais complexas podem ser criadas.</p>
+
+<p>Não há nada muito difícil nestes exemplos. Em ambos os casos vemos uma sucessão de curvas sendo desenhadas, resultando no fim, em uma forma (<em>shape</em>) completa.</p>
+
+<h4 id="Curvas_de_Bézier_Quadráticas">Curvas de Bézier Quadráticas</h4>
+
+<p>Este exemplo usa múltiplas curvas de Bézier quadráticas para renderizar um balão de fala.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Exemplo de curvas de Bézier quadráticas
+    ctx.beginPath();
+    ctx.moveTo(75,25);
+    ctx.quadraticCurveTo(25,25,25,62.5);
+    ctx.quadraticCurveTo(25,100,50,100);
+    ctx.quadraticCurveTo(50,120,30,125);
+    ctx.quadraticCurveTo(60,120,65,100);
+    ctx.quadraticCurveTo(125,100,125,62.5);
+    ctx.quadraticCurveTo(125,25,75,25);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample('Curvas_de_Bézier_Quadráticas', 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p>
+
+<h4 id="Curvas_de_Bézier_Cúbicas">Curvas de Bézier Cúbicas</h4>
+
+<p>Este exemplo desenha um coração usando curvas de Bézier cúbicas.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Exemplo de curvas de Bézier cúbicas
+    ctx.beginPath();
+    ctx.moveTo(75,40);
+    ctx.bezierCurveTo(75,37,70,25,50,25);
+    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
+    ctx.bezierCurveTo(20,80,40,102,75,120);
+    ctx.bezierCurveTo(110,102,130,80,130,62.5);
+    ctx.bezierCurveTo(130,62.5,130,25,100,25);
+    ctx.bezierCurveTo(85,25,75,37,75,40);
+    ctx.fill();
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample('Curvas_de_Bézier_Cúbicas', 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p>
+
+<h3 id="Retângulos">Retângulos</h3>
+
+<p>Além dos três métodos que vimos em {{anch("Desenhando retângulos")}}, que desenham formas retangulares diretamente no canvas, há também o método <code>rect()</code>, que adiciona uma forma retangular a um caminho (<em>path</em>) atualmente aberto.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}</dt>
+ <dd>
+ <p>Desenha um retângulo cujo canto superior esquerdo é especificado por (<code>x</code>, <code>y</code>) com base em uma largura (<code>width</code>) e uma altura (<code>height</code>).</p>
+ </dd>
+</dl>
+
+<p>Quando este método é executado, o método <code>moveTo()</code> é automaticamente chamado com os parâmetros (0,0). Em outras palavras, a posição atual do cursor é automaticamente redefinida para as coordenadas padrões.</p>
+
+<h3 id="Combinando_Elementos">Combinando Elementos</h3>
+
+<p>Até agora, em cada exemplo dessa página foi usada apenas um tipo de função de caminho (<em>path</em>) para cada forma (<em>shape</em>). No entanto, não há nenhuma limitação para o número ou tipos de caminhos que você pode usar para criar um <em>shape</em>. Então, neste exemplo final, vamos combinar todas as funções de caminho para fazer um conjunto de personagens de jogo muito conhecido.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    roundedRect(ctx,12,12,150,150,15);
+    roundedRect(ctx,19,19,150,150,9);
+    roundedRect(ctx,53,53,49,33,10);
+    roundedRect(ctx,53,119,49,16,6);
+    roundedRect(ctx,135,53,49,33,10);
+    roundedRect(ctx,135,119,25,49,10);
+
+    ctx.beginPath();
+    ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
+    ctx.lineTo(31,37);
+    ctx.fill();
+
+    for(var i=0;i&lt;8;i++){
+      ctx.fillRect(51+i*16,35,4,4);
+    }
+
+    for(i=0;i&lt;6;i++){
+      ctx.fillRect(115,51+i*16,4,4);
+    }
+
+    for(i=0;i&lt;8;i++){
+      ctx.fillRect(51+i*16,99,4,4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83,116);
+    ctx.lineTo(83,102);
+    ctx.bezierCurveTo(83,94,89,88,97,88);
+    ctx.bezierCurveTo(105,88,111,94,111,102);
+    ctx.lineTo(111,116);
+    ctx.lineTo(106.333,111.333);
+    ctx.lineTo(101.666,116);
+    ctx.lineTo(97,111.333);
+    ctx.lineTo(92.333,116);
+    ctx.lineTo(87.666,111.333);
+    ctx.lineTo(83,116);
+    ctx.fill();
+
+    ctx.fillStyle = "white";
+    ctx.beginPath();
+    ctx.moveTo(91,96);
+    ctx.bezierCurveTo(88,96,87,99,87,101);
+    ctx.bezierCurveTo(87,103,88,106,91,106);
+    ctx.bezierCurveTo(94,106,95,103,95,101);
+    ctx.bezierCurveTo(95,99,94,96,91,96);
+    ctx.moveTo(103,96);
+    ctx.bezierCurveTo(100,96,99,99,99,101);
+    ctx.bezierCurveTo(99,103,100,106,103,106);
+    ctx.bezierCurveTo(106,106,107,103,107,101);
+    ctx.bezierCurveTo(107,99,106,96,103,96);
+    ctx.fill();
+
+    ctx.fillStyle = "black";
+    ctx.beginPath();
+    ctx.arc(101,102,2,0,Math.PI*2,true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89,102,2,0,Math.PI*2,true);
+    ctx.fill();
+  }
+}
+
+// Uma função útil para desenhar um retângulo com cantos arredondados.
+
+function roundedRect(ctx,x,y,width,height,radius){
+  ctx.beginPath();
+  ctx.moveTo(x,y+radius);
+  ctx.lineTo(x,y+height-radius);
+  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
+  ctx.lineTo(x+width-radius,y+height);
+  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
+  ctx.lineTo(x+width,y+radius);
+  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
+  ctx.lineTo(x+radius,y);
+  ctx.quadraticCurveTo(x,y,x,y+radius);
+  ctx.stroke();
+}
+</pre>
+
+<p>O resultado é:</p>
+
+<p>{{EmbedLiveSample("Combinando_Elementos", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}</p>
+
+<p>Não vamos discutir isso em detalhes, uma vez que é realmente muito simples. As coisas mais importantes a serem observadas são o uso da propriedade <code>fillStyle</code> no contexto de desenho e o uso de uma função auxiliar (neste caso <code>roundedRect()</code>). Usando funções auxiliares para construir um desenho frequentemente pode ser muito útil, além de reduzir a quantidade de código que você precisa, bem como a sua complexidade.</p>
+
+<p>Vamos dar uma nova olhada em <code>fillStyle</code>, em mais detalhes, mais adiante neste tutorial. Aqui, tudo o que estamos fazendo é apenas usando-o para alterar sucessivamente a cor de preenchimento dos caminhos (<em>paths</em>) de cor preta (padrão) para branca.</p>
+
+<h2 id="Path2D">Path2D</h2>
+
+<p>Como vimos no último exemplo, pode haver uma série de <em>paths</em> e comandos de desenho para desenhar objetos em sua tela. Para simplificar o código e melhorar o desempenho, o objeto {{domxref("Path2D")}}, disponível em versões recentes dos navegadores, permite armazenar em cache ou gravar esses comandos de desenho. Com ele, você pode construir seus <em>paths</em> rapidamente.<br>
+ Vamos ver como podemos construir um objeto de <code>Path2D</code>:</p>
+
+<dl>
+ <dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt>
+ <dd>
+ <p>O construtor de <code><strong>Path2D()</strong></code> retorna um objeto <code>Path2D</code> instanciado recentemente, opcionalmente através de um outro objeto <code>Path2D</code> como argumento (cria uma cópia) ou, opcionalmente, com uma <em>string</em> que representam dados de <a href="/en-US/docs/Web/SVG/Tutorial/Paths"><em>paths</em> em SVG</a>.</p>
+ </dd>
+</dl>
+
+<pre class="brush: js notranslate">new Path2D();     // objeto vazio de Path2D
+new Path2D(path); // cópia de outro objeto de Path2D
+new Path2D(d);    // objeto criado a partir de <em>paths</em> em SVG</pre>
+
+<p>Todos os <a href="/pt_BR/docs/Web/API/CanvasRenderingContext2D#Paths">métodos de caminho (path methods)</a> como <code>moveTo</code>, <code>rect</code>, <code>arc</code> ou <code>quadraticCurveTo</code>, etc., que temos de saber acima, estão disponíveis em <code>Path2D</code>.</p>
+
+<p>A API <code>Path2D</code> também adiciona uma maneira de combinar caminhos usando o método <code>addPath</code>. Isso pode ser útil quando você deseja criar objetos com vários componentes, por exemplo.</p>
+
+<dl>
+ <dt>{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}</dt>
+ <dd>Adiciona um <code>path</code> para o <code>path</code> atual através de uma matriz de transformação opcional.</dd>
+</dl>
+
+<h3 id="Exemplo_de_Path2D">Exemplo de Path2D</h3>
+
+<p>Neste exemplo, estamos criando um retângulo e um círculo. Ambos são armazenados como um objeto de <code>Path2D</code>, de modo que eles estão disponíveis para uso posterior. Com a nova API <code>Path2D</code>, vários métodos foram atualizados como, por exemplo, opcionalmente usar um objeto <code>Path2D</code> em vez do <code>path</code> atual. Aqui, os métodos <code>stroke</code> e <code>fill</code> são usados, ​​com um argumento de <em>path</em>, para desenhar ambos os objetos na tela, por exemplo.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="130" height="100"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[6,9] notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    var rectangle = new Path2D();
+    rectangle.rect(10, 10, 50, 50);
+
+    var circle = new Path2D();
+    circle.moveTo(125, 35);
+    circle.arc(100, 35, 25, 0, 2 * Math.PI);
+
+    ctx.stroke(rectangle);
+    ctx.fill(circle);
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Exemplo_de_Path2D", 140, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p>
+
+<h3 id="Usando_paths_em_SVG">Usando <em>paths</em> em SVG</h3>
+
+<p>Outro recurso poderoso da nova API de Path2D é a utilização de dados de <em>path</em> em SVG para inicializar caminhos (<em>paths</em>) no canvas. Isso permite que você crie dados de <em>paths </em>que possam ser utilizados tanto no SVG como no canvas.</p>
+
+<p>O caminho se moverá para o ponto <code>(M10 10)</code> e então se moverá horizontalmente 80 pontos para a direita <code>(h 80)</code>, depois 80 pontos para baixo <code>(v 80)</code>, então 80 pontos para a esquerda (h -80) e, por fim, volta para o início (<code>z</code>). Você pode ver este exemplo na página do <a href="/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths">construtor do Path2D</a>.</p>
+
+<pre class="brush: js; notranslate">var p = new Path2D('M10 10 h 80 v 80 h -80 Z');</pre>
+
+<div>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}</div>
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/drawing_text/index.html b/files/pt-br/web/guide/html/canvas_tutorial/drawing_text/index.html
new file mode 100644
index 0000000000..550719e627
--- /dev/null
+++ b/files/pt-br/web/guide/html/canvas_tutorial/drawing_text/index.html
@@ -0,0 +1,169 @@
+---
+title: Drawing text
+slug: Web/Guide/HTML/Canvas_tutorial/Drawing_text
+tags:
+  - Canvas
+  - Intermediário
+  - Tutorial
+  - graficos
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_text
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</div>
+
+<div class="summary">
+<p>Após entender como <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">aplicar estilos e cores</a> no capítulo anterior, nós veremos agora como desenhar texto dentro do contexto de uma canvas.</p>
+</div>
+
+<h2 id="Desenhando_texto">Desenhando texto</h2>
+
+<p>O context de renderização da canvas fornece dois métodos para renderização textual: </p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt>
+ <dd>Preenche com um determinado texto as cordenadas (x,y) recebidas. Opcionalmente com uma largura máxima para o desenho.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt>
+ <dd>Traçeja um determinado texto nas cordenadas (x,y) recebidas. Opcionalmente com uma largura máxima para o desenho.</dd>
+</dl>
+
+<h3 id="Um_exemplo_com_fillText">Um exemplo com <code>fillText</code></h3>
+
+<p>O texto a seguir é rederizado utilizando <code>fillStyle</code>.</p>
+
+<pre class="brush: js;highlight[4]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.fillText('Hello world', 10, 50);
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="100"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p>
+
+<h3 id="Um_exemplo_com_strokeText">Um exemplo com <code>strokeText</code></h3>
+
+<p> </p>
+
+<p dir="ltr" id="tw-target-text">O texto é preenchido usando o strokeStyle atual.</p>
+
+<p> </p>
+
+<pre class="brush: js;highlight[4]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.strokeText('Hello world', 10, 50);
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="100"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p>
+
+<h2 id="Estilo_de_Texto"><strong>Estilo de Texto</strong></h2>
+
+<p>Nos exemplos anteriores, já usamos a propriedade font para tornar o texto um pouco maior que o tamanho padrão. Existem mais algumas propriedades que permitem ajustar a maneira como o texto é exibido no canvas:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt>
+ <dd>The current text style being used when drawing text. This string uses the same syntax as the <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("font")}} property. The default font is 10px sans-serif.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}</dt>
+ <dd>Text alignment setting. Possible values: <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code> or <code>center</code>. The default value is <code>start</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}</dt>
+ <dd>Baseline alignment setting. Possible values: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code>, <code>ideographic</code>, <code>bottom</code>. The default value is <code>alphabetic</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}</dt>
+ <dd>Directionality. Possible values: <code>ltr</code>, <code>rtl</code>, <code>inherit</code>. The default value is <code>inherit</code>.</dd>
+</dl>
+
+<p>Essas propriedades podem ser similares para você, se você trabalhou com CSS antes.</p>
+
+<p>O diagrama seguinte do <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> demonstra as várias baselines suportadas pela propriedade do <code>textBaseline</code><img alt="The top of the em square is
+roughly at the top of the glyphs in a font, the hanging baseline is
+where some glyphs like आ are anchored, the middle is half-way
+between the top of the em square and the bottom of the em square,
+the alphabetic baseline is where characters like Á, ÿ,
+f, and Ω are anchored, the ideographic baseline is
+where glyphs like 私 and 達 are anchored, and the bottom
+of the em square is roughly at the bottom of the glyphs in a
+font. The top and bottom of the bounding box can be far from these
+baselines, due to glyphs extending far outside the em square." src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p>
+
+<h3 id="O_exemplo_de_uma_textBaseline">O exemplo de uma textBaseline</h3>
+
+<p>Edite o código abaixo e veja as atualizações em tempo real no canvas.</p>
+
+<pre class="brush: js;highlight[2]">ctx.font = '48px serif';
+ctx.textBaseline = 'hanging';
+ctx.strokeText('Hello world', 0, 100);
+</pre>
+
+<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.font = "48px serif";
+ctx.textBaseline = "hanging";
+ctx.strokeText("Hello world", 0, 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="Advanced_text_measurements">Advanced text measurements</h2>
+
+<p>In the case you need to obtain more details about the text, the following method allows you to measure it.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt>
+ <dd>Returns a {{domxref("TextMetrics")}} object containing the width, in pixels, that the specified text will be when drawn in the current text style.</dd>
+</dl>
+
+<p>The following code snippet shows how you can measure a text and get its width.</p>
+
+<pre class="brush: js;highlight[3]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var text = ctx.measureText('foo'); // TextMetrics object
+  text.width; // 16;
+}
+</pre>
+
+<h2 id="Notas_específicas_-_Gecko">Notas específicas - Gecko</h2>
+
+<p>No Gecko (a engine de renderização do Firefox, Firefox OS e outras aplicações Mozilla), algumas APIs prefixadas foram implementadas em versões anteriores para escrever texto em um canvas. Essas APIs agora estão depreciadas e removidas, e não são mais garantidas para uso.</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</p>
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/index.html b/files/pt-br/web/guide/html/canvas_tutorial/index.html
new file mode 100644
index 0000000000..2f9dbab7df
--- /dev/null
+++ b/files/pt-br/web/guide/html/canvas_tutorial/index.html
@@ -0,0 +1,56 @@
+---
+title: Canvas tutorial
+slug: Web/Guide/HTML/Canvas_tutorial
+tags:
+  - Canvas
+  - Graphics
+  - Guide
+  - HTML
+  - HTML5
+  - Intermediate
+  - Web
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<p> {{CanvasSidebar}} <a href="/pt-BR/docs/Web/HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></p>
+
+<p class="summary"><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a> é um elemento <a href="/en-US/docs/HTML" title="HTML">HTML</a> que pode ser usado para desenhar usando linguagem de "script" (normalmente <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>). Isto pode ser usado, por exemplo, para desenhar gráficos, fazer composições de fotos ou simples (e <a href="/en-US/docs/HTML/Canvas/A_Basic_RayCaster" title="A_Basic_RayCaster">não tão simples</a>) animações. As imagens à direita mostram exemplos de implementações <strong><code><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">&lt;canvas&gt;</a></code></strong> que serão parte deste tutorial.</p>
+
+<p><span class="seoSummary">Este tutorial descreve como utilizar o elemento <code>&lt;canvas&gt;</code> para desenhar gráficos 2D, iniciando com o básico. Os exemplos fornecidos devem lhe trazer algumas ideias claras sobre o que você pode fazer com o canvas e irá fornecer trechos de código que podem lhe ajudar na contrução do seu próprio conteúdo. </span></p>
+
+<p>Introduzido pela primeira vez no WebKit pela Apple para o OS X Dashboard, o <code>&lt;canvas&gt;</code>, desde então, tem sido implementado em navegadores. Hoje, todos os principais navegadores suportam isso.</p>
+
+<h2 id="Before_you_start" name="Before_you_start">Antes de começar</h2>
+
+<p>Usar o elemento <code>&lt;canvas&gt; </code>não é muito difícil, mas você precisa de um conhecimento básico sobre <a href="/en-US/docs/HTML" title="HTML">HTML</a> e <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>. O elemento <code>&lt;canvas&gt;</code> não é suportado por alguns navegadores antigos, mas é suportado em versões recentes da maioria dos navegadores. O tamanho padrão de um canvas é de 300px * 150px (largura * altura). Porém, tamanhos customizados podem ser definidos usando as propriedades <code>width</code> e <code>height</code> do CSS. Para desenhar gráficos no canvas iremos usar um contexto de objeto JavaScript, o que criará gráficos em tempo real.</p>
+
+<h2 id="In_this_tutorial" name="In_this_tutorial">Nesse tutorial</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica" title="Canvas_tutorial/Basic_usage">Utilização básica</a></li>
+ <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">Desenhando formas</a></li>
+ <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Aplicando estilos e cores</a></li>
+ <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_text">Desenhando texto</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images" title="Canvas_tutorial/Using_images">Usando imagens (em inglês)</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations" title="Canvas_tutorial/Transformations">Transformações</a></li>
+ <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Compositing" title="Canvas_tutorial/Compositing">Composição e recorte</a></li>
+ <li><a href="/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">Animações básicas</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Animações avançadas</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Manipulação de pixel</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Regiões e acessibilidade</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Otimizando o canvas</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Finale">Conclusão</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Veja também</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Web/HTML/Canvas" title="HTML/Canvas">Canvas</a></li>
+ <li><a class="external external-icon" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Plug-in Canvas para Adobe Illustrator</a></li>
+ <li><a class="external external-icon" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a><a href="http://davidwalsh.name/convert-canvas-image"> </a></li>
+</ul>
+
+<h2 id="Nota_dos_contribuidores">Nota dos contribuidores</h2>
+
+<p><span id="result_box" lang="pt"><span>Devido a um erro técnico lamentável que ocorreu na semana de 17 de junho de 2013, perdemos parte do histórico deste tutorial, incluindo atribuições a todos os contribuidores anteriores ao seu conteúdo.</span> <span>Pedimos desculpas por isso, e espero que você nos perdoe desse infeliz infortúnio.</span></span></p>
+
+<div>{{ Next("Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica") }}</div>
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/otimizando_canvas/index.html b/files/pt-br/web/guide/html/canvas_tutorial/otimizando_canvas/index.html
new file mode 100644
index 0000000000..d18afddefa
--- /dev/null
+++ b/files/pt-br/web/guide/html/canvas_tutorial/otimizando_canvas/index.html
@@ -0,0 +1,115 @@
+---
+title: Otimizando canvas
+slug: Web/Guide/HTML/Canvas_tutorial/Otimizando_Canvas
+tags:
+  - Canvas
+  - Gráfico 2D
+  - Otimização
+translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div>
+
+<div class="summary">
+<p>O elemento {{HTMLElement("canvas")}} é um dos padrões mais largamente utilizados para renderização de gráficos 2D na Web. É muito usado em jogos e em visualizações complexas. Porém, quando sítios web e aplicativos utilizam canvas até seus limites, começam a surgir problemas de perda de performance. <span class="seoSummary">Este artigo tem o objetivo de prover sugestões de otimização de seu elemento canvas e garantir que seu site ou aplicativo funcione melhor.</span></p>
+</div>
+
+<h2 id="Dicas_de_performance">Dicas de performance</h2>
+
+<p>O que segue é uma coleção de dicas para melhorar a performance.</p>
+
+<h3 id="Pre-render_similar_primitives_or_repeating_objects_on_an_off-screen_canvas">Pre-render similar primitives or repeating objects on an off-screen canvas</h3>
+
+<p>If you find yourself with complex drawing operations on each frame, consider creating an offscreen canvas, draw to it once (or whenever it changes) on the offscreen canvas, then on each frame draw the offscreen canvas.</p>
+
+<pre class="brush: js">myEntity.offscreenCanvas = document.createElement('canvas');
+myEntity.offscreenCanvas.width = myEntity.width;
+myEntity.offscreenCanvas.height = myEntity.height;
+myEntity.offscreenContext = myEntity.offscreenCanvas.getContext('2d');
+
+myEntity.render(myEntity.offscreenContext);
+</pre>
+
+<h3 id="Avoid_floating-point_coordinates_and_use_integers_instead">Avoid floating-point coordinates and use integers instead</h3>
+
+<p>Sub-pixel rendering occurs when you render objects on a canvas without whole values.</p>
+
+<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5);
+</pre>
+
+<p>This causes the browser to do extra calculations to create the anti-aliasing effect. To avoid this, make sure to round all co-ordinates used in calls to {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} using {{jsxref("Math.floor()")}}, for example.</p>
+
+<h3 id="Don’t_scale_images_in_drawImage">Don’t scale images in <code>drawImage</code></h3>
+
+<p>Cache various sizes of your images on an offscreen canvas when loading as opposed to constantly scaling them in {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.</p>
+
+<h3 id="Use_multiple_layered_canvases_for_complex_scenes">Use multiple layered canvases for complex scenes</h3>
+
+<p>You may find you have some elements that are frequently changing and moving around whereas other things (like UI) never change. An optimization in this situation is to create layers using multiple canvas elements.</p>
+
+<p>For example you could create a UI layer that sits on top of everything and is only drawn during user input. You could create game layer where the frequently updating entities exist and a background layer for entities that rarely update.</p>
+
+<pre class="brush: html">&lt;div id="stage"&gt;
+  &lt;canvas id="ui-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+  &lt;canvas id="game-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+  &lt;canvas id="background-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+&lt;/div&gt;
+
+&lt;style&gt;
+  #stage {
+    width: 480px;
+    height: 320px;
+    position: relative;
+    border: 2px solid black
+  }
+  canvas { position: absolute; }
+  #ui-layer { z-index: 3 }
+  #game-layer { z-index: 2 }
+  #background-layer { z-index: 1 }
+&lt;/style&gt;
+</pre>
+
+<h3 id="CSS_for_large_background_images">CSS for large background images</h3>
+
+<p>If like most games you have a static background image, use a plain {{HTMLElement("div")}} element with a CSS {{cssxref("background")}} property and position it under the canvas. This will avoid drawing a large image to the canvas on every tick.</p>
+
+<h3 id="Scaling_canvas_using_CSS_transforms">Scaling canvas using CSS transforms</h3>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">CSS transforms</a> are faster by using the GPU. Best case is to not scale the canvas or have a smaller canvas and scale up rather than a bigger canvas and scale down. For Firefox OS, target 480 x 320 px.</p>
+
+<pre class="brush: js">var scaleX = window.innerWidth / canvas.width;
+var scaleY = window.innerHeight / canvas.height;
+
+var scaleToFit = Math.min(scaleX, scaleY);
+var scaleToCover = Math.max(scaleX, scaleY);
+
+stage.style.transformOrigin = '0 0'; //scale from top left
+stage.style.transform = 'scale(' + scaleToFit + ')';
+</pre>
+
+<h3 id="Turn_off_transparency">Turn off transparency</h3>
+
+<p>If your game uses canvas and doesn’t need to be transparent, set the <code>alpha</code> option to <code>false</code> when creating a drawing context with <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext" title="The HTMLCanvasElement.getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported."><code>HTMLCanvasElement.getContext()</code></a>. This information can be used internally to optimize rendering.</p>
+
+<pre class="brush: js">var ctx = canvas.getContext('2d', { alpha: false });</pre>
+
+<h3 id="More_tips">More tips</h3>
+
+<ul>
+ <li>Batch canvas calls together (for example, draw a poly-line instead of multiple separate lines).</li>
+ <li>Avoid unnecessary canvas state changes.</li>
+ <li>Render screen differences only, not the whole new state.</li>
+ <li>Avoid the {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} property whenever possible.</li>
+ <li>Avoid <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">text rendering</a> whenever possible.</li>
+ <li>Try different ways to clear the canvas ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. resizing the canvas)</li>
+ <li>With animations, use {{domxref("window.requestAnimationFrame()")}} instead of {{domxref("window.setInterval()")}} .</li>
+ <li>Be careful with heavy physics libraries</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Improving HTML5 Canvas Performance – HTML5 Rocks</a></li>
+ <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optimizing your JavaScript game for Firefox OS – Mozilla Hacks</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</p>
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/using_images/index.html b/files/pt-br/web/guide/html/canvas_tutorial/using_images/index.html
new file mode 100644
index 0000000000..0b0dcfe7e7
--- /dev/null
+++ b/files/pt-br/web/guide/html/canvas_tutorial/using_images/index.html
@@ -0,0 +1,333 @@
+---
+title: Using images
+slug: Web/Guide/HTML/Canvas_tutorial/Using_images
+translation_of: Web/API/Canvas_API/Tutorial/Using_images
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}</div>
+
+<div class="summary">
+<p>Até agora nós criamos nossos próprios <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">shapes</a> e aplicamos estilos(<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">applied styles</a>) a eles. Um dos recursos mais interessantes do {{HTMLElement("canvas")}} é a capacidade de usar imagens. Eles podem ser usados para composição dinâmica de fotos ou como pano de fundo de gráficos, como sprites em jogos e assim por diante. Imagens externas podem ser usadas em qualquer formato suportado pelo navegador, tais como PNG, GIF, ou JPEG. Você pode até usar a imagem produzida por outros elementos da tela na mesma página que a fonte!</p>
+</div>
+
+<p>A importação de imagens para o canvas é basicamente um processo de duas etapas:</p>
+
+<ol>
+ <li>Obter uma referência a um objeto {{domxref("HTMLImageElement")}} ou a outro elemento do canvas como fonte. Também é possível usar imagens fornecendo uma URL.</li>
+ <li>Desenhar a imagem no canvas usando a função <code>drawImage()</code> .</li>
+</ol>
+
+<p>Vamos dar uma olhada em como fazer isso.</p>
+
+<h2 id="Getting_images_to_draw">Getting images to draw</h2>
+
+<p>The canvas API is able to use any of the following data types as an image source:</p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement")}}</dt>
+ <dd>These are images created using the <code>Image()</code> constructor, as well as any {{HTMLElement("img")}} element.</dd>
+ <dt>{{domxref("SVGImageElement")}}</dt>
+ <dd>These are images embedded using the {{SVGElement("image")}} element.</dd>
+ <dt>{{domxref("HTMLVideoElement")}}</dt>
+ <dd>Using an HTML {{HTMLElement("video")}} element as your image source grabs the current frame from the video and uses it as an image.</dd>
+ <dt>{{domxref("HTMLCanvasElement")}}</dt>
+ <dd>You can use another {{HTMLElement("canvas")}} element as your image source.</dd>
+</dl>
+
+<p>These sources are collectively referred to by the type {{domxref("CanvasImageSource")}}.</p>
+
+<p>There are several ways to get images for use on a canvas.</p>
+
+<h3 id="Using_images_from_the_same_page">Using images from the same page</h3>
+
+<p>We can obtain a reference to images on the same page as the canvas by using one of:</p>
+
+<ul>
+ <li>The {{domxref("document.images")}} collection</li>
+ <li>The {{domxref("document.getElementsByTagName()")}} method</li>
+ <li>If you know the ID of the specific image you wish to use, you can use {{domxref("document.getElementById()")}} to retrieve that specific image</li>
+</ul>
+
+<h3 id="Using_images_from_other_domains">Using images from other domains</h3>
+
+<p>Using the {{htmlattrxref("crossorigin", "img")}} attribute of an {{HTMLElement("img")}} element (reflected by the {{domxref("HTMLImageElement.crossOrigin")}} property), you can request permission to load an image from another domain for use in your call to <code>drawImage()</code>. If the hosting domain permits cross-domain access to the image, the image can be used in your canvas without tainting it; otherwise using the image will <a href="https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F" rel="internal">taint the canvas</a>.</p>
+
+<h3 id="Using_other_canvas_elements">Using other canvas elements</h3>
+
+<p>Just as with normal images, we access other canvas elements using either the {{domxref("document.getElementsByTagName()")}} or {{domxref("document.getElementById()")}} method. Be sure you've drawn something to the source canvas before using it in your target canvas.</p>
+
+<p>One of the more practical uses of this would be to use a second canvas element as a thumbnail view of the other larger canvas.</p>
+
+<h3 id="Creating_an_image_from_scratch">Creating an image from scratch</h3>
+
+<p>Another option is to create new {{domxref("HTMLImageElement")}} objects in our script. To do this, you can use the convenient <code>Image()</code> constructor:</p>
+
+<pre class="brush: js">var img = new Image();   // Create new img element
+img.src = 'myImage.png'; // Set source path
+</pre>
+
+<p>When this script gets executed, the image starts loading.</p>
+
+<p>If you try to call <code>drawImage()</code> before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception). So you need to be sure to use the load event so you don't try this before the image has loaded:</p>
+
+<pre class="brush: js">var img = new Image();   // Create new img element
+img.addEventListener('load', function() {
+  // execute drawImage statements here
+}, false);
+img.src = 'myImage.png'; // Set source path
+</pre>
+
+<p>If you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever. It's beyond the scope of this tutorial to look at image pre-loading tactics, but you should keep that in mind.</p>
+
+<h3 id="Embedding_an_image_via_data_URL">Embedding an image via data: URL</h3>
+
+<p>Another possible way to include images is via the <a class="external" href="/en-US/docs/Web/HTTP/data_URIs" rel="external" title="http://en.wikipedia.org/wiki/Data:_URL">data: url</a>. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.</p>
+
+<pre class="brush: js">var img = new Image();   // Create new img element
+img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+</pre>
+
+<p>One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>, and images, making it more portable to other locations.</p>
+
+<p>Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.</p>
+
+<h3 id="Using_frames_from_a_video">Using frames from a video</h3>
+
+<p>You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myvideo", you can do this:</p>
+
+<pre class="brush: js">function getMyVideo() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    return document.getElementById('myvideo');
+  }
+}
+</pre>
+
+<p>This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, is one of the objects that can be used as a <code>CanvasImageSource</code>.</p>
+
+<h2 id="Drawing_images">Drawing images</h2>
+
+<p>Once we have a reference to our source image object we can use the <code>drawImage()</code> method to render it to the canvas. As we will see later the <code>drawImage()</code> method is overloaded and has several variants. In its most basic form it looks like this:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}</dt>
+ <dd>Draws the <code>CanvasImageSource</code> specified by the <code>image</code> parameter at the coordinates (<code>x</code>, <code>y</code>).</dd>
+</dl>
+
+<div class="note">
+<p>SVG images must specify a width and height in the root &lt;svg&gt; element.</p>
+</div>
+
+<h3 id="Example_A_simple_line_graph">Example: A simple line graph</h3>
+
+<p>In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image object's <code>load</code> event handler to execute the drawing statements. The <code>drawImage()</code> method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="180" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[5]">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function() {
+    ctx.drawImage(img, 0, 0);
+    ctx.beginPath();
+    ctx.moveTo(30, 96);
+    ctx.lineTo(70, 66);
+    ctx.lineTo(103, 76);
+    ctx.lineTo(170, 15);
+    ctx.stroke();
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
+}</pre>
+
+<p>The resulting graph looks like this:</p>
+
+<p>{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}</p>
+
+<h2 id="Scaling">Scaling</h2>
+
+<p>The second variant of the <code>drawImage()</code> method adds two new parameters and lets us place scaled images on the canvas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}</dt>
+ <dd>This adds the <code>width</code> and <code>height</code> parameters, which indicate the size to which to scale the image when drawing it onto the canvas.</dd>
+</dl>
+
+<h3 id="Example_Tiling_an_image">Example: Tiling an image</h3>
+
+<p>In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done simply by looping and placing the scaled images at different positions. In the code below, the first <code>for</code> loop iterates over the rows. The second <code>for</code> loop iterates over the columns. The image is scaled to one third of its original size, which is 50x38 pixels.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.</p>
+</div>
+
+<div class="hidden">
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function() {
+    for (var i = 0; i &lt; 4; i++) {
+      for (var j = 0; j &lt; 3; j++) {
+        ctx.drawImage(img, j * 50, i * 38, 50, 38);
+      }
+    }
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+}</pre>
+
+<p>The resulting canvas looks like this:</p>
+
+<p>{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}</p>
+
+<h2 id="Slicing">Slicing</h2>
+
+<p>The third and last variant of the <code>drawImage()</code> method has eight parameters in addition to the image source. It lets us cut out a section of the source image, then scale and draw it on our canvas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}</dt>
+ <dd>Given an <code>image</code>, this function takes the area of the source image specified by the rectangle whose top-left corner is (<code>sx</code>, <code>sy</code>) and whose width and height are <code>sWidth</code> and <code>sHeight</code> and draws it into the canvas, placing it on the canvas at (<code>dx</code>, <code>dy</code>) and scaling it to the size specified by <code>dWidth</code> and <code>dHeight</code>.</dd>
+</dl>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right; height: 290px; width: 300px;">To really understand what this does, it may help to look at the image to the right. The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.</p>
+
+<p>Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.</p>
+
+<h3 id="Example_Framing_an_image">Example: Framing an image</h3>
+
+<p>In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.</p>
+
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+   &lt;div style="display:none;"&gt;
+     &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"&gt;
+     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
+   &lt;/div&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<pre class="brush: js">function draw() {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+
+  // Draw slice
+  ctx.drawImage(document.getElementById('source'),
+                33, 71, 104, 124, 21, 20, 87, 104);
+
+  // Draw frame
+  ctx.drawImage(document.getElementById('frame'), 0, 0);
+}</pre>
+
+<p>We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.</p>
+
+<p>{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p>
+
+<p>The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then simply use <code>drawImage()</code> to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second <code>drawImage()</code> call.</p>
+
+<h2 id="Art_gallery_example">Art gallery example</h2>
+
+<p>In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a {{HTMLElement("canvas")}}  element is inserted for each image and a frame is drawn around it.</p>
+
+<p>In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.</p>
+
+<p>The code below should be self-explanatory. We loop through the {{domxref("document.images")}} container and add new canvas elements accordingly. Probably the only thing to note, for those not so familiar with the DOM, is the use of the {{domxref("Node.insertBefore")}} method. <code>insertBefore()</code> is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).</p>
+
+<pre class="brush: html">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+     &lt;table&gt;
+      &lt;tr&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"&gt;&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"&gt;&lt;/td&gt;
+      &lt;/tr&gt;
+     &lt;/table&gt;
+     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>And here's some CSS to make things look nice:</p>
+
+<pre class="brush: css">body {
+  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+</pre>
+
+<p>Tying it all together is the JavaScript to draw our framed images:</p>
+
+<pre class="brush: js">function draw() {
+
+  // Loop through all images
+  for (var i = 0; i &lt; document.images.length; i++) {
+
+    // Don't add a canvas for the frame image
+    if (document.images[i].getAttribute('id') != 'frame') {
+
+      // Create canvas element
+      canvas = document.createElement('canvas');
+      canvas.setAttribute('width', 132);
+      canvas.setAttribute('height', 150);
+
+      // Insert before the image
+      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+
+      ctx = canvas.getContext('2d');
+
+      // Draw image to canvas
+      ctx.drawImage(document.images[i], 15, 20);
+
+      // Add frame
+      ctx.drawImage(document.getElementById('frame'), 0, 0);
+    }
+  }
+}</pre>
+
+<p>{{EmbedLiveSample("Art_gallery_example", 725, 400)}}</p>
+
+<h2 id="Controlling_image_scaling_behavior">Controlling image scaling behavior</h2>
+
+<p>As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property to control the use of image smoothing algorithms when scaling images within your context. By default, this is <code>true</code>, meaning images will be smoothed when scaled. You can disable this feature like this:</p>
+
+<pre class="brush: js">ctx.mozImageSmoothingEnabled = false;
+ctx.webkitImageSmoothingEnabled = false;
+ctx.msImageSmoothingEnabled = false;
+ctx.imageSmoothingEnabled = false;
+</pre>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}</p>
diff --git a/files/pt-br/web/guide/html/canvas_tutorial/utilizacao_basica/index.html b/files/pt-br/web/guide/html/canvas_tutorial/utilizacao_basica/index.html
new file mode 100644
index 0000000000..767a5ff97c
--- /dev/null
+++ b/files/pt-br/web/guide/html/canvas_tutorial/utilizacao_basica/index.html
@@ -0,0 +1,153 @@
+---
+title: Utilização básica do Canvas
+slug: Web/Guide/HTML/Canvas_tutorial/Utilizacao_basica
+tags:
+  - Canvas
+  - HTML
+  - Intermediário
+  - Tutorial
+  - graficos
+translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div>
+
+<div class="summary"><span id="result_box" lang="pt"><span>Vamos começar este tutorial olhando para o elemento </span></span> {{HTMLElement("canvas")}} {{Glossary("HTML")}} <span lang="pt"><span> em si.</span> <span>No final desta página, você saberá como configurar um contexto de canvas 2D e desenhar um primeiro exemplo em seu navegador.</span></span></div>
+
+<h2 id="O_elemento_&lt;canvas>">O elemento <code>&lt;canvas&gt;</code></h2>
+
+<p>Vamos começar esse tutorial olhando o elemento  {{HTMLElement("canvas")}} em si.</p>
+
+<pre class="brush: html">&lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Se parece muito com o elemento <code>&lt;img&gt; </code>com a diferença de não possuir os atributos <code>src</code> e <code>alt</code>. O elemento <code>&lt;canvas&gt;</code> tem apenas dois atributos - <em><strong>width</strong> </em>e <em><strong>height</strong>. </em>Ambos são opcionais e podem ser aplicados utilizando as propriedades <a href="/en-US/docs/DOM" rel="internal" title="en/DOM">DOM</a> respectivas. Se não forem especificados, o canvas será iniciado com <strong>300 <em>pixels</em></strong><em> </em>de largura por <strong>150 <em>pixels</em></strong><em> </em>de altura. O elemento pode ser redimensionado por <a href="/en-US/docs/Web/CSS" rel="internal" title="en/CSS">CSS</a>, mas durante a renderização a imagem é escalonada para caber no tamanho do layout.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Se as suas renderizações parecerem distorcidas, tente especificar os atributos <code>width</code> e <code>height</code> no <code>&lt;canvas&gt;</code> e não usando CSS.</p>
+</div>
+
+<p>O atributo <code>id</code> não é específico do elemento <code>&lt;canvas&gt;</code> mas um dos atributos padrão do HTML que pode ser aplicado em (quase) todos os elementos HTML (como o <em><code>class</code> </em>por exemplo). É sempre uma boa ideia inserir um <code>id</code> pois fica muito mais fácil de capturar o elemento no seu <em>script.</em></p>
+
+<p>O elemento <code>&lt;canvas&gt;</code> pode ser estilizado como qualquer imagem (margem, borda, fundo, etc). Contudo, essas regras não afetarão o desenho no canvas. Nós veremos como isso é feito a seguir nesse tutorial. Quando nenhuma regra de estilo for aplicada, o canvas iniciará totalmente transparente.</p>
+
+<div id="section_2">
+<h3 id="Conteúdo_alternativo">Conteúdo alternativo</h3>
+
+<p>Uma vez que alguns navegadores mais antigos (em particular, versões do Internet Explorer anteriores a 9) não suportam o elemento {{HTMLElement("canvas")}}, você precisará prover um conteúdo alternativo para ser mostrado nesses navegadores.</p>
+
+<p>Isto é muito simples: basta inserir o conteúdo alternativo dentro do elemento <code>&lt;canvas&gt;</code>. Navegadores que não suportam o <code>&lt;canvas&gt;</code> irão renderizar o conteúdo alternativo. Já os navegadores que suportam <code>&lt;canvas&gt;</code> irão ignorar o conteúdo alternativo, renderizando o canvas normalmente.</p>
+
+<p>Por exemplo, podemos prover um texto descritivo do canvas ou uma imagem estática do conteúdo. Algo como isto:</p>
+
+<pre class="brush: html">&lt;canvas id="stockGraph" width="150" height="150"&gt;
+  preço das ações: $3.15 +0.15
+&lt;/canvas&gt;
+
+&lt;canvas id="clock" width="150" height="150"&gt;
+  &lt;img src="images/clock.png" width="150" height="150" alt=""/&gt;
+&lt;/canvas&gt;
+</pre>
+
+<h3 id="Tag_&lt;canvas>_é_necessária">Tag <code>&lt;/canvas&gt;</code> é necessária</h3>
+
+<p>Ao contrário do elemento {{HTMLElement("img")}}, o elemento {{HTMLElement("canvas")}} a tag de fechamento <span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">&lt;/canvas&gt;</code><span style="line-height: 1.5;">)</span><span style="line-height: 1.5;"> é necessária</span><span style="line-height: 1.5;">.</span></p>
+
+<div class="note">
+<p><strong>Nota:</strong> Embora as primeiras versões do navegador Safari da Apple não exijam a tag de fechamento, a especificação indica que ela é necessária para <span style="line-height: 1.5;">que haja maior compatibilidade, </span><span style="line-height: 1.5;">portanto não se esqueça de incluí-la. Essas versões do Safari (antes da versão 2.0) irão processar o conteúdo do alternativo, além da própria tela, a menos que você use o CSS para mascará-lo. Felizmente, os usuários dessas versões do Safari são raros hoje em dia.</span></p>
+</div>
+
+<p>Se o conteúdo alternativo não for necessário, um simples <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> é totalmente compatível com todos os navegadores que suportam canvas.</p>
+
+<h2 id="O_contexto_de_renderização">O contexto de renderização</h2>
+
+<p>{{HTMLElement("canvas")}} cria uma superfície de desenho de tamanho fixo que expõe um ou mais contextos de renderização, que são usados ​​para criar e manipular o conteúdo mostrado. Vamos nos concentrar no contexto de renderização 2D. Outros contextos podem fornecer diferentes tipos de renderização; por exemplo, <a href="/pt-BR/docs/Web/WebGL" style="line-height: 1.5;" title="/en-US/docs/Web/WebGL">WebGL</a> <span style="line-height: 1.5;">usa um contexto 3D ("experimental-WebGL") baseado em </span><a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a><span style="line-height: 1.5;">.</span></p>
+
+<p>Incialmente o canvas é branco. Para mostrar alguma coisa, primeiro um <em>script </em>precisa acessar o contexto de renderização e desenhar sobre ele. O elemento {{HTMLElement("canvas")}} tem um <a href="/en-US/docs/Web/API/HTMLCanvasElement#Methods">método</a> chamado <code>getContext()</code>, usado para obter o contexto de renderização e suas funções de desenho. <code>getContext()</code> recebe o tipo de contexto como parâmetro. Para gráficos 2D, que serão abrangidos nesse tutorial, deverá ser especificado "2d".</p>
+
+<pre class="brush: js">var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+</pre>
+
+<p>A primeira linha recupera o nó DOM do elemento {{HTMLElement ("canvas")}} chamando o método {{domxref ("document.getElementById()")}}. Depois de ter o nó do elemento, podemos acessar o contexto de desenho usando o método <code>getContext()</code>.</p>
+
+<div id="section_5">
+<h2 id="Verificação_de_suporte">Verificação de suporte</h2>
+
+<p>O conteúdo alternativo é mostrado nos navegadores que não suportam o elemento {{HTMLElement("canvas")}}, mas essa checagem pode ser feita através de um <em>script</em> simplesmente testando a presença do método <code>getContext():</code></p>
+
+<pre class="brush: js">var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext){
+  var ctx = canvas.getContext('2d');
+  // codigo de desenho aqui
+} else {
+  // codigo para quando o canvas nao for suportado aqui
+}
+</pre>
+</div>
+</div>
+
+<h2 id="Um_modelo_de_estrutura">Um modelo de estrutura</h2>
+
+<p>Aqui, um modelo minimalista, que vamos usar como ponto de partida para os exemplos posteriores:</p>
+
+<div class="note">
+<p><strong>Nota:</strong> <span id="result_box" lang="pt"><span>não é uma boa prática incorporar um script dentro do HTML.</span> <span>Nós fazemos isso aqui para manter o exemplo conciso</span></span>.</p>
+</div>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Canvas tutorial&lt;/title&gt;
+    &lt;script type="text/javascript"&gt;
+      function draw(){
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext){
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    &lt;/script&gt;
+    &lt;style type="text/css"&gt;
+      canvas { border: 1px solid black; }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body onload="draw();"&gt;
+    &lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>O <em>script </em>inclui a função chamada draw(), que é executada uma vez ao término do carregamento da página; este exemplo usa o evento <em>onload </em>do documento. Essa função, ou uma parecida, poderia usar {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou qualquer outro manipulador de evento, contanto que a página tenha sido carregada primeiro.</p>
+
+<p>{{EmbedLiveSample("Um_modelo_de_estrutura", 160, 160)}}</p>
+
+<h2 id="Um_simples_exemplo">Um simples exemplo</h2>
+
+<p>Para começar, vamos dar uma olhada num exemplo simples que desenha a interseção de dois retângulos, dos quais um deles tem uma transparência. Exploraremos em mais detalhes o funcionamento nos exemplos posteriores.</p>
+
+<pre class="brush: html">&lt;html&gt;
+ &lt;head&gt;
+  &lt;script type="application/javascript"&gt;
+    function draw() {
+      var canvas = document.getElementById("canvas");
+      if (canvas.getContext) {
+        var ctx = canvas.getContext("2d");
+
+        ctx.fillStyle = "rgb(200,0,0)";
+        ctx.fillRect (10, 10, 55, 50);
+
+        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+        ctx.fillRect (30, 30, 55, 50);
+      }
+    }
+  &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Este exemplo parece assim:</p>
+
+<p>{{EmbedLiveSample("Um_simples_exemplo", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p>
+
+<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}</p>
diff --git a/files/pt-br/web/guide/html/categorias_de_conteudo/index.html b/files/pt-br/web/guide/html/categorias_de_conteudo/index.html
new file mode 100644
index 0000000000..7b55358b7b
--- /dev/null
+++ b/files/pt-br/web/guide/html/categorias_de_conteudo/index.html
@@ -0,0 +1,148 @@
+---
+title: Categorias de conteúdo
+slug: Web/Guide/HTML/Categorias_de_conteudo
+tags:
+  - Avançado
+  - Guía
+  - HTML
+  - HTML5
+  - NeedsUpdate
+  - Web
+translation_of: Web/Guide/HTML/Content_categories
+---
+<p><span class="seoSummary">Cada elemento HTML deve permanecer, por regras, definindo que tipo de conteúdo ele pode ter. Essas regras estão agrupadas em modelos de conteúdo para muitos elementos. Cada elemento HTML pertence a nenhum, um, ou múltiplos modelos de conteúdo, cada regra de definição que o conteúdo do elemento deve seguir em um documento HTML.</span></p>
+
+<p>Há três tipos de categorias de conteúdo:</p>
+
+<ul>
+ <li>Principais categorias de conteúdo, as quais descrevem regras comuns de conteúdo compartilhado por vários elementos;</li>
+ <li>Categorias de conteúdo relacionado, as quais decrevem regras comuns de conteúdo para elementos relacioados;</li>
+ <li>Categorias de conteúdo específico, as quais descrevem categorias raras compartilhadas somente por poucos elementos, às vezes apenas em um contexto específico.</li>
+</ul>
+
+<div style="width: 50%;"><a href="/@api/deki/files/6244/=Content_categories_venn.png" title="Content_categories_venn.png"><img alt="Content_categories_venn.png" class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 350px;"></a></div>
+
+<h2 id="Principais_categorias_de_conteúdo">Principais categorias de conteúdo</h2>
+
+<h3 id="Conteúdo_de_metadados">Conteúdo de metadados</h3>
+
+<p>Os elementos pertencentes a categoria <em>conteúdo de metadados </em>modificam a apresentação ou o comportamento do resto do documento, define ligações para outros documentos ou transmite outras informações <em>fora da banda.</em></p>
+
+<p>Os elementos pertencentes a essa categoria são {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} e {{HTMLElement("title")}}.</p>
+
+<h3 id="Conteúdo_de_fluxo"><a name="flow_content">Conteúdo de fluxo</a></h3>
+
+<p>Elementos pertencentes a categoria de conteúdo de fluxo tipicamente contém texto ou conteúdo embutido. Eles são: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e Text.</p>
+
+<p>Alguns outros elementos pertencem a essa categoria, mas somente se uma condição específica é realizada:</p>
+
+<ul>
+ <li>{{HTMLElement("area")}}, se for um descendente de um elemento {{HTMLElement("map")}}</li>
+ <li>{{HTMLElement("link")}}, se o atributo <strong><a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop">itemprop</a> </strong>estiver presente</li>
+ <li>{{HTMLElement("meta")}}, se o atributo <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a> estiver presente</li>
+ <li>{{HTMLElement("style")}}, se o atributo {{htmlattrxref("scoped","style")}} estiver presente</li>
+</ul>
+
+<h3 id="Conteúdo_de_seccionamento">Conteúdo de seccionamento</h3>
+
+<p>Os elementos pertencentes ao modelo de conteúdo de seccionamento criam uma <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">seção no esboço atual</a> que define o escopo dos elementos {{HTMLElement("header")}}, elementos {{HTMLElement("footer")}} e na <a href="#Heading_content" title="#heading content">conteúdo do cabeçalho</a>.</p>
+
+<p>Elementos pertencentes a essa categoria são {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} e {{HTMLElement("section")}}. </p>
+
+<div class="note">
+<p><em>Nota:</em> Não confunda esse modelo de conteúdo com a categoria de <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="Sections and Outlines of an HTML5 document#sectioning root">seccionamento raiz</a> que isola seus conteúdos dos esboços regulares.</p>
+</div>
+
+<h3 id="Conteúdo_do_cabeçalho">Conteúdo do cabeçalho</h3>
+
+<p>O conteúdo do cabeçalho define o título de uma seção, se é marcada por um explícito elemento do <a href="#Sectioning_content" title="#sectioning content">conteúdo de seccionamento</a> ou implicitamente definido pelo próprio conteúdo do cabeçalho.</p>
+
+<p>Os elementos pertencentes a essa categoria são {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} e {{HTMLElement("hgroup")}}.</p>
+
+<div class="note">
+<p><em>Note:</em> Embora provavelmente contenha algum conteúdo do cabeçalho, o {{HTMLElement("header")}} não faz parte do conteúdo do cabeçalho em si.</p>
+</div>
+
+<h3 id="Conteúdo_fraseado">Conteúdo fraseado</h3>
+
+<p>O conteúdo fraseado define o texto e a marcação que ele contém. Séries de conteúdos fraseados compõem parágrafos.</p>
+
+<p>Os elementos pertencentes a essa categoria são {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e texto simples (não consistindo somente de caracteres de espaço em branco).</p>
+
+<p>Alguns outros elementos pertencem a essa categoria, mas somente se uma condição específica é realizada:</p>
+
+<ul>
+ <li>{{HTMLElement("a")}}, se contém somente conteúdo fraseado</li>
+ <li>{{HTMLElement("area")}}, se for um descendente de um elemento {{HTMLElement("map")}}</li>
+ <li>{{HTMLElement("del")}}, se contém somente conteúdo fraseado</li>
+ <li>{{HTMLElement("ins")}}, se contém somente conteúdo fraseado</li>
+ <li>{{HTMLElement("link")}}, se o atributo <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a> estiver presente</li>
+ <li>{{HTMLElement("map")}}, se contém somente conteúdo fraseado</li>
+ <li>{{HTMLElement("meta")}}, se o atributo <a href="/en-US/docs/HTML/Global_attributes#attr-itemprop" title="HTML/Global attributes#itemprop"><strong>itemprop</strong></a> estiver presente</li>
+</ul>
+
+<h3 id="Conteúdo_embutido">Conteúdo embutido</h3>
+
+<p>O conteúdo embutido importa outro recurso ou insere conteúdo de uma outra linguagem de marcação no documento. Os elementos que pertencem a essa categoria incluem: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}} e {{HTMLElement("video")}}.</p>
+
+<h3 id="Conteúdo_interativo"><a name="interactive_content">Conteúdo interativo</a></h3>
+
+<p>O conteúdo interativo inclui elementos que são especificamente desenvolvidos para a interação do usuário. Os elementos que pertencem a essa categoria incluem: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}. Alguns elementos pertencem a essa categoria somente sob condições específicas:</p>
+
+<ul>
+ <li>{{HTMLElement("audio")}}, se o atributo {{htmlattrxref("controls", "audio")}} estiver presente</li>
+ <li>{{HTMLElement("img")}}, se o atributo {{htmlattrxref("usemap", "img")}} estiver presente</li>
+ <li>{{HTMLElement("input")}}, se o atributo {{htmlattrxref("type", "input")}} não estiver no modo escondido</li>
+ <li>{{HTMLElement("menu")}}, se o atributo {{htmlattrxref("type", "menu")}} estiver no modo barra de ferramentas</li>
+ <li>{{HTMLElement("object")}}, se o atributo {{htmlattrxref("usemap", "object")}} estiver presente</li>
+ <li>{{HTMLElement("video")}}, se o atributo {{htmlattrxref("controls", "video")}} estiver presente</li>
+</ul>
+
+<h3 id="Conteúdo_associado_ao_form">Conteúdo associado ao <strong>form</strong></h3>
+
+<p>O conteúdo associado ao <strong>form</strong> compreende elementos que têm um formulário de proprietário, exposto por um atributo <strong>form</strong>. Um formulário de proprietário é ou um elemento {{HTMLElement("form")}} ou o elemento o qual o ID é especificado no atributo <strong>form</strong>.</p>
+
+<ul>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("keygen")}}</li>
+ <li>{{HTMLElement("label")}}</li>
+ <li>{{HTMLElement("meter")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("output")}}</li>
+ <li>{{HTMLElement("progress")}}</li>
+ <li>{{HTMLElement("select")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
+
+<p> Essa categoria contém várias sub-categorias:</p>
+
+<dl>
+ <dt><a name="Form_listed">listed</a></dt>
+ <dd>Elementos que estão listados nas coleções IDL <a href="/en-US/docs/DOM/form.elements" title="DOM/form.elements">form.elements</a> e fieldset.elements. Contém {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}} e {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_labelable">labelable</a></dt>
+ <dd>Elementos que podem ser associados com elementos {{HTMLElement("label")}}. Contém {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}} e {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_submittable">submittable</a></dt>
+ <dd>Elementos que podem ser usados para construir o formulário de dados quando o formulário é enviado. Contém {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_resettable">resettable</a></dt>
+ <dd>Elementos que podem ser afetados quando um formulário é reinicializado. Contém {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}} e {{HTMLElement("textarea")}}.</dd>
+</dl>
+
+<h2 id="Modelo_de_conteúdo_transparente">Modelo de conteúdo transparente</h2>
+
+<p>Se um elemento tem um modelo de conteúdo transparente, então seu conteúdo deve ser estruturado de tal forma que ele seja um HTML5 válido, mesmo se o elemento transparente for removido e substituído pelos elementos filhos.</p>
+
+<p>Por exemplo, os elementos {{HTMLElement("del")}} e {{HTMLELement("ins")}} são transparentes:</p>
+
+<pre>&lt;p&gt;We hold these truths to be &lt;del&gt;&lt;em&gt;sacred &amp;amp; undeniable&lt;/em&gt;&lt;/del&gt; &lt;ins&gt;self-evident&lt;/ins&gt;.&lt;/p&gt;
+</pre>
+
+<p>Se aqueles elementos forem removidos, esse fragmento continuaria sendo um HTML válido.</p>
+
+<pre>&lt;p&gt;We hold these truths to be &lt;em&gt;sacred &amp;amp; undeniable&lt;/em&gt; self-evident.&lt;/p&gt;
+</pre>
+
+<h2 id="Outros_modelos_de_conteúdo">Outros modelos de conteúdo</h2>
+
+<p>Raiz de secionamento.</p>
diff --git a/files/pt-br/web/guide/html/content_editable/index.html b/files/pt-br/web/guide/html/content_editable/index.html
new file mode 100644
index 0000000000..ed2a588e47
--- /dev/null
+++ b/files/pt-br/web/guide/html/content_editable/index.html
@@ -0,0 +1,57 @@
+---
+title: Content Editable
+slug: Web/Guide/HTML/Content_Editable
+translation_of: Web/Guide/HTML/Editable_content
+---
+<p><span class="seoSummary">No HTML5 qualquer elemento pode ser editado. Usando alguns eventos de JavaScript podemos transformar sua web page em um editor de texto completo e rápido. Este artigo fornece algumas informações sobre esta funcionalidade.</span></p>
+
+<h2 id="Compatibilidade">Compatibilidade</h2>
+
+<p>Conteúdo editável é totalmente compatível com os seguintes browsers.</p>
+
+<ul>
+ <li>Firefox 3.5+</li>
+ <li>Firefox for Android 19+</li>
+ <li>Chrome 4.0+</li>
+ <li>Internet Explorer 5.5+ *</li>
+ <li>Safari 3.1+</li>
+ <li>Opera 9+</li>
+ <li>iOS Safari 5.0+</li>
+ <li>Android Browser 3.0+</li>
+ <li>Opera Mobile 12.1+</li>
+ <li>Chrome for Android 25+</li>
+</ul>
+
+<p>Ainda não é suportato pelo Opera Mini.</p>
+
+<div class="note">
+<p>*A maioria dos elementos HTML não suporta esta funcionalidade</p>
+</div>
+
+<h2 id="Como_isso_funciona">Como isso funciona?</h2>
+
+<p>Defina o atributo {{DOMXRef("HTMLElement.contentEditable", "contentEditable")}} para <code>true</code> no seu elemento HTML. Isto pode ser usado na maioria dos elementos HTML.</p>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Um exemplo simples:</p>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;body&gt;
+    &lt;div contentEditable="true"&gt;
+      Este conteúdo pode ser editado.
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt; </pre>
+
+<p>Você pode ver o exemplo funcionando com com uma integração de JavaScript utilizando LocalStorage <a class="external" href="http://html5demos.com/contenteditable" title="http://html5demos.com/contenteditable">aqui</a>. Com a fonte <a href="http://html5demos.com/contenteditable#view-source">aqui</a>.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<pre class="code">user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre>
+
+<p><a href="/en/Midas" title="en/Midas">Como interagir com o conteúdo </a> (Antiga API do  IE)  <a href="/en/Rich-Text_Editing_in_Mozilla" title="en/rich-text editing in mozilla">aqui</a></p>
diff --git a/files/pt-br/web/guide/html/forms/form_validation/index.html b/files/pt-br/web/guide/html/forms/form_validation/index.html
new file mode 100644
index 0000000000..7f9146d0a4
--- /dev/null
+++ b/files/pt-br/web/guide/html/forms/form_validation/index.html
@@ -0,0 +1,813 @@
+---
+title: Form data validation
+slug: Web/Guide/HTML/Forms/Form_validation
+translation_of: Learn/Forms/Form_validation
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}</div>
+
+<p class="summary">A validação de formulário nos ajuda a garantir que os usuários preencham os formulários no formato correto, garantindo que os dados enviados funcionem com êxito em nossos aplicativos. Este artigo apresentará conceitos e exemplos básicos sobre validação de formulário. Para mais informações adicionais, consulte o <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation guide</a>.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Conhecimento em informática, uma compreensão razoável de <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, e <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender o que é validação de formulário, por que é importante e aplicação de várias técnicas para implementá-lo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="O_que_é_validação_de_formulário">O que é validação de formulário?</h2>
+
+<p>Vá a qualquer site popular com um formulário de registro, e perceberá que eles dão feedback quando você não insere seus dados no formato esperado. Você receberá mensagens como:</p>
+
+<ul>
+ <li>"Sua senha precisa ter entre 8 e 30 caracteres e conter uma letra maiúscula, um símbolo e um número"</li>
+ <li>"Por favor, digite seu número de telefone no formato xxx-xxxx" (ele impõe três números seguidos por um traço, seguido por quatro números)</li>
+ <li>"Por favor insira um endereço de email válido" (se a sua entrada não estiver no formato "email@email.com")</li>
+ <li>"Este campo é obrigatório" (você não pode deixar este campo em branco)</li>
+</ul>
+
+<p>Isso é chamado de validação de formulário - quando você insere dados, o aplicativo da Web faz a verificação para ver se os dados estão corretos. Se estiver correto, o aplicativo permite que os dados sejam enviados ao servidor e (geralmente) salvos em um banco de dados; se não, você receberá uma mensagem de erro explicando quais correções precisam ser feitas. A validação de formulários pode ser implementada de várias maneiras diferentes.</p>
+
+<p><br>
+ Queremos tornar o preenchimento de formulários da web o mais fácil possível. Então, por que insistimos em validar nossos formulários? Existem três razões principais:</p>
+
+<ul>
+ <li><strong>Nos queremos que o dado correto e no formato correto </strong> — nossa aplicação não irá trabalhar de forma correta se os dados dos nossos usuarios estivem armazenados em formato incorreto, ou quando esses dados são omitidos.</li>
+ <li><strong>Quemos proteger os dados dos nossos usuários</strong> — Forçarnosos usuários a fornecer senhas seguras facilita na proteção das informações da conta do usuário.</li>
+ <li><strong>Queremos proteger nos mesmos</strong> — Existem diversas maneiras de um usuário malicioso usar formulários desprotegidos para danificar nossa aplicação (veja <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a>).<br>
+  {{warning("Nunca confie nos dados passados do cliente para o servidor. Mesmo que seu formulário seja validado de maneira correta e previna a má formação de inputs no lado do cliente, um usuário malicioso ainda pode roubar o request da conexão.")}}</li>
+</ul>
+
+<h3 id="Different_types_of_form_validation">Different types of form validation</h3>
+
+<p>There are two different types of form validation which you'll encounter on the web:</p>
+
+<ul>
+ <li><strong>Client-side validation</strong> is validation that occurs in the browser before the data has been submitted to the server. This is more user-friendly than server-side validation as it gives an instant response. This can be further subdivided:
+
+  <ul>
+   <li><strong>JavaScript</strong> validation is coded using JavaScript. It is completely customizable.</li>
+   <li><strong>Built-in form validation</strong> using HTML5 form validation features.  This generally does not require JavaScript. Built-in form validation has better performance, but it is not as customizable as JavaScript.</li>
+  </ul>
+ </li>
+ <li><strong>Server-side validation</strong> is validation which occurs on the server after the data has been submitted.  Server-side code is used to validate the data before it is saved into the database. If the data fails authentication, a response is sent back to the client to tell the user what corrections to make. Server-side validation is not as user-friendly as client-side validation, as it does not provide errors until the entire form has been submitted.  However, server-side validation is your application's last line of defence against incorrect or even malicious data. All popular <a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">server-side frameworks</a> have features for <strong>validating</strong> and <strong>sanitizing</strong> data (making it safe).</li>
+</ul>
+
+<p>In the real world, developers tend to use a combination of client-side and server-side validation.</p>
+
+<h2 id="Using_built-in_form_validation">Using built-in form validation</h2>
+
+<p>One of the features of <a href="/en-US/docs/HTML/HTML5">HTML5</a> is the ability to validate most user data without relying on scripts. This is done by using <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes">validation attributes</a> on form elements, which allow you to specify rules for a form input like whether a value needs to be filled in, the minimum and maximum length of the data, whether it needs to be a number, an email address, or something else, and a pattern that it must match. If the entered data follows all the specified rules, it is considered valid; if not, it is considered invalid.</p>
+
+<p>When an element is valid:</p>
+
+<ul>
+ <li>The element matches the {{cssxref(":valid")}} CSS pseudo-class; this will let you apply a specific style to valid elements.</li>
+ <li>If the user tries to send the data, the browser will submit the form, provided there is nothing else stopping it from doing so (e.g., JavaScript).</li>
+</ul>
+
+<p>When an element is invalid:</p>
+
+<ul>
+ <li>The element matches the {{cssxref(":invalid")}} CSS pseudo-class; this will let you apply a specific style to invalid elements.</li>
+ <li>If the user tries to send the data, the browser will block the form and display an error message.</li>
+</ul>
+
+<h3 id="Validation_constraints_on_input_elements_—_starting_simple">Validation constraints on input elements — starting simple</h3>
+
+<p>In this section, we'll look at some of the different HTML5 features that can be used to validate {{HTMLElement("input")}} elements.</p>
+
+<p>Let's start with a simple example — an input that allows you to choose your favorite fruit out of a choice of banana or cherry. This involves a simple text {{HTMLElement("input")}} with a matching label, and a submit {{htmlelement("button")}}. You can find the source code on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>, and a live example below:</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="choose"&gt;Would you prefer a banana or cherry?&lt;/label&gt;
+  &lt;input id="choose" name="i_like"&gt;
+  &lt;button&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<pre class="brush: css notranslate">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Hidden_code", "100%", 50)}}</p>
+
+<p>To begin with, make a copy of <code>fruit-start.html</code> in a new directory on your hard drive.</p>
+
+<h3 id="The_required_attribute">The required attribute</h3>
+
+<p>The simplest HTML5 validation feature to use is the {{htmlattrxref("required", "input")}} attribute — if you want to make an input mandatory, you can mark the element using this attribute. When this attribute is set, the form won't submit (and will display an error message) when the input is empty (the input will also be considered invalid).</p>
+
+<p>Add a <code>required</code> attribute to your input, as shown below:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="choose"&gt;Would you prefer a banana or cherry?&lt;/label&gt;
+  &lt;input id="choose" name="i_like" required&gt;
+  &lt;button&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Also, take note of the CSS included in the example file:</p>
+
+<pre class="brush: css notranslate">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}</pre>
+
+<p>This causes the input to have a bright red dashed border when it is invalid, and a more subtle black border when valid. Try out the new behaviour in the example below:</p>
+
+<p>{{EmbedLiveSample("The_required_attribute", "100%", 80)}}</p>
+
+<h3 id="Validating_against_a_regular_expression">Validating against a regular expression</h3>
+
+<p>Another very common validation feature is the {{htmlattrxref("pattern","input")}} attribute, which expects a <a href="/en-US/docs/JavaScript/Guide/Regular_Expressions">Regular Expression</a> as its value. A regular expression (regex) is a pattern that can be used to match character combinations in text strings, so they are ideal for form validation (as well as a variety of other uses in JavaScript).</p>
+
+<p>Regexs are quite complex, and we do not intend to teach you them exhaustively in this article. Below are some examples to give you a basic idea of how they work:</p>
+
+<ul>
+ <li><code>a</code> — matches one character that is <code>a</code> (not <code>b</code>, not <code>aa</code>, etc.)</li>
+ <li><code>abc</code> — matches <code>a</code>, followed by <code>b</code>, followed by <code>c</code>.</li>
+ <li><code>a|b</code> — matches one character that is <code>a</code> or <code>b</code>.</li>
+ <li><code>abc|xyz</code> — matches exactly <code>abc</code> or exactly <code>xyz</code> (but not <code>abcxyz</code>, or <code>a</code> or <code>y</code>, etc).</li>
+ <li>There are many more possibilities that we don't need to cover here.</li>
+</ul>
+
+<p>Anyway, let's implement an example — update your HTML to add a <code>pattern</code> attribute, like so:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="choose"&gt;Would you prefer a banana or a cherry?&lt;/label&gt;
+  &lt;input id="choose" name="i_like" required pattern="banana|cherry"&gt;
+  &lt;button&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}</p>
+
+<p>In this example, the {{HTMLElement("input")}} element accepts one of two possible values: the string "banana" or the string "cherry".</p>
+
+<p>At this point, try changing the value inside the <code>pattern</code> attribute to equal some of the examples you saw earlier, and look at how that affects the values you can enter to make the input value valid. Try writing some of your own, and see how you get on! Try to make them fruit-related where possible, so your examples make sense!</p>
+
+<div class="note">
+<p><strong>Note:</strong> Some {{HTMLElement("input")}} element types do not need a {{htmlattrxref("pattern","input")}} attribute to be validated. Specifying the <code>email</code> type for example validates the inputted value against a regular expression matching a well-formed email address (or a comma-separated list of email addresses if it has the {{htmlattrxref("multiple","input")}} attribute). As a further example, fields with the <code>url</code> type automatically require a properly-formed URL.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: The {{HTMLElement("textarea")}} element does not support the {{htmlattrxref("pattern","input")}} attribute.</p>
+</div>
+
+<h3 id="Constraining_the_length_of_your_entries">Constraining the length of your entries</h3>
+
+<p>All text fields created by {{HTMLElement("input")}} or {{HTMLElement("textarea")}} can be constrained in size using the {{htmlattrxref("minlength","input")}} and {{htmlattrxref("maxlength","input")}} attributes. A field is invalid if its value is shorter than the {{htmlattrxref("minlength","input")}} value or longer than the {{htmlattrxref("maxlength","input")}} value. Browsers often don't let the user type a longer value than expected into text fields anyway, but it is useful to have this fine-grained control available.</p>
+
+<p>For number fields (i.e. <code>&lt;input type="number"&gt;</code>), the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes also provide a validation constraint. If the field's value is lower than the {{htmlattrxref("min","input")}} attribute or higher than the {{htmlattrxref("max","input")}} attribute, the field will be invalid.</p>
+
+<p>Let's look at another example. Create a new copy of the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> file.</p>
+
+<p>Now delete the contents of the <code>&lt;body&gt;</code> element, and replace it with the following:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="choose"&gt;Would you prefer a banana or a cherry?&lt;/label&gt;
+    &lt;input type="text" id="choose" name="i_like" required minlength="6" maxlength="6"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="number"&gt;How many would you like?&lt;/label&gt;
+    &lt;input type="number" id="number" name="amount" value="1" min="1" max="10"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<ul>
+ <li>Here you'll see that we've given the <code>text</code> field a <code>minlength</code> and <code>maxlength</code> of 6 — the same length as banana and cherry. Entering less characters will show as invalid, and entering more is not possible in most browsers.</li>
+ <li>We've also given the <code>number</code> field a <code>min</code> of 1 and a <code>max</code> of 10 — entered numbers outside this range will show as invalid, and you won't be able to use the increment/decrement arrows to move the value outside this range.</li>
+</ul>
+
+<div class="hidden">
+<pre class="notranslate">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}
+
+div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>Here is the example running live:</p>
+
+<p>{{EmbedLiveSample("Constraining_the_length_of_your_entries", "100%", 100)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>&lt;input type="number"&gt;</code> (and other types, like <code>range</code>) can also take a {{htmlattrxref("step", "input")}} attribute, which specifies what increment the value will go up or down by when the input controls are used (like the up and down number buttons).</p>
+</div>
+
+<h3 id="Full_example">Full example</h3>
+
+<p>Here is a full example to show off usage of HTML's built-in validation features:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;
+    &lt;fieldset&gt;
+      &lt;legend&gt;Title&lt;abbr title="This field is mandatory"&gt;*&lt;/abbr&gt;&lt;/legend&gt;
+      &lt;input type="radio" required name="title" id="r1" value="Mr"&gt;&lt;label for="r1"&gt;Mr.&lt;/label&gt;
+      &lt;input type="radio" required name="title" id="r2" value="Ms"&gt;&lt;label for="r2"&gt;Ms.&lt;/label&gt;
+    &lt;/fieldset&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="n1"&gt;How old are you?&lt;/label&gt;
+    &lt;!-- The pattern attribute can act as a fallback for browsers which
+         don't implement the number input type but support the pattern attribute.
+         Please note that browsers that support the pattern attribute will make it
+         fail silently when used with a number field.
+         Its usage here acts only as a fallback --&gt;
+    &lt;input type="number" min="12" max="120" step="1" id="n1" name="age"
+           pattern="\d+"&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="t1"&gt;What's your favorite fruit?&lt;abbr title="This field is mandatory"&gt;*&lt;/abbr&gt;&lt;/label&gt;
+    &lt;input type="text" id="t1" name="fruit" list="l1" required
+           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range"&gt;
+    &lt;datalist id="l1"&gt;
+      &lt;option&gt;Banana&lt;/option&gt;
+      &lt;option&gt;Cherry&lt;/option&gt;
+      &lt;option&gt;Apple&lt;/option&gt;
+      &lt;option&gt;Strawberry&lt;/option&gt;
+      &lt;option&gt;Lemon&lt;/option&gt;
+      &lt;option&gt;Orange&lt;/option&gt;
+    &lt;/datalist&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="t2"&gt;What's your e-mail?&lt;/label&gt;
+    &lt;input type="email" id="t2" name="email"&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="t3"&gt;Leave a short message&lt;/label&gt;
+    &lt;textarea id="t3" name="msg" maxlength="140" rows="5"&gt;&lt;/textarea&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<pre class="brush: css notranslate">body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 200px;
+  margin: 0;
+  padding: 0 5px;
+}
+
+p &gt; label {
+  display: block;
+}
+
+input[type=text],
+input[type=email],
+input[type=number],
+textarea,
+fieldset {
+/* required to properly style form
+   elements on WebKit based browsers */
+  -webkit-appearance: none;
+
+  width : 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+input:invalid {
+  box-shadow: 0 0 5px 1px red;
+}
+
+input:focus:invalid {
+  box-shadow: none;
+}</pre>
+
+<p>{{EmbedLiveSample("Full_example", "100%", 420)}}</p>
+
+<p>See <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes">Validation-related attributes</a> for a complete list of attributes that can be used to constrain input values, and the input types that support them.</p>
+
+<h3 id="Customized_error_messages">Customized error messages</h3>
+
+<p>As seen in the examples above, each time the user tries to submit an invalid form, the browser displays an error message. The way this message is displayed depends on the browser.</p>
+
+<p>These automated messages have two drawbacks:</p>
+
+<ul>
+ <li>There is no standard way to change their look and feel with CSS.</li>
+ <li>They depend on the browser locale, which means that you can have a page in one language but an error message displayed in another language.</li>
+</ul>
+
+<table>
+ <caption>French versions of feedback messages on an English page</caption>
+ <thead>
+  <tr>
+   <th scope="col">Browser</th>
+   <th scope="col">Rendering</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Firefox 17 (Windows 7)</td>
+   <td><img alt="Example of an error message with Firefox in French on an English page" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></td>
+  </tr>
+  <tr>
+   <td>Chrome 22 (Windows 7)</td>
+   <td><img alt="Example of an error message with Chrome in French on an English page" src="/files/4327/error-chrome-win7.png" style="height: 96px; width: 261px;"></td>
+  </tr>
+  <tr>
+   <td>Opera 12.10 (Mac OSX)</td>
+   <td><img alt="Example of an error message with Opera in French on an English page" src="/files/4331/error-opera-macos.png" style="height: 83px; width: 218px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>To customize the appearance and text of these messages, you must use JavaScript; there is no way to do it using just HTML and CSS.</p>
+
+<p>HTML5 provides the <a href="/en-US/docs/Web/API/Constraint_validation" rel="external">constraint validation API</a> to check and customize the state of a form element. Among other things, it's possible to change the text of the error message. Let's see a quick example:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label for="mail"&gt;I would like you to provide me an e-mail&lt;/label&gt;
+  &lt;input type="email" id="mail" name="mail"&gt;
+  &lt;button&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>In JavaScript, you call the <a href="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a> method:</p>
+
+<pre class="brush: js notranslate">var email = document.getElementById("mail");
+
+email.addEventListener("input", function (event) {
+  if (email.validity.typeMismatch) {
+    email.setCustomValidity("I expect an e-mail, darling!");
+  } else {
+    email.setCustomValidity("");
+  }
+});</pre>
+
+<p>{{EmbedLiveSample("Customized_error_messages", "100%", 80)}}</p>
+
+<h2 id="Validating_forms_using_JavaScript">Validating forms using JavaScript</h2>
+
+<p>If you want to take control over the look and feel of native error messages, or if you want to deal with browsers that do not support HTML's built-in form validation, you must use JavaScript.</p>
+
+<h3 id="The_constraint_validation_API">The constraint validation API</h3>
+
+<p>More and more browsers now support the constraint validation API, and it's becoming reliable. This API consists of a set of methods and properties available on specific form element interfaces:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></li>
+ <li><a href="/en-US/docs/Web/API/HTMLFieldSetElement">HTMLFieldSetElement</a></li>
+ <li><a href="/en-US/docs/Web/API/HTMLInputElement">HTMLInputElement</a></li>
+ <li><a href="/en-US/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></li>
+ <li><a href="/en-US/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></li>
+ <li><a href="/en-US/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></li>
+</ul>
+
+<h4 id="Constraint_validation_API_properties">Constraint validation API properties</h4>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>validationMessage</code></td>
+   <td>A localized message describing the validation constraints that the control does not satisfy (if any), or the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is <code>false</code>), or the element's value satisfies its constraints.</td>
+  </tr>
+  <tr>
+   <td><code>validity</code></td>
+   <td>A {{domxref("ValidityState")}} object describing the validity state of the element. See that article for details of possible validity states.</td>
+  </tr>
+  <tr>
+   <td><code>willValidate</code></td>
+   <td>Returns <code>true</code> if the element will be validated when the form is submitted; <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Constraint_validation_API_methods">Constraint validation API methods</h4>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Method</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>checkValidity()</code></td>
+   <td>Returns <code>true</code> if the element's value has no validity problems; <code>false</code> otherwise. If the element is invalid, this method also causes an {{event("invalid")}} event at the element.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLFormElement.reportValidity()")}}</td>
+   <td>Returns <code>true</code> if the element or its child controls satisfy validation constraints. When <code>false</code> is returned, cancelable {{event("invalid")}} events are fired for each invalid element and validation problems are reported to the user.</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity(<em>message</em>)</code></td>
+   <td>Adds a custom error message to the element; if you set a custom error message, the element is considered to be invalid, and the specified error is displayed. This lets you use JavaScript code to establish a validation failure other than those offered by the standard constraint validation API. The message is shown to the user when reporting the problem.<br>
+    <br>
+    If the argument is the empty string, the custom error is cleared.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>For legacy browsers, it's possible to use a <a href="https://hyperform.js.org/" rel="external">polyfill such as Hyperform </a> to compensate for the lack of support for the constraint validation API. Since you're already using JavaScript, using a polyfill isn't an added burden to your Web site or Web application's design or implementation.</p>
+
+<h4 id="Example_using_the_constraint_validation_API">Example using the constraint validation API</h4>
+
+<p>Let's see how to use this API to build custom error messages. First, the HTML:</p>
+
+<pre class="brush: html notranslate">&lt;form novalidate&gt;
+  &lt;p&gt;
+    &lt;label for="mail"&gt;
+      &lt;span&gt;Please enter an email address:&lt;/span&gt;
+      &lt;input type="email" id="mail" name="mail"&gt;
+      &lt;span class="error" aria-live="polite"&gt;&lt;/span&gt;
+    &lt;/label&gt;
+  &lt;/p&gt;
+  &lt;button&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>This simple form uses the {{htmlattrxref("novalidate","form")}} attribute to turn off the browser's automatic validation; this lets our script take control over validation. However, this doesn't disable support for the constraint validation API nor the application of the CSS pseudo-class {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} and {{cssxref(":out-of-range")}} classes. That means that even though the browser doesn't automatically check the validity of the form before sending its data, you can still do it yourself and style the form accordingly.</p>
+
+<p>The <a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> attribute makes sure that our custom error message will be presented to everyone, including those using assistive technologies such as screen readers.</p>
+
+<h5 id="CSS">CSS</h5>
+
+<p>This CSS styles our form and the error output to look more attractive.</p>
+
+<pre class="brush: css notranslate">/* This is just to make the example nicer */
+body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input[type=email]{
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* This is our style for the invalid fields */
+input:invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+
+/* This is the style of our error messages */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}</pre>
+
+<h5 id="JavaScript">JavaScript</h5>
+
+<p>The following JavaScript code handles the custom error validation.</p>
+
+<pre class="brush: js notranslate">// There are many ways to pick a DOM node; here we get the form itself and the email
+// input box, as well as the span element into which we will place the error message.
+
+var form  = document.getElementsByTagName('form')[0];
+var email = document.getElementById('mail');
+var error = document.querySelector('.error');
+
+email.addEventListener("input", function (event) {
+  // Each time the user types something, we check if the
+  // email field is valid.
+  if (email.validity.valid) {
+    // In case there is an error message visible, if the field
+    // is valid, we remove the error message.
+    error.innerHTML = ""; // Reset the content of the message
+    error.className = "error"; // Reset the visual state of the message
+  }
+}, false);
+form.addEventListener("submit", function (event) {
+  // Each time the user tries to send the data, we check
+  // if the email field is valid.
+  if (!email.validity.valid) {
+
+    // If the field is not valid, we display a custom
+    // error message.
+    error.innerHTML = "I expect an e-mail, darling!";
+    error.className = "error active";
+    // And we prevent the form from being sent by canceling the event
+    event.preventDefault();
+  }
+}, false);</pre>
+
+<p>Here is the live result:</p>
+
+<p>{{EmbedLiveSample("Example_using_the_constraint_validation_API", "100%", 130)}}</p>
+
+<p>The constraint validation API gives you a powerful tool to handle form validation, letting you have enormous control over the user interface above and beyond what you can do just with HTML and CSS alone.</p>
+
+<h3 id="Validating_forms_without_a_built-in_API">Validating forms without a built-in API</h3>
+
+<p>Sometimes, such as with legacy browsers or <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">custom widgets</a>, you will not be able to (or will not want to) use the constraint validation API. In that case, you're still able to use JavaScript to validate your form. Validating a form is more a question of user interface than real data validation.</p>
+
+<p>To validate a form, you have to ask yourself a few questions:</p>
+
+<dl>
+ <dt>What kind of validation should I perform?</dt>
+ <dd>You need to determine how to validate your data: string operations, type conversion, regular expressions, etc. It's up to you. Just remember that form data is always text and is always provided to your script as strings.</dd>
+ <dt>What should I do if the form does not validate?</dt>
+ <dd>This is clearly a UI matter. You have to decide how the form will behave: Does the form send the data anyway? Should you highlight the fields which are in error? Should you display error messages?</dd>
+ <dt>How can I help the user to correct invalid data?</dt>
+ <dd>In order to reduce the user's frustration, it's very important to provide as much helpful information as possible in order to guide them in correcting their inputs. You should offer up-front suggestions so they know what's expected, as well as clear error messages. If you want to dig into form validation UI requirements, there are some useful articles you should read:
+ <ul>
+  <li>SmashingMagazine: <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a></li>
+  <li>SmashingMagazine: <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials</a></li>
+  <li>Six Revision: <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Best Practices for Hints and Validation in Web Forms</a></li>
+  <li>A List Apart: <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a></li>
+ </ul>
+ </dd>
+</dl>
+
+<h4 id="An_example_that_doesnt_use_the_constraint_validation_API">An example that doesn't use the constraint validation API</h4>
+
+<p>In order to illustrate this, let's rebuild the previous example so that it works with legacy browsers:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;
+    &lt;label for="mail"&gt;
+        &lt;span&gt;Please enter an email address:&lt;/span&gt;
+        &lt;input type="text" class="mail" id="mail" name="mail"&gt;
+        &lt;span class="error" aria-live="polite"&gt;&lt;/span&gt;
+    &lt;/label&gt;
+  &lt;p&gt;
+  &lt;!-- Some legacy browsers need to have the `type` attribute
+       explicitly set to `submit` on the `button`element --&gt;
+  &lt;button type="submit"&gt;Submit&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>As you can see, the HTML is almost the same; we just removed the HTML validation features. Note that <a href="/en-US/docs/Accessibility/ARIA">ARIA</a> is an independent specification that's not specifically related to HTML5.</p>
+
+<h5 id="CSS_2">CSS</h5>
+
+<p>Similarly, the CSS doesn't need to change very much; we just turn the {{cssxref(":invalid")}} CSS pseudo-class into a real class and avoid using the attribute selector that does not work on Internet Explorer 6.</p>
+
+<pre class="brush: css notranslate">/* This is just to make the example nicer */
+body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input.mail {
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* This is our style for the invalid fields */
+input.invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus.invalid {
+  outline: none;
+}
+
+/* This is the style of our error messages */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}</pre>
+
+<h5 id="JavaScript_2">JavaScript</h5>
+
+<p>The big changes are in the JavaScript code, which needs to do much more of the heavy lifting.</p>
+
+<pre class="brush: js notranslate">// There are fewer ways to pick a DOM node with legacy browsers
+var form  = document.getElementsByTagName('form')[0];
+var email = document.getElementById('mail');
+
+// The following is a trick to reach the next sibling Element node in the DOM
+// This is dangerous because you can easily build an infinite loop.
+// In modern browsers, you should prefer using element.nextElementSibling
+var error = email;
+while ((error = error.nextSibling).nodeType != 1);
+
+// As per the HTML5 Specification
+var emailRegExp = /^[a-zA-Z0-9.!#$%&amp;'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+// Many legacy browsers do not support the addEventListener method.
+// Here is a simple way to handle this; it's far from the only one.
+function addEvent(element, event, callback) {
+  var previousEventCallBack = element["on"+event];
+  element["on"+event] = function (e) {
+    var output = callback(e);
+
+    // A callback that returns `false` stops the callback chain
+    // and interrupts the execution of the event callback.
+    if (output === false) return false;
+
+    if (typeof previousEventCallBack === 'function') {
+      output = previousEventCallBack(e);
+      if(output === false) return false;
+    }
+  }
+};
+
+// Now we can rebuild our validation constraint
+// Because we do not rely on CSS pseudo-class, we have to
+// explicitly set the valid/invalid class on our email field
+addEvent(window, "load", function () {
+  // Here, we test if the field is empty (remember, the field is not required)
+  // If it is not, we check if its content is a well-formed e-mail address.
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  email.className = test ? "valid" : "invalid";
+});
+
+// This defines what happens when the user types in the field
+addEvent(email, "input", function () {
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+  if (test) {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  } else {
+    email.className = "invalid";
+  }
+});
+
+// This defines what happens when the user tries to submit the data
+addEvent(form, "submit", function () {
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  if (!test) {
+    email.className = "invalid";
+    error.innerHTML = "I expect an e-mail, darling!";
+    error.className = "error active";
+
+    // Some legacy browsers do not support the event.preventDefault() method
+    return false;
+  } else {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  }
+});</pre>
+
+<p>The result looks like this:</p>
+
+<p>{{EmbedLiveSample("An_example_that_doesn't_use_the_constraint_validation_API", "100%", 130)}}</p>
+
+<p>As you can see, it's not that hard to build a validation system on your own. The difficult part is to make it generic enough to use it both cross-platform and on any form you might create. There are many libraries available to perform form validation; you shouldn't hesitate to use them. Here are a few examples:</p>
+
+<ul>
+ <li>Standalone library
+  <ul>
+   <li><a href="http://rickharrison.github.com/validate.js/" rel="external">Validate.js</a></li>
+  </ul>
+ </li>
+ <li>jQuery plug-in:
+  <ul>
+   <li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="external">Validation</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="Remote_validation">Remote validation</h4>
+
+<p>In some cases, it can be useful to perform some remote validation. This kind of validation is necessary when the data entered by the user is tied to additional data stored on the server side of your application. One use case for this is registration forms, where you ask for a username. To avoid duplication, it's smarter to perform an AJAX request to check the availability of the username rather than asking the user to send the data, then send back the form with an error.</p>
+
+<p>Performing such a validation requires taking a few precautions:</p>
+
+<ul>
+ <li>It requires exposing an API and some data publicly; be sure it is not sensitive data.</li>
+ <li>Network lag requires performing asynchronous validation. This requires some UI work in order to be sure that the user will not be blocked if the validation is not performed properly.</li>
+</ul>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Form validation does not require complex JavaScript, but it does require thinking carefully about the user. Always remember to help your user to correct the data they provide. To that end, be sure to:</p>
+
+<ul>
+ <li>Display explicit error messages.</li>
+ <li>Be permissive about the input format.</li>
+ <li>Point out exactly where the error occurs (especially on large forms).</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
+</ul>
diff --git a/files/pt-br/web/guide/html/forms/how_to_build_custom_form_widgets/index.html b/files/pt-br/web/guide/html/forms/how_to_build_custom_form_widgets/index.html
new file mode 100644
index 0000000000..76e202e685
--- /dev/null
+++ b/files/pt-br/web/guide/html/forms/how_to_build_custom_form_widgets/index.html
@@ -0,0 +1,786 @@
+---
+title: How to build custom form widgets
+slug: Web/Guide/HTML/Forms/How_to_build_custom_form_widgets
+translation_of: Learn/Forms/How_to_build_custom_form_controls
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}</div>
+
+<p class="summary">There are many cases where <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">available HTML form widgets</a> are just nThere are many cases where available HTML form widgets are just not enough. If you want to <a href="/en-US/docs/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">perform advanced styling</a> on some widgets such as the {{HTMLElement("select")}} element or if you want to provide custom behaviors, you have no choice but to build your own widgets.</p>
+
+<p>In this article, we will see how to build such a widget. To that end, we will work with an example: rebuilding the {{HTMLElement("select")}} element.</p>
+
+<div class="note">
+<p><strong>Note:</strong> We'll focus on building the widgets, not on how to make the code generic and reusable; that would involve some non-trival JavaScript code and DOM manipulation in an unknown context, and that is out of the scope of this article.</p>
+</div>
+
+<h2 id="Design_structure_and_semantics">Design, structure, and semantics</h2>
+
+<p>Before building a custom widget, you should start by figuring out exactly what you want. This will save you some precious time. In particular, it's important to clearly define all the states of your widget. To do this, it's good to start with an existing widget whose states and behavior are well known, so that you can simply mimic those as much as possible.</p>
+
+<p>In our example, we will rebuild the {{HTMLElement("select")}} element. Here is the result we want to achieve:</p>
+
+<p><img alt="The three states of a select box" src="/files/4481/custom-select.png" style="height: 135px; width: 366px;"></p>
+
+<p>This screenshot shows the three main states of our widget: the normal state (on the left); the active state (in the middle) and the open state (on the right).</p>
+
+<p>In terms of behavior, we want our widget to be usable with a mouse as well as with a keyboard, just like any native widget. Let's start by defining how the widget reaches each state:</p>
+
+<dl>
+ <dt>The widget is in its normal state when:</dt>
+ <dd>
+ <ul>
+  <li>the page loads</li>
+  <li>the widget was active and the user clicks anywhere outside the widget</li>
+  <li>the widget was active and the user moves the focus to another widget using the keyboard</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Note:</strong> Moving the focus around the page is usually done through hitting the tab key, but this is not standard everywhere. For example cycling through links on a page is done in Safari by default using the <a href="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/" title="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/">Option+Tab combination</a>.</p>
+ </div>
+ </dd>
+ <dt>The widget is in its active state when:</dt>
+ <dd>
+ <ul>
+  <li>the user clicks on it</li>
+  <li>the user hits the tab key and it gains focus</li>
+  <li>the widget was in its open state and the user clicks on the widget.</li>
+ </ul>
+ </dd>
+ <dt>The widget is in its open state when:</dt>
+ <dd>
+ <ul>
+  <li>the widget is in any other state than open and the user clicks on it</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Once we know how to change states, it is important to define how to change the widget's value:</p>
+
+<dl>
+ <dt>The value changes when:</dt>
+ <dd>
+ <ul>
+  <li>the user clicks on an option when the widget is in the open state</li>
+  <li>the user hits the up or down arrow keys when the widget is in its active state</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Finally, let's define how the widget's options will behave:</p>
+
+<ul>
+ <li>When the widget is opened, the selected option is highlighted</li>
+ <li>When the mouse is over an option, the option is highlighted and the previously highlighted option is returned to its normal state</li>
+</ul>
+
+<p>For the purposes of our example, we'll stop with that; however, if you're a careful reader, you'll notice that some behaviors are missing. For example, what do you think will happen if the user hits the tab key while the widget is in its open state? The answer is... nothing. OK, the right behavior seems obvious but the fact is, because it's not defined in our specs, it is very easy to overlook this behavior. This is especially true in a team environment when the people who design the widget's behavior are different from the ones who implement it.</p>
+
+<p>Another fun example: what will happen if the user hits the up or down arrow keys while the widget is in the open state? This one is a little bit trickier. If you consider that the active state and the open state are completely different, the answer is again "nothing will happen" because we did not define any keyboard interactions for the opened state. On the other hand, if you consider that the active state and the open state overlap a bit, the value may change but the option will definitely not be highlighted accordingly, once again because we did not define any keyboard interactions over options when the widget is in its opened state (we have only defined what should happen when the widget is opened, but nothing after that).</p>
+
+<p>In our example, the missing specifications are obvious so we will handle them, but it can be a real problem on exotic new widgets, for which nobody has the slightest idea of what the right behavior is. So it's always good to spend time in this design stage, because if you define a behavior poorly, or forget to define one, it will be very hard to redefine it once the users have gotten used to it. If you have doubts, ask for the opinions of others, and if you have the budget for it, do not hesitate to <a href="http://en.wikipedia.org/wiki/Usability_testing" rel="external" title="http://en.wikipedia.org/wiki/Usability_testing">perform user tests</a>. This process is called UX Design. If you want to learn more about this topic, you should check out the following helpful resources:</p>
+
+<ul>
+ <li><a href="http://www.uxmatters.com/" rel="external" title="http://www.uxmatters.com/">UXMatters.com</a></li>
+ <li><a href="http://uxdesign.com/" rel="external" title="http://uxdesign.com/">UXDesign.com</a></li>
+ <li><a href="http://uxdesign.smashingmagazine.com/" rel="external" title="http://uxdesign.smashingmagazine.com/">The UX Design section of SmashingMagazine</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Note: </strong>Also, in most systems there is a way to open the {{HTMLElement("select")}} element to look at all the available choices (this is the same as clicking the {{HTMLElement("select")}} element with a mouse). This is achieved with Alt+Down arrow under Windows and was not implemented in our example —but it would be easy to do so, as the mechanism has already been implemented for the <code>click</code> event.</p>
+</div>
+
+<h3 id="Defining_the_HTML_structure_and_semantics">Defining the HTML structure and semantics</h3>
+
+<p>Now that the widget's basic functionality has been decided upon, it's time to start building our widget. The first step is to define its HTML structure and to give it some basic semantics. Here is what we need to rebuild a {{HTMLElement("select")}} element:</p>
+
+<pre class="brush: html">&lt;!-- This is our main container for our widget.
+     The tabindex attribute is what allows the user to focus the widget.
+     We'll see later that it's better to set it through JavaScript. --&gt;
+&lt;div class="select" tabindex="0"&gt;
+
+  &lt;!-- This container will be used to display the current value of the widget --&gt;
+  &lt;span class="value"&gt;Cherry&lt;/span&gt;
+
+  &lt;!-- This container will contain all the options available for our widget.
+       Because it's a list, it makes sense to use the ul element. --&gt;
+  &lt;ul class="optList"&gt;
+    &lt;!-- Each option only contains the value to be displayed, we'll see later
+         how to handle the real value that will be sent with the form data --&gt;
+    &lt;li class="option"&gt;Cherry&lt;/li&gt;
+    &lt;li class="option"&gt;Lemon&lt;/li&gt;
+    &lt;li class="option"&gt;Banana&lt;/li&gt;
+    &lt;li class="option"&gt;Strawberry&lt;/li&gt;
+    &lt;li class="option"&gt;Apple&lt;/li&gt;
+  &lt;/ul&gt;
+
+&lt;/div&gt;</pre>
+
+<p>Note the use of class names; these identify each relevant part regardless of the actual underlying HTML elements used. This is important to make sure that we will not bind our CSS and JavaScript to a strong HTML structure, so that we can make implementation changes later without breaking code that uses the widget. For example if you wish to implement the equivalent of the {{HTMLElement("optgroup")}} element.</p>
+
+<h3 id="Creating_the_look_and_feel_using_CSS">Creating the look and feel using CSS</h3>
+
+<p>Now that we have a structure, we can start designing our widget. The whole point of building this custom widget is to be able to style this widget exactly as we want. To that end, we will split our CSS work into two parts: the first part will be the CSS rules absolutely necessary to have our widget behave like a {{HTMLElement("select")}} element, and the second part will consist of the fancy styles used to make it look the way we want.</p>
+
+<h4 id="Required_styles">Required styles</h4>
+
+<p>The required styles are those necessary to handle the three states of our widget.</p>
+
+<pre class="brush: css">.select {
+  /* This will create a positioning context for the list of options */
+  position: relative;
+
+  /* This will make our widget become part of the text flow and sizable at the same time */
+  display : inline-block;
+}</pre>
+
+<p>We need an extra class <code>active</code> to define the look and feel of our widget when it is in its active state. Because our widget is focusable, we double this custom style with the {{cssxref(":focus")}} pseudo-class in order to be sure they will behave the same.</p>
+
+<pre class="brush: css">.select .active,
+.select:focus {
+  outline: none;
+
+  /* This box-shadow property is not exactly required, however it's so important to be sure
+     the active state is visible that we use it as a default value, feel free to override it. */
+  box-shadow: 0 0 3px 1px #227755;
+}</pre>
+
+<p>Now, let's handle the list of options:</p>
+
+<pre class="brush: css">/* The .select selector here is syntactic sugar to be sure the classes we define are
+   the ones inside our widget. */
+.select .optList {
+  /* This will make sure our list of options will be displayed below the value
+     and out of the HTML flow */
+  position : absolute;
+  top      : 100%;
+  left     : 0;
+}</pre>
+
+<p>We need an extra class to handle when the list of options is hidden. This is necessary in order to manage the differences between the active state and the open state that do not exactly match.</p>
+
+<pre class="brush: css">.select .optList.hidden {
+  /* This is a simple way to hide the list in an accessible way,
+     we will talk more about accessibility in the end */
+  max-height: 0;
+  visibility: hidden;
+}</pre>
+
+<h4 id="Beautification">Beautification</h4>
+
+<p>So now that we have the basic functionality in place, the fun can start. The following is just an example of what is possible, and will match the screenshot at the beginning of this article. However, you should feel free to experiment and see what you can come up with.</p>
+
+<pre class="brush: css">.select {
+  /* All sizes will be expressed with the em value for accessibility reasons
+     (to make sure the widget remains resizable if the user uses the
+     browser's zoom in a text-only mode). The computations are made
+     assuming 1em == 16px which is the default value in most browsers.
+     If you are lost with px to em conversion, try http://riddle.pl/emcalc/ */
+  font-size   : 0.625em; /* this (10px) is the new font size context for em value in this context */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* We need extra room for the down arrow we will add */
+  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : .2em solid #000; /* 2px */
+  border-radius : .4em; /* 4px */
+  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  /* The first declaration is for browsers that do not support linear gradients.
+     The second declaration is because WebKit based browsers haven't unprefixed it yet.
+     If you want to support legacy browsers, try http://www.colorzilla.com/gradient-editor/ */
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  /* Because the value can be wider than our widget, we have to make sure it will not
+     change the widget's width */
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  vertical-align: top;
+
+  /* And if the content overflows, it's better to have a nice ellipsis. */
+  white-space  : nowrap;
+  text-overflow: ellipsis;
+}</pre>
+
+<p>We don't need an extra element to design the down arrow; instead, we're using the {{cssxref(":after")}} pseudo-element. However, it could also be implemented using a simple background image on the <code>select</code> class.</p>
+
+<pre class="brush: css">.select:after {
+  content : "▼"; /* We use the unicode caracter U+25BC; see http://www.utf8-chartable.de */
+  position: absolute;
+  z-index : 1; /* This will be important to keep the arrow from overlapping the list of options */
+  top     : 0;
+  right   : 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  height  : 100%;
+  width   : 2em;  /* 20px */
+  padding-top : .1em; /* 1px */
+
+  border-left  : .2em solid #000; /* 2px */
+  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
+
+  background-color : #000;
+  color : #FFF;
+  text-align : center;
+}</pre>
+
+<p>Next, let's style the list of options:</p>
+
+<pre class="brush: css">.select .optList {
+  z-index : 2; /* We explicitly said the list of options will always overlap the down arrow */
+
+  /* this will reset the default style of the ul element */
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* This will ensure that even if the values are smaller than the widget,
+     the list of options will be as large as the widget itself */
+  min-width : 100%;
+
+  /* In case the list is too long, its content will overflow vertically
+     (which will add a vertical scrollbar automatically) but never horizontally
+     (because we haven't set a width, the list will adjust its width automatically.
+     If it can't, the content will be truncated) */
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  border: .2em solid #000; /* 2px */
+  border-top-width : .1em; /* 1px */
+  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
+  background: #f0f0f0;
+}</pre>
+
+<p>For the options, we need to add a <code>highlight</code> class to be able to identify the value the user will pick (or has picked).</p>
+
+<pre class="brush: css">.select .option {
+  padding: .2em .3em; /* 2px 3px */
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}</pre>
+
+<p>So here's the result with our three states:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Basic state</th>
+   <th scope="col" style="text-align: center;">Active state</th>
+   <th scope="col" style="text-align: center;">Open state</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
+   <td>{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
+   <td>{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
+  </tr>
+  <tr>
+   <td colspan="3" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Bring_your_widget_to_life_with_JavaScript">Bring your widget to life with JavaScript</h2>
+
+<p>Now that our design and structure are ready, we can write the JavaScript code to make the widget actually work.</p>
+
+<div class="warning">
+<p><strong>Warning:</strong> The following code is educational and should not be used as-is. Among many things, as we'll see, it is not future-proof and it will not work on legacy browsers. It also has redundant parts that should be optimized in production code.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> Creating reusable widgets is something that can be a bit tricky. The <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html" rel="external" title="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html">W3C Web Component draft</a> is one of the answers to this specific issue. <a href="http://x-tags.org/" rel="external" title="http://x-tags.org/">The X-Tag project</a> is a test implementation of this specification; we encourage you to take a look at it.</p>
+</div>
+
+<h3 id="Why_isn't_it_working">Why isn't it working?</h3>
+
+<p>Before we start, it's important to remember something very important about JavaScript: inside a browser, <strong>it's an unreliable technology</strong>. When you are building custom widgets, you'll have to rely on JavaScript because it's a necessary thread to tie everything together. However, there are many cases in which JavaScript isn't able to run in the browser:</p>
+
+<ul>
+ <li>The user has turned off JavaScript: This is the most unusual case ever; very few people turn off JavaScript nowadays.</li>
+ <li>The script is not loading. This is one of the most common cases, especially in the mobile world where the network is not very reliable.</li>
+ <li>The script is buggy. You should always consider this possibility.</li>
+ <li>The script is in conflict with a third party script. This can happen with tracking scripts or any bookmarklets the user uses.</li>
+ <li>The script is in conflict with, or is affected by, a browser extension (such as Firefox's <a href="https://addons.mozilla.org/fr/firefox/addon/noscript/" rel="external" title="https://addons.mozilla.org/fr/firefox/addon/noscript/">NoScript</a> extension or Chrome's <a href="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn" rel="external" title="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn">NotScripts</a> extension).</li>
+ <li>The user is using a legacy browser, and one of the features you require is not supported. This will happen frequently when you make use of cutting-edge APIs.</li>
+</ul>
+
+<p>Because of these risks, it's really important to seriously consider what will happen if JavaScript isn't working. Dealing in detail with this issue is out of the scope of this article because it's closely linked to how you want to make your script generic and reusable, but we'll consider the basics of this in our example.</p>
+
+<p>In our example, if our JavaScript code isn't running, we'll fall back to displaying a standard {{HTMLElement("select")}} element. To achieve this, we need two things.</p>
+
+<p>First, we need to add a regular {{HTMLElement("select")}} element before each use of our custom widget. This is actually also required in order to be able to send data from our custom widget along with the rest of our form data; more about this later.</p>
+
+<pre class="brush: html">&lt;body class="no-widget"&gt;
+  &lt;form&gt;
+    &lt;select name="myFruit"&gt;
+      &lt;option&gt;Cherry&lt;/option&gt;
+      &lt;option&gt;Lemon&lt;/option&gt;
+      &lt;option&gt;Banana&lt;/option&gt;
+      &lt;option&gt;Strawberry&lt;/option&gt;
+      &lt;option&gt;Apple&lt;/option&gt;
+    &lt;/select&gt;
+
+    &lt;div class="select"&gt;
+      &lt;span class="value"&gt;Cherry&lt;/span&gt;
+      &lt;ul class="optList hidden"&gt;
+        &lt;li class="option"&gt;Cherry&lt;/li&gt;
+        &lt;li class="option"&gt;Lemon&lt;/li&gt;
+        &lt;li class="option"&gt;Banana&lt;/li&gt;
+        &lt;li class="option"&gt;Strawberry&lt;/li&gt;
+        &lt;li class="option"&gt;Apple&lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/div&gt;
+  &lt;/form&gt;
+
+&lt;/body&gt;</pre>
+
+<p>Second, we need two new classes to let us hide the unneeded element (that is, the "real" {{HTMLElement("select")}} element if our script isn't running, or the custom widget if it is running). Note that by default, our HTML code hides our custom widget.</p>
+
+<pre class="brush: css">.widget select,
+.no-widget .select {
+  /* This CSS selector basically says:
+     - either we have set the body class to "widget" and thus we hide the actual {{HTMLElement("select")}} element
+     - or we have not changed the body class, therefore the body class is still "no-widget",
+       so the elements whose class is "select" must be hidden */
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}</pre>
+
+<p>Now we just need a JavaScript switch to determine if the script is running or not. This switch is very simple: if at page load time our script is running, it will remove the <code>no-widget</code> class and add the <code>widget</code> class, thereby swapping the visibility of the {{HTMLElement("select")}} element and of the custom widget.</p>
+
+<pre class="brush: js">window.addEventListener("load", function () {
+  document.body.classList.remove("no-widget");
+  document.body.classList.add("widget");
+});</pre>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Without JS</th>
+   <th scope="col" style="text-align: center;">With JS</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}</td>
+   <td>{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}</td>
+  </tr>
+  <tr>
+   <td colspan="2" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note:</strong> If you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the {{HTMLElement("select")}} elements, and to dynamically add the DOM tree representing the custom widget after every {{HTMLElement("select")}} element in the page.</p>
+</div>
+
+<h3 id="Making_the_job_easier">Making the job easier</h3>
+
+<p>In the code we are about to build, we will use the standard DOM API to do all the work we need. However, although DOM API support has gotten much better in browsers, there are always issues with legacy browsers (especially with good old Internet Explorer).</p>
+
+<p>If you want to avoid trouble with legacy browsers, there are two ways to do so: using a dedicated framework such as <a href="http://jquery.com/" rel="external" title="http://jquery.com/">jQuery</a>, <a href="https://github.com/julienw/dollardom" rel="external" title="https://github.com/julienw/dollardom">$dom</a>, <a href="http://prototypejs.org/" rel="external" title="http://prototypejs.org/">prototype</a>, <a href="http://dojotoolkit.org/" rel="external" title="http://dojotoolkit.org/">Dojo</a>, <a href="http://yuilibrary.com/" rel="external" title="http://yuilibrary.com/">YUI</a>, or the like, or by polyfilling the missing feature you want to use (which can easily be done through conditional loading, with the <a href="http://yepnopejs.com/" rel="external" title="http://yepnopejs.com/">yepnope</a> library for example).</p>
+
+<p>The features we plan to use are the following (ordered from the riskiest to the safest):</p>
+
+<ol>
+ <li>{{domxref("element.classList","classList")}}</li>
+ <li>{{domxref("EventTarget.addEventListener","addEventListener")}}</li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code> (This is not DOM but modern JavaScript)</li>
+ <li>{{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}</li>
+</ol>
+
+<p>Beyond the availability of those specific features, there is still one issue remaining before starting. The object returned by the {{domxref("element.querySelectorAll","querySelectorAll()")}} function is a {{domxref("NodeList")}} rather than an <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code>. This is important because <code>Array</code> objects support the <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code> function, but {{domxref("NodeList")}} doesn't. Because {{domxref("NodeList")}} really looks like an <code>Array</code> and because <code>forEach</code> is so convenient to use, we can easily add the support of <code>forEach</code> to {{domxref("NodeList")}} in order to make our life easier, like so:</p>
+
+<pre class="brush: js">NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}</pre>
+
+<p>We weren't kidding when we said it's easy to do.</p>
+
+<h3 id="Building_event_callbacks">Building event callbacks</h3>
+
+<p>The ground is ready, we can now start to define all the functions that will be used each time the user interacts with our widget.</p>
+
+<pre class="brush: js">// This function will be used each time we want to deactivate a custom widget
+// It takes one parameter
+// select : the DOM node with the `select` class to deactivate
+function deactivateSelect(select) {
+
+  // If the widget is not active there is nothing to do
+  if (!select.classList.contains('active')) return;
+
+  // We need to get the list of options for the custom widget
+  var optList = select.querySelector('.optList');
+
+  // We close the list of option
+  optList.classList.add('hidden');
+
+  // and we deactivate the custom widget itself
+  select.classList.remove('active');
+}
+
+// This function will be used each time the user wants to (de)activate the widget
+// It takes two parameters:
+// select : the DOM node with the `select` class to activate
+// selectList : the list of all the DOM nodes with the `select` class
+function activeSelect(select, selectList) {
+
+  // If the widget is already active there is nothing to do
+  if (select.classList.contains('active')) return;
+
+  // We have to turn off the active state on all custom widgets
+  // Because the deactivateSelect function fulfill all the requirement of the
+  // forEach callback function, we use it directly without using an intermediate
+  // anonymous function.
+  selectList.forEach(deactivateSelect);
+
+  // And we turn on the active state for this specific widget
+  select.classList.add('active');
+}
+
+// This function will be used each time the user wants to open/closed the list of options
+// It takes one parameter:
+// select : the DOM node with the list to toggle
+function toggleOptList(select) {
+
+  // The list is kept from the widget
+  var optList = select.querySelector('.optList');
+
+  // We change the class of the list to show/hide it
+  optList.classList.toggle('hidden');
+}
+
+// This function will be used each time we need to highlight an option
+// It takes two parameters:
+// select : the DOM node with the `select` class containing the option to highlight
+// option : the DOM node with the `option` class to highlight
+function highlightOption(select, option) {
+
+  // We get the list of all option available for our custom select element
+  var optionList = select.querySelectorAll('.option');
+
+  // We remove the highlight from all options
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  // We highlight the right option
+  option.classList.add('highlight');
+};</pre>
+
+<p>That's all you need in order to handle the various states of the custom widget.</p>
+
+<p>Next, we bind these functions to the appropriate events:</p>
+
+<pre class="brush: js">// We handle the event binding when the document is loaded.
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Each custom widget needs to be initialized
+  selectList.forEach(function (select) {
+
+    // as well as all its `option` elements
+    var optionList = select.querySelectorAll('.option');
+
+    // Each time a user hovers their mouse over an option, we highlight the given option
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        // Note: the `select` and `option` variable are closures
+        // available in the scope of our function call.
+        highlightOption(select, option);
+      });
+    });
+
+    // Each times the user click on a custom select element
+    select.addEventListener('click', function (event) {
+      // Note: the `select` variable is a closure
+      // available in the scope of our function call.
+
+      // We toggle the visibility of the list of options
+      toggleOptList(select);
+    });
+
+    // In case the widget gain focus
+    // The widget gains the focus each time the user clicks on it or each time
+    // they use the tabulation key to access the widget
+    select.addEventListener('focus', function (event) {
+      // Note: the `select` and `selectList` variable are closures
+      // available in the scope of our function call.
+
+      // We activate the widget
+      activeSelect(select, selectList);
+    });
+
+    // In case the widget loose focus
+    select.addEventListener('blur', function (event) {
+      // Note: the `select` variable is a closure
+      // available in the scope of our function call.
+
+      // We deactivate the widget
+      deactivateSelect(select);
+    });
+  });
+});</pre>
+
+<p>At that point, our widget will change state according to our design, but its value doesn't get updated yet. We'll handle that next.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Live example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Handling_the_widget's_value">Handling the widget's value</h3>
+
+<p>Now that our widget is working, we have to add code to update its value according to user input and make it possible to send the value along with form data.</p>
+
+<p>The easiest way to do this is to use a native widget under the hood. Such a widget will keep track of the value with all the built-in controls provided by the browser, and the value will be sent as usual when a form is submitted. There's no point in reinventing the wheel when we can have all this done for us.</p>
+
+<p>As seen previously, we already use a native select widget as a fallback for accessibility reasons; we can simply synchronize its value with that of our custom widget:</p>
+
+<pre class="brush: js">// This function updates the displayed value and synchronizes it with the native widget.
+// It takes two parameters:
+// select : the DOM node with the class `select` containing the value to update
+// index  : the index of the value to be selected
+function updateValue(select, index) {
+  // We need to get the native widget for the given custom widget
+  // In our example, that native widget is a sibling of the custom widget
+  var nativeWidget = select.previousElementSibling;
+
+  // We also need  to get the value placeholder of our custom widget
+  var value = select.querySelector('.value');
+
+  // And we need the whole list of options
+  var optionList = select.querySelectorAll('.option');
+
+  // We set the selected index to the index of our choice
+  nativeWidget.selectedIndex = index;
+
+  // We update the value placeholder accordingly
+  value.innerHTML = optionList[index].innerHTML;
+
+  // And we highlight the corresponding option of our custom widget
+  highlightOption(select, optionList[index]);
+};
+
+// This function returns the current selected index in the native widget
+// It takes one parameter:
+// select : the DOM node with the class `select` related to the native widget
+function getIndex(select) {
+  // We need to access the native widget for the given custom widget
+  // In our example, that native widget is a sibling of the custom widget
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};</pre>
+
+<p>With these two functions, we can bind the native widgets to the custom ones:</p>
+
+<pre class="brush: js">// We handle event binding when the document is loaded.
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Each custom widget needs to be initialized
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    // We make our custom widget focusable
+    select.tabIndex = 0;
+
+    // We make the native widget no longer focusable
+    select.previousElementSibling.tabIndex = -1;
+
+    // We make sure that the default selected value is correctly displayed
+    updateValue(select, selectedIndex);
+
+    // Each time a user clicks on an option, we update the value accordingly
+    optionList.forEach(function (option, index) {
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    // Each time a user uses their keyboard on a focused widget, we update the value accordingly
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      // When the user hits the down arrow, we jump to the next option
+      if (event.keyCode === 40 &amp;&amp; index &lt; length - 1) { index++; }
+
+      // When the user hits the up arrow, we jump to the previous option
+      if (event.keyCode === 38 &amp;&amp; index &gt; 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});</pre>
+
+<p>In the code above, it's worth noting the use of the <code><a href="/en-US/docs/Web/API/HTMLElement/tabIndex" title="/en-US/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code> property. Using this property is necessary to ensure that the native widget will never gain focus, and to make sure that our custom widget gains focus when the user uses his keyboard or his mouse.</p>
+
+<p>With that, we're done! Here's the result:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Live example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>But wait a second, are we really done?</p>
+
+<h2 id="Make_it_accessible">Make it accessible</h2>
+
+<p>We have built something that works and though we're far from a fully-featured select box, it works nicely. But what we've done is nothing more than fiddle with the DOM. It has no real semantics, and even though it looks like a select box, from the browser's point of view it isn't one, so assistive technologies won't be able to understand it's a select box. In short, this pretty new select box isn't accessible!</p>
+
+<p>Fortunately, there is a solution and it's called <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a>. ARIA stands for "Accessible Rich Internet Application", and it's <a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/">a W3C specification</a> specifically designed for what we are doing here: making web applications and custom widgets accessible. It's basically a set of attributes that extend HTML so that we can better describe roles, states and properties as though the element we've just devised was the native element it tries to pass for. Using these attributes is dead simple, so let's do it.</p>
+
+<h3 id="The_role_attribute">The <code>role</code> attribute</h3>
+
+<p>The key attribute used by <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> is the <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> attribute. The <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> attribute accepts a value that defines what an element is used for. Each role defines its own requirements and behaviors. In our example, we will use the <code><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code> role. It's a "composite role", which means elements with that role expect to have children, each with a specific role (in this case, at least one child with the <code>option</code> role).</p>
+
+<p>It's also worth noting that ARIA defines roles that are applied by default to standard HTML markup. For example, the {{HTMLElement("table")}} element matches the role <code>grid</code>, and the {{HTMLElement("ul")}} element matches the role <code>list</code>. Because we use a {{HTMLElement("ul")}} element, we want to make sure the <code>listbox</code> role of our widget will supersede the <code>list</code> role of the {{HTMLElement("ul")}} element. To that end, we will use the role <code>presentation</code>. This role is designed to let us indicate that an element has no special meaning, and is used solely to present information. We will apply it to our {{HTMLElement("ul")}} element.</p>
+
+<p>To support the <code><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code> role, we just have to update our HTML like this:</p>
+
+<pre class="brush: html">&lt;!-- We add the role="listbox" attribute to our top element --&gt;
+&lt;div class="select" role="listbox"&gt;
+  &lt;span class="value"&gt;Cherry&lt;/span&gt;
+  &lt;!-- We also add the role="presentation" to the ul element --&gt;
+  &lt;ul class="optList" role="presentation"&gt;
+    &lt;!-- And we add the role="option" attribute to all the li elements --&gt;
+    &lt;li role="option" class="option"&gt;Cherry&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Lemon&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Banana&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Strawberry&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Apple&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Including both the <code>role</code> attribute and a <code>class</code> attribute is only necessary if you want to support legacy browsers that do not support the <a href="/en-US/docs/CSS/Attribute_selectors" title="/en-US/docs/CSS/Attribute_selectors">CSS attribute selectors</a>.</p>
+</div>
+
+<h3 id="The_aria-selected_attribute">The <code>aria-selected</code> attribute</h3>
+
+<p>Using the <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> attribute is not enough. <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> also provides many states and property attributes. The more and better you use them, the better your widget will be understood by assistive technologies. In our case, we will limit our usage to one attribute: <code>aria-selected</code>.</p>
+
+<p>The <code>aria-selected</code> attribute is used to mark which option is currently selected; this lets assistive technologies inform the user what the current selection is. We will use it dynamically with JavaScript to mark the selected option each time the user chooses one. To that end, we need to revise our <code>updateValue()</code> function:</p>
+
+<pre class="brush: js">function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  // We make sure that all the options are not selected
+  optionList.forEach(function (other) {
+    other.setAttribute('aria-selected', 'false');
+  });
+
+  // We make sure the chosen option is selected
+  optionList[index].setAttribute('aria-selected', 'true');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};</pre>
+
+<p>Here is the final result of all these changes (you'll get a better feel for this by trying it with an assistive technology such as <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> or <a href="http://www.apple.com/accessibility/voiceover/" rel="external" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a>):</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Live example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_5" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Check out the final source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>We have seen all the basics of building a custom form widget, but as you can see it's not trivial to do, and often it's better and easier to rely on third-party libraries instead of coding them from scratch yourself (unless, of course, your goal is to build such a library).</p>
+
+<p>Here are a few libraries you should consider before coding your own:</p>
+
+<ul>
+ <li><a href="http://jqueryui.com/" rel="external" title="http://jqueryui.com/">jQuery UI</a></li>
+ <li><a href="https://github.com/marghoobsuleman/ms-Dropdown" rel="external" title="https://github.com/marghoobsuleman/ms-Dropdown">msDropDown</a></li>
+ <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external" title="http://www.emblematiq.com/lab/niceforms/">Nice Forms</a></li>
+ <li><a href="https://www.google.fr/search?q=HTML+custom+form+controls&amp;ie=utf-8&amp;oe=utf-8&amp;aq=t&amp;rls=org.mozilla:fr:official&amp;client=firefox-a" rel="external" title="https://www.google.fr/search?q=HTML+custom+form+controls&amp;ie=utf-8&amp;oe=utf-8&amp;aq=t&amp;rls=org.mozilla:fr:official&amp;client=firefox-a">And many more…</a></li>
+</ul>
+
+<p>If you want to move forward, the code in this example needs some improvement before it becomes generic and reusable. This is an exercise you can try to perform. Two hints to help you in this: the first argument for all our functions is the same, which means those functions need the same context. Building an object to share that context would be wise. Also, you need to make it feature-proof; that is, it needs to be able to work better with a variety of browsers whose compatibility with the Web standards they use vary. Have fun!</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/pt-br/web/guide/html/forms/how_to_structure_an_html_form/index.html b/files/pt-br/web/guide/html/forms/how_to_structure_an_html_form/index.html
new file mode 100644
index 0000000000..33a562813c
--- /dev/null
+++ b/files/pt-br/web/guide/html/forms/how_to_structure_an_html_form/index.html
@@ -0,0 +1,304 @@
+---
+title: Como estruturar um formulário HTML
+slug: Web/Guide/HTML/Forms/How_to_structure_an_HTML_form
+tags:
+  - Beginner
+  - CodingScripting
+  - Example
+  - Forms
+  - Guide
+  - HTML
+  - Learn
+  - Structure
+  - Web
+translation_of: Learn/Forms/How_to_structure_a_web_form
+---
+<div>
+<p>{{LearnSidebar}}</p>
+
+<p>{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}</p>
+</div>
+
+<p class="summary">Com o básico fora do caminho, podemos olhar melhor para os elementos utilizados, a fim de entender as diferentes partes de um formulário.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-Requisitos:</th>
+   <td>Leitura sobre computação básica e <a href="/docs/Learn/HTML/Introduction_to_HTML">entendimento básico de HTML.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender como estruturar formulários HTML e entregar a eles semântica de forma a torná-los úteis e acessíveis.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>A flexibilidade dos formulários HTML fazem com que sejam uma das estruturas mais complexas do HTML, você pode construir qualquer tipo básico de formulário usando elementos e atributos exclusivos de formulários. Assim, usar a estrutura correta ao criar um formulário HTML o ajudará a garantir que o formulário seja utilizável e <a href="/pt-BR/docs/Learn/Accessibility">acessível</a>.</p>
+
+<h2 id="O_elemento_&lt;form>">O elemento &lt;form&gt; </h2>
+
+<p>O elemento {{HTMLElement("form")}} é o elemento que formalmente define o formulário e os atributos que definem a maneira como esse formulário se comporta. Sempre que você desejar criar um formulário HTML, você deve iniciá-lo usando este elemento, colocando todo o conteúdo dentro deste. Muitas tecnologias assistivas ou plugins de navegadores são capazes de descobrir elemetos {{HTMLElement("form")}} e de implementar ganchos especiais para torná-los mais fáceis de usar.</p>
+
+<p>Nós já vimos isto em um artigo anterior:</p>
+
+<div class="note"><strong>Nota:</strong> É estritamente proíbido aninhar um formulário dentro de outro formulário. Isto pode fazer com que os formulários se comportem de maneira imprevisível baseada no navegador que está sendo utilizado.</div>
+
+<p>Note que, sempre é possível usar um widget de formulário fora de um elemento {{HTMLElement("form")}} mas se o fizer, o widget não terá nada a ver com o formulário. Estes widgets podem ser usados fora de um formulário, mas para tanto você deverá ter um plano especial para eles, pois este não farão nada por si próprios. Você terá de controlar o comportamento deles através de JavaScript.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>O HTML 5 introduziu o atributo <code>form</code> no grupo de elementos de formulários em HTML. Ele deve deixá-lo atrelar explícitamente um elemento com um form mesmo se não estiver dentro de um {{ HTMLElement("form") }}. Infelizmente, devido ao tempo de vida, essa implementação ainda pelos navegadores ainda não é boa o suficiente para se confiar nela.</p>
+</div>
+
+<h2 id="Os_elementos_&lt;fieldset>_e_&lt;legend>">Os elementos &lt;fieldset&gt; e &lt;legend&gt;</h2>
+
+<p>O elemento {{HTMLElement ("fieldset")}} é uma maneira conveniente de criar grupos de widgets que compartilham o mesmo propósito. Um elemento {{HTMLElement ("fieldset")}} pode ser rotulado com um elemento {{HTMLElement ("legend")}}. O elemento {{HTMLElement ("legend")}} descreve formalmente a finalidade do elemento {{HTMLElement ("fieldset")}} ao qual está incluído.</p>
+
+<p>Muitas tecnologias assistivas usarão o elemento {{HTMLElement ("legend")}} como se fosse parte da etiqueta de cada widget dentro do elemento {{HTMLElement ("fieldset")}} correspondente. Por exemplo, alguns leitores de tela, como <a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a> ou <a href="http://www.nvda-project.org/">NVDA</a>, pronunciarão o conteúdo da legenda antes de pronunciar o rótulo de cada widget.</p>
+
+<p>Aqui está um pequeno exemplo:</p>
+
+<pre class="brush:html; notranslate">&lt;form&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Fruit juice size&lt;/legend&gt;
+    &lt;p&gt;
+      &lt;input type="radio" name="size" id="size_1" value="small" /&gt;
+      &lt;label for="size_1"&gt;Small&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="radio" name="size" id="size_2" value="medium" /&gt;
+      &lt;label for="size_2"&gt;Medium&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="radio" name="size" id="size_3" value="large" /&gt;
+      &lt;label for="size_3"&gt;Large&lt;/label&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<p>Com este exemplo, um leitor de tela pronunciará "Fruit juice size small" para o primeiro widget, "Fruit juice size medium" para o segundo, e "Fruit juice size large" para o terceiro.</p>
+
+<p>O caso de uso neste exemplo é um dos mais importantes. Cada vez que você tiver um conjunto de botões de opção, você deve ter certeza de que eles estão aninhados dentro de um elemento {{HTMLElement ("fieldset")}}. Existem outros casos de uso e, em geral, o elemento {{HTMLElement ("fieldset")}} também pode ser usado para conferir acessibilidade a um formulário. Devido à sua influência sobre a tecnologia assistiva, o elemento {{HTMLElement ("fieldset")}} é um dos elementos-chave para a construção de formulários acessíveis. No entanto, é sua responsabilidade não abusá-lo. Se possível, cada vez que você criar um formulário, tente ouvir como o leitor de tela o interpreta. Se parecer estranho, é uma boa sugestão de que sua estrutura de formulário precisa ser melhorada.</p>
+
+<h2 id="O_elemento_&lt;label>">O elemento &lt;label&gt; </h2>
+
+<p>Como vimos no artigo anterior, o elemento {{HTMLElement ("label")}} é a maneira formal de definir um rótulo para um widget de formulário HTML. Esse é o elemento mais importante se você quiser criar formulários acessíveis - quando implementados corretamente, os leitores de tela falarão o rótulo de um elemento de formulário juntamente com as instruções relacionadas. Veja este exemplo, que vimos no artigo anterior:</p>
+
+<pre class="notranslate"><code>&lt;label for="name"&gt;Name:&lt;/label&gt; &lt;input type="text" id="name" name="user_name"&gt;</code></pre>
+
+<p>Com o &lt;label&gt; associado corretamente ao &lt;input&gt; por meio de seus atributos 'for' e 'id' respectivamente (o 'label' do atributo faz referência ao atributo id do widget correspondente), um leitor de tela lerá algo como "Nome, editar texto".</p>
+
+<p>Se o 'label' não estiver configurado corretamente, um leitor de tela só lerá algo como "Editar texto em branco", o que não é muito útil.</p>
+
+<p>Observe que um widget pode ser aninhado dentro de seu elemento &lt;label&gt;, assim:</p>
+
+<pre class="notranslate"><code>&lt;label for="name"&gt;
+  Name: &lt;input type="text" id="name" name="user_name"&gt;
+&lt;/label&gt;</code></pre>
+
+<p>Mesmo nesses casos, entretanto, é considerada a melhor prática definir o atributo 'for' porque algumas tecnologias assistivas não entendem os relacionamentos implícitos entre labels e widgets.</p>
+
+<h3 id="Labels_são_clicáveis_também_!.">Labels são clicáveis também !.</h3>
+
+<p>Outra vantagem de configurar 'labels' adequadamente é que você pode clicar no label para ativar o widget correspondente, em todos os navegadores. Isso é útil para exemplos como entradas de texto, onde você pode clicar no label, bem como na entrada para focalizá-lo, mas é especialmente útil para botões de opção e caixas de seleção - a área de acerto de tal controle pode ser muito pequena, então é útil para torná-lo o maior possível.</p>
+
+<p>Por exemplo:</p>
+
+<pre class="notranslate"><code>&lt;form&gt;
+  &lt;p&gt;
+    &lt;label for="taste_1"&gt;I like cherry&lt;/label&gt;
+    &lt;input type="checkbox" id="taste_1" name="taste_cherry" value="1"&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="taste_2"&gt;I like banana&lt;/label&gt;
+    &lt;input type="checkbox" id="taste_2" name="taste_banana" value="2"&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota: Você pode encontrar este exemplo em</strong> <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html">checkbox-label.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html">ver ao vivo também</a>).</p>
+</div>
+
+<h3 id="Múltiplos_labels">Múltiplos labels</h3>
+
+<p>Estritamente falando, você pode colocar vários rótulos em um único widget, mas isso não é uma boa ideia, pois algumas tecnologias de assistência podem ter problemas para lidar com eles. No caso de vários rótulos, você deve aninhar um widget e seus rótulos dentro de um único elemento {{htmlelement ("label")}}.</p>
+
+<p>Vamos considerar este exemplo:</p>
+
+<pre class="notranslate"><code>&lt;p&gt;Required fields are followed by &lt;abbr title="required"&gt;*&lt;/abbr&gt;.&lt;/p&gt;
+
+&lt;!-- So this: --&gt;
+&lt;div&gt;
+  &lt;label for="username"&gt;Name:&lt;/label&gt;
+  &lt;input type="text" name="username"&gt;
+  &lt;label for="username"&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/label&gt;
+&lt;/div&gt;
+
+&lt;!-- would be better done like this: --&gt;
+&lt;div&gt;
+  &lt;label for="username"&gt;
+    &lt;span&gt;Name:&lt;/span&gt;
+    &lt;input id="username" type="text" name="username"&gt;
+    &lt;abbr title="required"&gt;*&lt;/abbr&gt;
+  &lt;/label&gt;
+&lt;/div&gt;
+
+&lt;!-- But this is probably best: --&gt;
+&lt;div&gt;
+  &lt;label for="username"&gt;Name: &lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/label&gt;
+  &lt;input id="username" type="text" name="username"&gt;
+&lt;/div&gt;</code></pre>
+
+<p>The paragraph at the top defines the rule for required elements. It must be at the beginning to make sure that assistive technologies such as screen readers will display or vocalize it to the user before they find a required element. That way, they will know what the asterisk means. A screen reader will speak the star as "<em>star</em>" or "<em>required</em>", depending on the screen reader's settings — in any case, what will be spoken is made clear in the first paragraph).</p>
+
+<ul>
+ <li>In the first example, the label is not read out at all with the input — you just get "edit text blank", plus the actual labels are read out separately. The multiple <code>&lt;label&gt;</code>elements confuse the screenreader.</li>
+ <li>In the second example, things are a bit clearer — the label read out along with the input is "name star name edit text", and the labels are still read out separately. Things are still a bit confusing, but it's a bit better this time because the input has a label associated with it.</li>
+ <li>The third example is best — the actual label is read out all together, and the label read out with the input is "name star edit text".</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You might get slightly different results, depending on your screenreader. This was tested in VoiceOver (and NVDA behaves similarly). We'd love to hear about your experiences too.</p>
+</div>
+
+<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html">required-labels.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html">see it live also</a>). don't run the example with 2 or 3 of the versions uncommented — screenreaders will definitely get confused if you have multiple labels AND multiple inputs with the same ID!</p>
+
+<h2 dir="ltr" id="Estruturas_comuns_HTML_usadas_com_formulários">Estruturas comuns HTML usadas com formulários</h2>
+
+<p dir="ltr" id="tw-target-text">Além das estruturas específicas dos formulários HTML, é bom lembrar que os formulários são apenas HTML. Isso significa que você pode usar todo o poder do HTML para estruturar um formulário HTML.</p>
+
+<p>Como você pode ver nos exemplos, é comum envolver um <em>label</em> e seu <em>widget</em> com um elemento {{HTMLElement("div")}}. Os elementos {{HTMLElement("p")}} também são comumente usados, assim como as listas HTML (a última é mais comum para estruturar vários <em>checkboxes</em> ou <em>radio buttons</em>).</p>
+
+<p>Além do elemento {{HTMLElement("fieldset")}}, uma prática comum também é usar títulos HTML (por exemplo, {{htmlelement ("h1")}}, {{htmlelement ("h2")}}) e seção (por exemplo, {{htmlelement("section")}}) para estruturar um formulário complexo.</p>
+
+<p>Acima de tudo, cabe a você encontrar um estilo com o qual você acha confortável codificar e que também resulte em formulários acessíveis e utilizáveis.</p>
+
+<p>Temos cada seção desacoplada da funcionalidade contida nos elementos de {{htmlelement("section")}} e um {{htmlelement("fieldset")}} para conter os <em>radio buttons</em>.</p>
+
+<h3 id="Active_learning_building_a_form_structure">Active learning: building a form structure</h3>
+
+<p>Let's put these ideas into practice and build a slightly more involved form structure — a payment form. This form will contain a number of widget types that you may not yet understand — don't worry about this for now; you'll find out how they work in the next article (<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a>). For now, read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why.</p>
+
+<ol>
+ <li>To start with, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">blank template file</a> and the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css">CSS for our payment form</a> in a new directory on your computer.</li>
+ <li>First of all, apply the CSS to the HTML by adding the following line inside the HTML {{htmlelement("head")}}:
+  <pre class="notranslate"><code>&lt;link href="payment-form.css" rel="stylesheet"&gt;</code></pre>
+ </li>
+ <li>Next, start your form off by adding the outer {{htmlelement("form")}} element:
+  <pre class="notranslate"><code>&lt;form&gt;
+
+&lt;/form&gt;</code></pre>
+ </li>
+ <li>Inside the <code>&lt;form&gt;</code> tags, start by adding a heading and paragraph to inform users how required fields are marked:
+  <pre class="notranslate"><code>&lt;h1&gt;Payment form&lt;/h1&gt;
+&lt;p&gt;Required fields are followed by &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;.&lt;/p&gt;</code></pre>
+ </li>
+ <li>Next we'll add a larger section of code into the form, below our previous entry. Here you'll see that we are wrapping the contact information fields inside a distinct {{htmlelement("section")}} element. Moreover, we have a set of two radio buttons, each of which we are putting inside its own list ({{htmlelement("li")}}) element. Last, we have two standard text {{htmlelement("input")}}s and their associated {{htmlelement("label")}} elements, each contained inside a {{htmlelement("p")}}, plus a password input for entering a password. Add this code to your form now:
+  <pre class="notranslate"><code>&lt;section&gt;
+    &lt;h2&gt;Contact information&lt;/h2&gt;
+    &lt;fieldset&gt;
+      &lt;legend&gt;Title&lt;/legend&gt;
+      &lt;ul&gt;
+          &lt;li&gt;
+            &lt;label for="title_1"&gt;
+              &lt;input type="radio" id="title_1" name="title" value="M." &gt;
+              Mister
+            &lt;/label&gt;
+          &lt;/li&gt;
+          &lt;li&gt;
+            &lt;label for="title_2"&gt;
+              &lt;input type="radio" id="title_2" name="title" value="Ms."&gt;
+              Miss
+            &lt;/label&gt;
+          &lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/fieldset&gt;
+    &lt;p&gt;
+      &lt;label for="name"&gt;
+        &lt;span&gt;Name: &lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+      &lt;input type="text" id="name" name="username"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="mail"&gt;
+        &lt;span&gt;E-mail: &lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+      &lt;input type="email" id="mail" name="usermail"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="pwd"&gt;
+        &lt;span&gt;Password: &lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+      &lt;input type="password" id="pwd" name="password"&gt;
+    &lt;/p&gt;
+&lt;/section&gt;</code></pre>
+ </li>
+ <li>Now we'll turn to the second <code>&lt;section&gt;</code> of our form — the payment information. Here we have three distinct widgets along with their labels, each contained inside a <code>&lt;p&gt;</code>. The first is a drop down menu ({{htmlelement("select")}}) for selecting credit card type. the second is an <code>&lt;input&gt;</code> element of type number, for entering a credit card number. The last one is an <code>&lt;input&gt;</code> element of type <code>date</code>, for entering the expiration date of the card (this one will come up with a date picker widget in supporting browsers, and fall back to a normal text input in non-supporting browsers). Again, enter the following below the previous section:
+  <pre class="notranslate"><code>&lt;section&gt;
+    &lt;h2&gt;Payment information&lt;/h2&gt;
+    &lt;p&gt;
+      &lt;label for="card"&gt;
+        &lt;span&gt;Card type:&lt;/span&gt;
+      &lt;/label&gt;
+      &lt;select id="card" name="usercard"&gt;
+        &lt;option value="visa"&gt;Visa&lt;/option&gt;
+        &lt;option value="mc"&gt;Mastercard&lt;/option&gt;
+        &lt;option value="amex"&gt;American Express&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="number"&gt;
+        &lt;span&gt;Card number:&lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+      &lt;input type="number" id="number" name="cardnumber"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="date"&gt;
+        &lt;span&gt;Expiration date:&lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+        &lt;em&gt;formatted as yyyy/mm/dd&lt;/em&gt;
+      &lt;/label&gt;
+      &lt;input type="date" id="date" name="expiration"&gt;
+    &lt;/p&gt;
+&lt;/section&gt;</code></pre>
+ </li>
+ <li>The last section we'll add is a lot simpler, containing only a {{htmlelement("button")}} of type <code>submit</code>, for submitting the form data. Add this to the bottom of your form now:
+  <pre class="notranslate"><code>&lt;p&gt; &lt;button type="submit"&gt;Validate the payment&lt;/button&gt; &lt;/p&gt;</code></pre>
+ </li>
+</ol>
+
+<p>You can see the finished form in action below (also find it on GitHub — see our payment-form.html <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.html">source</a> and <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html">running live</a>):</p>
+
+<p>{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>You now have all the knowledge you'll need to properly structure your HTML forms; the next article will dig into implementing all the different types of form widgets you'll want to use to collect information from your users.</p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external" title="http://www.alistapart.com/articles/sensibleforms/">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
+</ul>
diff --git a/files/pt-br/web/guide/html/forms/index.html b/files/pt-br/web/guide/html/forms/index.html
new file mode 100644
index 0000000000..15bd243566
--- /dev/null
+++ b/files/pt-br/web/guide/html/forms/index.html
@@ -0,0 +1,79 @@
+---
+title: Formulários da Web - Trabalhando com dados do usuário
+slug: Web/Guide/HTML/Forms
+tags:
+  - Aprender
+  - Funcionalidades
+  - Guía
+  - HTML
+  - Iniciante
+  - Web
+  - formulários
+translation_of: Learn/Forms
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary"><span class="seoSummary">Este guia tem uma série de artigos que vão ajudar você a ficar craque em HTML forms.</span> HTML forms são ferramentas poderosas para interagir com usuários; contudo, por razões técnicas e históricas,  <span>nem sempre é óbvio como usá-los em seu pleno potencia</span>l. Neste guia, vamos cobrir todos os aspectos dos HTML forms, da estrutura ao estilo, do manuseio de dados à widgets personalizados. Você vai aprender a desfrutar do grande poder que elas lhes oferecem!</p>
+
+<h2 id="Pré-requisitos">Pré-requisitos</h2>
+
+<p>Antes de iniciar este guia, você deve estar familiarizado com os conceitos da nossa <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a>.</p>
+
+<div class="note">
+<p><strong>Dica</strong>: Se você está usando um computador/tablet/outro aparelho onde você não pode criar seus próprios arquivos, você pode testar (a maior parte) dos códigos de exemplo em uma ferramenta online como <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/pt-BR/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guias_básicos">Guias básicos</h2>
+
+<p>Os seguintes guias te ensinarão todo o básico de formulários HTML, alcançando alguns tópicos ligeiramente mais avançados no caminho.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">Meu primeiro formulário HTML</a></dt>
+ <dd>O primeiro artigo na série te instruirá em sua primeira vez criando um formulário HTML, incluindo o projeto/desenho de um formulário simples, implementação usando os elementos HTML corretos, estilização bem básica com CSS, e como os dados são enviados para um servidor.</dd>
+ <dt><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form"><span>Como estruturar um formulário HTML</span></a></dt>
+ <dd><span>Agora que o básico não é mais problema, daremos uma olhada mais aprofundada nos elementos usados para dar estrutura e significado para as diferentes partes de um formulário.</span></dd>
+ <dt><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>Os form widgets nativos </span></a></dt>
+ <dd>Veremos a funcionalidade de diferentes form widgets em detalhe, observando quais opções estão disponíveis para coletar diferentes tipos de dados.</dd>
+ <dt><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Enviando e recuperando dados</span></a></dt>
+ <dd><span>Este artigo mostra o que acontece quando um usuário submete (envia) um formulário </span>—<span> para onde os dados vão, e o que fazer quando ele chegar lá? Também algumas das preocupações com segurança envolvida ao enviar dados em um formulário.</span></dd>
+ <dt><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Validação de dados nos formulários HTML</a></dt>
+ <dd>Enviar os dados não é o suficiente — também precisamos garantir que os dados que o usuário preenche num formulário está no formato correto que precisamos para processá-los com sucesso, e que não quebre nossas aplicações. Também queremos ajudar nossos usuários a preencher os formulários corretamente e não se sentirem frustrados ao usar nossos apps. Validação de dados nos ajuda a alcançar esses objetivos — este artigo te diz o que precisa saber.</dd>
+</dl>
+
+<h2 id="Guias_avançados">Guias avançados</h2>
+
+<p>Estes guias passam por algumas técnicas mais avançadas, que você achará útil aprender quando já tiver dominado o básico.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Como criar widgets HTML form personalizados</a></dt>
+ <dd>Você encontrará alguns casos onde os widgets nativos não fornecem o que você precisa, por exemplo em função de estilo ou funcionalidade. Nestes casos, você precisará construir seu próprio widget de formulário a partir de HTML puro. Neste artigo explicamos como você pode fazer isso e o que precisa considerar ao fazer isso, com um estudo de caso prático.</dd>
+ <dt><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Enviando HTML forms através do JavaScript</a></dt>
+ <dd>Este artigo mostra formas de usar um formulário para montar um HTTP request e enviá-lo via JavaScript personalizado, em vez da forma de submissão padrão. Também apresenta razões pelas quais você quereria fazer isso, e as implicações de fazer dessa forma. (Veja também Usando o objeto FormData.)</dd>
+ <dt><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">Formulários HTML para browsers antigos</a></dt>
+ <dd>Aborda detecção de funcionalidades, etc. Deveria ser movido para o módulo de testes multi-browser, já que a mesma coisa é abordada lá.</dd>
+ <dt><a href="/pt-BR/docs/HTML/Forms_in_HTML">Novidades em formulários no HTML5</a></dt>
+ <dd>Este artigo provê uma referência às novas adições aos formulários HTML na especificação HTML5.</dd>
+</dl>
+
+<h2 id="Guias_de_estilização_de_formulários">Guias de estilização de formulários</h2>
+
+<p>Estes guias para estilizar formulários com CSS realmente deveriam estar nos tópicos sobre <a href="/pt-BR/docs/Aprender/CSS">CSS</a>, mas estamos mantendo-os aqui por enquanto até uma oportunidade apropriada de movê-los.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Estilizando formulários HTML</a></dt>
+ <dd>Este artigo fornece uma introdução à personalização de estilos de formulário com CSS, incluindo todo o básico que você precisa para tarefas básicas de estilização.</dd>
+ <dt><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Estilos avançados para HTML forms</a></dt>
+ <dd>Aqui vemos algumas técnicas mais avançadas de estilização de formulários que precisam ser usadas quando tiver de lidar com alguns dos elementos mais difíceis de personalizar.</dd>
+ <dt><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Tabela de compatibilidade das Propriedades dos widgets</a></dt>
+ <dd>Este último artigo fornece uma referência prática que te permite procurar quais propriedades CSS são compatíveis com quais elementos de formulário.</dd>
+</dl>
+
+<h2 id="Avaliações">Avaliações</h2>
+
+<p>A definir.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Web/HTML/Element#Formulários">Referência de elementos de formulário HTML</a></li>
+</ul>
diff --git a/files/pt-br/web/guide/html/forms/meu_primeiro_formulario_html/index.html b/files/pt-br/web/guide/html/forms/meu_primeiro_formulario_html/index.html
new file mode 100644
index 0000000000..31ef58aa7c
--- /dev/null
+++ b/files/pt-br/web/guide/html/forms/meu_primeiro_formulario_html/index.html
@@ -0,0 +1,270 @@
+---
+title: Meu primeiro formulário HTML
+slug: Web/Guide/HTML/Forms/Meu_primeiro_formulario_HTML
+translation_of: Learn/Forms/Your_first_form
+---
+<p>Este é um artigo introdutório para formulários HTML. Através de um simples formulário de contato, nós veremos os requisitos básicos para construir formulários HTML. Esse artigo assume que você não sabe nada sobre formulários HTML, mas presume que você conhece o <a href="/pt-BR/docs/HTML/Introduction">básico de HTML</a> e <a href="/pt-BR/docs/Web/CSS/Getting_Started" title="/en-US/docs/CSS/Getting_Started">CSS</a>.</p>
+
+<h2 id="Antes_de_começarmos">Antes de começarmos</h2>
+
+<h3 id="O_que_são_formulários_HTML">O que são formulários HTML?</h3>
+
+<p>Formulários HTML são um dos principais pontos de interação entre um usuário e um web site ou aplicativo. Eles permitem que os usuários enviem dados para o web site. Na maior parte do tempo, os dados são enviados para o servidor da web, mas a página da web também pode interceptar para usá-los por conta própria.</p>
+
+<p>Um formulário HTML é feito de um ou mais widgets. Esses widgets podem ser campos de texto (linha única ou de várias linhas), caixas de seleção, botões, checkboxes ou radio buttons. A maior parte do tempo, estes elementos são emparelhados com uma legenda que descreve o seu objetivo.</p>
+
+<h3 id="O_que_você_precisa_para_trabalhar_com_formulários">O que você precisa para trabalhar com formulários?</h3>
+
+<p>Você não precisa de nada mais do que o que é requisitado para trabalhar com HTML: Um editor de texto e um navegador. É claro, que se você esta acostumado a usá-los você pode ter vantagens de uma IDE completa como <a href="http://www.microsoft.com/visualstudio" rel="external" title="http://www.microsoft.com/visualstudio">Visual Studio</a>, <a href="http://www.eclipse.org" rel="external" title="http://www.eclipse.org">Eclipse</a>, <a href="http://www.aptana.com/" rel="external" title="http://www.aptana.com/">Aptana</a>, etc., mas cabe somente a você.</p>
+
+<p>A principal diferença entre um formulário de HTML e um documento regular de HTML é que, maioria das vezes, o dado coletado é enviado ao servidor. Nesse caso, você precisa configurar um servidor web para receber e processar os dados. Como configurar um servidor está além do escopo deste artigo, mas se você quer saber mais, consulte o artigo dedicado a este tema: <a href="/en-US/docs/HTML/Forms/Sending_and_Retrieving_form_data">Envio e recuperação de dados do formulário</a>.</p>
+
+<h2 id="Desenhando_seu_formulário">Desenhando seu formulário</h2>
+
+<p>Antes de começar a codificar, é sempre melhor dar um passo atrás e tomar o tempo para pensar sobre o seu formulário. Desenhando um rascunho rápido irá ajudar a definir o conjunto correto de dados que você quer perguntar ao usuário. De um ponto de vista da experiência do usuário (UX), é importante lembrar que quanto maior o seu formulário, maior o risco de perder os usuários. Mantenha o formuário simples e mantenha o foco: <strong>peça apenas o que é absolutamente necessário</strong>.<br>
+ A criação de formulários é um passo importante quando você está construindo um site ou um aplicativo. Está além do escopo deste artigo  cobrir as formas, mas se você quiser se aprofundar neste tópico você deve ler os seguintes artigos:</p>
+
+<ul>
+ <li>A Smashing Magazine tem <a href="http://uxdesign.smashingmagazine.com/tag/forms/">ótimos artigos sobre UX</a> nos formulários, mas talvez o mais importante é o <a href="https://translate.google.com/translate?sl=en&amp;tl=pt&amp;js=y&amp;prev=_t&amp;hl=pt-BR&amp;ie=UTF-8&amp;u=http%3A%2F%2Fwww.smashingmagazine.com%2Ftag%2Fforms%2F&amp;edit-text=&amp;act=url">Extenso Guia para a usabilidade em formulários Web</a>.</li>
+ <li>UXMatters também é um recurso muito atencioso com bons conselhos de <a href="https://translate.google.com/translate?sl=en&amp;tl=pt&amp;js=y&amp;prev=_t&amp;hl=pt-BR&amp;ie=UTF-8&amp;u=http%3A%2F%2Fwww.uxmatters.com%2Fmt%2Farchives%2F2012%2F05%2F7-basic-best-practices-for-buttons.php&amp;edit-text=&amp;act=url">melhores práticas básicas </a>para conceitos complexos, tais como <a href="https://translate.google.com/translate?hl=pt-BR&amp;sl=en&amp;tl=pt&amp;u=http%3A%2F%2Fwww.uxmatters.com%2Fmt%2Farchives%2F2010%2F03%2Fpagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">formulários de várias páginas </a>.</li>
+</ul>
+
+<p>Neste artigo vamos construir um formulário de contato simples. Vamos fazer um esboço.</p>
+
+<p><img alt="The form to build, roughly sketch" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; height: 352px; width: 400px;"></p>
+
+<p>O nosso formulário terá três campos de texto e um botão. Basicamente, pedimos ao usuário o seu nome, seu e-mail e a mensagem que deseja enviar. Ao apertar o botão apenas irá enviar os dados para o servidor web.</p>
+
+<h2 id="Sujar_as_mãos_com_HTML">Sujar as mãos com HTML</h2>
+
+<p><br>
+ Ok, agora estamos prontos para ir para o código HTML do nosso formulário. Para construir o nosso formulário de contato, vamos utilizar os seguintes elementos {{HTMLElement("form")}} , {{HTMLElement("label")}} , {{HTMLElement("input")}} , {{HTMLElement("textarea")}} , e {{HTMLElement("button")}} .</p>
+
+<h3 id="O_Elemento_HTMLElement(form)">O Elemento {{HTMLElement("form")}} </h3>
+
+<p>Todos formulários HTML começam com um elemento {{HTMLElement("form")}} como este:</p>
+
+<pre class="brush:html;">&lt;form action="/pagina-processa-dados-do-form" method="post"&gt;
+
+&lt;/form&gt;</pre>
+
+<p>Este elemento define um formulário. É um elemento de container como um elemento {{HTMLElement ("div")}} ou {{HTMLElement ("p")}} , mas ele também suporta alguns atributos específicos para configurar a forma como o formulário se comporta. Todos os seus atributos são opcionais, mas é considerada a melhor prática sempre definir pelo menos o atributo <code><em>action </em></code>e o atributo <code><em>method</em></code>.</p>
+
+<ul>
+ <li>O atributo <em><strong>action </strong></em>define o local (uma URL) em que os dados recolhidos do formulário devem ser enviados.</li>
+ <li>O atributo <em><strong>method</strong></em> define qual o método HTTP para enviar os dados (ele pode ser "<strong>GET</strong>" ou "<strong>POST</strong>" (veja as diferenças <a href="http://www.comocriarsites.com/html/como-funciona-os-metodos-get-e-post-diferencas/">aqui</a>).</li>
+</ul>
+
+<p>Se você quiser se aprofundar em como esses atributos funcionam, está detalhado no artigo <a href="/pt-BR/docs/HTML/Forms/Sending_and_retrieving_form_data">Enviando e recebendo dados de um formulário</a></p>
+
+<h3 id="Adicionar_campos_com_os_elementos_HTMLElement(label)_HTMLElement(input)_e_HTMLElement(textarea)">Adicionar campos com os elementos {{HTMLElement("label")}} , {{HTMLElement("input")}} , e {{HTMLElement("textarea")}} </h3>
+
+<p>O nosso formulário de contato é muito simples e contém três campos de texto, cada um com uma etiqueta. O campo de entrada para o nome será um campo básico texto de linha única("input"); o campo de entrada do e-mail será um campo de texto com uma única linha("input") que vai aceitar apenas um endereço de e-mail; o campo de entrada para a mensagem será um campo de texto de várias linhas("textarea").</p>
+
+<p>Em termos de código HTML, teremos algo assim:</p>
+
+<pre class="brush:html;">&lt;form action="/pagina-processa-dados-do-form" method="post"&gt;
+    &lt;div&gt;
+        &lt;label for="nome"&gt;Nome:&lt;/label&gt;
+        &lt;input type="text" id="nome" /&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;label for="email"&gt;E-mail:&lt;/label&gt;
+        &lt;input type="email" id="email" /&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;label for="msg"&gt;Mensagem:&lt;/label&gt;
+        &lt;textarea id="msg"&gt;&lt;/textarea&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Os elementos  {{HTMLElement ("div")}} estão lá para estruturar nosso código e deixar a estilização mais fácil (ver abaixo). Observe o uso do atributo <em><strong>for</strong></em> em todos os elementos {{HTMLElement ("label")}} ; é uma maneira para vincular uma <strong><em>label</em></strong> à um campo do formulário. Este atributo faz referência ao <em><strong>id</strong></em> do campo correspondente. Há algum benefício para fazer isso, é a de permitir que o usuário clique no rótulo para ativar o campo correspondente. Se você quer uma melhor compreensão dos outros benefícios deste atributo, tudo é detalhado no artigo: <a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a>(en).</p>
+
+<p>No  elemento {{HTMLElement ("input")}} , o atributo mais importante é o atributo <code><em><strong>type</strong></em></code>. Esse atributo é extremamente importante porque define a forma como o elemento  {{HTMLElement ("input")}} se comporta. Ele pode mudar radicalmente o elemento,  então preste atenção a ele. Se você quiser saber mais sobre isso, leia o artigo <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" rel="external" title="/en-US/docs/HTML/Forms/The_native_forms_widgets">native form widgets</a>. Em nosso exemplo, nós usamos somente o  <code><strong>type<em>=</em></strong>"<em><strong>text</strong></em>",</code> valor padrão para este atributo. Ele representa um campo de texto com uma única linha que aceita qualquer tipo de texto sem controle ou validação. Nós também usamos o <code><strong>type<em>=</em></strong>"<strong><em>email</em></strong>"</code> que define um campo de texto com uma única linha que só aceita um endereço de e-mail bem-formados. Este último valor torna um campo de texto básico em uma espécie de campo "inteligente", que irá realizar alguns testes com os dados digitados pelo usuário. Se você quiser saber mais sobre a validação de formulário, detalharemos melhor no artigo <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Validação de dados de formulário</a>.</p>
+
+<p>Por último, mas não menos importante, observe a sintaxe de <code><strong>&lt;input /&gt;</strong> </code> e <code><strong>&lt;textarea&gt; &lt;/ textarea&gt;</strong>.</code> Esta é uma das esquisitices do HTML. A tag<strong> <code>&lt;input /&gt;</code> </strong>é um elemento que se  auto-fecha, o que significa que se você quiser encerrar formalmente o elemento, você tem que adicionar uma barra "<strong>/</strong>" no final do próprio elemento e não uma tag de fechamento. No entanto, o tipo {{HTMLElement ("textarea")}} não é um elemento de auto-fechamento, então você tem que fechá-lo com a tag final adequada. Isso tem um impacto sobre um recurso específico de formulários HTML: a maneira como você define o valor padrão. Para definir o valor padrão de um elemento {{HTMLElement ("input")}} você tem que usar o atributo <code><em><strong>value</strong></em> </code>como este:</p>
+
+<pre class="brush:html;">&lt;input type="text" value="Por padrão, este elemento será preenchido com este texto " /&gt;</pre>
+
+<p>Pelo contrário, se você deseja definir o valor padrão de um elemento {{HTMLElement ("textarea")}} , você só tem que colocar esse valor padrão no meio das tags, entre tag inicial e a tag final do elemento {{HTMLElement ("textarea")}} , como abaixo:</p>
+
+<pre class="brush:html;">&lt;textarea&gt;Por padrão, este elemento será preenchido com este texto &lt;/textarea&gt;</pre>
+
+<h3 id="E_um_elemento_HTMLElement(button)_para_concluir">E um elemento {{HTMLElement("button")}} para concluir</h3>
+
+<p>O nosso formulário está quase pronto; nós temos apenas que adicionar um botão para permitir que o usuário envie seus dados depois de ter preenchido o formulário. Isto é simplesmente feito usando o elemento {{HTMLElement ("button")}} :</p>
+
+<pre class="brush:html;">&lt;form action="/pagina-processa-dados-do-form" method="post"&gt;
+    &lt;div&gt;
+        &lt;label for="name"&gt;Nome:&lt;/label&gt;
+        &lt;input type="text" id="name" /&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;label for="mail"&gt;E-mail:&lt;/label&gt;
+        &lt;input type="email" id="mail" /&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;label for="msg"&gt;Mensagem:&lt;/label&gt;
+        &lt;textarea id="msg"&gt;&lt;/textarea&gt;
+    &lt;/div&gt;
+    &lt;div class="button"&gt;
+        &lt;button type="submit"&gt;Enviar sua mensagem&lt;/button&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Um botão pode ser de três tipos: <strong><code>submit</code></strong>, <strong><code>reset</code></strong>, ou <strong><code>button</code></strong>.</p>
+
+<ul>
+ <li>Um clique sobre um botão de <strong><code>submit</code> </strong>envia os dados do formulário para a página de web definida pelo atributo <code><strong>action </strong></code>do elemento {{HTMLElement ("form")}} .</li>
+ <li>Um clique sobre um botão de <strong><code>reset </code></strong>redefine imediatamente todos os campos do formulário para o seu valor padrão. De um ponto de vista na usabilidade do usuário(UX), isso é considerado uma má prática.</li>
+ <li>Um clique em um botão do tipo <code><strong>button</strong></code> faz ...ops, nada! Isso soa bobo, mas é incrivelmente útil para construir botões personalizados com JavaScript, ou seja, ele pode assumir qualquer comportamento através desta linguagem.</li>
+</ul>
+
+<p>Note que você também pode usar o elemento  {{HTMLElement ("input")}} com o tipo correspondente para produzir um botão. A principal diferença com o elemento {{HTMLElement ("button")}} é que o elemento {{HTMLElement ("input")}} permite apenas texto sem formatação como seu valor, enquanto que o elemento  {{HTMLElement ("button")}} permite que o conteúdo HTML completo como seu valor.</p>
+
+<h2 id="Vamos_deixar_um_pouco_mais_legal_com_CSS">Vamos deixar um pouco mais legal com CSS</h2>
+
+<p>Agora que temos o nosso formulário HTML, se você olhar para ele em seu navegador favorito, você vai ver que ele parece meio feio.</p>
+
+<p><img alt="" src="/files/4049/form-no-style.png" style="height: 170px; width: 534px;"></p>
+
+<p>Vamos deixar ele um pouco mais legal com os códigos CSS a seguir:</p>
+
+<p>Vamos começar com o próprio formulário; vamos centralizá-lo e torná-lo visível com uma borda:</p>
+
+<pre class="brush:css;">form {
+    /* Apenas para centralizar o form na página */
+    margin: 0 auto;
+    width: 400px;
+    /* Para ver as bordas do formulário */
+    padding: 1em;
+    border: 1px solid #CCC;
+    border-radius: 1em;
+}</pre>
+
+<p>Então, adicionaremos algum espaço entre cada conjunto de campos do form:</p>
+
+<pre class="brush:css;">form div + div {
+    margin-top: 1em;
+}</pre>
+
+<p>Agora vamos focar nas <strong><code><em>labels</em></code></strong>. Para fazer o nosso formulário mais legível, é considerada a melhor prática ter todas as etiquetas do mesmo tamanho e alinhadas do mesmo lado. Nesse caso, vamos alinhá-los para a direita, mas em alguns casos, o alinhamento à esquerda pode ficar bem também.</p>
+
+<pre class="brush:css;">label {
+    /*Para ter certeza que todas as labels tem o mesmo tamanho e estão propriamente alinhadas */
+    display: inline-block;
+    width: 90px;
+    text-align: right;
+}</pre>
+
+<p>Uma das coisas mais difíceis de fazer em formulários HTML são os estilo dos próprios  campos. Os campos de texto são fáceis de estilizar, mas alguns outros campos não são. Se você quiser saber mais sobre  estilização de formulários HTML, leia o artigo <a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a>.</p>
+
+<p>Aqui vamos usar alguns truques comuns: fontes de harmonização, tamanho e bordas:</p>
+
+<pre class="brush:css;">input, textarea {
+    /* Para certificar-se que todos os campos de texto têm as mesmas configurações de fonte. Por padrão, textareas ter uma fonte monospace*/
+    font: 1em sans-serif;
+
+    /* Para dar o mesmo tamanho a todos os campo de texto */
+    width: 300px;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+
+    /* Para harmonizar o look &amp; feel das bordas nos campos de texto*/
+    border: 1px solid #999;
+}</pre>
+
+<p>Formulários HTML suportam muitas pseudo-classes para descrever os estados de cada elemento. Como exemplo, vamos adicionar um pouco de destaque quando um campo está ativo. É uma maneira conveniente para ajudar a manter o controle do usuário de onde eles está no formulário.</p>
+
+<pre class="brush:css;">input:focus, textarea:focus {
+    /* Dar um pouco de destaque nos elementos ativos */
+    border-color: #000;
+}</pre>
+
+<p>Campos de texto de várias linhas precisam de alguns estilos personalizados sozinhos. Por padrão, um elemento  {{HTMLElement ("textarea")}} é um bloco em linha com sua parte inferior alinhada à linha de base do texto. Na maioria das vezes, não é baseline o que queremos. Nesse caso, a fim de alinhar a <code><em>label </em></code>e o campo, temos que alterar a propriedade  <em>vertical-align</em> do {{HTMLElement ("textarea")}} para <em>top</em>.</p>
+
+<p>Observe também o uso da propriedade de <em>resize</em>, que é uma forma de permitir que os usuários redimensionar um elemento {{HTMLElement ("textarea")}}.</p>
+
+<pre class="brush:css;">textarea {
+    /* Para alinhar corretamente os campos de texto de várias linhas com sua label*/
+    vertical-align: top;
+
+    /* Para dar espaço suficiente para digitar algum texto */
+    height: 5em;
+
+    /* Para permitir aos usuários redimensionarem qualquer textarea verticalmente. Ele não funciona em todos os browsers */
+    resize: vertical;
+}</pre>
+
+<p>Muitas vezes, os botões precisam de estilos especiais também. Para esse fim, nós o colocamos dentro de uma {{HTMLElement ("div")}} com uma classe css <em><code>button</code></em>. Aqui, queremos que o botão esteja alinhado com os outros campos . Para conseguir isso, temos de imitar a presença de uma {{HTMLElement ("label")}}. Isso é feito utilizando <code><em><strong>padding </strong></em></code>e <code><em><strong>margin</strong></em></code>.</p>
+
+<pre class="brush:css;">.button {
+    /* Para posicionar os botões para a mesma posição dos campos de texto */
+    padding-left: 90px; /* mesmo tamanho que os elementos do tipo label */
+}
+button {
+    /* Esta margem extra representa aproximadamente o mesmo espaço que o espaço entre as labels e os seus campos de texto*/
+    margin-left: .5em;
+}</pre>
+
+<p>Agora o nosso formulário parece muito mais bonito.</p>
+
+<p><img alt="" src="/files/4051/form-style.png" style="height: 260px; width: 900px;"></p>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Enviar_os_dados_para_seu_servidor_web">Enviar os dados para seu servidor web</h2>
+
+<p>A última parte, e talvez a mais complicado, é lidar com dados de formulário no lado do servidor. Como dissemos antes, na maioria das vezes, um formulário HTML é uma forma conveniente para perguntar ao usuário os dados e enviá-lo para um servidor web.</p>
+
+<p>O elemento {{HTMLElement("form")}} definirá onde e como enviar os dados, graças ao atribudo <em><strong>action</strong></em> e ao atributo <em><strong>method</strong></em></p>
+
+<p>Mas não é o suficiente. Nós também precisamos dar um nome a nossos dados. Esses nomes são importantes em ambos os lados; no lado do navegador, ele informa ao navegador que nome dar a cada pedaço de dados, e no lado do servidor, ele permite que o servidor lidar com cada pedaço de dados pelo nome.</p>
+
+<p>Então, para nomear seus dados, você precisará usar o atributo <em><strong><code>name </code></strong></em>em cada campo do formulário que irá recolher uma parte específica dos dados:</p>
+
+<pre class="brush:html;">&lt;form action="/pagina-processa-dados-do-form" method="post"&gt;
+    &lt;div&gt;
+        &lt;label for="nome"&gt;Nome:&lt;/label&gt;
+        &lt;input type="text" id="nome" name="usuario_nome" /&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;label for="email"&gt;E-mail:&lt;/label&gt;
+        &lt;input type="email" id="email" name="usuario_email" /&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;label for="msg"&gt;Mensagem:&lt;/label&gt;
+        &lt;textarea id="msg" name="usuario_msg"&gt;&lt;/textarea&gt;
+    &lt;/div&gt;
+
+    &lt;div class="button"&gt;
+        &lt;button type="submit"&gt;Enviar sua mensagem&lt;/button&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Em nosso exemplo, o formulário irá enviar 3 informações, chamados "usuario_nome", "usuario_email" e "usuario_msg" e os dados serão enviados para a URL "<em><strong>/pagina-processa-dados-do-form</strong></em>" com o método HTTP:  <strong>POST </strong>.</p>
+
+<p>No lado do servidor, o script na URL "<em><strong>/pagina-processa-dados-do-form</strong></em>" receberá os dados como uma lista de itens 3 de chave/valor contidos na solicitação HTTP. A forma como o script  vai lidar com esses dados fica a seu critério. Cada linguagem server-side (PHP, Python, Ruby, Java, C #, etc.) tem seu próprio mecanismo. Está além do escopo deste guia aprofundar o assunto, mas se você quiser saber mais, vamos dar alguns exemplos no artigo <a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Enviando e recuperando dados de formulário</span></a>.</p>
+
+<p> </p>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Parabéns! Você construiu seu primeira formulário HTML. Aqui está um exemplo do resultado final.</p>
+
+<table style="height: 267px; width: 772px;">
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Live example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ EmbedLiveSample('A_simple_form', '460', '240', '', 'Web/Guide/HTML/Forms/My_first_HTML_form/Example') }}</td>
+  </tr>
+  <tr>
+  </tr>
+ </tbody>
+</table>
+
+<p>Agora é hora de dar uma olhada mais profunda. Formulários HTML são muito mais poderoso do que o que nós vimos aqui <a href="/pt-BR/docs/Web/Guide/HTML/Forms">e os outros artigos deste guia</a> irá ajudá-lo a dominar o resto.</p>
diff --git a/files/pt-br/web/guide/html/forms/os_widgets_nativos/index.html b/files/pt-br/web/guide/html/forms/os_widgets_nativos/index.html
new file mode 100644
index 0000000000..ebefe55869
--- /dev/null
+++ b/files/pt-br/web/guide/html/forms/os_widgets_nativos/index.html
@@ -0,0 +1,701 @@
+---
+title: Os widgets nativos
+slug: Web/Guide/HTML/Forms/Os_widgets_nativos
+tags:
+  - Aprender
+  - Contrôles
+  - Exemplos
+  - Guía
+  - HTML
+  - Iniciantes
+  - Intermediário
+  - Web
+translation_of: Learn/Forms/Basic_native_form_controls
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</div>
+
+<p class="summary">Veremos agora, detalhadamente, a funcionalidade dos diferentes widgets dos formulários, observando as opções disponíveis para coletar diferentes tipos de dados. Este guia é um tanto exaustivo, cobrindo todos os widgets de formulários nativos disponíveis.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Alfabetização básica em informática e um <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">entendimento básico de HTML.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender quais são os widgets nativos de formulário disponiveis nos navegadores para coletar dados, e como implementa-los usando HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Aqui vamos nos concentrar nos widgets de formulário baseados em navegador, mas como os formulários HTML são muito limitados e a qualidade da implementação pode ser muito diferente de navegador para navegador, os desenvolvedores da Web às vezes criam seus próprios widgets de formulários </span></span>— Veja <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a> <span class="tlid-translation translation" lang="pt"><span title="">posteriormente neste mesmo módulo para obter mais idéias sobre isso.</span></span></p>
+
+<div class="note">
+<p><strong>Nota</strong>: A maioria dos recursos discutidos neste artigo possui <span class="tlid-translation translation" lang="pt"><span title="">amplo suporte nos navegadores</span></span>; destacaremos as exceções existentes. Se você quiser mais detalhes, consulte nosso artigo <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">referência aos elementos de formulário HTML</a>, <span class="tlid-translation translation" lang="pt"><span title="">e, em particular, nossa extensa referência de </span></span><a href="/en-US/docs/Web/HTML/Element/input">tipos &lt;input&gt;</a>.</p>
+</div>
+
+<h2 id="Atributos_comuns">Atributos comuns</h2>
+
+<p><span class="tlid-translation translation" lang="pt"><span title="">Muitos dos elementos usados para definir widgets de formulário têm seus próprios atributos</span></span>. Entretanto, <span class="tlid-translation translation" lang="pt"><span title="">há um conjunto de atributos comuns a todos os elementos do formulário</span></span>, os quais permitem certo controle sobre os widgets. <span class="tlid-translation translation" lang="pt"><span title="">Aqui está uma lista desses atributos comuns</span></span>:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Nome do atributo</th>
+   <th scope="col">Valor padrão</th>
+   <th scope="col">Descrição</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td>(falso)</td>
+   <td>Este é um atributo booleano que permite especificar automaticamente qual elemento deverá ter o foco quando a página carregar, a menos que o usuário a substitua, por exemplo <span class="tlid-translation translation" lang="pt"><span title=""> digitando sobre um controle diferente</span></span>. <span class="tlid-translation translation" lang="pt"><span title="">Somente um elemento associado ao formulário em um documento pode ter esse atributo especificado</span></span>.</td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td>(<em>falso</em>)</td>
+   <td>Este é um atributo booleano que indica <span class="tlid-translation translation" lang="pt"><span title="">que o usuário não pode interagir com este elemento</span></span>. Se este atributo não estiver especificado, o elemento, então, herda a configuração do elemento que o contém, por exemplo, {{HTMLElement("fieldset")}}; se o elemento que o contém não possuir o atributo <code>disabled</code>, então o elemento é ativado.</td>
+  </tr>
+  <tr>
+   <td><code>form</code></td>
+   <td></td>
+   <td><span class="tlid-translation translation" lang="pt"><span title="">O elemento do formulário ao qual o widget está associado</span></span>. O valor do atributo deve ser o atributo <code>id</code> de um {{HTMLElement("form")}} no mesmo documento. <span class="tlid-translation translation" lang="pt"><span title="">Em teoria, permite colocar um widget fora de um elemento</span></span> {{HTMLElement("form")}}. <span class="tlid-translation translation" lang="pt"><span title="">Na prática, no entanto, não há navegador que suporte esse recurso.</span></span></td>
+  </tr>
+  <tr>
+   <td><code>name</code></td>
+   <td></td>
+   <td><span class="tlid-translation translation" lang="pt"><span title="">O nome do elemento. Este atributo é</span><span title=""> enviado com os dados do formulário.</span></span></td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td></td>
+   <td>O Valor inicial do elemento.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Text_input_fields">Text input fields</h2>
+
+<p>Text {{htmlelement("input")}} fields are the most basic form widgets. They are a very convenient way to let the user enter any kind of data. However, some text fields can be specialized to achieve particular needs. We've already seen a few simple examples</p>
+
+<div class="note">
+<p><strong>Note</strong>: HTML form text fields are simple plain text input controls. This means that you cannot use them to perform <a href="/en-US/docs/Rich-Text_Editing_in_Mozilla" title="/en-US/docs/Rich-Text_Editing_in_Mozilla">rich editing</a> (bold, italic, etc.). All rich text editors you'll encounter out there are custom widgets created with HTML, CSS, and JavaScript.</p>
+</div>
+
+<p>All text fields share some common behaviors:</p>
+
+<ul>
+ <li>They can be marked as {{htmlattrxref("readonly","input")}} (the user cannot modify the input value) or even {{htmlattrxref("disabled","input")}} (the input value is never sent with the rest of the form data).</li>
+ <li>They can have a {{htmlattrxref("placeholder","input")}}; this is text that appears inside the text input box that describes the purpose of the box briefly.</li>
+ <li>They can be constrained in {{htmlattrxref("size","input")}} (the physical size of the box) and <a href="/en-US/docs/HTML/Element/input#attr-maxlength" title="/en-US/docs/HTML/Element/input#attr-maxlength">length</a> (the maximum number of characters that can be entered into the box).</li>
+ <li>They can benefit from <a href="/en-US/docs/HTML/Element/input#attr-spellcheck" title="/en-US/docs/HTML/Element/input#attr-spellcheck">spell checking</a>, if the browser supports it.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: The {{htmlelement("input")}} element is special because it can be almost anything. By simply setting its <code>type</code> attribute, it can change radically, and it is used for creating most types of form widget including single line text fields, controls without text input, time and date controls, and buttons. However, there are some exceptions, like {{htmlelement("textarea")}} for multi-line inputs. Take careful note of these as you read the article.</p>
+</div>
+
+<h3 id="Single_line_text_fields">Single line text fields</h3>
+
+<p>A single line text field is created using an {{HTMLElement("input")}} element whose {{htmlattrxref("type","input")}} attribute value is set to <code>text</code> (also, if you don't provide the {{htmlattrxref("type","input")}} attribute, <code>text</code> is the default value). The value <code>text</code> for this attribute is also the fallback value if the value you specify for the {{htmlattrxref("type","input")}} attribute is unknown by the browser (for example if you specify <code>type="date"</code> and the browser doesn't support native date pickers).</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find examples of all the single line text field types on GitHub at <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html">single-line-text-fields.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html">see it live also</a>).</p>
+</div>
+
+<p>Here is a basic single line text field example:</p>
+
+<pre class="brush: html">&lt;input type="text" id="comment" name="comment" value="I'm a text field"&gt;</pre>
+
+<p>Single line text fields have only one true constraint: if you type text with line breaks, the browser removes those line breaks before sending the data.</p>
+
+<p><img alt="Screenshots of single line text fields on several platforms." src="/files/4273/all-single-line-text-field.png" style="height: 235px; width: 655px;"></p>
+
+<p>HTML5 enhances the basic single line text field by adding special values for the {{htmlattrxref("type","input")}} attribute. Those values still turn an {{HTMLElement("input")}} element into a single line text field but they add a few extra constraints and features to the field.</p>
+
+<h4 id="E-mail_address_field">E-mail address field</h4>
+
+<p>This type of field is set with the value <code>email</code> for the {{htmlattrxref("type","input")}} attribute:</p>
+
+<pre class="brush: html">&lt;input type="email" id="email" name="email" multiple&gt;</pre>
+
+<p>When this <code>type</code> is used, the user is required to type a valid e-mail address into the field; any other content causes the browser to display an error when the form is submitted. Note that this is client-side error validation, performed by the browser:</p>
+
+<p><img alt="An invalid email input showing the message Please enter an email address." src="https://mdn.mozillademos.org/files/14781/email-invalid.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>It's also possible to let the user type several e-mail addresses into the same input (separated by commas) by including the {{htmlattrxref("multiple","input")}} attribute.</p>
+
+<p>On some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering email addresses.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find out more about form validation in the article <a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a>.</p>
+</div>
+
+<h4 id="Password_field">Password field</h4>
+
+<p>This type of field is set using the value <code>password</code> for the {{htmlattrxref("type","input")}} attribute:</p>
+
+<pre class="brush: html">&lt;input type="password" id="pwd" name="pwd"&gt;</pre>
+
+<p>It doesn't add any special constraints to the entered text, but it does obscure the value entered into the field (e.g. with dots or asterisks) so it can't be read by others.</p>
+
+<p>Keep in mind this is just a user interface feature; unless you submit your form securely, it will get sent in plain text, which is bad for security — a malicious party could intercept your data and steal passwords, credit card details, or whatever else you've submitted. The best way to protect users from this is to host any pages involving forms over a secure connection (i.e. at an https:// ... address), so the data is encrypted before it is sent.</p>
+
+<p>Modern browsers recognize the security implications of sending form data over an insecure connection, and have implemented warnings to deter users from using insecure forms. For more information on what Firefox implements, see <a href="/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a>.</p>
+
+<h4 id="Search_field">Search field</h4>
+
+<p>This type of field is set by using the value <code>search</code> for the {{htmlattrxref("type","input")}} attribute:</p>
+
+<pre class="brush: html">&lt;input type="search" id="search" name="search"&gt;</pre>
+
+<p>The main difference between a text field and a search field is how the browser styles it — often, search fields are rendered with rounded corners, and/or given an "x" to press to clear the entered value. However, there is another added feature worth noting: their values can be automatically saved to be auto completed across multiple pages on the same site.</p>
+
+<p><img alt="Screenshots of search fields on several platforms." src="/files/4269/all-search-field.png" style="height: 235px; width: 655px;"></p>
+
+<h4 id="Phone_number_field">Phone number field</h4>
+
+<p>This type of field is set using <code>tel</code> as the value of the {{htmlattrxref("type","input")}} attribute:</p>
+
+<pre class="brush: html">&lt;input type="tel" id="tel" name="tel"&gt;</pre>
+
+<p>Due to the wide variety of phone number formats around the world, this type of field does not enforce any constraints on the value entered by a user (this can include letters, etc.). This is primarily a semantic difference, although on some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering phone numbers.</p>
+
+<h4 id="URL_field">URL field</h4>
+
+<p>This type of field is set using the value <code>url</code> for the {{htmlattrxref("type","input")}} attribute:</p>
+
+<pre class="brush: html">&lt;input type="url" id="url" name="url"&gt;</pre>
+
+<p>It adds special validation constraints to the field, with the browser reporting an error if invalid URLs are entered.</p>
+
+<div class="note"><strong>Note:</strong> Just because the URL is well-formed doesn't necessarily mean that it refers to a location that actually exists.</div>
+
+<div class="note">
+<p><strong>Note</strong>: Fields that have special constraints and are in error prevent the form from being sent; in addition, they can be styled so as to make the error clear. We will discuss this in detail in the article: <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Data form validation</a>.</p>
+</div>
+
+<h3 id="Multi-line_text_fields">Multi-line text fields</h3>
+
+<p>A multi-line text field is specified using a {{HTMLElement("textarea")}} element, rather than using the {{HTMLElement("input")}} element.</p>
+
+<pre class="brush: html">&lt;textarea cols="30" rows="10"&gt;&lt;/textarea&gt;</pre>
+
+<p>The main difference between a textarea and a regular single line text field is that users are allowed to type text that includes hard line breaks (i.e. pressing return).</p>
+
+<p><img alt="Screenshots of multi-lines text fields on several platforms." src="/files/4271/all-multi-lines-text-field.png" style="height: 330px; width: 745px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find an example of a multi-line text field on GitHub at <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/multi-line-text-field.html">multi-line-text-field.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/multi-line-text-field.html">see it live also</a>). Have a look at it, and notice how in most browsers, the text area is given a drag handle on the bottom right to allow the user to resize it. This resizing ability can be turned off by setting the text area's {{cssxref("resize")}} property to <code>none</code> using <a href="/en-US/docs/Learn/CSS">CSS</a>.</p>
+</div>
+
+<p>{{htmlelement("textarea")}} also accepts a few extra attributes to control its rendering across several lines (in addition to several others):</p>
+
+<table>
+ <caption>Attributes for the {{HTMLElement("textarea")}} element</caption>
+ <thead>
+  <tr>
+   <th scope="col">Attribute name</th>
+   <th scope="col">Default value</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{htmlattrxref("cols","textarea")}}</td>
+   <td><code>20</code></td>
+   <td>The visible width of the text control, in average character widths.</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("rows","textarea")}}</td>
+   <td></td>
+   <td>The number of visible text lines for the control.</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("wrap","textarea")}}</td>
+   <td><code>soft</code></td>
+   <td>Indicates how the control wraps text. Possible values are: <code>hard</code> or <code>soft</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Note that the {{HTMLElement("textarea")}} element is written a bit differently from the {{HTMLElement("input")}} element. The {{HTMLElement("input")}} element is an empty element, which means that it cannot contain any child elements. On the other hand, the {{HTMLElement("textarea")}} element is a regular element that can contain text content children.</p>
+
+<p>There are two key related points to note here:</p>
+
+<ul>
+ <li>If you want to define a default value for an {{HTMLElement("input")}} element, you have to use the <code>value</code> attribute; for a {{HTMLElement("textarea")}} element on the other hand you put the default text between the starting tag and the closing tag of the {{HTMLElement("textarea")}}.</li>
+ <li>Because of its nature, the {{HTMLElement("textarea")}} element only accepts text content; this means that any HTML content put inside a {{HTMLElement("textarea")}} is rendered as if it was plain text content.</li>
+</ul>
+
+<h2 id="Drop-down_content">Drop-down content</h2>
+
+<p>Drop-down widgets are a simple way to let users select one of many options without taking up much space in the user interface. HTML has two forms of drop down content: the <strong>select box</strong>, and <strong>autocomplete box</strong>. In both cases the interaction is the same — once the control is activated, the browser displays a list of values the user can select between.</p>
+
+<div class="note">
+<p>Note: You can find examples of all the drop-down box types on GitHub at <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/drop-down-content.html">drop-down-content.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/drop-down-content.html">see it live also</a>).</p>
+</div>
+
+<h3 id="Select_box">Select box</h3>
+
+<p>A select box is created with a {{HTMLElement("select")}} element with one or more {{HTMLElement("option")}} elements as its children, each of which specifies one of its possible values.</p>
+
+<pre class="brush: html">&lt;select id="simple" name="simple"&gt;
+  &lt;option&gt;Banana&lt;/option&gt;
+  &lt;option&gt;Cherry&lt;/option&gt;
+  &lt;option&gt;Lemon&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<p>If required, the default value for the select box can be set using the {{htmlattrxref("selected","option")}} attribute on the desired {{HTMLElement("option")}} element — this option is then preselected when the page loads. The {{HTMLElement("option")}} elements can also be nested inside {{HTMLElement("optgroup")}} elements to create visually associated groups of values:</p>
+
+<pre class="brush: html">&lt;select id="groups" name="groups"&gt;
+  &lt;optgroup label="fruits"&gt;
+    &lt;option&gt;Banana&lt;/option&gt;
+    &lt;option selected&gt;Cherry&lt;/option&gt;
+    &lt;option&gt;Lemon&lt;/option&gt;
+  &lt;/optgroup&gt;
+  &lt;optgroup label="vegetables"&gt;
+    &lt;option&gt;Carrot&lt;/option&gt;
+    &lt;option&gt;Eggplant&lt;/option&gt;
+    &lt;option&gt;Potato&lt;/option&gt;
+  &lt;/optgroup&gt;
+&lt;/select&gt;</pre>
+
+<p><img alt="Screenshots of single line select box on several platforms." src="/files/4517/all-select.png" style="height: 636px; width: 887px;"></p>
+
+<p>If an {{HTMLElement("option")}} element is set with a <code>value</code> attribute, that attribute's value is sent when the form is submitted. If the <code>value</code> attribute is omitted, the content of the {{HTMLElement("option")}} element is used as the select box's value.</p>
+
+<p>On the {{HTMLElement("optgroup")}} element, the <code>label</code> attribute is displayed before the values, but even if it looks somewhat like an option, it is not selectable.</p>
+
+<h3 id="Multiple_choice_select_box">Multiple choice select box</h3>
+
+<p>By default, a select box only lets the user select a single value. By adding the {{htmlattrxref("multiple","select")}} attribute to the {{HTMLElement("select")}} element, you can allow users to select several values, by using the default mechanism provided by the operating system (e.g. holding down <kbd>Cmd</kbd>/<kbd>Ctrl</kbd> and clicking multiple values).</p>
+
+<p>Note: In the case of multiple choice select boxes, the select box no longer displays the values as drop-down content — instead, they are all displayed at once in a list.</p>
+
+<pre class="brush: html">&lt;select multiple id="multi" name="multi"&gt;
+  &lt;option&gt;Banana&lt;/option&gt;
+  &lt;option&gt;Cherry&lt;/option&gt;
+  &lt;option&gt;Lemon&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<p><img alt="Screenshots of multi-lines select box on several platforms." src="/files/4559/all-multi-lines-select.png" style="height: 531px; width: 734px;"></p>
+
+<div class="note"><strong>Note:</strong> All browsers that support the {{HTMLElement("select")}} element also support the {{htmlattrxref("multiple","select")}} attribute on it.</div>
+
+<h3 id="Autocomplete_box">Autocomplete box</h3>
+
+<p>You can provide suggested, automatically-completed values for form widgets using the {{HTMLElement("datalist")}} element with some child {{HTMLElement("option")}} elements to specify the values to display.</p>
+
+<p>The data list is then bound to a text field (usually an <code>&lt;input&gt;</code> element) using the {{htmlattrxref("list","input")}} attribute.</p>
+
+<p>Once a data list is affiliated with a form widget, its options are used to auto-complete text entered by the user; typically, this is presented to the user as a drop-down box listing possible matches for what they've typed into the input.</p>
+
+<pre class="brush: html">&lt;label for="myFruit"&gt;What's your favorite fruit?&lt;/label&gt;
+&lt;input type="text" name="myFruit" id="myFruit" list="mySuggestion"&gt;
+&lt;datalist id="mySuggestion"&gt;
+  &lt;option&gt;Apple&lt;/option&gt;
+  &lt;option&gt;Banana&lt;/option&gt;
+  &lt;option&gt;Blackberry&lt;/option&gt;
+  &lt;option&gt;Blueberry&lt;/option&gt;
+  &lt;option&gt;Lemon&lt;/option&gt;
+  &lt;option&gt;Lychee&lt;/option&gt;
+  &lt;option&gt;Peach&lt;/option&gt;
+  &lt;option&gt;Pear&lt;/option&gt;
+&lt;/datalist&gt;</pre>
+
+<div class="note"><strong>Note:</strong> According to <a href="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external" title="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list">the HTML specification</a>, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. However, it is unclear how it should work with controls other than text (color or date for example), and different browsers behave differently from case to case. Because of that, be cautious using this feature with anything but text fields.</div>
+
+<div><img alt="Screenshots of datalist on several platforms." src="/files/4593/all-datalist.png" style="height: 329px; width: 437px;"></div>
+
+<div></div>
+
+<h4 id="Datalist_support_and_fallbacks">Datalist support and fallbacks</h4>
+
+<p>The  {{HTMLElement("datalist")}} element is a very recent addition to HTML forms, so browser support is a bit more limited than what we saw earlier. Most notably, it isn't supported in IE versions below 10, and Safari still doesn't support it at the time of writing.</p>
+
+<p>To handle this, here is a little trick to provide a nice fallback for those browsers:</p>
+
+<pre class="brush:html;">&lt;label for="myFruit"&gt;What is your favorite fruit? (With fallback)&lt;/label&gt;
+&lt;input type="text" id="myFruit" name="fruit" list="fruitList"&gt;
+
+&lt;datalist id="fruitList"&gt;
+  &lt;label for="suggestion"&gt;or pick a fruit&lt;/label&gt;
+  &lt;select id="suggestion" name="altFruit"&gt;
+    &lt;option&gt;Apple&lt;/option&gt;
+    &lt;option&gt;Banana&lt;/option&gt;
+    &lt;option&gt;Blackberry&lt;/option&gt;
+    &lt;option&gt;Blueberry&lt;/option&gt;
+    &lt;option&gt;Lemon&lt;/option&gt;
+    &lt;option&gt;Lychee&lt;/option&gt;
+    &lt;option&gt;Peach&lt;/option&gt;
+    &lt;option&gt;Pear&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/datalist&gt;
+</pre>
+
+<p>Browsers that support the {{HTMLElement("datalist")}} element will ignore all the elements that are not {{HTMLElement("option")}} elements and will work as expected. On the other hand, browsers that do not support the {{HTMLElement("datalist")}} element will display the label and the select box. Of course, there are other ways to handle the lack of support for the {{HTMLElement("datalist")}} element, but this is the simplest (others tend to require JavaScript).</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="row">Safari 6</th>
+   <td><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="/files/4583/datalist-safari.png" style="height: 32px; width: 495px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Firefox 18</th>
+   <td><img alt="Screenshot of the datalist element with Firefox on Mac OS" src="/files/4581/datalist-firefox-macos.png" style="height: 102px; width: 353px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Checkable_items">Checkable items</h2>
+
+<p>Checkable items are widgets whose state you can change by clicking on them. There are two kinds of checkable item: the check box and the radio button. Both use the {{htmlattrxref("checked","input")}} attribute to indicate whether the widget is checked by default or not.</p>
+
+<p>It's worth noting that these widgets do not behave exactly like other form widgets. For most form widgets, once the form is submitted all widgets that have a {{htmlattrxref("name","input")}} attribute are sent, even if no value has been filled out. In the case of checkable items, their values are sent only if they are checked. If they are not checked, nothing is sent, not even their name.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html">checkable-items.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html">see it live also</a>).</p>
+</div>
+
+<p>For maximum usability/accessibility, you are advised to surround each list of related items in a {{htmlelement("fieldset")}}, with a {{htmlelement("legend")}} providing an overall description of the list.  Each individual pair of {{htmlelement("label")}}/{{htmlelement("input")}} elements should be contained in its own list item (or similar). This is shown in the examples. </p>
+
+<p>You also need to provide values for these kinds of inputs inside the <code>value</code> attribute if you want them to be meaningful — if no value is provided, check boxes and radio buttons are given a value of <code>on</code>.</p>
+
+<h3 id="Check_box">Check box</h3>
+
+<p>A check box is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>checkbox</code>.</p>
+
+<pre class="brush: html">&lt;input type="checkbox" checked id="carrots" name="carrots" value="carrots"&gt;
+</pre>
+
+<p>Including the <code>checked</code> attribute makes the checkbox checked automatically when the page loads.</p>
+
+<p><img alt="Screenshots of check boxes on several platforms." src="/files/4595/all-checkbox.png" style="height: 198px; width: 352px;"></p>
+
+<h3 id="Radio_button">Radio button</h3>
+
+<p>A radio button is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>radio</code>.</p>
+
+<pre class="brush: html">&lt;input type="radio" checked id="soup" name="meal"&gt;</pre>
+
+<p>Several radio buttons can be tied together. If they share the same value for their {{htmlattrxref("name","input")}} attribute, they will be considered to be in the same group of buttons. Only one button in a given group may be checked at the same time; this means that when one of them is checked all the others automatically get unchecked. When the form is sent, only the value of the checked radio button is sent. If none of them are checked, the whole pool of radio buttons is considered to be in an unknown state and no value is sent with the form.</p>
+
+<pre class="brush: html">&lt;fieldset&gt;
+  &lt;legend&gt;What is your favorite meal?&lt;/legend&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;label for="soup"&gt;Soup&lt;/label&gt;
+      &lt;input type="radio" checked id="soup" name="meal" value="soup"&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;label for="curry"&gt;Curry&lt;/label&gt;
+      &lt;input type="radio" id="curry" name="meal" value="curry"&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;label for="pizza"&gt;Pizza&lt;/label&gt;
+      &lt;input type="radio" id="pizza" name="meal" value="pizza"&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/fieldset&gt;</pre>
+
+<p><img alt="Screenshots of radio buttons on several platforms." src="/files/4597/all-radio.png" style="height: 198px; width: 352px;"></p>
+
+<h2 id="Buttons">Buttons</h2>
+
+<p>Within HTML forms, there are three kinds of button:</p>
+
+<dl>
+ <dt>Submit</dt>
+ <dd>Sends the form data to the server. For {{HTMLElement("button")}} elements, omitting the <code>type</code> attribute (or an invalid value of <code>type</code>) results in a submit button.</dd>
+ <dt>Reset</dt>
+ <dd>Resets all form widgets to their default values.</dd>
+ <dt>Anonymous</dt>
+ <dd>Buttons that have no automatic effect but can be customized using JavaScript code.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/button-examples.html">button-examples.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html">see it live also</a>).</p>
+</div>
+
+<p>A button is created using a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. It's the value of the {{htmlattrxref("type","input")}} attribute that specifies what kind of button is displayed:</p>
+
+<h3 id="submit">submit</h3>
+
+<pre class="brush: html">&lt;button type="submit"&gt;
+    This a &lt;br&gt;&lt;strong&gt;submit button&lt;/strong&gt;
+&lt;/button&gt;
+
+&lt;input type="submit" value="This is a submit button"&gt;</pre>
+
+<h3 id="reset">reset</h3>
+
+<pre class="brush: html">&lt;button type="reset"&gt;
+    This a &lt;br&gt;&lt;strong&gt;reset button&lt;/strong&gt;
+&lt;/button&gt;
+
+&lt;input type="reset" value="This is a reset button"&gt;</pre>
+
+<h3 id="anonymous">anonymous</h3>
+
+<pre class="brush: html">&lt;button type="button"&gt;
+    This an &lt;br&gt;&lt;strong&gt;anonymous button&lt;/strong&gt;
+&lt;/button&gt;
+
+&lt;input type="button" value="This is an anonymous button"&gt;</pre>
+
+<p>Buttons always behave the same whether you use a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. There are, however, some notable differences:</p>
+
+<ul>
+ <li>As you can see from the examples, {{HTMLElement("button")}} elements let you use HTML content in their labels, which are inserted inside the opening and closing <code>&lt;button&gt;</code> tags. {{HTMLElement("input")}} elements on the other hand are empty elements; their labels are inserted inside <code>value</code> attributes, and therefore only accept plain text content.</li>
+ <li>With {{HTMLElement("button")}} elements, it's possible to have a value different than the button's label (by setting it inside a <code>value</code> attribute). This isn't reliable in versions of Internet Explorer prior to IE 8.</li>
+</ul>
+
+<p><img alt="Screenshots of buttons on several platforms." src="/files/4599/all-buttons.png" style="height: 235px; width: 464px;"></p>
+
+<p>Technically speaking, there is almost no difference between a button defined with the {{HTMLElement("button")}} element or the {{HTMLElement("input")}} element. The only noticeable difference is the label of the button itself. Within an {{HTMLElement("input")}} element, the label can only be character data, whereas in a {{HTMLElement("button")}} element, the label can be HTML, so it can be styled accordingly.</p>
+
+<h2 id="Advanced_form_widgets">Advanced form widgets</h2>
+
+<p>In this section we cover those widgets that let users input complex or unusual data. This includes exact or approximate numbers, dates and times, or colors.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/advanced-examples.html">advanced-examples.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/advanced-examples.html">see it live also</a>).</p>
+</div>
+
+<h3 id="Numbers">Numbers</h3>
+
+<p>Widgets for numbers are created with the {{HTMLElement("input")}} element, with its {{htmlattrxref("type","input")}} attribute set to the value <code>number</code>. This control looks like a text field but allows only floating-point numbers, and usually provides some buttons to increase or decrease the value of the widget.</p>
+
+<p>It's also possible to:</p>
+
+<ul>
+ <li>Constrain the value by setting the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.</li>
+ <li>Specify the amount by which the increase and decrease buttons change the widget's value by setting the {{htmlattrxref("step","input")}} attribute.</li>
+</ul>
+
+<h4 id="Example">Example</h4>
+
+<pre class="brush: html">&lt;input type="number" name="age" id="age" min="1" max="10" step="2"&gt;</pre>
+
+<p>This creates a number widget whose value is restricted to any value between 1 and 10, and whose increase and decrease buttons change its value by 2.</p>
+
+<p><code>number</code> inputs are not supported in versions of Internet Explorer below 10.</p>
+
+<h3 id="Sliders">Sliders</h3>
+
+<p>Another way to pick a number is to use a slider. Visually speaking, sliders are less accurate than text fields, therefore they are used to pick a number whose exact value is not necessarily important.</p>
+
+<p>A slider is created by using the {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value <code>range</code>. It's important to properly configure your slider; to that end, it's highly recommended that you set the {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}}, and {{htmlattrxref("step","input")}} attributes.</p>
+
+<h4 id="Example_2">Example</h4>
+
+<pre class="brush: html">&lt;input type="range" name="beans" id="beans" min="0" max="500" step="10"&gt;</pre>
+
+<p>This example creates a slider whose value may range between 0 and 500, and whose increment/decrement buttons change the value by +10 and -10.</p>
+
+<p>One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. You need to add this yourself with JavaScript, but this is relatively easy to do. In this example we add an empty {{htmlelement("span")}} element, in which we will write the current value of the slider, updating it as it is changed.</p>
+
+<pre class="brush: html">&lt;label for="beans"&gt;How many beans can you eat?&lt;/label&gt;
+&lt;input type="range" name="beans" id="beans" min="0" max="500" step="10"&gt;
+&lt;span class="beancount"&gt;&lt;/span&gt;</pre>
+
+<p>This can be implemented using some simple JavaScript:</p>
+
+<pre class="brush: js">var beans = document.querySelector('#beans');
+var count = document.querySelector('.beancount');
+
+count.textContent = beans.value;
+
+beans.oninput = function() {
+  count.textContent = beans.value;
+}</pre>
+
+<p>Here we store references to the range input and the span in two variables, then we immediately set the span's <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> to the current <code>value</code> of the input. Finally, we set up an <code>oninput</code> event handler so that every time the range slider is moved, the span <code>textContent</code> is updated to the new input value.</p>
+
+<p><code>range</code> inputs are not supported in versions of Internet Explorer below 10.</p>
+
+<h3 id="Date_and_time_picker">Date and time picker</h3>
+
+<p>Gathering date and time values has traditionally been a nightmare for web developers. HTML5 brings some enhancements here by providing a special control to handle this specific kind of data.</p>
+
+<p>A date and time control is created using the {{HTMLElement("input")}} element and an appropriate value for the {{htmlattrxref("type","input")}} attribute, depending on whether you wish to collect dates, times, or both.</p>
+
+<h4 id="datetime-local"><code>datetime-local</code></h4>
+
+<p>This creates a widget to display and pick a date with time, but without any specific time zone information.</p>
+
+<pre class="brush: html">&lt;input type="datetime-local" name="datetime" id="datetime"&gt;</pre>
+
+<h4 id="month"><code>month</code></h4>
+
+<p>This creates a widget to display and pick a month with a year.</p>
+
+<pre class="brush: html">&lt;input type="month" name="month" id="month"&gt;</pre>
+
+<h4 id="time"><code>time</code></h4>
+
+<p>This creates a widget to display and pick a time value.</p>
+
+<pre class="brush: html">&lt;input type="time" name="time" id="time"&gt;</pre>
+
+<h4 id="week"><code>week</code></h4>
+
+<p>This creates a widget to display and pick a week number and its year.</p>
+
+<pre class="brush: html">&lt;input type="week" name="week" id="week"&gt;</pre>
+
+<p>All date and time control can be constrained using the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.</p>
+
+<pre class="brush: html">&lt;label for="myDate"&gt;When are you available this summer?&lt;/label&gt;
+&lt;input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate"&gt;</pre>
+
+<p>Warning — The date and time widgets don't have the deepest support. At the moment, Chrome, Edge, Firefox, and Opera support them well, but there is no support in Internet Explorer and Safari has patchy support.</p>
+
+<h3 id="Color_picker">Color picker</h3>
+
+<p>Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or hexadecimal), HSL values, keywords, etc. The color widget lets users pick a color in both textual and visual ways.</p>
+
+<p>A color widget is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>color</code>.</p>
+
+<pre class="brush: html">&lt;input type="color" name="color" id="color"&gt;</pre>
+
+<p>Warning — Color widget support it currently not very good. There is no support in Internet Explorer, and Safari currently doesn't support it either. The other major browsers do support it.</p>
+
+<h2 id="Other_widgets">Other widgets</h2>
+
+<p>There are a few other widgets that cannot be easily classified due to their very specific behaviors, but which are still very useful.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html">other-examples.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html">see it live also</a>).</p>
+</div>
+
+<h3 id="File_picker">File picker</h3>
+
+<p>HTML forms are able to send files to a server; this specific action is detailed in the article <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a>. The file picker widget is how the user can choose one or more files to send.</p>
+
+<p>To create a file picker widget, you use the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to <code>file</code>. The types of files that are accepted can be constrained using the {{htmlattrxref("accept","input")}} attribute. In addition, if you want to let the user pick more than one file, you can do so by adding the {{htmlattrxref("multiple","input")}} attribute.</p>
+
+<h4 id="Example_3">Example</h4>
+
+<p>In this example, a file picker is created that requests graphic image files. The user is allowed to select multiple files in this case.</p>
+
+<pre class="brush: html">&lt;input type="file" name="file" id="file" accept="image/*" multiple&gt;</pre>
+
+<h3 id="Hidden_content">Hidden content</h3>
+
+<p>It's sometimes convenient for technical reasons to have pieces of data that are sent with a form but not displayed to the user. To do this, you can add an invisible element in your form. Use an {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value <code>hidden</code>.</p>
+
+<p>If you create such an element, it's required to set its <code>name</code> and <code>value</code> attributes:</p>
+
+<pre class="brush: html">&lt;input type="hidden" id="timestamp" name="timestamp" value="1286705410"&gt;</pre>
+
+<h3 id="Image_button">Image button</h3>
+
+<p>The <strong>image button</strong> control is one which is displayed exactly like an {{HTMLElement("img")}} element, except that when the user clicks on it, it behaves like a submit button (see above).</p>
+
+<p>An image button is created using an {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>image</code>. This element supports exactly the same set of attributes as the {{HTMLElement("img")}} element, plus all the attributes supported by other form buttons.</p>
+
+<pre class="brush: html">&lt;input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /&gt;</pre>
+
+<p>If the image button is used to submit the form, this widget doesn't submit its value; instead the X and Y coordinates of the click on the image are submitted (the coordinates are relative to the image, meaning that the upper-left corner of the image represents the coordinate 0, 0). The coordinates are sent as two key/value pairs:</p>
+
+<ul>
+ <li>The X value key is the value of the {{htmlattrxref("name","input")}} attribute followed by the string "<em>.x</em>".</li>
+ <li>The Y value key is the value of the {{htmlattrxref("name","input")}} attribute followed by the string "<em>.y</em>".</li>
+</ul>
+
+<p>So for example when you click on the image of this widget, you are sent to a URL like the following:</p>
+
+<pre>http://foo.com?pos.x=123&amp;pos.y=456</pre>
+
+<p>This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the <a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending and retrieving form data</span></a> article.</p>
+
+<h3 id="Meters_and_progress_bars">Meters and progress bars</h3>
+
+<p>Meters and progress bars are visual representations of numeric values.</p>
+
+<h4 id="Progress">Progress</h4>
+
+<p>A progress bar represents a value that changes over time up to a maximum value specified by the {{htmlattrxref("max","progress")}} attribute. Such a bar is created using a {{ HTMLElement("progress")}} element.</p>
+
+<pre class="brush: html">&lt;progress max="100" value="75"&gt;75/100&lt;/progress&gt;</pre>
+
+<p>This is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.</p>
+
+<p>The content inside the {{HTMLElement("progress")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.</p>
+
+<h4 id="Meter">Meter</h4>
+
+<p>A meter bar represents a fixed value in a range delimited by a {{htmlattrxref("min","meter")}} and a {{htmlattrxref("max","meter")}} value. This value is visualy rendered as a bar, and to know how this bar looks, we compare the value to some other set values:</p>
+
+<ul>
+ <li>The {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values divide the range in three parts:
+  <ul>
+   <li>The lower part of the range is between the {{htmlattrxref("min","meter")}} and {{htmlattrxref("low","meter")}} values (including those values).</li>
+   <li>The medium part of the range is between the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values (excluding those values).</li>
+   <li>The higher part of the range is between the {{htmlattrxref("high","meter")}} and {{htmlattrxref("max","meter")}} values (including those values).</li>
+  </ul>
+ </li>
+ <li>The {{htmlattrxref("optimum","meter")}} value defines the optimum value for the {{HTMLElement("meter")}} element. In conjuction with the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} value, it defines which part of the range is prefered:
+  <ul>
+   <li>If the {{htmlattrxref("optimum","meter")}} value is in the lower part of the range, the lower range is considered to be the prefered part, the medium range is considered to be the average part and the higher range is considered to be the worst part.</li>
+   <li>If the {{htmlattrxref("optimum","meter")}} value is in the medium part of the range, the lower range is considered to be an average part, the medium range is considered to be the prefered part and the higher range is considered to be average as well.</li>
+   <li>If the {{htmlattrxref("optimum","meter")}} value is in the higher part of the range, the lower range is considered to be the worst part, the medium range is considered to be the average part and the higher range is considered to be the prefered part.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>All browsers that implement the {{HTMLElement("meter")}} element use those values to change the color of the meter bar:</p>
+
+<ul>
+ <li>If the current value is in the prefered part of the range, the bar is green.</li>
+ <li>If the current value is in the average part of the range, the bar is yellow.</li>
+ <li>If the current value is in the worst part of the range, the bar is red.</li>
+</ul>
+
+<p>Such a bar is created using a {{HTMLElement("meter")}} element. This is for implementing any kind of meter, for example a bar showing total space used on a disk, which turns red when it starts to get full.</p>
+
+<pre class="brush: html">&lt;meter min="0" max="100" value="75" low="33" high="66" optimum="50"&gt;75&lt;/meter&gt;</pre>
+
+<p>The content inside the {{HTMLElement("meter")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.</p>
+
+<p>Support for progress and meter is fairly good — there is no support in Internet Explorer, but other browsers support it well.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>As you'll have seen above, there are a lot of different types of available form elements — you don't need to remember all of these details at once, and can return to this article as often as you like to check up on details.</p>
+
+<h2 id="See_also">See also</h2>
+
+<p>To dig into the different form widgets, there are some useful external resources you should check out:</p>
+
+<ul>
+ <li><a href="http://wufoo.com/html5/" rel="external" title="http://wufoo.com/html5/">The Current State of HTML5 Forms</a> by Wufoo</li>
+ <li><a href="http://www.quirksmode.org/html5/inputs.html" rel="external" title="http://www.quirksmode.org/html5/inputs.html">HTML5 Tests - inputs</a> on Quirksmode (also <a href="http://www.quirksmode.org/html5/inputs_mobile.html" rel="external" title="http://www.quirksmode.org/html5/inputs_mobile.html">available for mobile</a> browsers)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</p>
+
+
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
+</ul>
diff --git a/files/pt-br/web/guide/html/forms/sending_and_retrieving_form_data/index.html b/files/pt-br/web/guide/html/forms/sending_and_retrieving_form_data/index.html
new file mode 100644
index 0000000000..c6eaaee29b
--- /dev/null
+++ b/files/pt-br/web/guide/html/forms/sending_and_retrieving_form_data/index.html
@@ -0,0 +1,251 @@
+---
+title: Sending form data
+slug: Web/Guide/HTML/Forms/Sending_and_retrieving_form_data
+translation_of: Learn/Forms/Sending_and_retrieving_form_data
+---
+<p>Em muitos casos, a finalidade de <a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">HTML Form</a> Um é enviar dados para um servidor. O servidor processa os dados e envia uma resposta ao usuário. Isso parece simples, mas é importante manter algumas coisas em mente para garantir que os dados não danifiquem o servidor ou causem problemas para seus usuários.</p>
+
+<h2 id="Para_onde_vão_os_dados">Para onde vão os dados?</h2>
+
+<p>Aqui nós discutiremos o que acontece com os dadosquando um formulário é enviado.</p>
+
+<h3 id="Sobre_a_arquitetura_cliente_servidor">Sobre a arquitetura cliente / servidor</h3>
+
+<p>A web é baseada em uma arquitetura cliente / servidor muito básica que pode ser resumida da seguinte forma: um cliente (normalmente um navegador da Web) envia um pedido a um servidor (na maioria das vezes um servidor web como <a href="http://httpd.apache.org/" rel="external" title="http://www.apache.org/">Apache</a>, <a href="http://nginx.com/" rel="external" title="http://nginx.com/">Nginx</a>, <a href="http://www.iis.net/" rel="external" title="http://www.iis.net/">IIS</a>, <a href="http://tomcat.apache.org/" rel="external" title="http://tomcat.apache.org/">Tomcat</a>, etc.), usando o <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP protocol</a>. O servidor responde a solicitação usando o mesmo protocolo.</p>
+
+<p><img alt="A basic schema of the Web client/server architecture" src="/files/4291/client-server.png" style="height: 141px; width: 400px;"></p>
+
+<p>No lado do cliente, um formulário HTML é nada mais do que uma maneira conveniente e amigável para configurar uma solicitação HTTP para enviar dados para um servidor. Isso permite que o usuário forneça informações a serem entregues na solicitação HTTP.</p>
+
+<h3 id="No_lado_do_cliente_definindo_como_enviar_os_dados">No lado do cliente: definindo como enviar os dados</h3>
+
+<p>O elemento {{HTMLElement("form")}} define como os dados serão enviados. Todos os seus atributos são projetados para permitir que você configure o pedido a ser enviado quando um usuário acessa um botão de envio. Os dois atributos mais importantes são:{{htmlattrxref("action","form")}} e {{htmlattrxref("method","form")}}.</p>
+
+<h4 id="o_atributo_htmlattrxref(actionform)">o atributo {{htmlattrxref("action","form")}}</h4>
+
+<p>Este atributo define para onde os dados são enviados. Seu valor deve ser um URL válido. Se esse atributo não for fornecido, os dados serão enviados para o URL da página que contém o formulário.</p>
+
+<h5 id="Exemplos">Exemplos</h5>
+
+<p>Neste exemplo, os dados são enviados para http://foo.com:</p>
+
+<pre class="brush: html">&lt;form action="http://foo.com"&gt;</pre>
+
+<p class="brush: html">Aqui, os dados são enviados para o mesmo servidor que hospeda a página do formulário, mas para um URL diferente no servidor:</p>
+
+<pre class="brush: html">&lt;form action="/somewhere_else"&gt;</pre>
+
+<p class="brush: html">Quando especificado sem atributos, como abaixo, o atributo {{HTMLElement("form")}}   faz com que os dados sejam enviados para a página que inclui o formulário:</p>
+
+<pre class="brush: html">&lt;form&gt;</pre>
+
+<p class="brush: html">Muitas páginas mais antigas usam a seguinte notação para indicar que os dados devem ser enviados para a mesma página que contém o formulário; Isso era necessário porque até HTML5, o atributo {{htmlattrxref ( "action", "form")}} era obrigatório. Isso não é mais necessário.</p>
+
+<pre class="brush: html">&lt;form action="#"&gt;</pre>
+
+<div class="note">
+<p><strong>Nota: É possível especificar um URL que use o protocolo HTTPS (HTTP seguro). Quando você fizer isso, os dados são criptografados junto com o resto da solicitação, mesmo se o formulário em si é hospedado em uma página insegura acessada usando HTTP. Por outro lado, se o formulário estiver hospedado na página segura, mas você especificar um URL HTTP inseguro com o atributo {{htmlattrxref ( "action", "form")}}, todos os navegadores exibirão um aviso de segurança para o usuário cada vez que Tente enviar dados porque os dados não serão criptografados.</strong></p>
+</div>
+
+<h4 id="o_atributo_htmlattrxref(methodform)">o atributo {{htmlattrxref("method","form")}}</h4>
+
+<p>Este atributo define como os dados são enviados. o <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP protocol</a> </p>
+
+<p>Fornece várias maneiras de executar um pedido; Os dados de formulários HTML podem ser enviados através de pelo menos dois deles: o método GET eo método POST.</p>
+
+<p>Para entender a diferença entre esses dois métodos, vamos dar um passo atrás e examinar como funciona o HTTP. Cada vez que você deseja acessar um recurso na Web, o navegador envia uma solicitação para um URL. Uma solicitação HTTP consiste em duas partes: um cabeçalho que contém um conjunto de metadados globais sobre as capacidades do navegador e um corpo que pode conter informações necessárias ao servidor para processar a solicitação específica.</p>
+
+<h5 id="O_método_GET">O método GET</h5>
+
+<p>O método GET é o método usado pelo navegador para pedir ao servidor para enviar de volta um determinado recurso: "Hey servidor, eu quero obter este recurso." Nesse caso, o navegador envia um corpo vazio. Como o corpo está vazio, se um formulário é enviado usando esse método, os dados enviados para o servidor são anexados ao URL.</p>
+
+<h6 id="Exemplo_Considere_o_seguinte_formulário">Exemplo<br>
+ Considere o seguinte formulário:</h6>
+
+<pre class="brush: html">&lt;form action="http://foo.com" method="get"&gt;
+  &lt;input name="say" value="Hi"&gt;
+  &lt;input name="to" value="Mom"&gt;
+  &lt;button&gt;Envie meus cumprimentos&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Com o método GET, a solicitação HTTP tem esta aparência:</p>
+
+<pre>GET /?say=Hi&amp;to=Mom HTTP/1.1
+Host: foo.com</pre>
+
+<h5 id="O_método_POST">O método POST</h5>
+
+<p>O método POST é um pouco diferente. É o método que o navegador envia ao servidor para pedir uma resposta que leva em conta os dados fornecidos no corpo da solicitação HTTP: "Hey servidor, dê uma olhada nesses dados e envie-me de volta um resultado apropriado". Se um formulário é enviado usando esse método, os dados são anexados ao corpo do pedido HTTP.</p>
+
+<h6 id="Exemplo">Exemplo</h6>
+
+<p>Considere esta forma (a mesma acima):</p>
+
+<pre class="brush: html">&lt;form action="http://foo.com" method="post"&gt;
+  &lt;input name="say" value="Hi"&gt;
+  &lt;input name="to" value="Mom"&gt;
+  &lt;button&gt;Send my greetings&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Quando enviado usando o método POST, o pedido HTTP se parece com isto:</p>
+
+<pre>POST / HTTP/1.1
+Host: foo.com
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 13
+
+say=Hi&amp;to=Mom</pre>
+
+<p>O cabeçalho Content-Length indica o tamanho do corpo eo cabeçalho Content-Type indica o tipo de recurso enviado para o servidor. Vamos discutir esses cabeçalhos em um pouco.</p>
+
+<p>Obviamente, as solicitações HTTP nunca são exibidas para o usuário (se você quiser vê-las, você precisa usar ferramentas como o Firefox <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a> ou o <a href="https://developers.google.com/chrome-developer-tools/" title="https://developers.google.com/chrome-developer-tools/">Chrome Developer Tools</a>). A única coisa exibida para o usuário é o URL chamado. Assim, com uma solicitação GET, o usuário verá os dados em sua barra de URL, mas com uma solicitação POST, eles não. Isso pode ser muito importante por duas razões:</p>
+
+<ol>
+ <li>Se você precisar enviar uma senha (ou qualquer parte sensível de dados), nunca use o método GET ou corre o risco de exibi-lo na barra de URL.</li>
+ <li>Se você precisar enviar uma grande quantidade de dados, o método POST é preferido porque alguns navegadores limitam o tamanho dos URLs. Além disso, muitos servidores limitam o comprimento dos URLs que aceitam.</li>
+</ol>
+
+<h3 id="No_lado_do_servidor_recuperar_os_dados">No lado do servidor: recuperar os dados</h3>
+
+<p>Seja qual for o método HTTP escolhido, o servidor recebe uma string que será analisada para obter os dados como uma lista de pares chave / valor. A maneira como você acessa essa lista depende da plataforma de desenvolvimento que você usa e de quaisquer frameworks específicos que você possa usar com ele. A tecnologia que você usa também determina como as chaves duplicadas são manipuladas; Freqüentemente, o valor recebido mais recentemente para uma determinada chave recebe prioridade.</p>
+
+<h4 id="Exemplo_PHP_Bruto">Exemplo: PHP Bruto</h4>
+
+<p>O PHP oferece alguns objetos globais para acessar os dados. Supondo que você tenha usado o método POST, o exemplo a seguir apenas leva os dados e exibe-o para o usuário. Claro, o que você faz com os dados depende de você. Você pode exibi-lo, armazená-lo em um banco de dados, enviá-los por e-mail, ou processá-lo de alguma outra maneira.</p>
+
+<pre class="brush: php">&lt;?php
+  // The global $_POST variable allows you to access the data sent with the POST method
+  // To access the data sent with the GET method, you can use $_GET
+  $say = htmlspecialchars($_POST['say']);
+  $to  = htmlspecialchars($_POST['to']);
+
+  echo  $say, ' ', $to;</pre>
+
+<p>Este exemplo exibe uma página com os dados enviados. Em nosso exemplo de antes, a saída seria:</p>
+
+<pre>Oi Mãe</pre>
+
+<h4 id="Example_Python_Bruto">Example: Python Bruto</h4>
+
+<p>This example uses Python to do the same thing--display the provided data on a web page. It uses the <a href="http://docs.python.org/3/library/cgi.html" rel="external" title="http://docs.python.org/3/library/cgi.html">CGI Python package</a> to access the form data.</p>
+
+<pre class="brush: python">#!/usr/bin/env python
+import html
+import cgi
+import cgitb; cgitb.enable()     # for troubleshooting
+
+print("Content-Type: text/html") # HTTP header to say HTML is following
+print()                          # blank line, end of headers
+
+form = cgi.FieldStorage()
+say  = html.escape(form["say"].value);
+to   = html.escape(form["to"].value);
+
+print(say, " ", to)</pre>
+
+<p>O resultado é o mesmo que com o PHP:</p>
+
+<pre>Oi Mãe</pre>
+
+<h4 id="Outros_idiomas_e_frameworks">Outros idiomas e frameworks</h4>
+
+<p>Há muitas outras tecnologias do lado do servidor que você pode usar para o tratamento de formulários, incluindo <a href="/en-US/docs/" title="/en-US/docs/">Perl</a>, <a href="/en-US/docs/" title="/en-US/docs/">Java</a>, <a href="http://www.microsoft.com/net" title="http://www.microsoft.com/net">.Net</a>, <a href="/en-US/docs/" title="/en-US/docs/">Ruby</a>, etc. Basta escolher o que você mais gosta. Dito isto, é importante notar que é muito incomum usar essas tecnologias diretamente porque isso pode ser complicado. É mais comum usar um dos muitos frameworks agradáveis que facilitam o manuseio de formulários, como:</p>
+
+<ul>
+ <li><a href="http://symfony.com/" rel="external" title="http://symfony.com/">Symfony</a> Para PHP</li>
+ <li><a href="https://www.djangoproject.com/" rel="external" title="https://www.djangoproject.com/">Django</a> Para Python</li>
+ <li><a href="http://rubyonrails.org/" rel="external" title="http://rubyonrails.org/">Ruby On Rails</a> Para Ruby</li>
+ <li><a href="http://grails.org/" rel="external" title="http://grails.org/">Grails</a> Para Java</li>
+ <li>etc.</li>
+</ul>
+
+<p>Vale a pena notar que mesmo usando essas estruturas, trabalhar com formulários não é necessariamente fácil. Mas é muito melhor, e você vai economizar muito tempo.</p>
+
+<h2 id="Um_caso_especial_enviar_arquivos">Um caso especial: enviar arquivos</h2>
+
+<p>Arquivos são um caso especial com formulários HTML. Eles são dados binários - ou considerados como tal - onde todos os outros dados são dados de texto. Porque HTTP é um protocolo de texto, há requisitos especiais para manipular dados binários.</p>
+
+<h3 id="o_htmlattrxref(enctypeform)_atributo">o {{htmlattrxref("enctype","form")}} atributo</h3>
+
+<p>Esse atributo permite especificar o valor do cabeçalho HTTP Content-Type. Este cabeçalho é muito importante porque informa ao servidor que tipo de dados está sendo enviado. Por padrão, seu valor é application / x-www-form-urlencoded. Em termos humanos, isso significa: "Este é o formulário de dados que foi codificado em forma de URL."</p>
+
+<p>Mas se você quiser enviar arquivos, você precisa fazer duas coisas:</p>
+
+<ul>
+ <li>Colocou o {{htmlattrxref("method","form")}} Atributo para POST porque o conteúdo do arquivo não pode ser colocado dentro de um parâmetro de URL usando um formulário.</li>
+ <li>Defina o valor de {{htmlattrxref("enctype","form")}} Para multipart / form-data porque os dados serão divididos em várias partes, uma para cada arquivo mais uma para o texto do corpo do formulário que pode ser enviado com eles.</li>
+</ul>
+
+<p>Por exemplo:</p>
+
+<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;input type="file" name="myFile"&gt;
+  &lt;button&gt;Send the file&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<div class="note">
+<p><strong>Nota: Alguns navegadores suportam</strong>{{htmlattrxref("multiple","input")}} Atributo no {{HTMLElement("input")}} Elemento para enviar mais de um arquivo com apenas um elemento de entrada. Como o servidor lida com esses arquivos realmente depende da tecnologia usada no servidor. Como mencionado anteriormente, usando um quadro fará sua vida muito mais fácil.</p>
+</div>
+
+<div class="warning">
+<p><strong>Aviso: Muitos servidores são configurados com um limite de tamanho para arquivos e solicitações HTTP, a fim de evitar abusos. É importante verificar esse limite com o administrador do servidor antes de enviar um arquivo.</strong></p>
+</div>
+
+<h2 id="Preocupações_com_segurança">Preocupações com segurança</h2>
+
+<p>Cada vez que você envia dados para um servidor, você precisa considerar a segurança. Formulários HTML são um dos primeiros vetores de ataque contra servidores. Os problemas nunca vêm dos formulários HTML em si; Eles vêm de como o servidor manipula dados.</p>
+
+<h3 id="Falhas_de_segurança_comuns">Falhas de segurança comuns</h3>
+
+<p>Dependendo do que você está fazendo, existem alguns problemas de segurança muito conhecidos:</p>
+
+<h4 id="XSS_e_CSRF">XSS e CSRF</h4>
+
+<p>Cross-Site Scripting (XSS) e Cross-Site Request Forgery (CSRF) são tipos comuns de ataques que ocorrem quando você exibe dados enviados por um usuário para o usuário ou para outro usuário.</p>
+
+<p>O XSS permite que os invasores injetem scripts do lado do cliente em páginas da Web vistas por outros usuários. Uma vulnerabilidade de scripts entre sites pode ser usada por atacantes para ignorar controles de acesso, como o <a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript" title="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript">same origin policy</a>. O efeito desses ataques pode variar de um pequeno incômodo a um risco de segurança significativo.</p>
+
+<p>CSRF são semelhantes aos ataques XSS, já que eles começam da mesma maneira - injetando script do lado do cliente em páginas da Web - mas seu destino é diferente. Os invasores do CSRF tentam aumentar os privilégios para aqueles de um usuário com privilégios mais altos (como um administrador do site) para executar uma ação que não deve ser capaz de fazer (por exemplo, enviar dados para um usuário não confiável).</p>
+
+<p>Os ataques XSS exploram a confiança que um usuário tem para um site, enquanto os ataques CSRF exploram a confiança que um site tem para seus usuários.</p>
+
+<p>To prevent these attacks, you should always check the data a user sends to your server and (if you need to display it) try not to display the HTML content as provided by the user. Intead, you should process the user-provided data so you don't display it verbatim. <span style="line-height: 1.5;"> Almost all frameworks on the market today implement a minimal filter that removes the HTML {{HTMLElement("script")}}, {{HTMLElement("iframe")}} and {{HTMLElement("object")}} elements from data sent by any user. This helps to mitigate the risk, but doesn't necessarily eradicate it.</span></p>
+
+<h4 id="SQL_injection">SQL injection</h4>
+
+<p>SQL injection is a type of attack that tries to perform actions on a database used by the target web site. This typically involves sending an SQL request in the hope that the server will execute it (many times when the application server tries to store the data). This is actually <a href="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project" rel="external" title="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project">one of the main vector attacks against web sites</a>.</p>
+
+<p>The consequences can be terrible, ranging from data loss to access to a whole infrastructure by using privilege escalation. This is a very serious threat and you should never store data sent by a user without performing some sanitization (for example, by using <code><a href="http://www.php.net/manual/en/function.mysql-real-escape-string.php" rel="external" title="http://www.php.net/manual/en/function.mysql-real-escape-string.php">mysql_real_escape_string()</a></code> on a PHP/MySQL infrastructure).</p>
+
+<h4 id="HTTP_header_injection_and_email_injection">HTTP header injection and email injection</h4>
+
+<p>These kinds of attacks can occur when your application builds HTTP headers or emails based on the data input by a user on a form. These won't directly damage your server or affect your users, but they are an open door to deeper problems such as session hijacking or phishing attacks.</p>
+
+<p>These attacks are mostly silent, and can turn your server into a <a href="http://en.wikipedia.org/wiki/Zombie_(computer_science)" rel="exernal" title="http://en.wikipedia.org/wiki/Zombie_(computer_science)">zombie</a>.</p>
+
+<h3 id="Be_paranoid_Never_trust_your_users">Be paranoid: Never trust your users</h3>
+
+<p>So, how do you fight these threats? This is a topic far beyond this guide, but there are a few rules to keep in mind. The most important rule is: never ever trust your users, including yourself; even a trusted user could have been hijacked.</p>
+
+<p>All data that comes to your server must be checked and sanitized. Always. No exception.</p>
+
+<ul>
+ <li>Escape potentially dangerous characters. The specific characters you should be cautious with vary depending on the context in which the data is used and the server platform you employ, but all server-side languages have functions for this.</li>
+ <li>Limit the incoming amount of data to allow only what's necessary.</li>
+ <li>Sandbox uploaded files (store them on a different server and allow access to the file only through a different subdomain or even better through a fully different domain name).</li>
+</ul>
+
+<p>You should avoid many/most problems if you follow these three rules, but it's always a good idea to get a security review performed by a competent third party. Don't assume that you've seen all the possible problems.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>As you can see, sending form data is easy, but securing an application can be tricky. Just remember that a front-end developer is not the one who should define the security model of the data. Yes, as we'll see, it's possible to <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">perform client side data validation</a> but the server can't trust this validation because it has no way to truly know what really happens on the client side.</p>
+
+<h2 id="See_also">See also</h2>
+
+<p>If you want to learn more about securing a web application, you can dig into these resources:</p>
+
+<ul>
+ <li><a href="https://www.owasp.org/index.php/Main_Page" rel="external" title="https://www.owasp.org/index.php/Main_Page">The Open Web Application Security Project (OWASP)</a></li>
+ <li><a href="http://shiflett.org/" rel="external" title="http://shiflett.org/">Chris Shiflett's blog about PHP Security</a></li>
+</ul>
diff --git a/files/pt-br/web/guide/html/using_data_attributes/index.html b/files/pt-br/web/guide/html/using_data_attributes/index.html
new file mode 100644
index 0000000000..20daf02206
--- /dev/null
+++ b/files/pt-br/web/guide/html/using_data_attributes/index.html
@@ -0,0 +1,72 @@
+---
+title: Utilizando data attributes
+slug: Web/Guide/HTML/Using_data_attributes
+translation_of: Learn/HTML/Howto/Use_data_attributes
+---
+<p>O <a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> foi criado pensando na extensibilidade dos dados que precisam ser associados a um determinado elemento mas não necessariamente tem um significado definido.  <a href="/en-US/docs/Web/HTML/Global_attributes#data-*">Atributos data-* </a>nos permite armazenar informações extras em elementos HTML padrões e semânticos, sem a necessidades de hacks como <a href="/en-US/docs/Web/API/Element.classList">classList</a>, atributos fora do padrão, propriedades extras no DOM ou o método depreciado <a href="/en-US/docs/Web/API/Node.setUserData">setUserData</a>.</p>
+
+<h2 id="Sintaxe_HTML">Sintaxe HTML</h2>
+
+<p>A sintaxe é simples. Qualquer atributo de qualquer elemento no qual o nome do atributo inicia com <code>data-</code> é um atributo data. Digamos que você possui um article e quer armazenar informações extras que não possuem nenhuma representação visual. Use atributos data para isso:</p>
+
+<pre class="brush: html">&lt;article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars"&gt;
+...
+&lt;/article&gt;</pre>
+
+<h2 id="Acesso_no_JavaScript">Acesso no JavaScript</h2>
+
+<p>Ler os valores destes atributos via <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a> é muito simples também. Você pode lê-los usando {{domxref("Element.getAttribute", "getAttribute()")}} com o nome html completo, mas a forma padrão provê uma alternativa mais simples: um {{domxref("DOMStringMap")}} pode ser lido através da propriedade {{domxref("HTMLElement.dataset", "dataset")}}.</p>
+
+<p>Para obter o atributo data através do objeto <code>dataset</code>, acesse a propriedade utilizando a parte do nome do atributo após o prefixo <code>data-</code> (note que o hífen é convertido para camelCase).</p>
+
+<pre class="brush: js">var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"</pre>
+
+<p>Cada propriedade é uma String e pode ser lida e escrita. No exemplo acima a atribuição <code>article.dataset.columns = 5</code> iria alterar esse atributo para "5".</p>
+
+<h2 id="Acesso_no_CSS">Acesso no CSS</h2>
+
+<p>Note que os atributos data são atributos em HTML puro, e você pode inclusive acessá-los via <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>. Por exemplo, para mostrar o elemento pai em um artigo, você pode usar <a href="/en-US/docs/Web/CSS/content" title="/en-US/docs/Web/CSS/content">conteúdo gerado</a> em CSS com a função {{cssxref("attr")}}:</p>
+
+<pre class="brush: css">article::before {
+  content: attr(data-parent);
+}</pre>
+
+<p>Pode-se também usar os <a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute_selectors">seletores de atributos</a> em CSS para alterar estilos de acordo com o atributo data:</p>
+
+<pre class="brush: css">article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}</pre>
+
+<p>Pode-se tudo isso em funcionamento neste <a href="http://jsbin.com/ujiday/2/edit">exemplo JSBin</a>.</p>
+
+<p>Atributos data também podem ser utilizados para conter informações que mudam constantemente, como a pontuação em um jogo. Usando seletores CSS e acesso com JavaScript permite que se construa efeitos excelentes sem ter que escrever suas próprias rotinas de display. Veja <a href="http://www.youtube.com/watch?v=On_WyUB1gOk">esta tela</a> para um exemplo utilizando conteúdo gerado e transições CSS (<a href="http://jsbin.com/atawaz/3/edit">exemplo JSBin</a>).</p>
+
+<p><span style="line-height: 16.7999992370605px;">Uma vez que valores data são strings, todos os valores devem estar entre aspas ou então a estilização não fará efeito.</span></p>
+
+<h2 id="Issues">Issues</h2>
+
+<p>Não armazene conteúdo que deve estar visível e acessível nos atributos data porque tecnologias assistivas podem não acessá-los. Além disso, motores de busca podem não indexar os valores dos atributos data. </p>
+
+<p>Os principais issues a serem considerados são com suporte e performance no Internet Explorer. O Internet Explorer 11+ provê suporte para o padrão, mas todas as versões anteriores <a href="http://caniuse.com/#feat=dataset">não suportam <code>dataset</code></a>. Para suporte ao IE 10 e anteriores, deve-se acessar atributos data através de {{domxref("Element.getAttribute", "getAttribute()")}} . E ainda, a <a href="http://jsperf.com/data-dataset">performance de leitura dos atributos data</a> é ruim, comparada com o armazenamento em um data warehouse JS. O uso de <code>dataset</code> é até pior que a leitura dos dados com <code>getAttribute()</code>.</p>
+
+<p>Apesar do que foi colocado, para metadados customizados associados a elementos, eles são uma ótima solução.</p>
+
+<p>No Firefox 49.0.2 (e talvez em versões anteriores/posteriores), os atributos data que excederem 1022 caracteres não serão lidos pelo Javascript (EcmaScript 4).</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>Este artigo é uma adaptação de <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/" title="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Usando atributos data em JavaScript e CSS no hacks.mozilla.org</a>.</li>
+ <li><a href="http://www.sitepoint.com/use-html5-data-attributes/">Como usar atributos data em HTML5</a> (Sitepoint)</li>
+</ul>
diff --git a/files/pt-br/web/guide/index.html b/files/pt-br/web/guide/index.html
new file mode 100644
index 0000000000..1898e3375a
--- /dev/null
+++ b/files/pt-br/web/guide/index.html
@@ -0,0 +1,68 @@
+---
+title: Guia do desenvolvedor web
+slug: Web/Guide
+tags:
+  - Guía
+  - Landing
+  - Web
+translation_of: Web/Guide
+---
+<p><strong>Estes artigos fornecem informações para ajudá-lo a fazer uso de tecnologias e APIs específicas.</strong></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="/pt-BR/docs/Aprender/HTML">Guia do desenvolvedor HTML</a></dt>
+ <dd class="landingPageList"><strong>HyperText Markup Language </strong><strong>(HTML)</strong> é a linguagem principal de praticamente todo o conteúdo da Web. Muito do que você vê na tela do seu navegador é descrito, fundamentalmente, em HTML.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Web/Guide/CSS">Guia do desenvolvedor CSS</a></dt>
+ <dd class="landingPageList">Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para descrever a apresentação de um documento escrito em HTML.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Web/Guide/CSS">Distribuição de áudio e vídeo</a></dt>
+ <dd class="landingPageList">Podemos distribuir conteúdos de áudio e vídeo na web de muitas maneiras, estendendo de  uma mídia 'estática' para streams adaptativas e vivas. Este artigo propõe explorar a variedade de mecanismos de distribuição de mídia baseados na web e sua compatibilidade com os navegadores mais populares.</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_manipulation">Manipulação de áudio e vídeo</a></dt>
+ <dd>A beleza da web é que você pode combinar tecnologias para criar novas formas. Possuir áudio nativo e vídeo no navegador significa que você pode usar esses data streams com tecnologias semelhantes ao {{htmlelement("canvas")}}, <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> para modificar o áudio e vídeo diretamente. Por exemplo, adicionando efeitos de reverb/compression ( ressonância/compressão) para áudios, ou filtros de grayscale/sepia (escala cinza/sépia) para vídeos. Esse artigo proporciona uma referência para explicar tudo o que você precisa para fazê-los.</dd>
+</dl>
+
+<dl>
+ <dt class="landingPageList"><a href="/en-US/docs/Web/Guide/Events">Guia de eventos do desenvolvedor</a></dt>
+ <dd class="landingPageList">Eventos referem-se tanto à um padrão de design, utilizado para o tratamento assíncrono de vários incidentes que ocorrem durante a vida de uma página web, como para a nomeação, caracterização, e uso de um largo número de ocorrências de diferentes tipos de mecanismos de entregadas da web</dd>
+ <dt class="landingPageList"><a href="/pt-BR/docs/Web/Guide/AJAX">AJAX</a></dt>
+ <dd class="landingPageList">AJAX é um termo que define um grupo de tecnologias que permitem as aplicações web realizarem rapidamente atualizações incrementais na interface do usuário sem ser necessário recarregar a página inteira do navegador. Isso faz com que a aplicação seja mais rápida e mais responsiva as ações do usuário.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Web/Guide/Graphics">Gráficos na Web</a></dt>
+ <dd class="landingPageList">Web sites modernos e aplicativos, muitas vezes precisam apresentar gráficos de diferentes graus de satisfação.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Web/Guide/API">Guia para APIs da Web</a></dt>
+ <dd class="landingPageList">Um lista de todas as APIs da Web e o que elas fazem.</dd>
+ <dt><a href="/pt-BR/docs/Web/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript é uma poderosa linguagem de scripts utilizada para criar aplicativos para a Web.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Localizations_and_character_encodings">Localizações e codificação de caracteres</a></dt>
+ <dd class="landingPageList">Internamente, navegadores processam texto como Unicode. Entretanto, uma forma de representar caracteres em termos de bytes (codificação de caracteres) deve ser utilizada para transferência de texto da rede para o navegador. A recomendação da especificação HTML é utilizar UTF-8 (que é capaz de representar todo o conteúdo Unicode). Independentemente da escolha da codificação, ela precisa ser declarada no conteúdo Web.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Web/Guide/Mobile">Desenvolvimento Web móvel</a></dt>
+ <dd class="landingPageList">Esta página fornece uma visão geral de algumas das principais técnicas necessárias para projetar sites que funcionam bem em dispositivos móveis. Se você está procurando informações sobre o projeto Firefox OS da Mozilla, consulte a página <a href="/en/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a>. Ou você pode estar interessado em detalhes sobre <a href="/en/Mozilla/Firefox_for_Android">Firefox para Android</a>.</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/Apps/Progressive#Core_PWA_guides">Aplicativos da web progressivos </a></dt>
+ <dd class="landingPageList">Aplicações progressivas web(PWAs) usam modernas web APIs juntamente com a estratégia tradicional de aprimoramento progressivo para criar aplicações web multiplataforma. Esses aplicações funcionam em qualquer lugar e fornecem vários recursos que proporcionam as mesmas vantagens da experiência de usuário (UX) tal como em aplicações nativas. Este conjunto de guias informa tudo o que você precisa saber sobre PWAs.</dd>
+ <dt class="landingPageList"><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/Performance">Otimização e desempenho</a></dt>
+ <dd class="landingPageList">Ao construir aplicativos e sites Web modernos, é importante fazer o seu conteúdo funcionar de forma rápida e eficiente. Isso o torna efetivo tanto em poderosos dispositivos Desktop quanto em outros mais fracos como um celular.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Web/Guide/Parsing_and_serializing_XML"><em>Analisando e serializando XML</em></a></dt>
+ <dd class="landingPageList">A plataforma Web oferece diferentes métodos de <em>parsing</em> e <em>serializing</em> de XML, cada um com suas próprias vantagens e desvantagens.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Web/Guide/WOFF">O  Web Open Font Format (WOFF)</a></dt>
+ <dd class="landingPageList"><strong>WOFF </strong>(<strong>Web Open Font Format</strong>) é um formato de arquivo para fontes que é livre para qualquer um usar.</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Web/Guide/Using_FormData_Objects">Usando Objetos FormData</a></dt>
+ <dd class="landingPageList">O objeto <a href="/en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> permite compilar um conjunto de pares de chave / valor para enviar usando XMLHttpRequest. É destinado principalmente para o envio de dados do formulário, mas pode ser utilizado de forma independente destes a fim de transmitir dados. A transmissão é realizada no mesmo formato que o método do formulário <code>submit()</code> iria usar para enviar os dados se o tipo de forma de codificação fosse definido como "multipart / form-data".</dd>
+ <dt class="landingPageList"><a href="/en-US/docs/Glossary">Glossário</a></dt>
+ <dd class="landingPageList">Define vários termos técnicos relacionados à Web e Internet.</dd>
+</dl>
+</div>
+</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/PT-BR/docs/Web/Reference" title="/en-US/docs/Web/Reference">Referência do desenvolvedor web</a></li>
+</ul>
diff --git a/files/pt-br/web/guide/introducao_ao_desenvolvimento_web/index.html b/files/pt-br/web/guide/introducao_ao_desenvolvimento_web/index.html
new file mode 100644
index 0000000000..46944374f5
--- /dev/null
+++ b/files/pt-br/web/guide/introducao_ao_desenvolvimento_web/index.html
@@ -0,0 +1,97 @@
+---
+title: Introdução ao Desenvolvimento Web
+slug: Web/Guide/Introducao_ao_Desenvolvimento_Web
+tags:
+  - CSS
+  - CodingScriping
+  - HTML
+  - Iniciante
+  - JavaScript
+  - Web
+translation_of: Web/Guide/Introduction_to_Web_development
+---
+<p><span class="tlid-translation translation" lang="pt"><span title="">Se você está apenas começando com o desenvolvimento Web ou expandindo seus horizontes em novos domínios da espetacular Web, os links aqui devem ajudá-lo a começar.</span><br>
+ <br>
+ <span title="">Para outro conjunto (sobreposto) de links sobre recursos de aprendizado, consulte as <a href="/en-US/docs/">páginas de aprendizado</a> do MDN.</span></span></p>
+
+<div class="note"><strong>Nota:</strong> Os recursos recomendados nesta página estão sujeitos à alterações</div>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">
+    <h2 id="Tópicos_da_documentação">Tópicos da documentação</h2>
+
+    <h3 id="HTML">HTML</h3>
+
+    <ul>
+     <li><a class="external" href="http://www.w3.org/community/webed/wiki/The_basics_of_HTML" title="http://www.w3.org/community/webed/wiki/The_basics_of_HTML">O básico da Hypertext Mark-up Language (HTML)</a> — o quê exatamente é HTML?</li>
+     <li><a class="external" href="http://reference.sitepoint.com/html/page-structure" title="http://reference.sitepoint.com/html/page-structure">A estrutura básica de uma página web</a> — o doctype e a 'árvore' do documento</li>
+     <li><a class="external" href="http://reference.sitepoint.com/html/elements" title="http://reference.sitepoint.com/html/elements">Elementos HTML fundamentais</a> — estrutura, cabeçalho, lista, elementos de formulário e mais, explicados por categoria.</li>
+     <li><a class="external" href="http://htmldog.com/guides/htmlbeginner/" title="http://htmldog.com/guides/htmlbeginner/">Tutorial para iniciantes HTML</a> — um tutorial e exercícios que recapitulam o conhecimento básico aprendido acima.</li>
+     <li><a href="/en/HTML/Element" title="en/HTML/Element"><span class="external">Elementos HTML</span></a> — um guia completo para os elementos HTML elements com detalhes de como os navegadores os suportam</li>
+    </ul>
+
+    <h3 id="CSS">CSS</h3>
+
+    <ul>
+     <li><a href="/en/CSS/Getting_Started" title="Getting Started"><span class="external">Iniciando com o CSS</span></a> — um guia para iniciantes sobre CSS, cobrindo os conceitos básicos e fundamentais.</li>
+     <li><a href="/en/CSS/CSS_Reference" title="CSS Reference"><span class="external">Guia de referência CSS</span></a> — um guia completo para CSS com detalhes do nível de suporte do Gecko/Firefox para cada um deles.</li>
+     <li><a class="external" href="http://www.w3.org/MarkUp/Guide/Style" title="http://www.w3.org/MarkUp/Guide/Style">Introdução do W3C à estilização com CSS</a> —  <span class="tlid-translation translation" lang="pt"><span title="">um breve guia para estilizar páginas da web para iniciantes</span></span>.</li>
+     <li><a href="/en/Common_CSS_Questions" title="Common CSS Questions"><span class="external">Perguntas comuns sobre CSS</span></a> — perguntas frequentes e respostas para iniciantes.</li>
+     <li><a class="external" href="http://www.html.net/tutorials/css/" title="http://www.html.net/tutorials/css/">Conceitos intermediários de CSS</a> — agrupamento, pseudo-classes e mais.</li>
+    </ul>
+
+    <h3 id="JavaScript">JavaScript</h3>
+
+    <h4 id="Iniciante">Iniciante</h4>
+
+    <ul>
+     <li><a href="/en/JavaScript/Getting_Started" title="en/JavaScript/Getting_Started"><span class="external">Iniciando com JavaScript</span></a> — o que é Javascript e como ele pode ajudar você?</li>
+     <li><a href="/en/JavaScript/Guide" title="en/JavaScript/Guide"><span class="external">Guia de referência JavaScript</span></a> — um guia completo e regularmente atualizado de JavaScript para todos os níveis de aprendizado, do iniciante ao avançado.</li>
+     <li><a class="external" href="https://www.youtube.com/playlist?list=PL7664379246A246CB" title="http://yuiblog.com/crockford/">Crockford no JavaScript</a> — uma série de vídeos aprofundada sobre a linguagem JavaScript.</li>
+     <li><a class="external" href="http://eloquentjavascript.net/contents.html" title="http://eloquentjavascript.net/contents.html">JavaScript Elouquente </a> — um guia completo para metodologias JavaScript intermediárias e avançadas.</li>
+    </ul>
+
+    <h4 id="Intermediário">Intermediário</h4>
+
+    <ul>
+     <li><a href="/en/JavaScript/A_re-introduction_to_JavaScript" title="en/JavaScript/A_re-introduction_to_JavaScript">Uma re-introdução ao JavaScript</a> — uma recapitulação da linguagem de programação JavaScript direcionada para desenvolvedores de nível intermediário.</li>
+     <li><a class="external" href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" title="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/">Padrões de design (design patterns) essenciais no JavaScript</a> — uma introdução à padrões de design essenciais no JavaScript</li>
+     <li><a href="/en/Introduction_to_Object-Oriented_JavaScript" title="en/Introduction_to_Object-Oriented_JavaScript"><span class="external">Introdução à JavaScript orientado à Objeto</span></a> — aprenda sobre o modelo de objetos do JavaScript.</li>
+     <li><a class="external" href="http://dev.opera.com/articles/view/javascript-best-practices/" title="http://dev.opera.com/articles/view/javascript-best-practices/">Boas práticas de Javascript (por Christian Heilmann)</a> — aprenda sobre algumas boas práticas óbvias (algumas nem tanto) quando programas em JavaScript.</li>
+    </ul>
+
+    <h4 id="Avançado">Avançado</h4>
+
+    <ul>
+     <li><a class="external" href="http://ejohn.org/apps/learn/" title="http://ejohn.org/apps/learn/">Aprendendo JavaScript avançado</a> — Um guia de John Resig para JavaScript avançado</li>
+     <li><a class="external" href="http://uk.video.yahoo.com/watch/111585/1027823" title="http://uk.video.yahoo.com/watch/111585/1027823">Crockford em JavaScript avançado</a> — uma série de três vídeos sobre conceitos avançados de JavaScript</li>
+     <li><a class="external" href="http://bonsaiden.github.com/JavaScript-Garden/" title="http://bonsaiden.github.com/JavaScript-Garden/">JavaScript Garden</a> — Documentação das partes mais peculiares do JavaScript.</li>
+    </ul>
+   </td>
+   <td style="vertical-align: top;">
+    <h2 id="Recursos">Recursos</h2>
+
+    <dl>
+     <dt><a class="external" href="http://www.w3.org/community/webed/wiki/Main_Page" title="http://www.w3.org/community/webed/wiki/Main_Page">W3C Web Education Community Group Wiki</a></dt>
+     <dd>Aborda design web, HTML e HTML5, CSS, JavaScript e acessibilidade. Este é um bom ponto de partida para iniciantes que desejam aprender fundamentos de desenvolvimento web em várias áreas</dd>
+     <dt><a class="external" href="http://reference.sitepoint.com/" title="http://reference.sitepoint.com/">SitePoint</a></dt>
+     <dd>Uma referência confiável para aprender HTML, CSS e Javascript que também menciona o suporte através de diferentes navegadores e erros conhecidos.</dd>
+     <dt><a class="external" href="http://htmldog.com/" title="http://htmldog.com/">HTMLDog</a></dt>
+     <dd>Uma completa e excelente página de referência sobre HTML e CSS para iniciantes.</dd>
+     <dt><a class="external" href="http://code.google.com/edu/submissions/html-css-javascript/" title="http://code.google.com/edu/submissions/html-css-javascript/">HTML, CSS, and Javascript do Ground Up</a></dt>
+     <dd>Estes videos tutoriais de fácil entedimento de especialistas da Google abordam os básicos de HTML, CSS e JavaScript.</dd>
+     <dt><a class="external" href="http://www.csstutorial.net/" title="http://www.csstutorial.net/">Tutoriais iniciantes de CSSTutorial.net</a></dt>
+     <dd>Uma grande variedade de textos e video tutoriais que abordam os aspectos básicos ao intermediário do CSS.</dd>
+     <dt><a class="external" href="http://www.tizag.com/cssT/" title="http://www.tizag.com/cssT/">Tutoriais CSS do Tizag</a></dt>
+     <dd>U<span class="tlid-translation translation" lang="pt"><span title="">ma referência fácil de seguir para aqueles que desejam aprender CSS através de tutoriais curtos e concisos</span></span></dd>
+     <dt><a class="external" href="http://jqfundamentals.com/" title="http://jqfundamentals.com/book/book.html">Fundamentos do jQuery</a></dt>
+     <dd>Um livro de referência de código aberto com instruções detalhadas para iniciantes de JavaScript e jQuery.</dd>
+     <dt><a class="external" href="http://net.tutsplus.com/tutorials/javascript-ajax/javascript-from-null-video-series/" title="http://net.tutsplus.com/tutorials/javascript-ajax/javascript-from-null-video-series/">JavaScript From Null: Uma série de vídeos</a></dt>
+     <dd>Uma série de videos sobre JavaScript para completos iniciantes que buscam uma abordagem mais visual de aprendizado.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/pt-br/web/guide/mobile/index.html b/files/pt-br/web/guide/mobile/index.html
new file mode 100644
index 0000000000..d38a1deb5e
--- /dev/null
+++ b/files/pt-br/web/guide/mobile/index.html
@@ -0,0 +1,72 @@
+---
+title: Mobile Web Development
+slug: Web/Guide/Mobile
+translation_of: Web/Guide/Mobile
+---
+<p>Esta página fornece uma visão geral de algumas das principais técnicas necessárias para desenvolver websites que trabalham bem em dispositivos moveis. Se você esta vendo esta informação no projeto Firefox OS da Mozilla, veja a página <a href="/en/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a>. Ou você pode estar interessado em detalhes sobre <a href="/en/Mozilla/Firefox_for_Android" title="Firefox for Android">Firefox para Android</a>.</p>
+
+<p>We've organized it into two sections, <a href="#Designing_for_mobile_devices">designing for mobile devices</a> and <a href="#Cross-browser_development">cross-browser compatibility</a>. Also see Jason Grlicky's guide to <a href="/en-US/docs/Web_Development/Mobile/Mobile-friendliness" title="/en-US/docs/Web_Development/Mobile/Mobile-friendliness">mobile-friendliness</a> for web developers.</p>
+
+<h2 id="Projetando_para_dispositivos_móveis">Projetando para dispositivos móveis</h2>
+
+<p>Dispositivos móveis possuem características de hardware bastante diferentes comparados com desktops ou notebooks. Suas telas geralmente são menores, obviamente, mas eles costumam alterar automáticamente a orientação da tela entre os modos retrato e paisagem à medida que o usuário rotaciona o dispositivo.<span class="tlid-translation translation" lang="pt"><span title=""> Eles geralmente têm telas sensíveis ao toque para entrada do usuário</span></span>. API's como geolocalização ou orientação da tela não são suportadas em desktops ou são muito menos úteis e essas API's dão aos usuários mobile novas formas de interagir com seu site.</p>
+
+<h3 id="Working_with_small_screens">Working with small screens</h3>
+
+<p><a href="/en-US/docs/Web/Guide/Responsive_design" title="/en-US/docs/Web/Guide/Responsive_design">Responsive Web Design</a> is a term for a set of techniques that enables your web site to adapt its layout as its viewing environment — most obviously, the size and orientation of the screen — changes. It includes techniques such as:</p>
+
+<ul>
+ <li>fluid CSS layouts, to make the page adapt smoothly as the browser window size changes</li>
+ <li>the use of <a href="/en/CSS/Media_queries" title="en/CSS/Media_queries">media queries</a> to conditionally include CSS rules appropriate for the device screen <a href="/en/CSS/Media_queries#width" title="en/CSS/Media_queries#width">width</a> and <a href="/en/CSS/Media_queries#height" title="en/CSS/Media_queries#height">height</a></li>
+</ul>
+
+<p>The <a href="/en/Mobile/Viewport_meta_tag" title="en/Mobile/Viewport_meta_tag">viewport meta tag</a> instructs the browser to display your site at the appropriate scale for the user's device.</p>
+
+<h3 id="Working_with_touch_screens">Working with touch screens</h3>
+
+<p>To use a touch screen you'll need to work with <a href="/en/DOM/Touch_events" title="en/DOM/Touch_events">DOM Touch events</a>. You won't be able to use the <a href="/En/CSS/:hover" title="En/CSS/:hover">CSS :hover</a> pseudo-class, and will need to design clickable items like buttons to respect the fact that fingers are fatter than mouse pointers. See this article on <a class="external" href="https://web.archive.org/web/20150520130912/http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">designing for touch screens</a>.</p>
+
+<p>You can use the <a href="/en/CSS/Media_queries#-moz-touch-enabled" title="en/CSS/Media_queries#-moz-touch-enabled">-moz-touch-enabled</a> media query to load different CSS on a touch-enabled device.</p>
+
+<h3 id="Optimizing_images">Optimizing images</h3>
+
+<p>To help users whose devices have low or expensive bandwidth, you can optimize images by loading images appropriate to the device screen size and resolution. You do this in CSS by querying for screen <a href="/en/CSS/Media_queries#height" title="en/CSS/Media_queries#height">height</a>, <a href="/en/CSS/Media_queries#width" title="en/CSS/Media_queries#width">width</a>, and <a href="/en/CSS/Media_queries#-moz-device-pixel-ratio" title="en/CSS/Media_queries#-moz-device-pixel-ratio">pixel ratio</a>.</p>
+
+<p>You can also make use of CSS properties to implement visual effects like <a href="/en/CSS/Using_CSS_gradients" title="en/CSS/Using_CSS_gradients">gradients</a> and <a href="/En/CSS/Box-shadow" title="En/CSS/Box-shadow">shadows</a> without images.</p>
+
+<h3 id="Mobile_APIs">Mobile APIs</h3>
+
+<p>Finally, you can take advantage of the new possibilities offered by mobile devices, such as <a href="/en/Detecting_device_orientation" title="en/Detecting_device_orientation">orientation</a> and <a href="/En/Using_geolocation" title="En/Using_geolocation">geolocation</a>.</p>
+
+<h2 id="Cross-browser_development">Cross-browser development</h2>
+
+<h3 id="Write_cross-browser_code">Write cross-browser code</h3>
+
+<p>To create web sites that will work acceptably across different mobile browsers:</p>
+
+<ul>
+ <li>Try to avoid using browser-specific features, such as vendor-prefixed CSS properties.</li>
+ <li>If you do need to use these features, check whether other browsers implement their own versions of these features, and target them too.</li>
+ <li>For browsers that don't support these features, provide an acceptable fallback.</li>
+</ul>
+
+<p>For example, if you set a gradient as a background for some text using a vendor-prefixed property like <code>-webkit-linear-gradient</code>, it's best to include the other vendor-prefixed versions of the <a href="/en/CSS/linear-gradient" title="en/CSS/linear-gradient">linear-gradient</a> property. If you don't do that, at least make sure that the default background contrasts with the text: that way, the page will at least be usable in a browser which is not targeted by your <code>linear-gradient</code> rule.</p>
+
+<p>See this <a href="/en/CSS/CSS_Reference/Mozilla_Extensions" title="en/CSS/CSS_Reference/Mozilla_Extensions">list of Gecko-specific properties</a>, and this list of <a href="/en/CSS/CSS_Reference/Webkit_Extensions" title="en/CSS/CSS_Reference/Webkit_Extensions">WebKit-specific properties</a>, and Peter Beverloo's <a class="external" href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">table of vendor-specific properties</a>.</p>
+
+<p>Using tools like <a class="external" href="http://csslint.net/">CSS Lint</a> can help find problems like this in code, and preprocessors like <a class="external" href="http://sass-lang.com/">SASS</a> and <a class="external" href="http://lesscss.org/">LESS</a> can help you to produce cross-browser code.</p>
+
+<h3 id="Take_care_with_user_agent_sniffing">Take care with user agent sniffing</h3>
+
+<p>It's preferable for web sites to detect specific device features such as screen size and touch screens using the techniques listed above, and adapt themselves accordingly. But sometimes this is impractical, and web sites resort to parsing the browser's user agent string to try to distinguish between desktops, tablets, and phones, to serve different content to each type of device.</p>
+
+<p>If you do this, make sure your algorithm is correct, and you aren't serving the wrong type of content to a device because you don't understand a particular browser's user agent string. See this <a href="/en/Browser_detection_using_the_user_agent#Mobile.2C_Tablet_or_Desktop" title="browser detection using the user agent">guide to using the user agent string to determine device type</a>.</p>
+
+<h3 id="Teste_em_vários_navegadores">Teste em vários navegadores</h3>
+
+<p>Teste seu site em vários navegadores. Isso significa testar em várias plataformas — no mínimo para iOS e Android.</p>
+
+<ul>
+ <li>teste no Safari para iPhone usando o <a class="link-https" href="https://developer.apple.com/devcenter/ios/index.action">simulador para iOS</a></li>
+ <li>teste no Opera e Firefox usando a <a class="link-https" href="https://developer.android.com/sdk/index.html">Android SDK</a>.  Veja instruções adicionais para <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator">rodar Firefox para Android usando o emulador de Android</a>.</li>
+</ul>
diff --git a/files/pt-br/web/guide/performance/index.html b/files/pt-br/web/guide/performance/index.html
new file mode 100644
index 0000000000..31448d677c
--- /dev/null
+++ b/files/pt-br/web/guide/performance/index.html
@@ -0,0 +1,14 @@
+---
+title: Otimização e Performance
+slug: Web/Guide/Performance
+tags:
+  - Otimização
+  - Performance
+  - Web
+translation_of: Web/Guide/Performance
+---
+<p>Quando construímos aplicações para web e sites modernos, é importante fazer seu conteúdo funcionar bem. Isso é, faze-lo funcionar eficientemente e rápido. Isso permite que ele funcione com eficaz tanto para usuários de computadores mais poderosos quanto para dispositivos portáteis com menos poder. Existem diversas ferramentas disponíveis para checar a performance de um site ou blog. As mais notáveis seguem abaixo:</p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<p>Os recursos acima também incluem as melhores práticas de performance web. Fazer da performance web uma prioridade ao considera-la durante o processo de desenvolvimento é importante para assegurar que os usuários tenham a melhor experiência possível.</p>
diff --git a/files/pt-br/web/guide/printing/index.html b/files/pt-br/web/guide/printing/index.html
new file mode 100644
index 0000000000..7819266b9f
--- /dev/null
+++ b/files/pt-br/web/guide/printing/index.html
@@ -0,0 +1,118 @@
+---
+title: Printing
+slug: Web/Guide/Printing
+translation_of: Web/Guide/Printing
+---
+<p>Pode haver momentos em que seu site ou aplicação queira melhorar a experiência do usuário quando imprime um conteúdo. Existem diversos cenários possíveis:</p>
+
+<ul>
+ <li>Você deseja ajustar o layout para tirar vantagem do tamanho e forma do papel.</li>
+ <li>Você deseja usar diferentes estilos para melhorar a aparência do seu conteúdo no papel.</li>
+ <li>Você deseja aumentar a resolução das imagens para um melhor resultado.</li>
+ <li>Você quer ajustar a experiência do usuário de impressão, como apresentar uma versão especialmente formatada de seu conteúdo antes da impressão começar.</li>
+</ul>
+
+<p>Podem haver outros casos onde você precisa gerenciar o processo de impressão, mas estes são alguns dos cenários mais comuns. Este artigo ensina dicas e técnicas para te ajudar a imprimir conteudo web de uma melhor forma.</p>
+
+<h2 id="Usando_uma_folha_de_estilos_para_impressão">Usando uma folha de estilos para impressão</h2>
+
+<p>Adicione o seguinte código dentro da tag {{HTMLElement("head")}}.</p>
+
+<pre class="notranslate">&lt;link href="/path/to/print.css" media="print" rel="stylesheet" /&gt;
+</pre>
+
+<h2 id="Usando_media_queries_para_melhorar_o_layout">Usando media queries para melhorar o layout</h2>
+
+<h2 id="Detectando_requisições_de_impressão">Detectando requisições de impressão</h2>
+
+<p>Alguns navegadores (incluindo o Firefox 6 e versões mais antigas do Internet Explorer) enviam eventos <code>beforeprint</code> e <code>afterprint</code> para permitir que o conteúdo determine quando a impressão deve ocorrer. Você pode usar isto para ajustar a interface presente durante a impressão (como a exibição ou ocultação de elementos de interface do usuário durante o processo de impressão).</p>
+
+<div class="note"><strong>Nota:</strong> Você também pode usar <a href="/en-US/docs/DOM/window.onbeforeprint" title="DOM/window.onbeforeprint"><code>window.onbeforeprint</code></a> e <a href="/en-US/docs/DOM/window.onafterprint" title="DOM/window.onafterprint"><code>window.onafterprint</code></a> para atribuir manipuladores para esses eventos, mas usando {{domxref("EventTarget.addEventListener()")}} é preferível.</div>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Aqui estão alguns exemplos comuns.</p>
+
+<h4 id="Abrir_e_fechar_automaticamente_uma_janela_popup_quando_finalizado">Abrir e fechar automaticamente uma janela popup quando finalizado</h4>
+
+<p>If you want to be able to automatically close a <a href="/en-US/docs/DOM/window.open" title="DOM/window.open">popup window</a> (for example, the printer-friendly version of a document) after the user prints its contents, you can use code like this:</p>
+
+<pre class="brush: html notranslate">&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;JavaScript Window Close Example &lt;/title&gt;
+  &lt;script type="text/javascript"&gt;
+    function popuponclick() {
+      my_window = window.open('', 'mywindow', 'status=1,width=350,height=150');
+      my_window.document.write('&lt;html&gt;&lt;head&gt;&lt;title&gt;Print Me&lt;/title&gt;&lt;/head&gt;');
+      my_window.document.write('&lt;body onafterprint="self.close()"&gt;');
+      my_window.document.write('&lt;p&gt;When you print this window, it will close afterward.&lt;/p&gt;');
+      my_window.document.write('&lt;/body&gt;&lt;/html&gt;');
+  }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;To try out the &lt;code&gt;afterprint&lt;/code&gt; event, click the link below to open
+  the window to print. You can also try changing the code to use &lt;code&gt;beforeprint&lt;/code&gt;
+  to see the difference.&lt;/p&gt;
+  &lt;p&gt;&lt;a href="javascript: popuponclick()"&gt;Open Popup Window&lt;/a&gt;&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<div><a href="https://wiki.developer.mozilla.org/samples/domref/printevents.html">Ver Exemplo</a></div>
+
+<h3 id="Imprimir_uma_página_externa_sem_abri-la">Imprimir uma página externa sem abri-la</h3>
+
+<p>If you want to be able to print an external page without opening it, you can utilize a hidden {{HTMLElement("iframe")}} (see: <a href="/en-US/docs/DOM/HTMLIFrameElement" title="DOM/HTMLIFrameElement">HTMLIFrameElement</a>), automatically removing it after the user prints its contents. The following is a possible example which will print a file named <code>externalPage.html</code>:</p>
+
+<pre class="brush: html notranslate">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+function closePrint () {
+  document.body.removeChild(this.__container__);
+}
+
+function setPrint () {
+  this.contentWindow.__container__ = this;
+  this.contentWindow.onbeforeunload = closePrint;
+  this.contentWindow.onafterprint = closePrint;
+  this.contentWindow.focus(); // Required for IE
+  this.contentWindow.print();
+}
+
+function printPage (sURL) {
+  var oHiddFrame = document.createElement("iframe");
+  oHiddFrame.onload = setPrint;
+  oHiddFrame.style.position = "fixed";
+  oHiddFrame.style.right = "0";
+  oHiddFrame.style.bottom = "0";
+  oHiddFrame.style.width = "0";
+  oHiddFrame.style.height = "0";
+  oHiddFrame.style.border = "0";
+  oHiddFrame.src = sURL;
+  document.body.appendChild(oHiddFrame);
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;p&gt;&lt;span onclick="printPage('externalPage.html');" style="cursor:pointer;text-decoration:underline;color:#0000ff;"&gt;Print external page!&lt;/span&gt;&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<div class="note"><strong>Nota:</strong> Older versions of Internet Explorer cannot print the contents of a hidden {{HTMLElement("iframe")}}.</div>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/window.print" title="DOM/window.print"><code>window.print</code></a></li>
+ <li><a href="/en-US/docs/DOM/window.onbeforeprint" title="DOM/window.onbeforeprint"><code>window.onbeforeprint</code></a></li>
+ <li><a href="/en-US/docs/DOM/window.onafterprint" title="DOM/window.onafterprint"><code>window.onafterprint</code></a></li>
+ <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li>
+ <li>{{cssxref("@media")}}</li>
+</ul>