From f99366f62fa0323a48cfa4984cfd0de48e449bb0 Mon Sep 17 00:00:00 2001 From: julieng Date: Thu, 15 Sep 2022 07:18:57 +0200 Subject: [PATCH] convert content to md --- .../web/guide/ajax/getting_started/index.md | 251 +++++++++--------- files/pt-br/web/guide/ajax/index.md | 99 +++---- files/pt-br/web/guide/api/index.md | 18 +- files/pt-br/web/guide/graphics/index.md | 34 +-- .../guide/html/content_categories/index.md | 174 ++++++------ .../web/guide/html/editable_content/index.md | 70 ++--- files/pt-br/web/guide/index.md | 96 +++---- .../introduction_to_web_development/index.md | 139 +++++----- files/pt-br/web/guide/mobile/index.md | 72 +++-- .../guide/mobile/mobile-friendliness/index.md | 62 +++-- .../web/guide/mobile/separate_sites/index.md | 62 +++-- files/pt-br/web/guide/performance/index.md | 6 +- files/pt-br/web/guide/printing/index.md | 143 +++++----- 13 files changed, 600 insertions(+), 626 deletions(-) diff --git a/files/pt-br/web/guide/ajax/getting_started/index.md b/files/pt-br/web/guide/ajax/getting_started/index.md index 80367e49f0e088..5e5daf51e4c66e 100644 --- a/files/pt-br/web/guide/ajax/getting_started/index.md +++ b/files/pt-br/web/guide/ajax/getting_started/index.md @@ -6,127 +6,131 @@ tags: - XMLHttpRequest translation_of: Web/Guide/AJAX/Getting_Started --- -

Esse artigo guia você através dos princípios do AJAX e oferece dois exemplos práticos simples para poder começar.

+Esse artigo guia você através dos princípios do AJAX e oferece dois exemplos práticos simples para poder começar. -

O que é AJAX?

+### O que é AJAX? -

AJAX significa Asynchronous JavaScript e XML. Em poucas palavras, é o uso do objeto XMLHttpRequest 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.

+AJAX significa Asynchronous JavaScript e XML. Em poucas palavras, é o uso do objeto [`XMLHttpRequest`](/en/DOM/XMLHttpRequest "en/XMLHttpRequest") 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. -

Os dois recursos em questão que você pode utilizar são:

+Os dois recursos em questão que você pode utilizar são: - +- Fazer requisições para o servidor sem recarregar a página +- Receber e trabalhar com dados do servidor -

Passo 1 - Como fazer uma requisição HTTP

+### Passo 1 - Como fazer uma requisição HTTP -

Para fazer uma requisição HTTP ao servidor usando JavaScript, você precisa de uma instância de uma classe que fornece essa funcionalidade. Este é o lugar onde o XMLHttpRequest entra. Essa classe foi originalmente introduzida no Internet Explorer como um objeto ActiveX chamado XMLHTTP. Então, Mozilla, Safari e outros navegadores o seguiram, implementando uma classe XMLHttpRequest que suporta os métodos e propriedades do objeto ActiveX original da Microsoft.

+Para fazer uma requisição [HTTP](/en/HTTP "en/HTTP") ao servidor usando JavaScript, você precisa de uma instância de uma classe que fornece essa funcionalidade. Este é o lugar onde o` XMLHttpRequest` entra. Essa classe foi originalmente introduzida no Internet Explorer como um objeto ActiveX chamado `XMLHTTP`. Então, Mozilla, Safari e outros navegadores o seguiram, implementando uma classe `XMLHttpRequest` que suporta os métodos e propriedades do objeto ActiveX original da Microsoft. -

Como resultado, a fim de criar uma instância (objeto) compatível com multiplos navegadores da classe requerida, você pode fazer o seguinte:

+Como resultado, a fim de criar uma instância (objeto) compatível com multiplos navegadores da classe requerida, você pode fazer o seguinte: -
var httpRequest;
+```js
+var httpRequest;
 if (window.XMLHttpRequest) { // Mozilla, Safari, ...
     httpRequest = new XMLHttpRequest();
 } else if (window.ActiveXObject) { // IE 8 and older
     httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
 }
-
+``` -
Nota: 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.
+> **Nota:** 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. -

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 onreadystatechange do objeto para o nome da função JavaScript que deve ser chamada quando o estado da requisição muda, desse jeito:

+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 `onreadystatechange` do objeto para o nome da função JavaScript que deve ser chamada quando o estado da requisição muda, desse jeito: -
httpRequest.onreadystatechange = nameOfTheFunction;
+``` +httpRequest.onreadystatechange = nameOfTheFunction; +``` -

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:

+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: -
httpRequest.onreadystatechange = function(){
+```js
+httpRequest.onreadystatechange = function(){
     // processar a resposta do servidor
 };
-
+``` -

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 open() e send() da classe requisição HTTP, dessa forma:

+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 `open()` e `send()` da classe requisição HTTP, dessa forma: -
httpRequest.open('GET', 'http://www.example.org/some.file', true);
+```js
+httpRequest.open('GET', 'http://www.example.org/some.file', true);
 httpRequest.send(null);
-
+``` - +- O primeiro parâmetro da chamada `para open()` é 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 [especificações do W3C](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html). +- 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 `open()`. Uma cilada comum é acessar o seu site pelo `domain.tld`, mas tentar chamar páginas com `www.domain.tld`. Se você realmente precisa enviar uma requisição para outro domínio, veja [controle de acesso HTTP](/En/HTTP_access_control "https://developer.mozilla.org/en/HTTP_access_control"). +- O terceiro parâmetro opcional define se a requisição é assíncrona. Se `TRUE` (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. -

O parâmetro para o método send() pode ser qualquer dado que você deseja enviar para o servidor se a requisição for POST. 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:

+O parâmetro para o método `send()` pode ser qualquer dado que você deseja enviar para o servidor se a requisição for `POST`. 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: -
"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
+``` +"name=value&anothername="+encodeURIComponent(myVar)+"&so=on" +``` -

ou em vários outros formatos, incluindo JSON, SOAP, etc.

+ou em vários outros formatos, incluindo JSON, SOAP, etc. -

Observe que se você deseja utilizar POST, você pode ter que definir o tipo de solicitação como MIME. Por exemplo, use a linha a seguir antes de chamar send() para os dados do formulário enviados como uma string de consulta:

+Observe que se você deseja utilizar `POST`, você pode ter que definir o tipo de solicitação como MIME. Por exemplo, use a linha a seguir antes de chamar `send()` para os dados do formulário enviados como uma string de consulta: -
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
+```js +httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); +``` -

Passo 2 - Manipulando a resposta do servidor

+### Passo 2 - Manipulando a resposta do servidor -

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.

+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. -
httpRequest.onreadystatechange = nameOfTheFunction;
-
+```js +httpRequest.onreadystatechange = nameOfTheFunction; +``` -

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.

+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. -
if (httpRequest.readyState === 4) {
+```js
+if (httpRequest.readyState === 4) {
     // everything is good, the response is received
 } else {
     // still not ready
 }
-
+``` -

A lista completa dos valores readyState é a seguinte:

+A lista completa dos valores `readyState` é a seguinte: - +- 0 (não inicializado) +- 1 (carregando) +- 2 (carregado) +- 3 (interativo) +- 4 (completo) -

* readyState é algo como "estado de prontidão", mostra qual é o status do processo que está sendo executado e se está sendo executado.

+\* readyState é algo como "estado de prontidão", mostra qual é o status do processo que está sendo executado e se está sendo executado. -

(Fonte)

+([Fonte](http://msdn.microsoft.com/en-us//library/ms534361%28en-us,VS.85%29.aspx)) -

A próxima coisa a se checar é o código de resposta do servidor HTTP. Todos os possíveis códigos estão listados no site do W3C. 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 200.

+A próxima coisa a se checar é o [código de resposta](/en/HTTP#HTTP_Response_Codes "en/HTTP#HTTP Response Codes") do servidor HTTP. Todos os possíveis códigos estão listados no site do [W3C](http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html). 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 [`200`](/en/HTTP/HTTP_response_codes#200 "https://developer.mozilla.org/en/HTTP/HTTP_response_codes#200"). -
if (httpRequest.status === 200) {
+```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
 }
-
+``` -

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. Você tem duas opções para acessar esses dados:

+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. Você tem duas opções para acessar esses dados: - +- `httpRequest.responseText` – retorna a resposta do servidor como uma string de texto +- `httpRequest.responseXML` – retorna a resposta do servidor como um objeto XMLDocument no qual você poderá percorrer usando as funções DOM do JavaScript -

Note que os passos acima são válidos somente se você usou uma solicitação assíncrona (terceiro parâmetro de open() foi definido como true). Se você usou um pedido síncrono você não precisa especificar uma função, você pode acessar o retorno de dados pelo servidor diretamente depois de chamar send(), porque o script irá parar e esperar pela resposta do servidor.

+Note que os passos acima são válidos somente se você usou uma solicitação assíncrona (terceiro parâmetro de `open()` foi definido como `true`). Se você usou um pedido **síncrono** você não precisa especificar uma função, você pode acessar o retorno de dados pelo servidor diretamente depois de chamar `send()`, porque o script irá parar e esperar pela resposta do servidor. -

Passo 3 – Um simples exemplo

+### Passo 3 – Um simples exemplo -

Vamos colocar tudo junto e fazer uma simples requisição HTTP. Nosso JavaScript irá solicitar um documento HTML (test.html) com o conteúdo "I'm a test." e depois utilizaremos alert() para ver o conteúdo do arquivo test.html.

+Vamos colocar tudo junto e fazer uma simples requisição HTTP. Nosso JavaScript irá solicitar um documento HTML (`test.html`) com o conteúdo "I'm a test." e depois utilizaremos `alert()` para ver o conteúdo do arquivo `test.html`. -
<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
+```html
+
   Make a request
-</span>
-<script type="text/javascript">
+
+
+```
 
-


- Neste exemplo:

+Neste exemplo:
 
-
+- O usuário clica no link "Make a request" em seu browser (navegador);
+- O manipulador de eventos chama a função makeRequest() com um parâmetro - o nome `test.html` de um arquivo HTML no mesmo diretório.
+- A requisição é realizada e então (`onreadystatechange`) a execução é passada para `alertContents()`;
+- `alertContents()` checa se a resposta foi recebida e se está OK, então `alert()` mostra o conteúdo do arquivo `test.html.`
 
-
Nota: Se você está enviando uma solicitação para um pedaço de código que retornará XML, ao invés de um arquivo XML estático, é necessário definir alguns cabeçalhos de resposta se a sua página é para trabalhar com o Internet Explorer e com o Mozilla. Se você não definir cabeçalho Content-Type: application/xml, o IE irá lançar um erro JavaScript, "Objeto esperado", após a linha onde você tentar acessar um elemento XML..

+> **Nota:** Se você está enviando uma solicitação para um pedaço de código que retornará XML, ao invés de um arquivo XML estático, é necessário definir alguns cabeçalhos de resposta se a sua página é para trabalhar com o Internet Explorer e com o Mozilla. Se você não definir cabeçalho `Content-Type: application/xml`, o IE irá lançar um erro JavaScript, "Objeto esperado", após a linha onde você tentar acessar um elemento XML..
 
-
Nota 2: Se você não definir cabeçalho Cache-Control: no-cache o navegador armazenará em cache a resposta e jamais voltará a submeter o pedido, tornando a depuração "desafiadora". Também é possível acrescentar um parâmetro GET adicional sempre diferente, como o timestamp ou um número aleatório (veja bypassing the cache).

+> **Nota:** **Nota 2**: Se você não definir cabeçalho `Cache-Control: no-cache` o navegador armazenará em cache a resposta e jamais voltará a submeter o pedido, tornando a depuração "desafiadora". Também é possível acrescentar um parâmetro GET adicional sempre diferente, como o timestamp ou um número aleatório (veja [bypassing the cache](https://developer.mozilla.org/en/DOM/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache "https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache")).
 
-
Nota 3: Se a variável httpRequest é utilizada globalmente, funções concorrentes chamando makeRequest() podem sobrescrever uma à outra, causando uma condição de corrida. Declarando o httpRequest variável local para um closure contendo as funções AJAX impede a condição de corrida.

+> **Nota:** **Nota 3**: Se a variável httpRequest é utilizada globalmente, funções concorrentes chamando ` makeRequest``() ` podem sobrescrever uma à outra, causando uma condição de corrida. Declarando o httpRequest variável local para um [closure](https://developer.mozilla.org/en/JavaScript/Guide/Closures) contendo as funções AJAX impede a condição de corrida.
 
-
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.

+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.
 
-
function alertContents() {
+```js
+function alertContents() {
   try {
     if (httpRequest.readyState === 4) {
       if (httpRequest.status === 200) {
@@ -200,60 +202,67 @@ httpRequest.send(null);
     alert('Caught Exception: ' + e.description);
   }
 }
-

+```
 
-
Passo 4 – Trabalhando com a resposta XML

+### Passo 4 – Trabalhando com a resposta XML
 
-
Nos exemplos anteriores, após a resposta para a requisição HTTP ser recebida nós utilizamos a propriedade responseText do objeto solicitado,  que continha o conteúdo de arquivo  test.html file. Agora, vamos experimentar a propriedade responseXML.

+Nos exemplos anteriores, após a resposta para a requisição HTTP ser recebida nós utilizamos a propriedade `responseText` do objeto solicitado, que continha o conteúdo de arquivo `test.html` file. Agora, vamos experimentar a propriedade `responseXML`.
 
-
Em primeiro lugar, vamos criar um documento XML válido para solicitarmos mais tarde. O documento  (test.xml) possui o seguinte conteúdo:

+Em primeiro lugar, vamos criar um documento XML válido para solicitarmos mais tarde. O documento (`test.xml`) possui o seguinte conteúdo:
 
-
<?xml version="1.0" ?>
-<root>
+```html
+
+
     I'm a test.
-</root>
-

+
+```
 
-
No script nós precisamos apenas alterar a linha da requisição para:

+No script nós precisamos apenas alterar a linha da requisição para:
 
-
...
-onclick="makeRequest('test.xml')">
+```html
 ...
-

+onclick="makeRequest('test.xml')">
+...
+```
 
-
Em seguida,  dentro de alertContents() precisamos substituir a linha alert(httpRequest.responseText); para:

+Em seguida, dentro de `alertContents() precisamos substituir a linha` `alert(httpRequest.responseText);` para:
 
-
var xmldoc = httpRequest.responseXML;
+```js
+var xmldoc = httpRequest.responseXML;
 var root_node = xmldoc.getElementsByTagName('root').item(0);
 alert(root_node.firstChild.data);
-

+```
 
-
Este código pega o objeto XMLDocument obtido por responseXML e utiliza métodos DOM para acessar alguns dados contidos no documento XML. Você pode ver o test.xml aqui e o script de teste atualizado aqui.

+Este código pega o objeto `XMLDocument` obtido por `responseXML` e utiliza métodos DOM para acessar alguns dados contidos no documento XML. Você pode ver o `test.xml` [aqui](http://www.w3clubs.com/mozdev/test.xml) e o script de teste atualizado [aqui](http://www.w3clubs.com/mozdev/httprequest_test_xml.html).
 
-
Passo 5 – Trabalhando com os dados

+### Passo 5 – Trabalhando com os dados
 
-
Finalmente, vamos enviar algum dado para o servidor e obter a resposta. Desta vez, nosso JavaScript solicitará um página dinâmica (test.php)  que receberá os dados que enviamos e retornará um string computada - "Hello,[user data]!" - visualizada através de alert().

+Finalmente, vamos enviar algum dado para o servidor e obter a resposta. Desta vez, nosso JavaScript solicitará um página dinâmica (`test.php`) que receberá os dados que enviamos e retornará um string computada - "`Hello,[user data]!`" - visualizada através de `alert().`
 
-
Primeiro, vamos adicionar uma text box em nosso HTML de modo que o usuário possa digitar o seu nome:

+Primeiro, vamos adicionar uma text box em nosso HTML de modo que o usuário possa digitar o seu nome:
 
-
<label>Your name:
-  <input type="text" id="ajaxTextbox" />
-</label>
-<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
+```html
+
+
   Make a request
-</span>

+
+```
 
-
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 makeRequest() juntamente com a URL do nosso script do lado do servidor (server-side):

+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 `makeRequest()` juntamente com a URL do nosso script do lado do servidor (server-side):
 
-
  document.getElementById("ajaxButton").onclick = function() {
+```js
+  document.getElementById("ajaxButton").onclick = function() {
       var userName = document.getElementById("ajaxTextbox").value;
       makeRequest('test.php',userName);
   };
-

+```
 
-
Precisamos modificar makeRequest () para aceitar os dados do usuário e passá-lo para o servidor. Vamos mudar o método de requisição de GET para POST, e incluir nossos dados como um parâmetro na chamada para httpRequest.send():

+Precisamos modificar ` makeRequest ``() ` para aceitar os dados do usuário e passá-lo para o servidor. Vamos mudar o método de requisição de `GET` para `POST`, e incluir nossos dados como um parâmetro na chamada para `httpRequest.send()`:
 
-
  function makeRequest(url, userName) {
+```js
+  function makeRequest(url, userName) {
 
     ...
 
@@ -262,15 +271,16 @@ alert(root_node.firstChild.data);
     httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
     httpRequest.send('userName=' + encodeURIComponent(userName));
   }
-

+```
 
-
A função alertContents() pode ser escrita da mesma forma que se encontrava no Passo 3 para alertar (alert()) 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:

+A função `alertContents()` pode ser escrita da mesma forma que se encontrava no **Passo 3** para alertar (`alert()`) 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:
 
-
{"userData":"Jane","computedString":"Hi, Jane!"}

+`{"userData":"Jane","computedString":"Hi, Jane!"}`
 
-
Para utilizar estes dados dentro de alertContents(), nós não podemos simplesmente exibir com alert()  a propriedade responseText. Temos que analisar (parse) e então alertar (alert()) computedString, a propriedade que queremos:

+Para utilizar estes dados dentro de `alertContents()`, nós não podemos simplesmente exibir com `alert()` a propriedade `responseText`. Temos que analisar (parse) e então alertar (`alert()`) `computedString,` a propriedade que queremos:
 
-
function alertContents() {
+```js
+function alertContents() {
     if (httpRequest.readyState === 4) {
       if (httpRequest.status === 200) {
         var response = JSON.parse(httpRequest.responseText);
@@ -278,13 +288,16 @@ alert(root_node.firstChild.data);
     } else {
       alert('There was a problem with the request.');
     }
-}

+}
+```
 
-
O arquivo test.php possui o seguinte código

+O arquivo test.php possui o seguinte código
 
-
$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name';
+```php
+$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name';
 $computedString = "Hi, " . $name;
-$array = ['userName' => $name, 'computedString' => $computedString];
-echo json_encode($array);

+$array = ['userName' => $name, 'computedString' => $computedString];
+echo json_encode($array);
+```
 
-
Para mais métodos DOM, não deixe de conferir a documentação Mozilla's DOM implementation.

+Para mais métodos DOM, não deixe de conferir a documentação [Mozilla's DOM implementation](http://www.mozilla.org/docs/dom/).
diff --git a/files/pt-br/web/guide/ajax/index.md b/files/pt-br/web/guide/ajax/index.md
index db7269a080b8f4..4415f54712fa63 100644
--- a/files/pt-br/web/guide/ajax/index.md
+++ b/files/pt-br/web/guide/ajax/index.md
@@ -3,73 +3,60 @@ title: AJAX
 slug: Web/Guide/AJAX
 translation_of: Web/Guide/AJAX
 ---
-
Primeiros passos Uma introdução ao AJAX.

+**[Primeiros passos](/pt-BR/docs/AJAX/Getting_Started)** Uma introdução ao AJAX.
 
-

-
AJAX é o acrônimo para JavaScript assíncrono + XML. 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 HTML ou XHTML, CSS, JavaScript, DOMl, XML, XSLT, e o mais importante: objeto XMLHttpRequest.

- 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.

+**AJAX** é o acrônimo para **JavaScript assíncrono + XML.** 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 [HTML](/pt-BR/docs/HTML) ou [XHTML](/pt-BR/docs/XHTML), [CSS](/pt-BR/docs/CSS), [JavaScript](/pt-BR/docs/JavaScript), [DOMl](/pt-BR/docs/DOM), [XML](/pt-BR/docs/XML), [XSLT](/pt-BR/docs/XSLT), e o mais importante: [objeto XMLHttpRequest](/pt-BR/docs/DOM/XMLHttpRequest).
+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.
 
-
Embora a letra X em AJAX corresponda ao XML, atualmente o JSON é 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.

-

+Embora a letra X em AJAX corresponda ao XML, atualmente o [JSON](/pt-BR/docs/JSON) é 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.
 
+## Documentação
 
-
Documentação

+- [AJAX: Primeiros passos](/pt-BR/docs/AJAX/Getting_Started)
+  - : Este artigo orientará o básico sobre AJAX e fornecerá dois exemplos para você começar.
+- [Alternate Ajax Techniques](http://www.webreference.com/programming/ajax_tech/)
+  - : 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.
+- [Ajax: A New Approach to Web Applications](http://www.adaptivepath.com/publications/essays/archives/000385.php)
+  - : Jesse James Garrett, of [adaptive path](http://www.adaptivepath.com), wrote this article in February 2005, introducing AJAX and its related concepts.
+- [A Simpler Ajax Path](http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html)
+  - : "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."
+- [Fixing the Back Button and Enabling Bookmarking for AJAX Apps](http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps/)
+  - : Mike Stenhouse has penned this article, detailing some methods you can use to fix back button and bookmarking issues when developing AJAX applications.
+- [Ajax Mistakes](http://alexbosworth.backpackit.com/pub/67688)
+  - : Alex Bosworth has written this article outlining some of the mistakes AJAX application developers can make.
+- [HTML no XMLHttpRequest](/pt-BR/docs/HTML_in_XMLHttpRequest)
+  - : MDN guide
+- [Especificação XMLHttpRequest](http://www.w3.org/TR/XMLHttpRequest/)
+  - : W3C Working draft
+- [Outros recursos](/pt-BR/docs/AJAX/Other_Resources)
+  - : Outros recursos do AJAX que podem ser úteis.
 
-

-
AJAX: Primeiros passos

-
Este artigo orientará o básico sobre AJAX e fornecerá dois exemplos para você começar.

-
Alternate Ajax Techniques

-
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.

-
Ajax: A New Approach to Web Applications

-
Jesse James Garrett, of adaptive path, wrote this article in February 2005, introducing AJAX and its related concepts.

-
A Simpler Ajax Path

-
"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."

-
Fixing the Back Button and Enabling Bookmarking for AJAX Apps

-
Mike Stenhouse has penned this article, detailing some methods you can use to fix back button and bookmarking issues when developing AJAX applications.

-
Ajax Mistakes

-
Alex Bosworth has written this article outlining some of the mistakes AJAX application developers can make.

-
HTML no XMLHttpRequest

-
MDN guide

-
Especificação XMLHttpRequest

-
W3C Working draft

-
Outros recursos

-
Outros recursos do AJAX que podem ser úteis.

-

+## Comunidade
 
-
Comunidade

+- Consulte os fóruns da Mozilla...
 
-
+{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}
 
-
{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}

+- [Links da comunidade AJAX](/pt-BR/docs/AJAX/Community)
 
-
+## Ferramentas
 
-
Ferramentas

+- [Toolkits and frameworks](http://www.ajaxprojects.com)
+- [Firebug - Ajax/Web development tool](http://www.getfirebug.com/)
+- [AJAX Debugging Tool](http://blog.monstuff.com/archives/000252.html)
+- [Flash/AJAX Integration Kit](http://www.osflash.org/doku.php?id=flashjs)
+- [A Simple XMLHTTP Interface Library](http://xkr.us/code/javascript/XHConn/)
 
-
+## Exemplos
 
-
Exemplos

+- [AJAX poller script](http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller)
+- [Ajax Chat Tutorial](http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=9)
+- [RSS Ticker with AJAX](http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=13)
+- [AJAX Login System using XMLHttpRequest](http://www.jamesdam.com/ajax_login/login.html#login)
+- [Create your own Ajax effects](http://www.thinkvitamin.com/features/ajax/create-your-own-ajax-effects)
+- [AJAX: Creating Huge Bookmarklets](http://codinginparadise.org/weblog/2005/08/ajax-creating-huge-bookmarklets.html)
+- [AJAX: Hot!Ajax There are many cool examples](http://www.hotajax.org)
 
-
+## Tópicos relacionados
 
-
Tópicos relacionados

-
-
HTML, XHTML, CSS, DOM, JavaScript, XML, XMLHttpRequest, XSLT, DHTML, Canvas

\ No newline at end of file
+[HTML](/pt-BR/docs/HTML), [XHTML](/pt-BR/docs/XHTML), [CSS](/pt-BR/docs/CSS), [DOM](/pt-BR/docs/DOM), [JavaScript](/pt-BR/docs/JavaScript), [XML](/pt-BR/docs/XML), [XMLHttpRequest](/pt-BR/docs/nsIXMLHttpRequest), [XSLT](/pt-BR/docs/XSLT), [DHTML](/pt-BR/docs/DHTML), [Canvas](/pt-BR/docs/HTML/Canvas)
diff --git a/files/pt-br/web/guide/api/index.md b/files/pt-br/web/guide/api/index.md
index 4e0e34c483b739..7714db26c812ec 100644
--- a/files/pt-br/web/guide/api/index.md
+++ b/files/pt-br/web/guide/api/index.md
@@ -10,17 +10,15 @@ tags:
   - Web
 translation_of: Web/Guide/API
 ---
-
Here you'll find links to each of the guides introducing and explaining each of the APIs that make up the Web development architecture.

+Here you'll find links to each of the guides introducing and explaining each of the APIs that make up the Web development architecture.
 
-
Web APIs from A to Z

+## Web APIs from A to Z
 
-
{{ListGroups}}

+{{ListGroups}}
 
-
See also

+## See also
 
-
+- [Web API interface reference](/pt-BR/docs/Web/API) (an index of all of the interfaces comprising all of these APIs)
+- [Document Object Model](/pt-BR/docs/Web/API/Document_Object_Model) (DOM)
+- [Web API event reference](/pt-BR/docs/Web/Events)
+- [Learning web development](/pt-BR/docs/Learn)
diff --git a/files/pt-br/web/guide/graphics/index.md b/files/pt-br/web/guide/graphics/index.md
index ddb7bc2c436cbc..c2a319ba55d727 100644
--- a/files/pt-br/web/guide/graphics/index.md
+++ b/files/pt-br/web/guide/graphics/index.md
@@ -14,29 +14,23 @@ tags:
 translation_of: Web/Guide/Graphics
 original_slug: Web/Guide/Gráficos
 ---
-
Sites modernos da Web e aplicativos frequentemente precisam exibir gráficos. 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. Esses artigos fornecem conhecimento de como você pode realizar isto.

+Sites modernos da Web e aplicativos frequentemente precisam exibir gráficos. 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. Esses artigos fornecem conhecimento de como você pode realizar isto.
 
-
Gráficos 2D

+## Gráficos 2D
 
-

- 
Canvas

- 
Um guia introdutório do uso do elemento {{HTMLElement("canvas")}} para desenhar gráficos 2D usando JavaScript.

- 
SVG

- 
Scalable Vector Graphics (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.

-

+- [Canvas](/pt-BR/docs/Web/HTML/Canvas)
+  - : Um guia introdutório do uso do elemento {{HTMLElement("canvas")}} para desenhar gráficos 2D usando JavaScript.
+- [SVG](/pt-BR/docs/SVG)
+  - : _Scalable Vector Graphics_ (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.
 
-
Gráficos 3D

+## Gráficos 3D
 
-

- 
WebGL

- 
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.

-

+- [WebGL](/pt-BR/docs/Web/WebGL)
+  - : 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.
 
-
Video

+## Video
 
-

- 
Usando áudio e vídeo em HTML5

- 
Embarcando vídeo ou áudio na página web e controlando a reprodução desses elementos.

- 
WebRTC

- 
O RTC in WebRTC é um padrão para Real-Time Communications (comunicação em tempo real), tecnologia que permite a transmissão  de áudio ou vídeo e o compartilhamento de dados entre os clientes de navegadores (peers).

-

+- [Usando áudio e vídeo em HTML5](/pt-BR/docs/Web/Guide/HTML/Using_HTML5_audio_and_video)
+  - : Embarcando vídeo ou áudio na página web e controlando a reprodução desses elementos.
+- [WebRTC](/pt-BR/docs/WebRTC)
+  - : O RTC in WebRTC é um padrão para _Real-Time Communications_ (comunicação em tempo real), tecnologia que permite a transmissão de áudio ou vídeo e o compartilhamento de dados entre os clientes de navegadores (_peers_).
diff --git a/files/pt-br/web/guide/html/content_categories/index.md b/files/pt-br/web/guide/html/content_categories/index.md
index 2bcc2cd7b23720..d1f35345f2cbfa 100644
--- a/files/pt-br/web/guide/html/content_categories/index.md
+++ b/files/pt-br/web/guide/html/content_categories/index.md
@@ -11,139 +11,125 @@ tags:
 translation_of: Web/Guide/HTML/Content_categories
 original_slug: Web/Guide/HTML/Categorias_de_conteudo
 ---
-
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.

+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.
 
-
Há três tipos de categorias de conteúdo:

+Há três tipos de categorias de conteúdo:
 
-
+- Principais categorias de conteúdo, as quais descrevem regras comuns de conteúdo compartilhado por vários elementos;
+- Categorias de conteúdo relacionado, as quais decrevem regras comuns de conteúdo para elementos relacioados;
+- Categorias de conteúdo específico, as quais descrevem categorias raras compartilhadas somente por poucos elementos, às vezes apenas em um contexto específico.
 
-
Content_categories_venn.png

+[![Content_categories_venn.png](/@api/deki/files/6244/=Content_categories_venn.png?size=webview)](/@api/deki/files/6244/=Content_categories_venn.png "Content_categories_venn.png")
 
-
Principais categorias de conteúdo

+## Principais categorias de conteúdo
 
-
Conteúdo de metadados

+### Conteúdo de metadados
 
-
Os elementos pertencentes a categoria conteúdo de metadados modificam a apresentação ou o comportamento do resto do documento, define ligações para outros documentos ou transmite outras informações fora da banda.

+Os elementos pertencentes a categoria _conteúdo de metadados_ modificam a apresentação ou o comportamento do resto do documento, define ligações para outros documentos ou transmite outras informações _fora da banda._
 
-
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")}}.

+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")}}.
 
-
Conteúdo de fluxo

+### Conteúdo de fluxo
 
-
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.

+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.
 
-
Alguns outros elementos pertencem a essa categoria, mas somente se uma condição específica é realizada:

+Alguns outros elementos pertencem a essa categoria, mas somente se uma condição específica é realizada:
 
-
+- {{HTMLElement("area")}}, se for um descendente de um elemento {{HTMLElement("map")}}
+- {{HTMLElement("link")}}, se o atributo **[itemprop](/pt-BR/docs/HTML/Global_attributes#attr-itemprop "HTML/Global attributes#itemprop") **estiver presente
+- {{HTMLElement("meta")}}, se o atributo [**itemprop**](/pt-BR/docs/HTML/Global_attributes#attr-itemprop "HTML/Global attributes#itemprop") estiver presente
+- {{HTMLElement("style")}}, se o atributo {{htmlattrxref("scoped","style")}} estiver presente
 
-
Conteúdo de seccionamento

+### Conteúdo de seccionamento
 
-
Os elementos pertencentes ao modelo de conteúdo de seccionamento criam uma seção no esboço atual que define o escopo dos elementos {{HTMLElement("header")}}, elementos {{HTMLElement("footer")}} e na conteúdo do cabeçalho.

+Os elementos pertencentes ao modelo de conteúdo de seccionamento criam uma [seção no esboço atual](/pt-BR/docs/Sections_and_Outlines_of_an_HTML5_document "Sections and Outlines of an HTML5 document") que define o escopo dos elementos {{HTMLElement("header")}}, elementos {{HTMLElement("footer")}} e na [conteúdo do cabeçalho](#Heading_content "#heading content").
 
-
Elementos pertencentes a essa categoria são {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} e {{HTMLElement("section")}}. 

+Elementos pertencentes a essa categoria são {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} e {{HTMLElement("section")}}.
 
-

-
Nota: Não confunda esse modelo de conteúdo com a categoria de seccionamento raiz que isola seus conteúdos dos esboços regulares.

-

+> **Nota:** Não confunda esse modelo de conteúdo com a categoria de [seccionamento raiz](/pt-BR/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root "Sections and Outlines of an HTML5 document#sectioning root") que isola seus conteúdos dos esboços regulares.
 
-
Conteúdo do cabeçalho

+### Conteúdo do cabeçalho
 
-
O conteúdo do cabeçalho define o título de uma seção, se é marcada por um explícito elemento do conteúdo de seccionamento ou implicitamente definido pelo próprio conteúdo do cabeçalho.

+O conteúdo do cabeçalho define o título de uma seção, se é marcada por um explícito elemento do [conteúdo de seccionamento](#Sectioning_content "#sectioning content") ou implicitamente definido pelo próprio conteúdo do cabeçalho.
 
-
Os elementos pertencentes a essa categoria são {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} e {{HTMLElement("hgroup")}}.

+Os elementos pertencentes a essa categoria são {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} e {{HTMLElement("hgroup")}}.
 
-

-
Note: Embora provavelmente contenha algum conteúdo do cabeçalho, o {{HTMLElement("header")}} não faz parte do conteúdo do cabeçalho em si.

-

+> **Nota:** Embora provavelmente contenha algum conteúdo do cabeçalho, o {{HTMLElement("header")}} não faz parte do conteúdo do cabeçalho em si.
 
-
Conteúdo fraseado

+### Conteúdo fraseado
 
-
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.

+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.
 
-
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).

+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).
 
-
Alguns outros elementos pertencem a essa categoria, mas somente se uma condição específica é realizada:

+Alguns outros elementos pertencem a essa categoria, mas somente se uma condição específica é realizada:
 
-
+- {{HTMLElement("a")}}, se contém somente conteúdo fraseado
+- {{HTMLElement("area")}}, se for um descendente de um elemento {{HTMLElement("map")}}
+- {{HTMLElement("del")}}, se contém somente conteúdo fraseado
+- {{HTMLElement("ins")}}, se contém somente conteúdo fraseado
+- {{HTMLElement("link")}}, se o atributo [**itemprop**](/pt-BR/docs/HTML/Global_attributes#attr-itemprop "HTML/Global attributes#itemprop") estiver presente
+- {{HTMLElement("map")}}, se contém somente conteúdo fraseado
+- {{HTMLElement("meta")}}, se o atributo [**itemprop**](/pt-BR/docs/HTML/Global_attributes#attr-itemprop "HTML/Global attributes#itemprop") estiver presente
 
-
Conteúdo embutido

+### Conteúdo embutido
 
-
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")}}.

+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")}}.
 
-
Conteúdo interativo

+### Conteúdo interativo
 
-
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:

+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:
 
-
+- {{HTMLElement("audio")}}, se o atributo {{htmlattrxref("controls", "audio")}} estiver presente
+- {{HTMLElement("img")}}, se o atributo {{htmlattrxref("usemap", "img")}} estiver presente
+- {{HTMLElement("input")}}, se o atributo {{htmlattrxref("type", "input")}} não estiver no modo escondido
+- {{HTMLElement("menu")}}, se o atributo {{htmlattrxref("type", "menu")}} estiver no modo barra de ferramentas
+- {{HTMLElement("object")}}, se o atributo {{htmlattrxref("usemap", "object")}} estiver presente
+- {{HTMLElement("video")}}, se o atributo {{htmlattrxref("controls", "video")}} estiver presente
 
-
Conteúdo associado ao form

+### Conteúdo associado ao **form**
 
-
O conteúdo associado ao form compreende elementos que têm um formulário de proprietário, exposto por um atributo form. Um formulário de proprietário é ou um elemento {{HTMLElement("form")}} ou o elemento o qual o ID é especificado no atributo form.

+O conteúdo associado ao **form** compreende elementos que têm um formulário de proprietário, exposto por um atributo **form**. Um formulário de proprietário é ou um elemento {{HTMLElement("form")}} ou o elemento o qual o ID é especificado no atributo **form**.
 
-
+- {{HTMLElement("button")}}
+- {{HTMLElement("fieldset")}}
+- {{HTMLElement("input")}}
+- {{HTMLElement("keygen")}}
+- {{HTMLElement("label")}}
+- {{HTMLElement("meter")}}
+- {{HTMLElement("object")}}
+- {{HTMLElement("output")}}
+- {{HTMLElement("progress")}}
+- {{HTMLElement("select")}}
+- {{HTMLElement("textarea")}}
 
-
 Essa categoria contém várias sub-categorias:

+Essa categoria contém várias sub-categorias:
 
-

- 
listed

- 
Elementos que estão listados nas coleções IDL form.elements e fieldset.elements. Contém {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}} e {{HTMLElement("textarea")}}.

- 
labelable

- 
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")}}.

- 
submittable

- 
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")}}.

- 
resettable

- 
Elementos que podem ser afetados quando um formulário é reinicializado. Contém {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}} e {{HTMLElement("textarea")}}.

-

+- listed
+  - : Elementos que estão listados nas coleções IDL [form.elements](/pt-BR/docs/DOM/form.elements "DOM/form.elements") e fieldset.elements. Contém {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}} e {{HTMLElement("textarea")}}.
+- labelable
+  - : 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")}}.
+- submittable
+  - : 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")}}.
+- resettable
+  - : Elementos que podem ser afetados quando um formulário é reinicializado. Contém {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}} e {{HTMLElement("textarea")}}.
 
-
Modelo de conteúdo transparente

+## Modelo de conteúdo transparente
 
-
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.

+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.
 
-
Por exemplo, os elementos {{HTMLElement("del")}} e {{HTMLELement("ins")}} são transparentes:

+Por exemplo, os elementos {{HTMLElement("del")}} e {{HTMLELement("ins")}} são transparentes:
 
-
<p>We hold these truths to be <del><em>sacred &amp; undeniable</em></del> <ins>self-evident</ins>.</p>
-

+```
+
We hold these truths to be sacred & undeniable self-evident.

+```
 
-
Se aqueles elementos forem removidos, esse fragmento continuaria sendo um HTML válido.

+Se aqueles elementos forem removidos, esse fragmento continuaria sendo um HTML válido.
 
-
<p>We hold these truths to be <em>sacred &amp; undeniable</em> self-evident.</p>
-

+```
+
We hold these truths to be sacred & undeniable self-evident.

+```
 
-
Outros modelos de conteúdo

+## Outros modelos de conteúdo
 
-
Raiz de secionamento.

+Raiz de secionamento.
diff --git a/files/pt-br/web/guide/html/editable_content/index.md b/files/pt-br/web/guide/html/editable_content/index.md
index b898d0c5919b91..0116102b45c57c 100644
--- a/files/pt-br/web/guide/html/editable_content/index.md
+++ b/files/pt-br/web/guide/html/editable_content/index.md
@@ -4,55 +4,55 @@ slug: Web/Guide/HTML/Editable_content
 translation_of: Web/Guide/HTML/Editable_content
 original_slug: Web/Guide/HTML/Content_Editable
 ---
-
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.

+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.
 
-
Compatibilidade

+## Compatibilidade
 
-
Conteúdo editável é totalmente compatível com os seguintes browsers.

+Conteúdo editável é totalmente compatível com os seguintes browsers.
 
-
+- Firefox 3.5+
+- Firefox for Android 19+
+- Chrome 4.0+
+- Internet Explorer 5.5+ \*
+- Safari 3.1+
+- Opera 9+
+- iOS Safari 5.0+
+- Android Browser 3.0+
+- Opera Mobile 12.1+
+- Chrome for Android 25+
 
-
Ainda não é suportato pelo Opera Mini.

+Ainda não é suportato pelo Opera Mini.
 
-

-
*A maioria dos elementos HTML não suporta esta funcionalidade

-

+> **Nota:** \*A maioria dos elementos HTML não suporta esta funcionalidade
 
-
Como isso funciona?

+## Como isso funciona?
 
-
Defina o atributo {{DOMXRef("HTMLElement.contentEditable", "contentEditable")}} para true no seu elemento HTML. Isto pode ser usado na maioria dos elementos HTML.

+Defina o atributo {{DOMXRef("HTMLElement.contentEditable", "contentEditable")}} para `true` no seu elemento HTML. Isto pode ser usado na maioria dos elementos HTML.
 
-
Exemplos

+## Exemplos
 
-
Um exemplo simples:

+Um exemplo simples:
 
-
<!DOCTYPE html>
-<html>
-  <body>
-    <div contentEditable="true">
+```
+
+
+  
+    

       Este conteúdo pode ser editado.
-    </div>
-  </body>
-</html> 

+    
+  
+
+```
 
-
Você pode ver o exemplo funcionando com com uma integração de JavaScript utilizando LocalStorage aqui. Com a fonte aqui.

+Você pode ver o exemplo funcionando com com uma integração de JavaScript utilizando LocalStorage [aqui](http://html5demos.com/contenteditable). Com a fonte [aqui](http://html5demos.com/contenteditable#view-source).
 
-
Veja também

+## Veja também
 
-
user_pref("capability.policy.policynames", "allowclipboard");
+```
+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");

+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
+```
 
-
Como interagir com o conteúdo  (Antiga API do  IE)  aqui

+[Como interagir com o conteúdo ](/en/Midas "en/Midas")(Antiga API do IE) [aqui](/en/Rich-Text_Editing_in_Mozilla "en/rich-text editing in mozilla")
diff --git a/files/pt-br/web/guide/index.md b/files/pt-br/web/guide/index.md
index f67be2ca79af21..43b37e997ab2b8 100644
--- a/files/pt-br/web/guide/index.md
+++ b/files/pt-br/web/guide/index.md
@@ -7,62 +7,52 @@ tags:
   - Web
 translation_of: Web/Guide
 ---
-
Estes artigos fornecem informações para ajudá-lo a fazer uso de tecnologias e APIs específicas.

+**Estes artigos fornecem informações para ajudá-lo a fazer uso de tecnologias e APIs específicas.**
 
-

-

-

- 
Guia do desenvolvedor HTML

- 
HyperText Markup Language (HTML) é 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.

- 
Guia do desenvolvedor CSS

- 
Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para descrever a apresentação de um documento escrito em HTML.

- 
Distribuição de áudio e vídeo

- 
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.

-

+- [Guia do desenvolvedor HTML](/pt-BR/docs/Aprender/HTML)
+  - : **HyperText Markup Language** **(HTML)** é 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.
+- [Guia do desenvolvedor CSS](/pt-BR/docs/Web/Guide/CSS)
+  - : Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para descrever a apresentação de um documento escrito em HTML.
+- [Distribuição de áudio e vídeo](/pt-BR/docs/Web/Guide/CSS)
+  - : 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.
 
-

- 
Manipulação de áudio e vídeo

- 
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")}}, WebGL or Web Audio API 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.

-

+
 
-

- 
Guia de eventos do desenvolvedor

- 
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

- 
AJAX

- 
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.

- 
Gráficos na Web

- 
Web sites modernos e aplicativos, muitas vezes precisam apresentar gráficos de diferentes graus de satisfação.

- 
Guia para APIs da Web

- 
Um lista de todas as APIs da Web e o que elas fazem.

- 
JavaScript

- 
JavaScript é uma poderosa linguagem de scripts utilizada para criar aplicativos para a Web.

- 
Localizações e codificação de caracteres

- 
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.

- 
Desenvolvimento Web móvel

- 
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 Firefox OS. Ou você pode estar interessado em detalhes sobre Firefox para Android.

-

-

+- [Manipulação de áudio e vídeo](/pt-BR/docs/Web/Guide/Audio_and_video_manipulation)
+  - : 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")}}, [WebGL](/pt-BR/docs/Web/WebGL) or [Web Audio API](/pt-BR/docs/Web/API/Web_Audio_API) 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.
 
-

-

- 
Aplicativos da web progressivos 

- 
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.

- 
Otimização e desempenho

- 
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.

- 
Analisando e serializando XML

- 
A plataforma Web oferece diferentes métodos de parsing e serializing de XML, cada um com suas próprias vantagens e desvantagens.

- 
O  Web Open Font Format (WOFF)

- 
WOFF (Web Open Font Format) é um formato de arquivo para fontes que é livre para qualquer um usar.

- 
Usando Objetos FormData

- 
O objeto FormData 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 submit() iria usar para enviar os dados se o tipo de forma de codificação fosse definido como "multipart / form-data".

- 
Glossário

- 
Define vários termos técnicos relacionados à Web e Internet.

-

-

-

+
 
-
Veja também

+- [Guia de eventos do desenvolvedor](/pt-BR/docs/Web/Guide/Events)
+  - : 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
+- [AJAX](/pt-BR/docs/Web/Guide/AJAX)
+  - : 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.
+- [Gráficos na Web](/pt-BR/docs/Web/Guide/Graphics)
+  - : Web sites modernos e aplicativos, muitas vezes precisam apresentar gráficos de diferentes graus de satisfação.
+- [Guia para APIs da Web](/pt-BR/docs/Web/Guide/API)
+  - : Um lista de todas as APIs da Web e o que elas fazem.
+- [JavaScript](/pt-BR/docs/Web/JavaScript "/en-US/docs/JavaScript")
+  - : JavaScript é uma poderosa linguagem de scripts utilizada para criar aplicativos para a Web.
+- [Localizações e codificação de caracteres](/pt-BR/docs/Localizations_and_character_encodings)
+  - : 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.
+- [Desenvolvimento Web móvel](/pt-BR/docs/Web/Guide/Mobile)
+  - : 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 [Firefox OS](/en/Mozilla/Firefox_OS "Boot to Gecko"). Ou você pode estar interessado em detalhes sobre [Firefox para Android](/en/Mozilla/Firefox_for_Android).
 
-
+
+
+- [Aplicativos da web progressivos](https://developer.mozilla.org/en-US/Apps/Progressive#Core_PWA_guides)
+  - : 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.
+- [Otimização e desempenho](/pt-BR/docs/Web/Guide/Performance)
+  - : 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.
+- [_Analisando e serializando XML_](/pt-BR/docs/Web/Guide/Parsing_and_serializing_XML)
+  - : A plataforma Web oferece diferentes métodos de _parsing_ e _serializing_ de XML, cada um com suas próprias vantagens e desvantagens.
+- [O Web Open Font Format (WOFF)](/pt-BR/docs/Web/Guide/WOFF)
+  - : **WOFF** (**Web Open Font Format**) é um formato de arquivo para fontes que é livre para qualquer um usar.
+- [Usando Objetos FormData](/pt-BR/docs/Web/Guide/Using_FormData_Objects)
+  - : O objeto [`FormData`](/en/DOM/XMLHttpRequest/FormData) 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 `submit()` iria usar para enviar os dados se o tipo de forma de codificação fosse definido como "multipart / form-data".
+- [Glossário](/pt-BR/docs/Glossary)
+  - : Define vários termos técnicos relacionados à Web e Internet.
+
+## Veja também
+
+- [Referência do desenvolvedor web](/pt-BR/docs/Web/Reference "/en-US/docs/Web/Reference")
diff --git a/files/pt-br/web/guide/introduction_to_web_development/index.md b/files/pt-br/web/guide/introduction_to_web_development/index.md
index 7af69b8794f94e..49468ccf3f0e1b 100644
--- a/files/pt-br/web/guide/introduction_to_web_development/index.md
+++ b/files/pt-br/web/guide/introduction_to_web_development/index.md
@@ -11,78 +11,67 @@ tags:
 translation_of: Web/Guide/Introduction_to_Web_development
 original_slug: Web/Guide/Introducao_ao_Desenvolvimento_Web
 ---
-
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.

-
Para outro conjunto (sobreposto) de links sobre recursos de aprendizado, consulte as páginas de aprendizado do MDN.

-
-
Nota: Os recursos recomendados nesta página estão sujeitos à alterações

-
-
Tópicos da documentação

-
-
HTML

-
-
-
-
CSS

-
-
-
-
JavaScript

-
-
Iniciante

-
-
-
-
Intermediário

-
-
-
-
Avançado

-
-
-
-
Recursos

-
-

-  
W3C Web Education Community Group Wiki

-  
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

-  
SitePoint

-  
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.

-  
HTMLDog

-  
Uma completa e excelente página de referência sobre HTML e CSS para iniciantes.

-  
HTML, CSS, and Javascript do Ground Up

-  
Estes videos tutoriais de fácil entedimento de especialistas da Google abordam os básicos de HTML, CSS e JavaScript.

-  
Tutoriais iniciantes de CSSTutorial.net

-  
Uma grande variedade de textos e video tutoriais que abordam os aspectos básicos ao intermediário do CSS.

-  
Tutoriais CSS do Tizag

-  
Uma referência fácil de seguir para aqueles que desejam aprender CSS através de tutoriais curtos e concisos

-  
Fundamentos do jQuery

-  
Um livro de referência de código aberto com instruções detalhadas para iniciantes de JavaScript e jQuery.

-  
JavaScript From Null: Uma série de vídeos

-  
Uma série de videos sobre JavaScript para completos iniciantes que buscam uma abordagem mais visual de aprendizado.

-

\ No newline at end of file
+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.
+
+Para outro conjunto (sobreposto) de links sobre recursos de aprendizado, consulte as [páginas de aprendizado](/pt-BR/docs/) do MDN.
+
+> **Nota:** Os recursos recomendados nesta página estão sujeitos à alterações
+
+## Tópicos da documentação
+
+### HTML
+
+- [O básico da Hypertext Mark-up Language (HTML)](http://www.w3.org/community/webed/wiki/The_basics_of_HTML) — o quê exatamente é HTML?
+- [A estrutura básica de uma página web](http://reference.sitepoint.com/html/page-structure) — o doctype e a 'árvore' do documento
+- [Elementos HTML fundamentais](http://reference.sitepoint.com/html/elements) — estrutura, cabeçalho, lista, elementos de formulário e mais, explicados por categoria.
+- [Tutorial para iniciantes HTML](http://htmldog.com/guides/htmlbeginner/) — um tutorial e exercícios que recapitulam o conhecimento básico aprendido acima.
+- [Elementos HTML](/en/HTML/Element) — um guia completo para os elementos HTML elements com detalhes de como os navegadores os suportam
+
+### CSS
+
+- [Iniciando com o CSS](/en/CSS/Getting_Started) — um guia para iniciantes sobre CSS, cobrindo os conceitos básicos e fundamentais.
+- [Guia de referência CSS](/en/CSS/CSS_Reference) — um guia completo para CSS com detalhes do nível de suporte do Gecko/Firefox para cada um deles.
+- [Introdução do W3C à estilização com CSS](http://www.w3.org/MarkUp/Guide/Style) — um breve guia para estilizar páginas da web para iniciantes.
+- [Perguntas comuns sobre CSS](/en/Common_CSS_Questions) — perguntas frequentes e respostas para iniciantes.
+- [Conceitos intermediários de CSS](http://www.html.net/tutorials/css/) — agrupamento, pseudo-classes e mais.
+
+### JavaScript
+
+#### Iniciante
+
+- [Iniciando com JavaScript](/en/JavaScript/Getting_Started) — o que é Javascript e como ele pode ajudar você?
+- [Guia de referência JavaScript](/en/JavaScript/Guide) — um guia completo e regularmente atualizado de JavaScript para todos os níveis de aprendizado, do iniciante ao avançado.
+- [Crockford no JavaScript](https://www.youtube.com/playlist?list=PL7664379246A246CB) — uma série de vídeos aprofundada sobre a linguagem JavaScript.
+- [JavaScript Elouquente ](http://eloquentjavascript.net/contents.html)— um guia completo para metodologias JavaScript intermediárias e avançadas.
+
+#### Intermediário
+
+- [Uma re-introdução ao JavaScript](/en/JavaScript/A_re-introduction_to_JavaScript) — uma recapitulação da linguagem de programação JavaScript direcionada para desenvolvedores de nível intermediário.
+- [Padrões de design (design patterns) essenciais no JavaScript](http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/) — uma introdução à padrões de design essenciais no JavaScript
+- [Introdução à JavaScript orientado à Objeto](/en/Introduction_to_Object-Oriented_JavaScript) — aprenda sobre o modelo de objetos do JavaScript.
+- [Boas práticas de Javascript (por Christian Heilmann)](http://dev.opera.com/articles/view/javascript-best-practices/) — aprenda sobre algumas boas práticas óbvias (algumas nem tanto) quando programas em JavaScript.
+
+#### Avançado
+
+- [Aprendendo JavaScript avançado](http://ejohn.org/apps/learn/) — Um guia de John Resig para JavaScript avançado
+- [Crockford em JavaScript avançado](http://uk.video.yahoo.com/watch/111585/1027823) — uma série de três vídeos sobre conceitos avançados de JavaScript
+- [JavaScript Garden](http://bonsaiden.github.com/JavaScript-Garden/) — Documentação das partes mais peculiares do JavaScript.
+
+## Recursos
+
+- [W3C Web Education Community Group Wiki](http://www.w3.org/community/webed/wiki/Main_Page)
+  - : 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
+- [SitePoint](http://reference.sitepoint.com/)
+  - : 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.
+- [HTMLDog](http://htmldog.com/)
+  - : Uma completa e excelente página de referência sobre HTML e CSS para iniciantes.
+- [HTML, CSS, and Javascript do Ground Up](http://code.google.com/edu/submissions/html-css-javascript/)
+  - : Estes videos tutoriais de fácil entedimento de especialistas da Google abordam os básicos de HTML, CSS e JavaScript.
+- [Tutoriais iniciantes de CSSTutorial.net](http://www.csstutorial.net/)
+  - : Uma grande variedade de textos e video tutoriais que abordam os aspectos básicos ao intermediário do CSS.
+- [Tutoriais CSS do Tizag](http://www.tizag.com/cssT/)
+  - : Uma referência fácil de seguir para aqueles que desejam aprender CSS através de tutoriais curtos e concisos
+- [Fundamentos do jQuery](http://jqfundamentals.com/)
+  - : Um livro de referência de código aberto com instruções detalhadas para iniciantes de JavaScript e jQuery.
+- [JavaScript From Null: Uma série de vídeos](http://net.tutsplus.com/tutorials/javascript-ajax/javascript-from-null-video-series/)
+  - : Uma série de videos sobre JavaScript para completos iniciantes que buscam uma abordagem mais visual de aprendizado.
diff --git a/files/pt-br/web/guide/mobile/index.md b/files/pt-br/web/guide/mobile/index.md
index ca67efd920fcb3..d81f4e2781f1cb 100644
--- a/files/pt-br/web/guide/mobile/index.md
+++ b/files/pt-br/web/guide/mobile/index.md
@@ -3,70 +3,64 @@ title: Mobile Web Development
 slug: Web/Guide/Mobile
 translation_of: Web/Guide/Mobile
 ---
-
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 Firefox OS. Ou você pode estar interessado em detalhes sobre Firefox para Android.

+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 [Firefox OS](/en/Mozilla/Firefox_OS "Boot to Gecko"). Ou você pode estar interessado em detalhes sobre [Firefox para Android](/en/Mozilla/Firefox_for_Android "Firefox for Android").
 
-
We've organized it into two sections, designing for mobile devices and cross-browser compatibility. Also see Jason Grlicky's guide to mobile-friendliness for web developers.

+We've organized it into two sections, [designing for mobile devices](#Designing_for_mobile_devices) and [cross-browser compatibility](#Cross-browser_development). Also see Jason Grlicky's guide to [mobile-friendliness](/pt-BR/docs/Web_Development/Mobile/Mobile-friendliness) for web developers.
 
-
Projetando para dispositivos móveis

+## Projetando para dispositivos móveis
 
-
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. Eles geralmente têm telas sensíveis ao toque para entrada do usuário. 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.

+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. Eles geralmente têm telas sensíveis ao toque para entrada do usuário. 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.
 
-
Working with small screens

+### Working with small screens
 
-
Responsive Web Design 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:

+[Responsive Web Design](/pt-BR/docs/Web/Guide/Responsive_design) 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:
 
-
+- fluid CSS layouts, to make the page adapt smoothly as the browser window size changes
+- the use of [media queries](/en/CSS/Media_queries "en/CSS/Media_queries") to conditionally include CSS rules appropriate for the device screen [width](/en/CSS/Media_queries#width "en/CSS/Media_queries#width") and [height](/en/CSS/Media_queries#height "en/CSS/Media_queries#height")
 
-
The viewport meta tag instructs the browser to display your site at the appropriate scale for the user's device.

+The [viewport meta tag](/en/Mobile/Viewport_meta_tag "en/Mobile/Viewport_meta_tag") instructs the browser to display your site at the appropriate scale for the user's device.
 
-
Working with touch screens

+### Working with touch screens
 
-
To use a touch screen you'll need to work with DOM Touch events. You won't be able to use the CSS :hover 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 designing for touch screens.

+To use a touch screen you'll need to work with [DOM Touch events](/en/DOM/Touch_events "en/DOM/Touch_events"). You won't be able to use the [CSS :hover](/En/CSS/:hover "En/CSS/:hover") 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 [designing for touch screens](https://web.archive.org/web/20150520130912/http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/).
 
-
You can use the -moz-touch-enabled media query to load different CSS on a touch-enabled device.

+You can use the [-moz-touch-enabled](/en/CSS/Media_queries#-moz-touch-enabled "en/CSS/Media_queries#-moz-touch-enabled") media query to load different CSS on a touch-enabled device.
 
-
Optimizing images

+### Optimizing images
 
-
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 height, width, and pixel ratio.

+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 [height](/en/CSS/Media_queries#height "en/CSS/Media_queries#height"), [width](/en/CSS/Media_queries#width "en/CSS/Media_queries#width"), and [pixel ratio](/en/CSS/Media_queries#-moz-device-pixel-ratio "en/CSS/Media_queries#-moz-device-pixel-ratio").
 
-
You can also make use of CSS properties to implement visual effects like gradients and shadows without images.

+You can also make use of CSS properties to implement visual effects like [gradients](/en/CSS/Using_CSS_gradients "en/CSS/Using_CSS_gradients") and [shadows](/En/CSS/Box-shadow "En/CSS/Box-shadow") without images.
 
-
Mobile APIs

+### Mobile APIs
 
-
Finally, you can take advantage of the new possibilities offered by mobile devices, such as orientation and geolocation.

+Finally, you can take advantage of the new possibilities offered by mobile devices, such as [orientation](/en/Detecting_device_orientation "en/Detecting_device_orientation") and [geolocation](/En/Using_geolocation "En/Using_geolocation").
 
-
Cross-browser development

+## Cross-browser development
 
-
Write cross-browser code

+### Write cross-browser code
 
-
To create web sites that will work acceptably across different mobile browsers:

+To create web sites that will work acceptably across different mobile browsers:
 
-
+- Try to avoid using browser-specific features, such as vendor-prefixed CSS properties.
+- If you do need to use these features, check whether other browsers implement their own versions of these features, and target them too.
+- For browsers that don't support these features, provide an acceptable fallback.
 
-
For example, if you set a gradient as a background for some text using a vendor-prefixed property like -webkit-linear-gradient, it's best to include the other vendor-prefixed versions of the linear-gradient 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 linear-gradient rule.

+For example, if you set a gradient as a background for some text using a vendor-prefixed property like `-webkit-linear-gradient`, it's best to include the other vendor-prefixed versions of the [linear-gradient](/en/CSS/linear-gradient "en/CSS/linear-gradient") 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 `linear-gradient` rule.
 
-
See this list of Gecko-specific properties, and this list of WebKit-specific properties, and Peter Beverloo's table of vendor-specific properties.

+See this [list of Gecko-specific properties](/en/CSS/CSS_Reference/Mozilla_Extensions "en/CSS/CSS_Reference/Mozilla_Extensions"), and this list of [WebKit-specific properties](/en/CSS/CSS_Reference/Webkit_Extensions "en/CSS/CSS_Reference/Webkit_Extensions"), and Peter Beverloo's [table of vendor-specific properties](http://peter.sh/experiments/vendor-prefixed-css-property-overview/).
 
-
Using tools like CSS Lint can help find problems like this in code, and preprocessors like SASS and LESS can help you to produce cross-browser code.

+Using tools like [CSS Lint](http://csslint.net/) can help find problems like this in code, and preprocessors like [SASS](http://sass-lang.com/) and [LESS](http://lesscss.org/) can help you to produce cross-browser code.
 
-
Take care with user agent sniffing

+### Take care with user agent sniffing
 
-
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.

+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.
 
-
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 guide to using the user agent string to determine device type.

+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 [guide to using the user agent string to determine device type](/en/Browser_detection_using_the_user_agent#Mobile.2C_Tablet_or_Desktop "browser detection using the user agent").
 
-
Teste em vários navegadores

+### Teste em vários navegadores
 
-
Teste seu site em vários navegadores. Isso significa testar em várias plataformas — no mínimo para iOS e Android.

+Teste seu site em vários navegadores. Isso significa testar em várias plataformas — no mínimo para iOS e Android.
 
-
+- teste no Safari para iPhone usando o [simulador para iOS](https://developer.apple.com/devcenter/ios/index.action)
+- teste no Opera e Firefox usando a [Android SDK](https://developer.android.com/sdk/index.html). Veja instruções adicionais para [rodar Firefox para Android usando o emulador de Android](https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator).
diff --git a/files/pt-br/web/guide/mobile/mobile-friendliness/index.md b/files/pt-br/web/guide/mobile/mobile-friendliness/index.md
index 55caea33a51c4f..55499422b14b1e 100644
--- a/files/pt-br/web/guide/mobile/mobile-friendliness/index.md
+++ b/files/pt-br/web/guide/mobile/mobile-friendliness/index.md
@@ -4,28 +4,40 @@ slug: Web/Guide/Mobile/Mobile-friendliness
 translation_of: Web/Guide/Mobile/Mobile-friendliness
 original_slug: Web_Development/Mobile/Mobile-friendliness
 ---
-
O que é site móvel amigável?

-
Mobile friendliness can mean a multitude of things, depending on who you’re talking to. It can be helpful to think of it in terms of three goals for improving your site’s user experience: Presentation, Content, and Performance.

-
Goal #1 (Presentation)

-
“Make websites that work well on a variety of screen sizes.”

-
These days, users can access the web on devices in a wide range of form factors, including phones, tablets, and eReaders. Needless to say, a fixed-width, three-column layout filled with complex JavaScript animations and mouse-over effects is not going to look or feel quite right on a phone with a 2-inch-wide screen and a diminutive processor. A slimmed-down, linearized page layout with elements sized for a touchscreen would be much more appropriate. That’s why this first goal is all about presenting your content in a way that makes life easy for users on mobile device.

-
Goal #2 (Content)

-
“Adjust your content for mobile users.”alaska_air_mobile_and_desktop-300x225.png

-
Think about what your users want to do at your site if they are on a phone. A great example of this is Alaska Air’s website. Their desktop site focuses on getting visitors to book trips. Mobile users, however, are probably more interested in checking-in for a flight or seeing if their flight is delayed. They’ve adjusted their site’s content to reflect this, and it meets the needs of mobile users.

-
Goal #3 (Performance)

-
“Give your users a smooth experience, even on a slow connection.”

-
Though things have been getting better in recent years, browsing the Internet over a wireless data connection can still be pretty painful. This makes it more essential than ever to practice good performance practices, only sending the user the bits they will actually need.

-
Know your audience

-
While not strictly a part of the definition of being mobile friendly, defining who your target audience is makes these goals much more concrete. For example, it is absolutely critical to keep in mind which browsers and devices you will target when picking a mobile strategy. If your audience is full of early-adopters, you can focus on tablets and smartphones with standards-friendly browsers. On the other hand, if many of your site’s users are on devices with less capable browsers, that may eliminate certain strategies as viable options.

-
Approaches to mobile Web development

-
The following approaches aim to achieve each of these goals by different means.

-
-

-  
Original document information

-  
Originally published on 4 May, 2011 on the Mozilla Webdev blog as "Approaches to Mobile Web Development Part 1 - What is Mobile Friendliness?", by Jason Grlicky.

-

-
 

+## O que é site móvel amigável?
+
+Mobile friendliness can mean a multitude of things, depending on who you’re talking to. It can be helpful to think of it in terms of three goals for improving your site’s user experience: Presentation, Content, and Performance.
+
+### Goal #1 (Presentation)
+
+_“Make websites that work well on a variety of screen sizes.”_
+
+These days, users can access the web on devices in a wide range of form factors, including phones, tablets, and eReaders. Needless to say, a fixed-width, three-column layout filled with complex JavaScript animations and mouse-over effects is not going to look or feel quite right on a phone with a 2-inch-wide screen and a diminutive processor. A slimmed-down, linearized page layout with elements [sized for a touchscreen](http://www.lukew.com/ff/entry.asp?1085 "Touch Target Sizes") would be much more appropriate. That’s why this first goal is all about presenting your content in a way that makes life easy for users on mobile device.
+
+### Goal #2 (Content)
+
+_“Adjust your content for mobile users.”![alaska_air_mobile_and_desktop-300x225.png](/@api/deki/files/5892/=alaska_air_mobile_and_desktop-300x225.png)_
+
+Think about what your users want to do at your site if they are on a phone. A great example of this is [Alaska Air’s website](http://www.alaskaair.com/ "Alaska Air"). Their desktop site focuses on getting visitors to book trips. Mobile users, however, are probably more interested in checking-in for a flight or seeing if their flight is delayed. They’ve adjusted their site’s content to reflect this, and it meets the needs of mobile users.
+
+### Goal #3 (Performance)
+
+_“Give your users a smooth experience, even on a slow connection.”_
+
+Though things have been getting better in recent years, browsing the Internet over a wireless data connection can still be pretty painful. This makes it more essential than ever to practice [good performance practices](http://developer.yahoo.com/performance/rules.html "Best Practices for Speeding Up Your Web Site"), only sending the user the bits they will actually need.
+
+### Know your audience
+
+While not strictly a part of the definition of being mobile friendly, defining who your target audience is makes these goals much more concrete. For example, it is absolutely critical to keep in mind which browsers and devices you will target when picking a mobile strategy. If your audience is full of early-adopters, you can focus on tablets and smartphones with standards-friendly browsers. On the other hand, if many of your site’s users are on devices with less capable browsers, that may eliminate certain strategies as viable options.
+
+## Approaches to mobile Web development
+
+The following approaches aim to achieve each of these goals by different means.
+
+- [Separate sites](/en/Web_development/Mobile/Separate_sites "en/Web development/Mobile/Separate sites")
+- [Responsive design](/en/Web_development/Mobile/Responsive_design "en/Web development/Mobile/Responsive design")
+- [A hybrid approach](/en/Web_development/Mobile/A_hybrid_approach "en/Web development/Mobile/Hybrid approach")
+
+### Original document information
+
+Originally published on 4 May, 2011 on the Mozilla Webdev blog as "[Approaches to Mobile Web Development Part 1 - What is Mobile Friendliness?](http://blog.mozilla.com/webdev/2011/05/04/approaches-to-mobile-web-development-part-1-what-is-mobile-friendliness/)", by Jason Grlicky.
diff --git a/files/pt-br/web/guide/mobile/separate_sites/index.md b/files/pt-br/web/guide/mobile/separate_sites/index.md
index e58cbd254c9c90..ed4b3e68d99fbd 100644
--- a/files/pt-br/web/guide/mobile/separate_sites/index.md
+++ b/files/pt-br/web/guide/mobile/separate_sites/index.md
@@ -4,28 +4,40 @@ slug: Web/Guide/Mobile/Separate_sites
 translation_of: Web/Guide/Mobile/Separate_sites
 original_slug: Web_Development/Mobile/Sites_separados
 ---
-
The "separate sites" approach to mobile Web development involves creating different sites for mobile and desktop Web users. This approach has positive and negative aspects.

-
The good

-
The first option is the most popular by far: use user-agent detection to route users on phones to a separate mobile site, typically at m.example.com. In a nutshell, this technique uses server-side logic to solve all three goals of mobile web development at once — if the user’s browser looks like it’s on a phone, you serve them mobile content, formatted for their phone and optimized for speed.

-
Conceptually simple, this is the easiest option to add to an existing site, especially if you are using a CMS or Web application that supports templates. Since only the mobile-specific content, styles, and scripts are sent to mobile users, this method also provides for the best performance out of any of the other options presented here. Finally, it also allows for completely different user experiences on desktop and mobile — they’re two different sites, after all!

-
The bad

-
Unfortunately, this approach is not without its drawbacks. For starters, you are now maintaining two different pages for every page on your site that you would like to expose to mobile users. If you are using a CMS, is possible to arrange your site templates in a way that minimizes this duplication. However any time that there is a difference between the mobile and desktop templates, there is a potential source of complication in your code. Similarly, this increases the implementation time of any new site features, since you must now code two sets of front-end logic.

-
Even more important than that, though, is the fact that user-agent detection is inherently flawed, and anything but future-proof. Every time a new browser comes out, you must adjust your algorithm to accommodate it. And false positives are particularly scary — it could be embarrassing to serve desktop users your mobile site accidentally.

-
When it is right to choose this option

-
sumo_screenshot.pngFirstly, if your target audience includes users on older or low-end feature phones, it is worth noting that you may need to employ this strategy to some degree no matter what. This is because the default browsers on some feature-phones do not support the same markup that you would use to code a website targeted at the desktop, but instead understand formats like XHTML-MP or the older WML.

-
This factor aside, there is one case where this strategy really shines over other methods. If the functionality you would like to provide to your users on mobile devices is extremely different from that on a desktop, then using separate sites is simply likely to be the most practical choice. This is because you have the option of sending completely separate HTML, JavaScript, and CSS to phones and PCs.

-
Another case where you may be forced to use this approach is if you cannot, for whatever reason, modify your existing desktop site, and need to have a 100% separate mobile site. Though it’s not ideal, at least you have this option.

-
Examples

-
Most of the major Web applications you see in the wild have chosen this path, including Facebook, YouTube, Digg, and Flickr. In fact, Mozilla picked this strategy for the mobile versions of addons.mozilla.org (AMO) and support.mozilla.org (SUMO). If you’d like to see the source code behind an example of this approach in action, feel free to check out the github repository for AMO or SUMO.

-
Approaches to mobile Web development

-
See the following articles for background and other approaches to developing for mobile platforms.

-
-

-  
Original document information

-  
This article was originally published on 13 May 2011, on the Mozilla Webdev blog as "Approaches to Mobile Web Development Part 2 – Separate Sites", by Jason Grlicky.

-

-
 

+The "separate sites" approach to mobile Web development involves creating different sites for mobile and desktop Web users. This approach has positive and negative aspects.
+
+## The good
+
+The first option is the most popular by far: use [user-agent detection](http://en.wikipedia.org/wiki/User_agent#User_agent_sniffing "User Agent Sniffing") to route users on phones to a separate mobile site, typically at m.example.com. In a nutshell, this technique uses server-side logic to solve all [three goals of mobile web development](http://blog.mozilla.com/webdev/2011/05/04/approaches-to-mobile-web-development-part-1-what-is-mobile-friendliness/ "Approaches to Mobile Web Development Part 1 – What is Mobile Friendliness?") at once — if the user’s browser looks like it’s on a phone, you serve them mobile content, formatted for their phone and optimized for speed.
+
+Conceptually simple, this is the easiest option to add to an existing site, especially if you are using a CMS or Web application that supports templates. Since only the mobile-specific content, styles, and scripts are sent to mobile users, this method also provides for the best performance out of any of the other options presented here. Finally, it also allows for completely different user experiences on desktop and mobile — they’re two different sites, after all!
+
+## The bad
+
+Unfortunately, this approach is not without its drawbacks. For starters, you are now maintaining two different pages for every page on your site that you would like to expose to mobile users. If you are using a CMS, is possible to arrange your site templates in a way that minimizes this duplication. However any time that there is a difference between the mobile and desktop templates, there is a potential source of complication in your code. Similarly, this increases the implementation time of any new site features, since you must now code two sets of front-end logic.
+
+Even more important than that, though, is the fact that user-agent detection is [inherently flawed](http://css-tricks.com/browser-detection-is-bad/ "Browser Detection is Bad"), and anything but future-proof. Every time a new browser comes out, you must adjust your algorithm to accommodate it. And false positives are particularly scary — it could be embarrassing to serve desktop users your mobile site accidentally.
+
+## When it is right to choose this option
+
+![sumo_screenshot.png](/@api/deki/files/5893/=sumo_screenshot.png)Firstly, if your target audience includes users on older or low-end [feature phones](http://www.cnet.com/8301-17918_1-10461614-85.html "Feature Phones Definition"), it is worth noting that you may need to employ this strategy [to some degree](http://www.passani.it/gap/#adaptation "Mobile Adaptation") no matter what. This is because the default browsers on some feature-phones do not support the same markup that you would use to code a website targeted at the desktop, but instead understand formats like [XHTML-MP](http://en.wikipedia.org/wiki/XHTML_Mobile_Profile "XHTML-MP") or the older [WML](http://en.wikipedia.org/wiki/Wireless_Markup_Language).
+
+This factor aside, there is one case where this strategy really shines over other methods. If the functionality you would like to provide to your users on mobile devices is extremely different from that on a desktop, then using separate sites is simply likely to be the [most practical choice](http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one). This is because you have the option of sending completely separate HTML, JavaScript, and CSS to phones and PCs.
+
+Another case where you may be forced to use this approach is if you cannot, for whatever reason, modify your existing desktop site, and need to have a 100% separate mobile site. Though it’s not ideal, at least you have this option.
+
+## Examples
+
+Most of the major Web applications you see in the wild have chosen this path, including [Facebook](http://m.facebook.com/), [YouTube](http://m.youtube.com/), [Digg](http://m.digg.com/ "Mobile Digg"), and [Flickr](http://m.flickr.com/ "Mobile Flickr"). In fact, Mozilla picked this strategy for the mobile versions of [addons.mozilla.org](https://addons.mozilla.org/) (AMO) and [support.mozilla.org](http://support.mozilla.com/) (SUMO). If you’d like to see the source code behind an example of this approach in action, feel free to check out the [github repository for AMO](https://github.com/jbalogh/zamboni/) or [SUMO](https://github.com/jsocol/kitsune).
+
+## Approaches to mobile Web development
+
+See the following articles for background and other approaches to developing for mobile platforms.
+
+- [What is mobile-friendliness?](/en/Web_development/Mobile/Mobile-friendliness "Wat is CSS")
+- [Responsive design](/pt-BR/docs/Web_Development/Mobile/Responsive_design)
+- [A hybrid approach](/pt-BR/docs/Web_Development/Mobile/A_hybrid_approach)
+
+### Original document information
+
+This article was originally published on 13 May 2011, on the Mozilla Webdev blog as "[Approaches to Mobile Web Development Part 2 – Separate Sites](http://blog.mozilla.com/webdev/2011/05/13/approaches-to-mobile-web-development-part-2-separate-sites/)", by Jason Grlicky.
diff --git a/files/pt-br/web/guide/performance/index.md b/files/pt-br/web/guide/performance/index.md
index e904bef9c296dc..5a01966474b0de 100644
--- a/files/pt-br/web/guide/performance/index.md
+++ b/files/pt-br/web/guide/performance/index.md
@@ -7,8 +7,8 @@ tags:
   - Web
 translation_of: Web/Guide/Performance
 ---
-
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:

+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:
 
-
{{LandingPageListSubpages}}

+{{LandingPageListSubpages}}
 
-
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.

+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.
diff --git a/files/pt-br/web/guide/printing/index.md b/files/pt-br/web/guide/printing/index.md
index 7a5bc7c361d9e3..d8db0b8f88fa13 100644
--- a/files/pt-br/web/guide/printing/index.md
+++ b/files/pt-br/web/guide/printing/index.md
@@ -3,75 +3,76 @@ title: Printing
 slug: Web/Guide/Printing
 translation_of: Web/Guide/Printing
 ---
-
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:

+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:
 
-
+- Você deseja ajustar o layout para tirar vantagem do tamanho e forma do papel.
+- Você deseja usar diferentes estilos para melhorar a aparência do seu conteúdo no papel.
+- Você deseja aumentar a resolução das imagens para um melhor resultado.
+- 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.
 
-
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.

+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.
 
-
Usando uma folha de estilos para impressão

+## Usando uma folha de estilos para impressão
 
-
Adicione o seguinte código dentro da tag {{HTMLElement("head")}}.

+Adicione o seguinte código dentro da tag {{HTMLElement("head")}}.
 
-
<link href="/path/to/print.css" media="print" rel="stylesheet" />
-

+```
+
+```
 
-
Usando media queries para melhorar o layout

+## Usando media queries para melhorar o layout
 
-
Detectando requisições de impressão

+## Detectando requisições de impressão
 
-
Alguns navegadores (incluindo o Firefox 6 e versões mais antigas do Internet Explorer) enviam eventos beforeprint e afterprint 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).

+Alguns navegadores (incluindo o Firefox 6 e versões mais antigas do Internet Explorer) enviam eventos `beforeprint` e `afterprint` 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).
 
-
Nota: Você também pode usar window.onbeforeprint e window.onafterprint para atribuir manipuladores para esses eventos, mas usando {{domxref("EventTarget.addEventListener()")}} é preferível.

+> **Nota:** Você também pode usar [`window.onbeforeprint`](/pt-BR/docs/DOM/window.onbeforeprint "DOM/window.onbeforeprint") e [`window.onafterprint`](/pt-BR/docs/DOM/window.onafterprint "DOM/window.onafterprint") para atribuir manipuladores para esses eventos, mas usando {{domxref("EventTarget.addEventListener()")}} é preferível.
 
-
Exemplos

+## Exemplos
 
-
Aqui estão alguns exemplos comuns.

+Aqui estão alguns exemplos comuns.
 
-
Abrir e fechar automaticamente uma janela popup quando finalizado

+#### Abrir e fechar automaticamente uma janela popup quando finalizado
 
-
If you want to be able to automatically close a popup window (for example, the printer-friendly version of a document) after the user prints its contents, you can use code like this:

+If you want to be able to automatically close a [popup window](/pt-BR/docs/DOM/window.open "DOM/window.open") (for example, the printer-friendly version of a document) after the user prints its contents, you can use code like this:
 
-
<!doctype html>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>JavaScript Window Close Example </title>
-  <script type="text/javascript">
+```html
+
+
+
+   JavaScript Window Close Example 
+  
+
+
+  
To try out the afterprint event, click the link below to open
+  the window to print. You can also try changing the code to use beforeprint
+  to see the difference.

+  
Open Popup Window

+
+
+```
+
+[Ver Exemplo](/samples/domref/printevents.html)
+
+### Imprimir uma página externa sem abri-la
+
+If you want to be able to print an external page without opening it, you can utilize a hidden {{HTMLElement("iframe")}} (see: [HTMLIFrameElement](/pt-BR/docs/DOM/HTMLIFrameElement "DOM/HTMLIFrameElement")), automatically removing it after the user prints its contents. The following is a possible example which will print a file named `externalPage.html`:
+
+```html
+
+
+
+
+MDN Example
+
+
+
+
+  
Print external page!

+
+
+```
+
+> **Nota:** Older versions of Internet Explorer cannot print the contents of a hidden {{HTMLElement("iframe")}}.
+
+## Veja também
+
+- [`window.print`](/pt-BR/docs/DOM/window.print "DOM/window.print")
+- [`window.onbeforeprint`](/pt-BR/docs/DOM/window.onbeforeprint "DOM/window.onbeforeprint")
+- [`window.onafterprint`](/pt-BR/docs/DOM/window.onafterprint "DOM/window.onafterprint")
+- [Media queries](/pt-BR/docs/CSS/Media_queries "CSS/Media queries")
+- {{cssxref("@media")}}