initial commit

14 files changed, 1936 insertions, 0 deletions

diff --git a/files/pt-br/learn/common_questions/como_a_internet_funciona/index.html b/files/pt-br/learn/common_questions/como_a_internet_funciona/index.html
new file mode 100644
index 0000000000..6bc88ac21f
--- /dev/null
+++ b/files/pt-br/learn/common_questions/como_a_internet_funciona/index.html
@@ -0,0 +1,102 @@
+---
+title: Como a Internet funciona?
+slug: Learn/Common_questions/Como_a_internet_funciona
+tags:
+  - Iniciante
+  - Mecanismos Web
+  - Tutorial
+  - Web
+translation_of: Learn/Common_questions/How_does_the_Internet_work
+---
+<div class="summary">
+<p>Este artigo discute sobre o que é e como funciona a internet.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Nenhum, mas encorajamos a ler primeiro <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/Pensando_antes_de_codificar">Pensando antes de codificar</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Você irá aprender o básico da infraestrutura técnica da Web e a diferença entre Internet e Web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>A <strong>Internet</strong> é a espinha dorsal da Web, a infraestrutura técnica que faz a Web possível. Mas basicamente, a Internet é uma gigantesca rede de computadores que se comunicam juntos.</p>
+
+<p><a href="https://pt.wikipedia.org/wiki/Internet#Hist.C3.B3ria" rel="external">A história da internet é um pouco obscura</a>. Ela começou nos anos 60 como um projeto de pesquisa consolidado pelo exército norte americano, e tornou-se uma infraestrutura pública nos anos 80 com o suporte dado por diversas universidades públicas e companias privadas. As várias tecnologias que suportam a internet se acoplaram através do tempo, mas a forma de funcionamento não mudou muito: Internet é uma forma de conectar computadores e garantir, em qualquer situação, que eles encontrem uma forma de se manter conectados.</p>
+
+<h2 id="Aprendizado_ativo">Aprendizado ativo</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">Como a Internet funciona em 5 minutos</a> (em inglês): Um vídeo de 5 minutos para entender os conceitos básicos da Internet feito por Aaron Titus.</li>
+</ul>
+
+<h2 id="Mergulho_profundo">Mergulho profundo</h2>
+
+<h3 id="Uma_rede_simples">Uma rede simples</h3>
+
+<p>Quando dois computadores precisam se comunicar, você precisa conectá-los, seja fisicamente (normalmente com um <a href="https://pt.wikipedia.org/wiki/Cabo_de_par_tran%C3%A7ado">Cabo de rede</a>) ou de uma forma sem fio (por exemplo com sistemas <a href="https://pt.wikipedia.org/wiki/Wi-Fi">WiFi</a> ou <a href="https://pt.wikipedia.org/wiki/Bluetooth">Bluetooth</a>). Todos os computadores modernos suportam alguma(s) dessas conexões.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Até o final deste artigo nós estaremos falando apenas a respeito de cabos físicos, mas redes sem fio funcionam da mesma forma</p>
+</div>
+
+<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p>
+
+<p>Uma rede não é limitada a dois computadores. Você pode conectar quantos computadores desejar. Mas isto se torna complicado. Se você está tentando conectar, digamos, dez computadores você irá precisar de 45 cabos, com 9 conexões por computador.</p>
+
+
+
+<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p>
+
+<p>Para resolver este problema, cada computador na rede está conectado à um pequeno computador especial chamado de <em>roteador</em>. Este <em>roteador </em>tem um único trabalho: como um sinalizador em uma estação de trem, ter certeza de que a mensagem enviada por um determinado computador chege ao computador destinatário corretamente. Para enviar uma mensagem para o computador B, o computador A deve enviar a mensagem para o roteador, que por sua vez encaminha a mensagem para o computador B e tem a certeza de que a mensagem não foi entregue ao computador C.</p>
+
+<p>Uma vez que nós adicionamos um roteador no sistema, nossa rede de 10 computadores apenas necessitará de 10 cabos: uma unica conexão para cada computador e um roteador com 10 conexões.</p>
+
+<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p>
+
+<h3 id="Uma_rede_de_redes">Uma rede de redes</h3>
+
+<p>Por enquanto, tudo bem. Mas como conectar centenas, milhares, bilhões de computadores? Claro que um unico roteador não pode se adaptar para tanto, mas, se você ler com cuidado, nós dissemos que um roteador é um computador como qualquer outro, então o que nos impede de conectar dois roteadores juntos? Nada, então façamos isto.</p>
+
+<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p>
+
+<p>Conectando computadores a roteadores, e então roteadores a roteadores, nós podemos escalar nossa rede infinitamente.</p>
+
+<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p>
+
+<p>Esta rede é muito parecida com o que chamamos de Internet, mas alguma coisa está faltando. Nós contruímos tais redes para nossos próprios fins. Existem outras redes além das nossas ligadas em outros lugares: nossos amigos, vizinhos, qualquer pessoa que tenha uma rede de computadores. Mas é inviável ligarmos cabos entre nossas casas e o resto do mundo, então como nos podemos lidar com isso? Muito bem, já existem cabos ligados a sua casa, como por exemplo, cabos de eletricidade e telefone. A estrutura do telefone já conecta nossa casa com o resto do mundo. Para conectar nossa rede a rede telefonica, precisamos de um equipamento especial chamado <em>modem.</em> Este <em>modem </em>transforma a informação da nossa rede em uma informação gerenciavel pela rede telefonica e vice-versa.</p>
+
+<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p>
+
+<p>Então nós estamos conectados à infraestrutuca telefônica. O próximo passo é enviar mensagens da nossa rede para a rede que nós desejamos alcançar. Para fazer isto, vamos precisar conectar nossa rede a um Provedor de Serviço de Internet (ISP, em inglês). Um ISP é uma compania que gerencia alguns roteadores especiais que são conectados e pode também acessar roteadores de outros ISPs. Então a mensagem da nossa rede é transportada para a rede de redes do ISP e então para a rede de destino. A Internet é composta por toda esta infraestrutura de redes.</p>
+
+<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p>
+
+<h3 id="Encontrando_computadores">Encontrando computadores</h3>
+
+<p>Se você quer enviar uma mensagem para um computador, você precisa especificar qual é este computador. Por isso, qualquer computador conectado à uma rede possui um único endereço de identificação, chamado de "Endereço IP" (onde IP, do inglês <em>Internet Protocol</em>, significa Protocolo de Internet). Este é um endereço composto por uma série de 4 números separados por pontos, por exemplo: 192.168.2.10.</p>
+
+<p>Isto é perfeito para computadores, mas nós seres humanos temos dificuldades para lembrar estes endereços. Para tornar as coisas mais fáceis, nós podemos dar apelidos aos endereços IP que nós humanos podemos compreender, chamados <em>nome de domínio</em>. Por exemplo, google.com é um nome de domínio usado para "apelidar" o endereço 173.194.121.32. Então, usando o nome de domínio é uma forma mais simples de encontrar um computador na Internet.</p>
+
+<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+
+<h3 id="A_Internet_e_a_Web">A Internet e a Web</h3>
+
+<p>Como você deve ter notado, quando navegamos na Web com nossos navegadores, normalmente utilizamos os nomes de domínios para chegar a um website. Isto significa que a Internet e a Web são a mesma coisa? Não tão simples assim. Como vimos, a Internet é uma infraestrutura técnica que permite conectar bilhões de computadores. Entre estes computadores, alguns computadores (chamados de servidores Web) podem enviar mensagens intelegíveis para navegadores Web. A Internet é a infraestrutura, enquanto a Web é um serviço construído sob esta infraestrutura. Vale a pena notar que existem diversos outros serviços que funcionam na Internet, tais como email e {{Glossary("IRC")}}.</p>
+
+<p>Noções básicas sobre nomes de domínio</p>
+
+<h2 id="Próximos_passos">Próximos passos</h2>
+
+<ul>
+ <li><a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a Web funciona</a></li>
+ <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Entendendo a diferença entre uma página web, um website, um servidor web e um mecânismo de pesquisa</a></li>
+ <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/What_is_a_domain_name">Entendendo nomes de domínio</a></li>
+</ul>
diff --git a/files/pt-br/learn/common_questions/como_configurar_um_servidor_de_testes_local/index.html b/files/pt-br/learn/common_questions/como_configurar_um_servidor_de_testes_local/index.html
new file mode 100644
index 0000000000..83b4f50a41
--- /dev/null
+++ b/files/pt-br/learn/common_questions/como_configurar_um_servidor_de_testes_local/index.html
@@ -0,0 +1,112 @@
+---
+title: Como configurar um servidor de testes local
+slug: Learn/Common_questions/Como_configurar_um_servidor_de_testes_local
+tags:
+  - Aprender
+  - Express
+  - Flask
+  - Iniciante
+  - Node
+  - PHP
+  - Python
+  - django
+  - lamp
+  - servidores
+translation_of: Learn/Common_questions/set_up_a_local_testing_server
+---
+<div class="summary">
+<p>Este artigo explica como configurar um simples servidor de testes local em seu computador e o básico para utiliza-lo.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>
+    <p>Primeiro você precisa saber <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/Como_a_internet_funciona">como a internet funciona</a> e <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/o_que_e_um_web_server">o que é um servidor Web</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Você vai aprender como configurar um servidor de testes local.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Arquivos_locais_vs._arquivos_remotos">Arquivos locais vs. arquivos remotos</h2>
+
+<p>Ao longo da maior parte da área de aprendizagem, nós lhe dissemos apenas para abrir seus exemplos diretamente no navegador  —  Isto pode ser feito atráves de um duplo clique no arquivo HTML, arrastando e soltando o arquivo na janela do navegador ou escolhendo Arquivo &gt; Abrir<em>...</em> e navegando para o arquivo HTML. Existem muitas maneiras de realizar isso.</p>
+
+<p>Se o caminho do endereço web começa com <code>file://</code> seguido pelo caminho para o arquivo no seu disco rígido local, um arquivo local está sendo utilizado. No entanto, se você ver um dos nossos exemplos hospedado no GitHub (ou um exemplo em algum outro servidor remoto), o enderço web começará com <code>http://</code> ou <code>https://</code>, para mostrar que o arquivo foi recebido via HTTP.</p>
+
+<h2 id="O_problema_com_o_teste_de_arquivos_locais">O problema com o teste de arquivos locais</h2>
+
+<p>Alguns exemplos não serão executados se você os abrir como arquivos locais. Isto pode ser devido a uma série de razões, sendo o mais provável:</p>
+
+<ul>
+ <li><strong>Eles apresentam requisições assíncronas</strong>. Alguns navegadores (incluindo o Chrome) não executarão requisições assíncronas (consulte <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Client-side_web_APIs/Buscando_dados">Buscando dados no servidor</a>) se você simplesmente executar o exemplo de um arquivo local. Isso ocorre devido a restrições de segurança (para mais informações sobre segurança na web, leia <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Server-side/First_steps/Seguranca_site">Segurança do site</a>).</li>
+ <li><strong>Eles apresentam uma linguagem do site do servidor</strong>. Linguagens do lado do servidor (como PHP ou Python) requerem um servidor especial para interpretar o código e entregar os resultados.</li>
+</ul>
+
+<h2 id="Executando_um_servidor_HTTP_local_simples">Executando um servidor HTTP local simples</h2>
+
+<p>Para contornar o problema de requisições assíncronas, precisamos testar esses exemplos executando-os através de um servidor web local. Uma das maneiras mais fáceis de fazer isso para nossos propósitos é usar o módulo <code>SimpleHTTPServer</code> do Python.</p>
+
+<p>Para fazer isso:</p>
+
+<ol>
+ <li>
+  <p>Instale o Python. Se você estiver usando Linux ou macOS, ele já deverá estár disponível em seu sistema. Se você é um usuário do Windows, pode obter um instalador na página inicial do Python e seguir as instruções para instalá-lo:</p>
+
+  <ul>
+   <li>Vá para <a href="https://www.python.org/">python.org</a> (em inglês)</li>
+   <li>Na seção Download, clique no link para Python "3.xxx".</li>
+   <li>Na parte inferior da página, escolha o instalador executável do <em>Windows x86 </em>e baixe-o.</li>
+   <li>Quando tiver baixado, execute-o.</li>
+   <li>Na primeira página do instalador, certifique-se de marcar a caixa de seleção "Adicionar Python 3.xxx ao PATH".</li>
+   <li>Clique em <em>Instalar</em> e então, clique em <em>Fechar</em> quando a instalação terminar.</li>
+  </ul>
+ </li>
+ <li>
+  <p>Abra seu prompt de comando (Windows)/ terminal (macOS/ Linux). Para verificar se o Python está instalado, digite o seguinte comando:</p>
+
+  <pre class="brush: bash">python -V</pre>
+ </li>
+ <li>
+  <p>Isso deve retornar um número de versão. Se estiver tudo OK, navegue até o diretório em que seu exemplo está dentro, usando o comando <code>cd</code>.</p>
+
+  <pre class="brush: bash"># incluir o nome do diretório para entrar, por exemplo
+cd Desktop
+# use dois pontos para voltar um nível de diretório se você precisar
+cd ..</pre>
+ </li>
+ <li>
+  <p>Digite o comando para inicializar o servidor nesse diretório:</p>
+
+  <pre class="brush: bash"># Se a versão do Python retornada acima for 3.X
+python3 -m http.server
+# No windows, tente "python" em vez de "python3"
+# Se a versão do Python retornada acima for 2.X
+python -m <code>SimpleHTTPServer</code></pre>
+ </li>
+ <li>
+  <p>Por padrão, isso executará o conteúdo do diretório em um servidor web local, na porta 8000. Você pode ir para esse servidor acessando a URL <code>localhost:8000</code> no seu navegador web. Aqui você verá o conteúdo do diretório listado — clique no arquivo HTML que você deseja executar.</p>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Se você já tiver algo em execução na porta 8000, você poderá escolher outra porta executando o comando do servidor seguido por um número de porta alternativo, por exemplo <code>python3 -m http.server 7800</code> (Python 3.x) ou <code>python -m SimpleHTTPServer 7800</code> (Python 2.x). Você pode acessar seu conteúdo em <code>localhost:7800</code>.</p>
+</div>
+
+<h2 id="Executando_linguagens_do_lado_do_servidor_localmente">Executando linguagens do lado do servidor localmente</h2>
+
+<p>Os módulos <code>SimpleHTTPServer (python 2.0)</code> e <code>http.server (python 3.0)</code> do Python são úteis, mas não sabem como executar código escrito em linguagens como Python, PHP ou JavaScript. Para lidar com isso, você precisará de algo mais — exatamente o que você precisa depende da linguagem do lado do servidor que você está tentando executar. Aqui estão alguns exemplos:</p>
+
+<ul>
+ <li>Para executar o código Python no lado do servidor, você precisará usar um framework web em Python. Você pode descobrir como usar o framework Django lendo <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>. O <a href="http://flask.pocoo.org/">Flask</a> (em inglês) também é uma boa alternativa ao Django (um pouco menos pesada). Para executar isso, você precisará <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">instalar o Python/PIP</a> e em seguida, instalar o Flask usando <code>pip3 install flask</code>. Neste ponto, você deve ser capaz de executar os exemplos em Python com Flask usando, por exemplo <code>python3 python-example.py</code> e em seguida acessar <code>localhost:5000</code> no seu navegador.</li>
+ <li>Para executar o código Node.js (JavaScript) no lado do servidor, você precisará usar o nó bruto ou uma estrutura construída sobre ele. Express é uma boa escolha — veja <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>.</li>
+ <li>Para executar o código PHP no lado do servidor, inicie o <a href="https://www.php.net/manual/pt_BR/features.commandline.webserver.php">servidor de desenvolvimento interno do PHP</a>:</li>
+</ul>
+
+<pre class="shellcode">$ cd path/to/your/php/code
+$ php -S localhost:8000</pre>
diff --git a/files/pt-br/learn/common_questions/como_voce_hospeda_seu_site_google_app_engine/index.html b/files/pt-br/learn/common_questions/como_voce_hospeda_seu_site_google_app_engine/index.html
new file mode 100644
index 0000000000..762169926c
--- /dev/null
+++ b/files/pt-br/learn/common_questions/como_voce_hospeda_seu_site_google_app_engine/index.html
@@ -0,0 +1,61 @@
+---
+title: Como você hospeda seu site no Google App Engine?
+slug: Learn/Common_questions/Como_voce_hospeda_seu_site_Google_App_Engine
+translation_of: Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine
+---
+<p class="summary"><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web &amp; Mobile Backends in Any Language  |  Google Cloud">Google App Engine</a> é uma plataforma poderosa que lhe permite construir e rodar aplicações na infraestrutura do Google —  se você precisa criar um aplicativo da web de várias camadas do zero ou hospedar um site estático. Aqui está um guia passo a passo para hospedar seu site no Google App Engine.</p>
+
+<h2 id="Criando_um_projeto_na_plataforma_do_Google_Cloud">Criando um projeto na plataforma do Google Cloud</h2>
+
+<p>Para usar as ferramentas do Google em seu próprio site ou aplicativo, você precisa criar um novo projeto no Google Cloud Platform. Isso requer ter uma conta do Google.</p>
+
+<ol>
+ <li>Vá para o <a href="https://console.cloud.google.com/projectselector/appengine">App Engine dashboard</a> no Google Cloud Platform e apert o botão <em>Create</em> (Criar).</li>
+ <li>Se você não criou um projeto antes, precisará selecionar se deseja receber atualizações por email ou não, concordar com os Termos de Serviço e, em seguida, poderá continuar.</li>
+ <li>Digite um nome para o projeto, edite a ID do seu projeto e anote-a. Para este tutorial, os seguintes valores são usados
+  <ul>
+   <li>Nome do projeto: <em>GAE Sample Site</em></li>
+   <li>ID do Projeto: <em>gaesamplesite</em></li>
+  </ul>
+ </li>
+ <li>Clique no botão <em>Create</em> para criar o seu projeto.</li>
+</ol>
+
+<h2 id="Criando_uma_aplicação">Criando uma aplicação</h2>
+
+<p>Cada projeto do Cloud Platform pode conter um aplicativo do App Engine. Vamos preparar um aplicativo para o nosso projeto.</p>
+
+<ol>
+ <li>Precisamos de um aplicativo de amostra para publicar. Se você não tiver um para usar, faça o download e descompacte este <a href="http://gaesamplesite.appspot.com/downloads.html">aplicativo de exemplo</a>.</li>
+ <li> Dê uma olhada na estrutura da aplicação padrão — A pasta <code>website</code> contem o conteúdo do seu website e <code>app.yaml</code> é o seu arquivo de configuração da aplicação.
+  <ul>
+   <li>O conteúdo do seu website deve ser posto dentro da pasta <code>website</code>, e sua página de destino deve ser denominada  <code>index.html</code>, mas fora isso ela pode conter qualquer coisa que você desejar.</li>
+   <li>O arquivo <code>app.yaml</code> é um arquivo de configuração que fala ao App Engine como mapear URLs para os seus arquivos estáticos. Você não precisa editá-lo.</li>
+  </ul>
+ </li>
+</ol>
+
+<h2 id="Puplicando_sua_aplicação">Puplicando sua aplicação</h2>
+
+<p>Agora que nós temos o nosso projeto pronto e arquivos padrões de aplicativo colocados juntos, vamos publicar nosso app.</p>
+
+<ol>
+ <li>Abra o <a href="https://console.cloud.google.com/cloudshell/editor">Google Cloud Shell</a>.</li>
+ <li>Arraste e solte a pasta <code>sample-app</code> dentro do painel esquerdo do editor de código.</li>
+ <li>Rode a seguinte linha de comando dentro para selecionar seu projeto:
+  <pre class="brush:bash no-line-numbers" style="margin: 1em 0;">gcloud config set project <em>gaesamplesite</em></pre>
+ </li>
+ <li>Logo após rode o seguinte comando para ir ao diretório do seu app:
+  <pre class="brush:bash no-line-numbers" style="margin: 1em 0;">cd <em>sample-app</em></pre>
+ </li>
+ <li>Você agora está pronto para armazenar sua aplicação, i.e. fazer o upload para o App Engine:
+  <pre class="brush:bash no-line-numbers" style="margin: 1em 0;">gcloud app deploy</pre>
+ </li>
+ <li>Digite um número para escolher a região onde você quer que sua aplicação se localize.</li>
+ <li>Digite <code>Y</code> para confirmar.</li>
+ <li>Agora navegue no seu navegador para <em>your-project-id</em>.appspot.com to para ver seu website online. Por exemplo, para a ID do projeto <em>gaesamplesite</em>, vá para <a href="http://gaesamplesite.appspot.com/"><em>gaesamplesite</em>.appspot.com</a>.</li>
+</ol>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<p>Para aprender mais, veja <a href="https://cloud.google.com/appengine/docs/">Google App Engine Documentation</a>.</p>
diff --git a/files/pt-br/learn/common_questions/ferramentas_de_desenvolvimento_do_navegador/index.html b/files/pt-br/learn/common_questions/ferramentas_de_desenvolvimento_do_navegador/index.html
new file mode 100644
index 0000000000..80df8f9ddf
--- /dev/null
+++ b/files/pt-br/learn/common_questions/ferramentas_de_desenvolvimento_do_navegador/index.html
@@ -0,0 +1,221 @@
+---
+title: O que são as ferramentas de desenvolvimento do navegador
+slug: Learn/Common_questions/ferramentas_de_desenvolvimento_do_navegador
+translation_of: Learn/Common_questions/What_are_browser_developer_tools
+---
+<div>{{IncludeSubnav("/en-US/Learn")}}</div>
+
+<div class="summary">
+<p>Todo navegador web moderno inclui um poderoso conjunto de ferramentas para desenvolvedores. Essas ferramentas fazem muitas coisas, desde inspecionar o HTML, CSS e JavaScript recém carregado e quais recursos foram requeridos até mostrar quanto tempo a página precisou para carregar. Este artigo explica como usar as funções básicas das ferramentas para desenvolvedores do seu navegador.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: Antes de você executar os exemplos abaixo, abra o <a href="http://mdn.github.io/beginner-html-site-scripted/">Beginner's example site</a> (site de exemplos do iniciante) que nós criamos durante o início da série de artigos da Web ( <a href="/en-US/Learn/Getting_started_with_the_web">Getting started with the Web</a> ). Você poderá abrir isso enquanto segue os passos abaixo.</p>
+</div>
+
+<h2 id="Como_abrir_o_devtools_no_seu_navegador">Como abrir o devtools no seu navegador</h2>
+
+<p>O devtools está inserido no navegador em uma janela semelhante a esta:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9561/Screenshot%20from%202014-11-25%2012:32:57.png" style="display: block; height: 625px; margin: 0px auto; width: 775px;"></p>
+
+<p>Como você acessa? Três modos:</p>
+
+<ul>
+ <li><em><strong>Teclado.</strong></em> <em><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></em>, exceto:
+
+  <ul>
+   <li><strong>Internet Explorer.<kbd> </kbd></strong><em><kbd>F12</kbd> </em></li>
+   <li><strong>Mac OS X. </strong><em><span class="Unicode"><kbd>⌘</kbd> + <kbd>⌥</kbd> +<kbd> I</kbd> </span></em></li>
+  </ul>
+ </li>
+ <li><span class="Unicode"><em><strong>Menu bar. </strong></em></span>
+  <ul>
+   <li><strong>Firefox. </strong>Menu <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> <span class="Unicode"><em><span class="Unicode">➤ <img alt="" src="https://mdn.mozillademos.org/files/9639/Screenshot%20from%202014-11-26%2014:24:56.png" style="height: 40px; width: 45px;"></span></em><em><span class="Unicode">➤ Toggle Tools, </span></em><span class="Unicode">or </span><em>Tools ➤</em></span><em> Web Developer ➤ Toggle Tools</em></li>
+   <li><strong>Chrome.</strong> <em><span class="Unicode">View ➤</span> Developer ➤ Developer Tools</em></li>
+   <li><strong>Safari.</strong> <em><span class="Unicode">Develop ➤</span> Show Web Inspector.</em> Se você não consegue ver o <em>menu Desenvolvedor</em> , vá para <em>Safari<span class="Unicode"> ➤</span> Preferências ➤ Avançado</em> e confira o <em>Show Develop menu no menu bar</em> checkbox. </li>
+   <li><strong>Opera</strong>. <em><span class="Unicode">Developer ➤</span> Web Inspector</em></li>
+  </ul>
+ </li>
+ <li><strong><em>Context menu.</em></strong> Pressione-e-segure/botão-direito no item da webpage (Ctrl-click on the Mac), e escolha <em>Inspect Element no</em> menu de contexto que aparece. (<em>An added bonus: </em>this method straight-away highlights the code of the element you right-clicked.)</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9605/inspect-element-option.png" style="display: block; height: 264px; margin: 0px auto; width: 350px;"></p>
+
+<h2 id="O_Inspetor_DOM_explorer_e_editor_CSS">O Inspetor: DOM explorer e editor CSS</h2>
+
+<p>O devtools usualmente abre por padrão o inspetor, que se parece com a  imagem abaixo. Esta ferramenta permite que você veja o resultado do  HTML  num site em execução, bem como o CSS aplicado en cada elemento na página.  Ele também lhe mostra as mudanças efetuadas no HTML e CSS e os resultados são produzidos imediatamente, ao vivo, na janela do navegador.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9607/inspector.png" style="display: block; height: 727px; margin: 0px auto; width: 800px;"></p>
+
+<p>Se você não vê o inspector,</p>
+
+<ul>
+ <li>Clique a aba <em>Inspetor.</em></li>
+ <li>No Internet Explorer, Clique a aba <em>DOM Explorer, </em>ou pressione <kbd>Ctrl</kbd> +<kbd> 1</kbd>.</li>
+ <li>No Safari, os controles não são apresentados claramente, mas você poderia ver se não tiver selecionado algo para aparecerna janela.  Pressione o botão <em>Style para ver o</em> CSS.</li>
+</ul>
+
+<h3 id="Explore_o_inspector_DOM">Explore o inspector DOM</h3>
+
+<p>Para começar tente pressionar o botão direito do mouse sobre um elemento HTML no inspetor do DOM e olhe para o menu de contexto. As opções do menu variam nos navegadores, mas os mais importantes são os mesmos.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9609/dev-tool-context-menu.png" style="display: block; height: 236px; margin: 0px auto; width: 200px;"></p>
+
+<ul>
+ <li><strong>Delete Node</strong> (às vezes Delete<em> Element</em>). Exclui o elemento atual.</li>
+ <li><strong>Edit as HTML</strong> (às vezes <em>Add attribute</em>/<em>Edit text</em>). Permite alterar o HTML e ver os resultados na hora. Muito útil para depuração e teste.</li>
+ <li><strong>:hover/:active/:focus</strong>. Força os estados dos elementos a serem alternados, para que você possa ver como seria seu estilo.</li>
+ <li><strong>Copy/Copy as HTML</strong>. Copia o HTML atualmente selecionado.</li>
+ <li>Alguns navegadores também têm Copy CSS Path e Copy XPath available, para permitir que você copie o seletor CSS ou a expressão XPath que selecionaria o elemento HTML atual.</li>
+</ul>
+
+<p>Tente editar alguns dos seus DOM agora. Clique duas vezes em um elemento ou clique com o botão direito do mouse e escolha Editar como HTML no menu de contexto. Você pode fazer alterações que quiser, mas não pode salvar suas alterações.</p>
+
+<h3 id="Explorando_o_editor_de_CSS">Explorando o editor de CSS</h3>
+
+<p>Por padrão, o editor CSS exibe as regras CSS aplicadas ao elemento atualmente selecionado:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9631/css-viewer-2.png" style="border: 1px solid black; display: block; height: 218px; margin: 0px auto; width: 326px;"></p>
+
+<p>Esses recursos são especialmente úteis:</p>
+
+<ul>
+ <li>As regras aplicadas ao elemento atual são mostradas em ordem de mais específicas.</li>
+ <li>Clique nas caixas de seleção ao lado de cada declaração para ver o que aconteceria se você removesse a declaração.</li>
+ <li>Clique na pequena seta ao lado de cada propriedade abreviada para mostrar os equivalentes de longhand da propriedade.</li>
+ <li>Clique no nome ou no valor de uma propriedade para exibir uma caixa de texto, na qual você pode digitar um novo valor para obter uma visualização ao vivo de uma alteração de estilo.</li>
+ <li>Ao lado de cada regra está o nome do arquivo e o número da linha em que a regra está definida. Clicar nessa regra faz com que as ferramentas dev pularem para mostrá-la em sua própria visão, onde geralmente podem ser editadas e salvas.</li>
+ <li>Você também pode clicar na chave de fechamento de qualquer regra para abrir uma caixa de texto em uma nova linha, onde você pode escrever uma declaração completamente nova para a sua página.</li>
+</ul>
+
+<p>Você notará várias guias clicáveis na parte superior do Visualizador de CSS:</p>
+
+<ul>
+ <li><em>Computed</em>: Isso mostra os estilos calculados para o elemento atualmente selecionado (os valores finais normalizados que o navegador aplica).</li>
+ <li><em>Box model</em>: Isso representa visualmente o modelo de caixa do elemento atual, para que você possa ver rapidamente o preenchimento, a borda e a margem aplicados a ele e o tamanho do conteúdo.</li>
+ <li><em>Fonts</em>: No Firefox, a guia Fontes mostra as fontes aplicadas ao elemento atual.</li>
+</ul>
+
+<h3 id="Descubra_mais">Descubra mais</h3>
+
+<p>Descubra mais sobre o Inspetor em diferentes navegadores:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Inspetor de páginas do Firefox</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255008%28v=vs.85%29.aspx">IE DOM Explorer</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/dom-and-styles">Chrome DOM inspector</a> (Inspetor da Opera funciona da mesma forma)</li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1">Inspetor do Safari DOM e explorador de estilo</a></li>
+</ul>
+
+<h2 id="O_depurador_JavaScript">O depurador JavaScript</h2>
+
+<p>O depurador Javascript permite a visualização dos conteúdos das variáveis e a configuração dos pontos de paradas(breakpoints) no código. Breakpoints  são marcadores de linha para analisar a execução do código. A identificação previne problemas.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16239/firefox_debugger.png" style="border: 1px solid black; display: block; height: 556px; margin: 0 auto; width: 672px;"></p>
+
+<p>Para acessar o (debugger)depurador:</p>
+
+<p><strong>Firefox</strong>: Clique<img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> ➤ <em>Web Developer</em> ➤ <em>Debugger</em> ou pelo atalho <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd> para abrir o Debugger Javascript.  Se a ferramenta já estiver vísivel, clique na aba <strong>Debugger</strong>.</p>
+
+<p><strong>Chrome</strong>: Abra as ferramentas de desenvolvimento e selecione a aba Fontes(<strong>Sources)</strong>. (Opera funciona igualmente).</p>
+
+<p><strong>Edge e Internet Explorer 11</strong>: Aperte <kbd>F12</kbd> então, <kbd>Ctrl</kbd> + <kbd>3</kbd>, ou se a ferramenta já estiver visível, clique na aba Debugger(depurador).</p>
+
+<p><strong>Safari</strong>: Abra  as ferramentas de desenvolvedor e então selecione a aba Debugger(depurador).</p>
+
+<h3 id="Explorando_o_depurador">Explorando o depurador</h3>
+
+<p>Há três painéis no Depurador(debugger) no Firefox</p>
+
+<h4 id="Lista_de_Arquivos">Lista de Arquivos</h4>
+
+<p>O primeiro painel na parte esquerda contém uma lista de arquivos associado com a página que está sendo depurada(debugging). Selecione o arquivo da seleção. Clique no arquivo para selecionar e visualizar os conteúdos no painel central do Debugger.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16240/File_List.png" style="border: 1px solid black; display: block; height: 326px; margin: 0 auto; width: 350px;"></p>
+
+<h4 id="Código_fonte">Código fonte</h4>
+
+<p>Insira os pontos de parada (breakpoints) onde deseja que a execução pare. Na imagem abaixo, a linha selecionada é a 18 na qual tem um ponto de parada (breakpoint).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16241/Source_code.png" style="border: 1px solid black; display: block; height: 251px; margin: 0 auto; width: 400px;"></p>
+
+<h4 id="Veja_as_expressões_e_pontos_de_paradas">Veja as expressões e pontos de paradas</h4>
+
+<p>À direita do painel é exibida uma lista de expressões e pontos de paradas adicionadas.</p>
+
+<p>Na imagem, na primeira seção,  <strong>Watch expressions</strong>, mostra a lista de itens e variáveis que foram adicionadas.  Expanda a lista para visualizar os valores no vetor. </p>
+
+<p>Na próxima seção, <strong>Pontos de paradas</strong>, lista os pontos de paradas na página. No arquivo  example.js, um breakpoint foi adicionado <code>listItems.push(inputNewItem.value);</code></p>
+
+<p>As duas seções finais aparecem somente quando o código está executando.</p>
+
+<p>A seção <strong>Call stack</strong> (chamada na pilha) mostra que o código foi executado para a linha atual. A função manuseia o clique do mouse e o código está pausado no ponto de parada (breakpoint).</p>
+
+<p>A seção final, <strong>Scopes(escopos)</strong>, mostra os valores visíveis em vários pontos no código. Por exemplo, na imagem abaixo, os objetos disponíveis estão na função addItemClick.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16242/watch_items.png" style="border: 1px solid black; display: block; height: 743px; width: 350px;"></p>
+
+<h2 id="O_console_JavaScript">O console JavaScript</h2>
+
+<p>O console JavaScript é uma ferramenta incrivelmente útil para depurar códigos  em JavaScript que não está funcionando como o esperado. Ele permite que você execute linhas de JavaScript enquanto a página é carregada no navegador e relata os erros encontrados enquanto o navegador tenta executar o código.</p>
+
+<p>Para acessar o console basta abrir ferramentas de desenvolvimentos e escolher a aba Console.</p>
+
+<p>No Firefox o atalho é <kbd>ctrl</kbd> + <kbd>shift</kbd>+ <kbd>k</kbd> ou no menu comando:  <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> <span class="Unicode"><em><span class="Unicode">➤ Web Developer </span></em><em><span class="Unicode">➤ Web Console, </span></em><span class="Unicode">or </span><em>Tools ➤</em></span><em> Web Developer ➤ Web Console.</em></p>
+
+<p>Aparecerá uma janela como a seguinte:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9541/console.png" style="border: 1px solid black; display: block; height: 249px; margin: 0px auto; width: 821px;"></p>
+
+<p>Para ver o que acontece, tente inserir os seguintes trechos de código no console, um por um (e, em seguida, pressione Enter):</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">alert('hello!');</pre>
+ </li>
+ <li>
+  <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'purple';</pre>
+ </li>
+ <li>
+  <pre class="brush: js">var myImage = document.createElement('img');
+myImage.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
+document.querySelector('h1').appendChild(myImage);</pre>
+ </li>
+</ol>
+
+<p>Agora, tente inserir as seguintes versões incorretas do código e veja o que você obtém.</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">alert('hello!);</pre>
+ </li>
+ <li>
+  <pre class="brush: js">document.cheeseSelector('html').style.backgroundColor = 'purple';</pre>
+ </li>
+ <li>
+  <pre class="brush: js">var myImage = document.createElement('img');
+myBanana.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
+document.querySelector('h1').appendChild(myImage);</pre>
+ </li>
+</ol>
+
+<p>Você começará a ver o tipo de erro que o navegador retorna. Muitas vezes, esses erros são bastante críticos, mas deve ser bem simples descobrir esses problemas!</p>
+
+<h3 id="Descubra_mais_2">Descubra mais</h3>
+
+<p>Descubra mais sobre o console JavaScript em diferentes navegadores:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Firefox Web Console</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255006%28v=vs.85%29.aspx">IE JavaScript console</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/console">Chrome JavaScript Console</a> (O inspetor do Ópera funciona da mesma forma)</li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1">Safari Console</a></li>
+</ul>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a></li>
+</ul>
diff --git a/files/pt-br/learn/common_questions/index.html b/files/pt-br/learn/common_questions/index.html
new file mode 100644
index 0000000000..87a576aa29
--- /dev/null
+++ b/files/pt-br/learn/common_questions/index.html
@@ -0,0 +1,125 @@
+---
+title: Questões comuns
+slug: Learn/Common_questions
+tags:
+  - Aprendendo
+  - Infraestrutura
+  - Internet
+  - NeedsTranslation
+  - TopicStub
+  - Web
+  - WebMechanics
+translation_of: Learn/Common_questions
+---
+<p class="summary">Esta sessão de Área de Aprendizado é voltada para dar respostas à questões comuns que possam surgir, que não necessariamente sejam parte do núcleo dos meios de aprendizado (ex. artigos sobre <a href="/en-US/docs/Learn/HTML">HTML</a> ou <a href="/en-US/docs/Learn/CSS">CSS</a>.) Estes artigos foram feitos para funcionar de forma independente.</p>
+
+<div>
+<h2 id="Questões_sobre_HTML_e_CSS">Questões sobre HTML e CSS</h2>
+
+<p>Leia <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a> (em inglês) e <a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a> (em inglês) para solução de problemas comuns com HTML/CSS.</p>
+</div>
+
+<h2 id="Como_a_Web_funciona">Como a Web funciona?</h2>
+
+<p>Esta seção cobre a mecânica da Web —questões relacionadas a conhecimentos gerais sobre o ecossistema da Web e como ele funciona.</p>
+
+<dl>
+ <dt>
+ <h3 id="Como_a_Internet_funciona"><a href="/pt-BR/docs/Learn/Common_questions/Como_a_internet_funciona">Como a Internet funciona?</a></h3>
+ </dt>
+ <dd>A <strong>Internet</strong> é a espinha dorsal da Web, a infraestrutura técnica que faz a Web possível. Mais basicamente, a Internet é uma gigantesca rede de computadores que se comunicam juntos. Este artigo discute o básico sobre o funcionamento da Internet.</dd>
+ <dt>
+ <h3 id="Qual_a_diferença_entre_webpage_website_web_server_and_search_engine"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Qual a diferença entre webpage, website, web server, and search engine?</a></h3>
+ </dt>
+ <dd>Nesse artigo nós descrevemos vários conceitos relaciona a Web: webpages, websites, Web servers, and search engines. Esses termos são frequentemente confundidos por iniciantes na web, ou são utizados de maneira incorreta. Vamos entender o que eles realmente significam!</dd>
+ <dt>
+ <h3 id="O_que_é_uma_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">O que é uma URL?</a></h3>
+ </dt>
+ <dd>Com {{Glossary("Hypertext")}} e {{Glossary("HTTP")}}, URL é um conceito-chave quando se trata da Internet. Ele é um mecanimos utilizado pelos {{Glossary("Navegador","navegadores")}} para recuperar qualquer recurso publicado na Web</dd>
+ <dt>
+ <h3 id="O_que_é_um_domain_name"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">O que é um domain name?</a></h3>
+ </dt>
+ <dd>Domain names eles são uma parte essencial para a infraestrutura da internet. Eles deixam o endereço legivel por humanos para qualquer Web server disponivel na internet.</dd>
+ <dt>
+ <h3 id="O_que_é_um_web_server"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">O que é um web server?</a></h3>
+ </dt>
+ <dd>O termo "Web server" pode se referir ao hardware ou ao software que serve sites para clientes na Web — ou ambos deles trabalhando juntos. Nesse artigo nós veremos como Web servers funcionam, e porque eles são importantes.</dd>
+ <dt>
+ <h3 id="O_que_são_hyperlinks"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">O que são hyperlinks?</a></h3>
+ </dt>
+ <dd>Nesse artigo, nós veremos do que são hypelinks e porque eles importam.</dd>
+</dl>
+
+<h2 id="Tools_and_setup">Tools and setup</h2>
+
+<p>Questions related to the tools/software you can use to build websites.</p>
+
+<dl>
+ <dt>
+ <h3 id="How_much_does_it_cost_to_do_something_on_the_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">How much does it cost to do something on the Web?</a></h3>
+ </dt>
+ <dd>When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay).</dd>
+ <dt>
+ <h3 id="What_software_do_I_need_to_build_a_website"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></h3>
+ </dt>
+ <dd>In this article we explain which software components you need when you're editing, uploading, or viewing a website.</dd>
+ <dt>
+ <h3 id="What_text_editors_are_available"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">What text editors are available?</a></h3>
+ </dt>
+ <dd>In this article we highlight some things to think about when choosing and installing a text editor for web development.</dd>
+ <dt>
+ <h3 id="How_do_I_set_up_a_basic_working_environment"><a href="/en-US/docs/Learn/Common_questions/Set_up_a_basic_working_environment">How do I set up a basic working environment?</a></h3>
+ </dt>
+ <dd>When working on a web project, you'll want to test it locally before you show it to the world. Some types of code require a server to test, and in this article we'll show you how to set one up. We'll also cover how to put a scalable structure in place so that your files stay organized even when your project gets big.</dd>
+ <dt>
+ <h3 id="What_are_browser_developer_tools"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a></h3>
+ </dt>
+ <dd>Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.</dd>
+ <dt>
+ <h3 id="How_do_you_make_sure_your_website_works_properly"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">How do you make sure your website works properly?</a></h3>
+ </dt>
+ <dd>So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.</dd>
+ <dt>
+ <h3 id="How_do_you_upload_files_to_a_web_server"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></h3>
+ </dt>
+ <dd>This article shows how to publish your site online with <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> tools — one fo the most common ways to get a website online so others can access it from their computers.</dd>
+ <dt>
+ <h3 id="How_do_I_use_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">How do I use GitHub Pages?</a></h3>
+ </dt>
+ <dd>This article provides a basic guide to publishing content using GitHub's gh-pages feature.</dd>
+ <dt>
+ <h3 id="How_do_you_host_your_website_on_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></h3>
+ </dt>
+ <dd>Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.</dd>
+ <dt>
+ <h3 id="What_tools_are_available_to_debug_and_improve_website_performance"><a href="/en-US/docs/Tools/Performance">What tools are available to debug and improve website performance?</a></h3>
+ </dt>
+ <dd>This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.</dd>
+</dl>
+
+<h2 id="Design_and_accessibility">Design and accessibility</h2>
+
+<p>This section lists questions related to aesthetics, page structure, accessibility techniques, etc.</p>
+
+<dl>
+ <dt>
+ <h3 id="How_do_I_start_to_design_my_website"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">How do I start to design my website?</a></h3>
+ </dt>
+ <dd>This article covers the all-important first step of every project: define what you want to accomplish with it.</dd>
+ <dt>
+ <h3 id="What_do_common_web_layouts_contain"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">What do common web layouts contain?</a></h3>
+ </dt>
+ <dd>When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.</dd>
+ <dt>
+ <h3 id="What_is_accessibility"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">What is accessibility?</a></h3>
+ </dt>
+ <dd>This article introduces the basic concepts behind web accessibility.</dd>
+ <dt>
+ <h3 id="How_can_we_design_for_all_types_of_users"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">How can we design for all types of users?</a></h3>
+ </dt>
+ <dd>This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.</dd>
+ <dt>
+ <h3 id="What_HTML_features_promote_accessibility"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">What HTML features promote accessibility?</a></h3>
+ </dt>
+ <dd>This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.</dd>
+</dl>
diff --git a/files/pt-br/learn/common_questions/o_que_e_um_web_server/index.html b/files/pt-br/learn/common_questions/o_que_e_um_web_server/index.html
new file mode 100644
index 0000000000..f963103480
--- /dev/null
+++ b/files/pt-br/learn/common_questions/o_que_e_um_web_server/index.html
@@ -0,0 +1,121 @@
+---
+title: O que é um servidor web (web server)?
+slug: Learn/Common_questions/o_que_e_um_web_server
+tags:
+  - HTTP
+  - Infraestrutura
+  - Iniciante
+  - servidor web
+translation_of: Learn/Common_questions/What_is_a_web_server
+---
+<div class="summary">
+<p>Neste artigo vamos revisar o que são web servers, como eles funcionam, e por que eles são importantes.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Você deve saber <a href="/pt-BR/docs/Learn/Common_questions/Como_a_internet_funciona">como a Internet funciona</a> e <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">entender a diferença entre uma página web, um site, um servidor web e um mecanismo de busca</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Você irá aprender o que é um servidor web e compreender de modo geral como ele funciona.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>"Servidor web (<em>web server</em>)" pode referir ao hardware ou ao software, ou ambos trabalhando juntos.</p>
+
+<ol>
+ <li>Referente ao hardware, um servidor web é um computador que armazena arquivos que compõem os sites (por exemplo, documentos HTML, imagens, folhas de estilo, e arquivos JavaScript) e os entrega para o dispositivo do usuário final. Está conectado a Internet e pode ser acessado através do seu nome de domínio (DNS), como por exemplo <code>mozilla.org</code>.</li>
+ <li>Referente ao software, um servidor web inclui diversos componentes que controlam como os usuários acessam os arquivos hospedados (armazenados para disponibilização), no mínimo um <em>servidor HTTP. </em>Um servidor HTTP é um software que compreende {{Glossary("URL","URLs")}} (endereços web) e {{Glossary("HTTP")}} (o protocolo que seu navegador utiliza para visualizar páginas web.</li>
+</ol>
+
+<p>Em um nível mais básico, o navegador fará uma requisição utilizando o protocolo HTTP sempre que necessitar de um um arquivo hospedado em um servidor web. Quando a requisição alcançar o servidor web correto (hardware), o <em>servidor HTTP </em>(software) enviará o documento requerido, também via HTTP.</p>
+
+<p><img alt="Basic representation of a client/server connection through HTTP" src="https://mdn.mozillademos.org/files/8659/web-server.svg" style="height: 200px; width: 600px;"></p>
+
+<p>Para publicar um website, é necessário ou um servidor web estático ou um dinâmico.</p>
+
+<p>Um <strong>servidor web estático</strong> consiste em um computador (hardware) com um servidor HTTP (software). É chamado "estático" porque o servidor envia seus arquivos tal como foram criados e armazenados (hospedados) ao navegador.</p>
+
+<p>Um <strong>servidor web dinâmico</strong> consiste em um servidor web estático com software adicional, mais comumente um servidor de aplicações (<em>application server) </em>e um banco de dados (<em>database). </em>É chamado "dinâmico" porque o servidor de aplicações atualiza os arquivos hospedados antes de enviá-los ao navegador através do servidor HTTP.</p>
+
+<p>Por exemplo, para produzir as páginas finalizadas que você vê em seu navegador, o servidor de aplicações pode completar um modelo de página HTML (<em>HTML template</em>) com o conteúdo obtido de um banco de dados. Sites como o MDN ou a Wikipédia possuem vários milhares de páginas web, mas elas não são realmente documentos HTML, mas apenas alguns poucos <em>templates</em> HTML e uma gigantesca base de dados. Essa configuração agiliza e facilita o gerenciamento e a entrega do conteúdo.</p>
+
+<h2 id="Aprendizado_ativo">Aprendizado ativo</h2>
+
+<p><em>Ainda não há aprendizado ativo disponível. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Por favor, considere contribuir</a>.</em></p>
+
+<h2 id="Entrando_a_fundo">Entrando a  fundo</h2>
+
+<p>Para carregar uma página <em>web</em>, como já foi dito, seu <em>browser</em> envia uma requisição ao servidor <em>web</em>, que busca pelo arquivo requisitado no seu próprio espaço de armazenamento. Ao encontrar o arquivo, o servidor <em>web</em> realiza a leitura, faz os processamentos necessários e o envia ao <em>browser</em>. Vamos olhar mais detalhamente para essas etapas.</p>
+
+<h3 id="Servindo_arquivos">Servindo arquivos</h3>
+
+<p>Um servidor <em>web</em> precisa primeiro armazenar os arquivos dos <em>websites</em>, como todos os documentos HTML e seus <em>assets</em>, que incluem imagens, páginas de estilo CSS, arquivos JavaScript, fontes e vídeos.</p>
+
+<p>Técnicamente, você pode servir todos esses arquivos em seu próprio computador. Mas, é muito mais conveniente armazená-los em um servidor web dedicado que</p>
+
+<ul>
+ <li>está sempre "vivo" e rodando</li>
+ <li>está sempre conectado à Internet</li>
+ <li>tem o mesmo endereço IP sempre (nem todos {{Glossary("ISP", "ISPs")}} fornecem um endereço IP fixo para linhas domésticas)</li>
+ <li>é mantido por um provedor de terceiros</li>
+</ul>
+
+<p>Por todas essas razões, encontrar um bom provedor de servidores é a chave para criar seu próprio <em>website</em>.  Pesquise pelos vários serviços oferecidos e escolha aquele que melhor se alinha às suas necessidades e ao bolso (os serviçoes variam em uma faixa desde zero até milhares de dólares por mês). Você pode encontrar mais detalhes <a href="https://developer.mozilla.org/en-US/Learn/How_much_does_it_cost#Hosting">nesse artigo</a>.</p>
+
+<p>Uma vez que você escolheu uma solução de servidores web, você só precisa <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">fazer o <em>upload</em> dos seus arquivos para o servidor <em>web</em></a>.</p>
+
+<h3 id="Comunicando_através_do_HTTP">Comunicando através do HTTP</h3>
+
+<p>Segundo, um servidor web fornece suporte para {{Glossary("HTTP")}} (protocolo de transferência de hipertexto). Como o próprio nome indica, o HTTP especifica como transferir arquivos de hipertexto (ou seja, documentos vinculados da web) entre dois computadores.</p>
+
+<p>Um <em>protocolo </em>é um conjunto de regras para comunicação entre dois computadores. HTTP é um protocolo textual sem estado.</p>
+
+<dl>
+ <dt>Textual</dt>
+ <dd>Todos os comandos são de texto simples e legíveis por humanos.</dd>
+ <dt>Sem estado</dt>
+ <dd>Nem o servidor nem o cliente lembram de comunicações anteriores. Por exemplo, confiando apenas no HTTP, um servidor não consegue se lembrar de uma senha digitada ou da etapa em que você está em uma transação. Você precisa de um servidor de aplicativos para tarefas como essa. (Nós vamos cobrir esse tipo de tecnologia em mais artigos.)</dd>
+</dl>
+
+<p>O HTTP fornece regras claras sobre como um cliente e um servidor se comunicam. Abordaremos o próprio HTTP em um artigo técnico mais adiante. Por enquanto, apenas fique atento a estas coisas:</p>
+
+<ul>
+ <li>Somente <em>clientes </em>podem fazer requisições HTTP, e somente para <em>servidores. </em>Servidores podem apenas<em> responder</em> a uma requisição HTTP dos <em>clientes</em>.</li>
+ <li>Quando fizer a requisição de um arquivo via HTTP, os clientes devem fornecer a {{Glossary("URL")}} do arquivo.</li>
+ <li>O servidor web <em>deve responder </em>todas as requisições HTTP, mesmo que seja com uma mensagem de erro.</li>
+</ul>
+
+<p><a href="https://developer.mozilla.org/en-US/404"><img alt="The MDN 404 page as an example of such error page" src="https://mdn.mozillademos.org/files/8661/mdn-404.jpg" style="float: right; height: 300px; width: 300px;"></a>Em um servidor web, o servidor HTTP é responsável por processar e responder as requisições recebidas.</p>
+
+<ol>
+ <li>Ao receber uma requisição, um servidor HTTP primeiramente confirma se a URL requisitada corresponde ao arquivo existente.</li>
+ <li>Se confirmar, o servidor web envia o conteúdo do arquivo de volta ao navegador. Senão, o servidor de aplicações cria o arquivo necessário.</li>
+ <li>Se nenhum dos processos for possível, o servidor web retorna uma mensagem de erro ao navegador, mais conhecido como "404 Not Found". (Esse erro é tão comum que muitos desevolvedores web passam um bom tempo criando <a href="http://www.404notfound.fr/" rel="external">páginas de erro do 404</a>.)</li>
+</ol>
+
+<h3 id="Conteúdo_estático_vs._dinâmico">Conteúdo estático vs. dinâmico</h3>
+
+<p>A grosso modo, um servidor pode fornecer tanto um conteúdo estático quanto dinâmico. "Estático" significa "da forma que está". Websites estáticos são os mais fáceis de configurar, então sugerimos que faça seu primeiro site estático.</p>
+
+<p>"Dinâmico" significa que o servidor processa o conteúdo ou o gera a partir de um banco de dados. Essa solução fornece mais flexibilidade, mas a arquitetura fica mais difícil de lidar, fazendo com que seja dramaticamente mais complexo desenvolver o website.</p>
+
+<p>Veja por exemplo a página na qual está lendo agora. No servidor web que a hospeda, há um servidor de aplicações que pega o conteúdo do artigo de um banco de dados, o formata, coloca dentro de um template HTML e lhe envia o resultado. Nesse caso, o servidor de aplicações é chamado de  <a href="/en-US/docs/MDN/Kuma">Kuma</a> e é desevolvido em <a href="https://www.python.org/">Python</a> (usando o framework <a href="https://www.djangoproject.com/">Django</a> ). A equipe da Mozilla desenvolveu o Kuma devido a necessidades específicas do MDN, mas há muitas aplicações similares em muitas outras tecnologias..</p>
+
+<p>Existem tantos servidores de aplicações que é muito difícil sugerir algum em particular. Alguns servidores de aplicações atendem à categorias específicas de websites como blogs, wikis ou lojas virtuais. Outros, os chamados {{Glossary("CMS", "CMSs")}} (sistemas de gerenciamento de conteúdo), são mais genéricos. Se estiver desenvolvendo um website dinâmico, reserve um tempo para escolher uma ferramenta que atenda às suas necessidades. A menos que queria aprender sobre o desenvolvimento de um servidor web (que é uma área interessante por si só!), não há necessidade de criar seu próprio servidor de aplicação. Estará apenas reinventando a roda.</p>
+
+<h2 id="Próximos_passos">Próximos passos</h2>
+
+<p>Agora que está familiarizado com os servidores web, você pode:</p>
+
+<ul>
+ <li>ler sobre <a href="/en-US/docs/Learn/How_much_does_it_cost">quanto custa desenvolver para a web</a> (em inglês)</li>
+ <li>aprender mais sobre os <a href="/en-US/docs/Learn/What_software_do_I_need">vários softwares necessários para criar um site</a> (em inglês)</li>
+ <li>partir para a prática de <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">como fazer o upload de arquivos em um servidor web</a> (em inglês).</li>
+</ul>
diff --git a/files/pt-br/learn/common_questions/o_que_são_hyperlinks/index.html b/files/pt-br/learn/common_questions/o_que_são_hyperlinks/index.html
new file mode 100644
index 0000000000..5cfb905389
--- /dev/null
+++ b/files/pt-br/learn/common_questions/o_que_são_hyperlinks/index.html
@@ -0,0 +1,91 @@
+---
+title: O que são hyperlinks?
+slug: Learn/Common_questions/O_que_são_hyperlinks
+translation_of: Learn/Common_questions/What_are_hyperlinks
+---
+<div class="summary">
+<p>Neste artigo, veremos o que são hiperlinks e por que eles são importantes.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré requisitos:</th>
+   <td>Você deve saber <a href="/en-US/Learn/How_the_Internet_works">como a Internet funciona </a>e estar familiarizado com<a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine"> a diferença entre uma página da web, um site, um servidor da web e um mecanismo de pesquisa</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprenda sobre links na Web e por que eles são importantes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>Hyperlinks, geralmente chamados de links, são um conceito fundamental da Web. Para explicar o que são links, precisamos voltar ao básico da arquitetura da Web.</p>
+
+<p>Em 1989, Tim Berners-Lee, o inventor da Web, falou sobre os três pilares sobre os quais a Web se sustenta:</p>
+
+<ol>
+ <li>"URL", um sistema de endereços que mantém o controle de documentos da Web;</li>
+ <li>"HTTP", um protocolo de transferência para encontrar documentos ao receber seus URLs;</li>
+ <li>"HTML", um formato de documento que permite incorporar <em>hyperlinks;</em></li>
+</ol>
+
+<p>Como você pode ver nos três pilares, tudo na Web gira em torno de documentos e como acessá-los. O propósito original da Web era fornecer uma maneira fácil de acessar, ler e navegar por documentos de texto. Desde então, a Web evoluiu para fornecer acesso a imagens, vídeos e dados binários, mas essas melhorias dificilmente mudaram os três pilares.</p>
+
+<p>Antes da Web, era muito difícil acessar documentos e passar de um para outro. Por serem legíveis por humanos, os URLs já tornaram as coisas mais fáceis, mas é difícil digitar um URL longo sempre que você deseja acessar um documento. Foi aqui que os hiperlinks revolucionaram tudo. Os links podem correlacionar qualquer string de texto com um URL, de forma que o usuário possa acessar instantaneamente o documento de destino ativando o link.</p>
+
+<p>Os links se destacam do texto ao redor por serem sublinhados e em azul. Toque ou clique em um link para ativá-lo ou, se usar um teclado, pressione Tab até que o link esteja em foco e pressione Enter ou a barra de espaço.</p>
+
+<p><img alt="Example of a basic display and effect of a link in a web page" src="https://mdn.mozillademos.org/files/8625/link-1.png" style="height: 492px; width: 477px;"></p>
+
+<p>Os links são o avanço que tornou a Web tão útil e bem-sucedida. No restante deste artigo, discutiremos os vários tipos de links e sua importância para o design moderno da Web.</p>
+
+<h2 id="Mergulho_Profundo">Mergulho Profundo</h2>
+
+<p>Como dissemos, um link é uma string de texto ligada a uma URL e usamos links para permitir um salto fácil de um documento para outro. Dito isso, existem algumas nuances que vale a pena considerar:</p>
+
+<h3 id="Tipos_de_links">Tipos de links</h3>
+
+<dl>
+ <dt>Link interno</dt>
+ <dd>Um link entre duas páginas da web, em que ambas as páginas pertencem ao mesmo site, é chamado de link interno. Sem links internos, não existe site (a menos, é claro, que seja um site de uma página).</dd>
+ <dt>Link externo</dt>
+ <dd>Um link de sua página da web para a página de outra pessoa. Sem links externos, não há Web, pois a Web é uma rede de páginas da web. Use links externos para fornecer informações além do conteúdo disponível em sua página da web.</dd>
+ <dt>Links de entrada</dt>
+ <dd>Um link da página de outra pessoa para o seu site. É o oposto de um link externo. Observe que você não precisa vincular de volta quando alguém se vincula ao seu site.</dd>
+</dl>
+
+<p>Ao construir um site, concentre-se nos links internos, pois eles tornam seu site utilizável. Encontre um bom equilíbrio entre ter muitos links e poucos. Falaremos sobre como projetar a navegação do site em outro artigo, mas como regra, sempre que você adicionar uma nova página da web, certifique-se de que pelo menos uma das outras páginas tenha um link para essa nova página. Por outro lado, se seu site tiver mais de dez páginas, é contraproducente vincular a todas as páginas a partir de todas as outras.</p>
+
+<p>Quando você está começando, não precisa se preocupar tanto com links externos e recebidos, mas eles são muito importantes se você deseja que os mecanismos de pesquisa encontrem seu site (veja abaixo para mais detalhes).</p>
+
+<h3 id="Âncoras">Âncoras</h3>
+
+<p>Muitos links unem duas páginas da web. <strong>Âncoras </strong>amarrar duas seções de um documento. Quando você segue um link que aponta para uma âncora, seu navegador salta para outra parte do documento atual em vez de carregar um novo documento. No entanto, você cria e usa âncoras da mesma forma que outros links.</p>
+
+<p><img alt="Example of a basic display and effect of an anchor in a web page" src="https://mdn.mozillademos.org/files/8627/link-2.png" style="height: 492px; width: 477px;"></p>
+
+<h3 id="Links_e_Mecanismos_de_pesquisa">Links e Mecanismos de pesquisa</h3>
+
+<p>Os links são importantes tanto para os usuários quanto para os mecanismos de pesquisa. Sempre que os mecanismos de pesquisa rastreiam uma página da web, eles indexam o site seguindo os links disponíveis na página. Os mecanismos de pesquisa não apenas seguem os links para descobrir as várias páginas do site, mas também usam o texto visível do link para determinar quais consultas de pesquisa são apropriadas para chegar à página da web de destino.</p>
+
+<p>Os links influenciam a rapidez com que um mecanismo de pesquisa se vincula ao seu site. O problema é que é difícil medir as atividades dos mecanismos de pesquisa. As empresas desejam naturalmente que seus sites tenham uma classificação elevada nos resultados de pesquisa. Sabemos o seguinte sobre como os mecanismos de pesquisa determinam a classificação de um site:</p>
+
+<ul>
+ <li>O <em> texto visível </em> de um link influencia quais consultas de pesquisa encontrarão um determinado URL.</li>
+ <li>Quanto mais <em> links de entrada </em> uma página da web pode mostrar, melhor ela se classifica nos resultados de pesquisa.</li>
+ <li><em>Links externos </em> influenciam a classificação de pesquisa das páginas da web de origem e de destino, mas não está claro quanto.</li>
+</ul>
+
+<p><a href="http://en.wikipedia.org/wiki/Search_engine_optimization">SEO</a> (search engine optimization) é o estudo de como fazer com que os sites tenham uma classificação elevada nos resultados de pesquisa. Melhorar o uso de links em um site é uma técnica de SEO útil.</p>
+
+<h2 id="Próximos_Passos">Próximos Passos</h2>
+
+<p>Agora você vai querer configurar algumas páginas da web com links.</p>
+
+<ul>
+ <li>Para obter mais informações teóricas, aprenda sobre <a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">URLs e sua estrutura</a>, já que cada link aponta para um URL.</li>
+ <li>Quer algo um pouco mais prático? O <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Criando hyperlinks</a> <em>(em inglês)</em>, artigo da nossa <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introdução ao HTML </a><em>(em inglês)</em>, explica como implementar links em detalhes.</li>
+</ul>
diff --git a/files/pt-br/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/pt-br/learn/common_questions/pages_sites_servers_and_search_engines/index.html
new file mode 100644
index 0000000000..1e92399a64
--- /dev/null
+++ b/files/pt-br/learn/common_questions/pages_sites_servers_and_search_engines/index.html
@@ -0,0 +1,123 @@
+---
+title: 'Qual a diferença entre página web, site, servidor web e mecanismo de busca?'
+slug: Learn/Common_questions/Pages_sites_servers_and_search_engines
+tags:
+  - Iniciante
+  - Mecânica da Web
+  - Precisa de Aprendizagem Ativa
+translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines
+---
+<div class="summary">
+<p><span class="seoSummary">Neste artigo, iremos apresentar diversos conceitos relacionados à Web: páginas web, sites, servidores web e mecanismos de busca. Estes termos são confundidos frequentemente por iniciantes na web, ou são empregados de forma incorreta. Vamos aprender o que cada um significa! </span></p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Você deverá conhecer <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/Como_a_internet_funciona">como a Internet funciona</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Tornar o leitor apto a descrever as diferenças entre uma página web, um site, um servidor web e um mecanismo de busca.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>Como qualquer outra área do conhecimento, a web possui um grande número de jargões. Não se preocupe, nós não iremos te sobrecarregar com todos eles (temos um <a href="https://developer.mozilla.org/pt-BR/docs/Glossario">glossário</a> se você estiver curioso). Todavia, existem alguns termos básicos que você precisa conhecer inicialmente, já que você sempre ouvirá estas expressões enquanto estiver lendo sobre o assunto. É muito fácil confundir tais termos ocasionalmente, uma vez que eles se referem a funcionalidades relacionadas porém diferentes. Na verdade, às vezes você verá esses termos mal utilizados nos noticiários e em outros lugares, portanto, misturá-los é compreensível.</p>
+
+<p>Cobriremos esses termos e tecnologias com mais detalhes à medida que exploramos mais, mas essas definições rápidas serão um ótimos começo para você:</p>
+
+<dl>
+ <dt>página web</dt>
+ <dd>Um documento que pode ser mostrado em um navegador web como Firefox, Google Chrome, Opera, Microsoft Internet Explorer ou Edge, ou Safari da Apple. Tais documentos também podem ser referenciados apenas por "páginas".</dd>
+ <dt>site</dt>
+ <dd>Um conjunto de páginas web agrupadas juntas e geralmente conectadas juntas de diversas formas. Também conhecido como "web site" ou simplesmente "site".</dd>
+ <dt>servidor web</dt>
+ <dd>Um computador que hospeda um site na Internet.</dd>
+ <dt>mecanismo de busca</dt>
+ <dd>Um serviço da web que te auxilia a encontrar outras páginas da web, como o Google, o Bing, o Yahoo ou o DuckDuckGo. Os motores de busca são normalmente acessados através de um navegador da web (por exemplo, você pode realizar pesquisas em mecanismos de busca diretamente na barra de endereços do Firefox, Chrome, etc.) ou através de uma página da web (por exemplo, <a href="https://www.bing.com/">bing.com</a> ou <a href="https://duckduckgo.com/">duckduckgo.com</a>).</dd>
+</dl>
+
+<p>Vamos ver uma analogia simples - uma biblioteca pública. Isto é o que você geralmente faria ao visitar uma biblioteca:</p>
+
+<ol>
+ <li>Procura no índice de buscas e verifica o título do livro que você deseja.</li>
+ <li>Anota o número de catálogo do livro desejado.</li>
+ <li>Se dirige à seção particular que contém o livro, encontra o número catalográfico correto, e então apanha o livro.</li>
+</ol>
+
+<p>Comparemos a biblioteca com um servidor web:</p>
+
+<ul>
+ <li>A biblioteca é como um servidor web. Ela possui muitas seções, tal qual um servidor hospedando múltiplos websites.</li>
+ <li>As diferentes seções (Ciências, Matemática, História, etc.) na biblioteca são como os sites. Cada seção é como um único site (duas seções não conterão os mesmos livros).</li>
+ <li>Os livros em cada seção correspondem às páginas web. Um website pode conter diversas páginas, por exemplo, na seção de Ciências (o site) terá livros sobre calor, som, termodinâmica, estática, etc. (as páginas web). As páginas da web podem ser encontradas em um local exclusivo (URL).</li>
+ <li>O índice de buscas é como o mecanismo de busca. Cada livro possui sua própria localização exclusiva na biblioteca (dois livros não podem ser armazenados no mesmo local), o que é especificado pelo código catalográfico.</li>
+</ul>
+
+<dl>
+</dl>
+
+<h2 id="Aprendizado_ativo">Aprendizado ativo</h2>
+
+<p><em>Ainda não há nenhum aprendizado ativo. <a href="https://developer.mozilla.org/pt-BR/docs/MDN/Primeiros_Passos">Por favor, considere fazer uma contribuição</a>.</em></p>
+
+<h2 id="Imersão_a_Fundo">Imersão a Fundo</h2>
+
+<p>Bem, então vamos escavar um pouco mais a fundo sobre estes quatro termos, em como se inter-relacionam e por qual motivo são, ocasionalmente, confundidos entre si.</p>
+
+<h3 id="Página_web">Página web</h3>
+
+<p>Uma <strong>página web </strong>é simplesmente um documento que é renderizado ("mostrado") por um <a href="https://developer.mozilla.org/pt-BR/docs/Glossario/Navegador">navegador</a>. Tais documentos são escritos com uso da linguagem {{Glossary("HTML")}} (a qual iremos ver em maiores detalhes em <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML">outros artigos</a>). Uma página web pode possuir uma variedade de diferentes tipos de recursos incorporados a ela, como:</p>
+
+<ul>
+ <li><em>informação de estilo </em>— controlando como a página se apresenta e se comporta (<em>look-and-feel</em>)</li>
+ <li><em>scripts</em> — os quais são responsáveis por adicionar interatividade à página</li>
+ <li><em>mídia</em> — imagens, sons e vídeos.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota:  </strong>Navegadores também são capazes de renderizar outros documentos, como arquivos {{Glossary("PDF")}} ou imagens, porém o termo <strong>página web </strong>se refere especificamente a documentos HTML. Todavia, usaremos apenas o termo <strong>documento</strong>.</p>
+</div>
+
+<p>Todas as páginas web disponíveis na web são alcançáveis através de um único endereço. Para acessar uma página, basta digitar seu endereço na barra de endereços do seu navegador:</p>
+
+<p style="text-align: center;"><img alt="Example of a web page address in the browser address bar" src="https://mdn.mozillademos.org/files/8529/web-page.jpg" style="height: 239px; width: 650px;"></p>
+
+<h3 id="Site">Site</h3>
+
+<p>Um <em>site</em> é um conjunto de páginas web vinculadas (mais os recursos associados a elas) que compartilham um único nome de domínio. Cada página web de um dado website provê links explícitos - na maior parte do tempo na forma de texto clicável - que possibilitam a um usuário mover-se de uma página do website à outra.</p>
+
+<p>Para acessar um website, digite o nome de domínio na barra de endereço do seu navegador, e então o navegador irá mostrar a página web principal daquele website, ou a <em>homepage</em> (casualmente referenciada como "a <em>home</em>").</p>
+
+<p><img alt="Example of a web site domain name in the browser address bar" src="https://mdn.mozillademos.org/files/8531/web-site.jpg" style="display: block; height: 365px; margin: 0px auto; width: 650px;"></p>
+
+<p>Os conceitos de página web e de website são especialmente fáceis de se confundir quando um <em>website  </em>possui apenas uma <em>página web</em>. Websites com esta característica são ocasionalmente chamados de <em>websites de página única </em>(<em>single-page website</em>).</p>
+
+<h3 id="Servidor_web">Servidor web</h3>
+
+<p>Um <em>servidor </em><em>web </em>nada mais é que um computador hospedando um ou mais <em>websites</em>. "Hospedar" significa que todas as <em>páginas web </em>e seus arquivos auxiliares estão disponíveis a partir daquele computador. O <em>servidor web </em>enviará qualquer <em>página web </em>a partir do <em>website </em>que está hospedado nele para o navegador de qualquer usuário que o tenha requisitado (feito uma <em>requisição</em>).</p>
+
+<p>Não confunda <em>websites </em>e <em>servidores</em>. Por exemplo, caso você ouça alguém dizer: "Meu website não está respondendo", isto atualmente significa que o <em>servidor web </em>não está respondendo, logo o <em>website </em>encontra-se indisponível. Mais importante, uma vez que um único servidor web é capaz de hospedar múltiplos <em>websites</em>, o termo <em>servidor web </em>nunca deve ser empregado para se referir a um website, uma vez que isso pode provocar uma grande confusão. Em nosso exemplo anterior, caso disséssemos: "Meu servidor web não está respondendo", significaria que todos os websites hospedados naquele servidor específico encontrariam-se indisponíveis.</p>
+
+<h3 id="Mecanismos_de_Pesquisa">Mecanismos de Pesquisa</h3>
+
+<p>Mecanismos de pesquisa são uma fonte comum de confusão na web. Um mecanismo de pesquisa é um tipo especial de website que auxilia usuários a encontrar páginas web de <em>outros </em>websites.</p>
+
+<p>Há um número abundante destas ferramentas: <a href="https://www.google.com/">Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a> e diversos outros. Alguns são genéricos, outros especializam-se em tópicos específicos. Utilize qualquer um de sua preferência.</p>
+
+<p>Muitos iniciantes na web confundem mecanismos de pesquisa e navegadores. Tornemos tudo mais claro: um <strong>navegador</strong> é uma aplicação de software que recupera e renderiza páginas web; um <strong>mecanismo de pesquisa</strong> é um website que ajuda pessoas a encontrarem páginas web de outros websites. A confusão ocorre porque, da primeira vez que alguém executa um navegador, este mostra uma página inicial de um mecanismo de pesquisa. Este comportamento faz sentido, pois, evidentemente, a primeira coisa que você deseja fazer com um navegador é encontrar uma página web para renderizar. Não confunda a infraestrutura (neste caso, o navegador) com o serviço (aqui representado pelo mecanismo de pesquisa). A distinção irá ajudá-lo muito, mas mesmo alguns profissionais tendem a falar de forma mais informal, portanto não se preocupe com isso.</p>
+
+<p>Aqui há uma instância do Firefox mostrando uma caixa de pesquisa do Google como sua página inicial padrão:</p>
+
+<p><img alt="Example of Firefox nightly displaying a custom Google page as default" src="https://mdn.mozillademos.org/files/8533/search-engine.jpg" style="display: block; height: 399px; margin: 0px auto; width: 650px;"></p>
+
+<h2 id="Próximos_passos">Próximos passos</h2>
+
+<ul>
+ <li>Escavando a fundo: <a href="/en-US/docs/Learn/What_is_a_web_server">O que é um servidor web</a></li>
+ <li>Veja como páginas web são vinculadas dentro de um website: <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_hyperlinks">Entendendo links na web</a></li>
+</ul>
diff --git a/files/pt-br/learn/common_questions/pensando_antes_de_codificar/index.html b/files/pt-br/learn/common_questions/pensando_antes_de_codificar/index.html
new file mode 100644
index 0000000000..342692db46
--- /dev/null
+++ b/files/pt-br/learn/common_questions/pensando_antes_de_codificar/index.html
@@ -0,0 +1,178 @@
+---
+title: Como eu começo a criar meu site?
+slug: Learn/Common_questions/Pensando_antes_de_codificar
+tags:
+  - Composição
+  - Iniciante
+translation_of: Learn/Common_questions/Thinking_before_coding
+---
+<p class="summary">Este artigo abrange o primeiro passo, muito importante, de cada projeto: definir o que você deseja realizar com ele.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Nenhum</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>
+    <p>Aprenda a definir metas para direcionar seu projeto da web.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p><span class="seoSummary">Ao começar um projeto web, muitas pessoas se concentram no lado técnico. É claro que você deve estar familiarizado com a técnica do seu ofício, mas o que realmente importa é o que você quer realizar. Sim, parece óbvio, mas muitos projetos falham não por falta de conhecimento técnico, mas por falta de objetivos e visão.</span></p>
+
+<p>Então, quando você tem uma ideia e quer transformá-la em um site, há algumas perguntas que você deve responder antes de qualquer outra coisa:</p>
+
+<ul>
+ <li>O que exatamente eu quero realizar?</li>
+ <li>Como um site me ajudará a atingir meus objetivos?</li>
+ <li>O que precisa ser feito, e em que ordem, para alcançar meus objetivos?</li>
+</ul>
+
+<p>Tudo isso é chamado de ideação do projeto e é um primeiro passo necessário para atingir seu objetivo, seja você um iniciante ou um desenvolvedor experiente.</p>
+
+<h2 id="Aprendizado_Ativo">Aprendizado Ativo</h2>
+
+<p><em>Ainda não há aprendizado ativo disponível. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Por favor, considere contribuir</a>.</em></p>
+
+<h2 id="Mergulho_mais_profundo">Mergulho mais profundo</h2>
+
+<p>Um projeto nunca começa com o lado técnico. Os músicos, nunca farão uma música, a menos que tenham uma ideia do que querem tocar e o mesmo vale para pintores, escritores e desenvolvedores da web. Técnica vem em segundo lugar.</p>
+
+<p>A técnica é obviamente crítica. Músicos devem dominar seu instrumento. Mas bons músicos nunca podem produzir boa música sem uma ideia. Portanto, antes de pular para o lado técnico (por exemplo, código e ferramentas) você deve primeiro recuar e decidir detalhadamente o que deseja fazer.</p>
+
+<p>Uma hora de discussão com amigos é um bom começo, mas inadequado. Você precisa se sentar e estruturar suas ideias para ter uma visão clara do caminho que deve seguir para tornar suas ideias realidade. Para fazer isso, você precisa apenas de caneta e papel e de algum tempo para responder pelo menos as seguintes perguntas.</p>
+
+<div class="note">
+<p><strong>Nota:</strong> Existem inúmeras maneiras de realizar a ideação do projeto. Não podemos colocá-las todas aqui (um livro inteiro não seria suficiente). O que vamos apresentar aqui é um método simples para lidar com o que os profissionais chamam de <a href="http://en.wikipedia.org/wiki/Ideation_(idea_generation)">Ideação do Projeto</a>, <a href="http://en.wikipedia.org/wiki/Project_planning">Planejamento do Projeto</a>, e <a href="http://en.wikipedia.org/wiki/Project_management">Gerenciamento do Projeto</a>.</p>
+</div>
+
+<h3 id="O_que_exatamente_eu_quero_realizar">O que exatamente eu quero realizar?</h3>
+
+<p>Esta é a pergunta mais importante a responder, já que direciona todo o resto. Relacione todos os objetivos que você deseja alcançar. Pode ser qualquer coisa: vender mercadorias para ganhar dinheiro, expressar opiniões políticas, conhecer novos amigos, apresentar-se com músicos, colecionar fotos de gatos ou o que você quiser.</p>
+
+<p>Suponha que você seja um músico. Você poderia desejar:</p>
+
+<ul>
+ <li>Deixar as pessoas ouvirem sua música.</li>
+ <li>Vender guloseimas.</li>
+ <li>Conhecer outros músicos.</li>
+ <li>Falar sobre sua música.</li>
+ <li>Ensinar música através de vídeos.</li>
+ <li>Publicar fotos de seus gatos.</li>
+ <li>Encontrar um(a) novo(a) namorado(a).</li>
+</ul>
+
+<p>Depois de ter essa lista, você precisa priorizar. Ordene os objetivos do mais importante para o menos importante:</p>
+
+<ol>
+ <li>Encontrar um(a) novo(a) namorado(a).</li>
+ <li>Deixar as pessoas ouvirem sua música.</li>
+ <li>Falar sobre sua música.</li>
+ <li>Conhecer outros músicos.</li>
+ <li>Vender guloseimas.</li>
+ <li>Ensinar música através de vídeos.</li>
+ <li>Publicar fotos de seus gatos.</li>
+</ol>
+
+<p>Fazer esse exercício simples (escrever objetivos e classificá-los), ajudará você quando tiver decisões a tomar. (Devo implementar esses recursos, usar esses serviços, criar esses designs?)</p>
+
+<p>Então, agora que você tem uma lista de prioridades, vamos para a próxima pergunta.</p>
+
+<h3 id="Como_um_site_poderia_me_levar_aos_meus_objetivos">Como um site poderia me levar aos meus objetivos?</h3>
+
+<p>Então você tem uma lista de objetivos e acha que precisa de um site para alcançar esses objetivos. Você tem certeza?</p>
+
+<p>Vamos olhar denovo para o nosso exemplo. Temos cinco objetivos ligados à música, um objetivo relacionado à vida pessoal (encontrar sua cara metade) e as fotos de gatos completamente independentes. É razoável construir um site único para cobrir todos esses objetivos? É mesmo necessário? Afinal, dezenas de serviços existentes na Web, podem levar você aos seus objetivos sem criar um novo site.</p>
+
+<p>Encontrar um(a) namorado(a) é um bom caso em que faz mais sentido usar recursos existentes do que contruir um site totalmente novo. Por que? Porque passaremos mais tempo construindo e mantendo o site em vez de realmente procurar um(a) namorado(a). Como nosso objetivo é o mais importante, devemos gastar nossa energia em alavancar as ferramentas existentes, em vez de começar do zero. Mais uma vez, existem tantos serviços web já disponíveis para mostrar fotos que não vale a pena o esforço para construir um novo site apenas para divulgar o quanto nossos gatos são fofos.</p>
+
+<p>Os outros cinco objetivos estão todos ligados à música. Existem, é claro, muitos serviços da web que poderiam lidar com esses objetivos, mas faz sentido, nesse caso, construir um site próprio. Esse site é a melhor maneira de agregar todas as coisas que queremos publicar em um único lugar (bom para os objetivos 3, 5 e 6) e promover a interação entre nós e o público (bom para os objetivos 2 e 4). Em suma, como todas essas metas giram em torno do mesmo tópico, ter tudo em um só lugar nos ajudará a atingir nossos objetivos e a ajudar nossos seguidores a se conectarem conosco.</p>
+
+<p>Como um site pode me ajudar a atingir minhas metas? Ao responder isso, você encontrará a melhor maneira de atingir seus objetivos e evitar o desperdício de esforços.</p>
+
+<h3 id="O_que_precisa_ser_feito_e_em_que_ordem_para_alcançar_meus_objetivos">O que precisa ser feito, e em que ordem, para alcançar meus objetivos?</h3>
+
+<p>O que precisa ser feito, e em que ordem, para alcançar meus objetivos?</p>
+
+<p>Agora que você sabe o que quer realizar, é hora de decompor os objetivos em etapas. Como uma anotação auxiliar, seus objetivos não são necessariamente definidos em pedra. Eles evoluem ao longo do tempo, mesmo no decorrer do projeto, especialmente se você se deparar com obstáculos inesperados ou simplemente mudar de idéia.</p>
+
+<p>Em vez de passar por uma longa explicação, voltemos ao nosso exemplo com esta tabela:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Objetivos</th>
+   <th scope="col">Coisas a fazer</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">Deixar as pessoas ouvirem sua música</td>
+   <td>
+    <ol>
+     <li>Gravar música</li>
+     <li>Preparar alguns arquivos de áudio utilizáveis on-line (você poderia fazer isso com os serviços da Web existentes?)</li>
+     <li>Dar às pessoas acesso à sua música em alguma parte do seu site</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Falar sobre sua música</td>
+   <td>
+    <ol>
+     <li>Escrever alguns artigos para iniciar a discussão</li>
+     <li>Definir como os artigos devem parecer</li>
+     <li>Publicar esses artigos no site (Como fazer isso?)</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Conhecer outros músicos</td>
+   <td>
+    <ol>
+     <li>Fornecer maneiras para as pessoas entrarem em contato com você (E-mail? Facebook? Telefone? Correio?)</li>
+     <li>Definir como as pessoas encontrarão esses canais de contato em seu site</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Vender guloseimas</td>
+   <td>
+    <ol>
+     <li>Criar as guloseimas</li>
+     <li>Armazenar as guloseimas</li>
+     <li>Encontrar uma maneira de lidar com o envio</li>
+     <li>Encontrar uma maneira de lidar com o pagamento</li>
+     <li>Criar um mecanismo no seu site para que as pessoas façam pedidos</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Ensinar música através de vídeos</td>
+   <td>
+    <ol>
+     <li>Gravar videoaulas</li>
+     <li>Preparar arquivos de vídeo online (Novamente, você poderia fazer isso com os serviços existentes na Web?)</li>
+     <li>Dar às pessoas acesso aos seus vídeos em alguma parte do seu site</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Duas coisas para tomar nota. Primeiro, alguns desses itens não são relacionados à web (por exemplo, gravar música, escrever artigos). Muitas vezes essas atividades off-line são mais importantes do que o lado da web do projeto. Nas vendas, por exemplo, é muito mais importante e demorado lidar com suprimentos, pagamento e remessa do que construir um site onde as pessoas possam fazer pedidos.</p>
+
+<p>Em segundo lugar, a definição das etapas leva a novas perguntas que você precisará responder. Geralmente, há mais perguntas do que pensávamos inicialmente. (Por exemplo, devo aprender como fazer tudo isso sozinho, pedir a alguém para fazer isso por mim ou usar serviços de terceiros?)</p>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>Como você pode ver, a simples idéia "Eu quero fazer um site" gera uma longa lista de tarefas, que só cresce, quanto mais você pensa sobre isso. Logo pode parecer impressionante, mas não entre em pânico. Você não precisa responder todas as perguntas e não precisa fazer tudo na sua lista. O que importa é ter uma visão do que você quer e como chegar lá. Depois de ter essa visão clara, você precisa decidir como e quando fazê-lo. Divida as grandes tarefas em etapas pequenas e realizáveis. E essas pequenas tarefas resultarão em grandes conquistas.</p>
+
+<p>A partir deste artigo, você deve ser capaz de elaborar um plano básico para criar um site. Um próximo passo pode ser ler <a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/Como_a_internet_funciona">como a Internet funciona</a>.</p>
diff --git a/files/pt-br/learn/common_questions/quanto_custa_fazer_algo_web/index.html b/files/pt-br/learn/common_questions/quanto_custa_fazer_algo_web/index.html
new file mode 100644
index 0000000000..7c92c2fb03
--- /dev/null
+++ b/files/pt-br/learn/common_questions/quanto_custa_fazer_algo_web/index.html
@@ -0,0 +1,155 @@
+---
+title: Quanto custa fazer algo na Web?
+slug: Learn/Common_questions/Quanto_custa_fazer_algo_web
+translation_of: Learn/Common_questions/How_much_does_it_cost
+---
+<div class="summary">
+<p>Getting involved on the Web isn't as cheap as it looks. In this article we discuss how much you may have to spend, and why.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>You should already understand <a href="/en-US/Learn/What_software_do_I_need">what software you need</a>, the difference between <a href="/en-US/Learn/page_vs_site_vs_server_vs_search_engine">a webpage, a website, etc</a>., and what <a href="/en-US/Learn/Understanding_domain_names">a domain name is</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Review the complete process for creating a website and find out how much each step can cost.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p><span class="seoSummary">When launching a website, you may spend nothing, or your costs may go through the roof. In this article we discuss how much everything costs, and how you get what you pay (or don't pay).</span></p>
+
+<h2 id="Software">Software</h2>
+
+<h3 id="Editores_de_texto">Editores de texto</h3>
+
+<p>You likely have a text editor: such as, Notepad on Windows, Gedit on Linux, TextEdit on Mac. You'll have an easier time writing code if you choose an editor that color-codes, checks your syntax, and assists you with code structure.</p>
+
+<p>Many editors are free, for example <a href="https://atom.io/">Atom</a>, <a href="http://brackets.io/">Brackets</a>, <a href="http://bluefish.openoffice.nl/">Bluefish</a>, <a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a>, <a href="http://eclipse.org/">Eclipse</a>, <a href="https://netbeans.org/">Netbeans</a>, and <a href="https://code.visualstudio.com/">Visual Studio Code</a>. Some, like <a href="http://www.sublimetext.com/">Sublime Text</a>, you can test as long as you like, but you're encouraged to pay. Some, like <a href="https://www.jetbrains.com/phpstorm/">PhpStorm</a>, can cost between a few dozen and 200 dollars, depending on the plan you purchase. Some of them, like <a href="http://www.visualstudio.com/">Microsoft Visual Studio</a>, can cost hundreds, or thousands of dollars; though Visual Studio Express is free for individual developers or open source projects. Often, for-pay editors will have a trial version.</p>
+
+<p>To start, we suggest trying out several editors, to get a sense of which works best for you. If you're only writing simple {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("Javascript")}}, go with a simple editor.</p>
+
+<p>Price does not reliably reflect a text editor's quality or usefulness. You have to try it for yourself and decide if it meets your needs. For example, Sublime Text is cheap, but comes with many free plugins that can greatly extend its functionality.</p>
+
+<h3 id="Image_editors">Image editors</h3>
+
+<p>Your system likely includes a simple image editor, or viewer: Paint on Windows, Eye of Gnome on Ubuntu, Preview on Mac. Those programs are relatively limited, you'll soon want a more robust editor to add layers, effects, and grouping.</p>
+
+<p>Editors can be free (<a href="http://www.gimp.org/">GIMP</a>, <a href="https://www.getpaint.net/">Paint.NET</a>), moderately expensive (<a href="http://www.paintshoppro.com/">PaintShop Pro</a>, less than $100), or several hundred dollars (<a href="https://www.adobe.com/products/photoshop.html">Adobe Photoshop</a>).</p>
+
+<p>You can use any of them, as they will have similar functionality, though some are so comprehensive you'll never use every feature. If at some point you need to exchange projects with other designers, you should find out what tools they're using. Editors can all export finished projects to standard file formats, but each editor saves ongoing projects in its own specialized format. Most of the images on the internet are copyrighted, so it is better to check the license of the file before you use it. Sites like <a href="https://pixabay.com/">Pixabay</a> provide images under CC0 license, so you can use, edit and publish them even with modification for commercial use.</p>
+
+<h3 id="Media_editors">Media editors</h3>
+
+<p>If you want to include video or audio into your website, you can either embed online services (for example YouTube, Vimeo, or Dailymotion), or include your own videos (see below for bandwidth costs).</p>
+
+<p>For audio files, you can find free software (<a href="http://audacity.sourceforge.net/?lang=en">Audacity</a>, <a href="http://www.wavosaur.com/">Wavosaur</a>), or paying up to a few hundred dollars (<a href="http://www.sonycreativesoftware.com/soundforge">Sony Sound Forge</a>, <a href="http://www.adobe.com/products/audition.html">Adobe Audition</a>). Likewise, video-editing software can be free (<a href="http://www.pitivi.org/">PiTiVi</a>, <a href="http://www.openshot.org/">OpenShot</a> for Linux, <a href="https://www.apple.com/mac/imovie/">iMovie</a> for Mac), less than $100 (<a href="https://www.adobe.com/us/products/premiere-elements.html">Adobe Premiere Elements</a>), or several hundred dollars (<a href="https://www.adobe.com/products/premiere.html">Adobe Premiere Pro</a>, <a href="http://www.avid.com/US/products/family/Media-Composer">Avid Media Composer</a>, <a href="https://www.apple.com/final-cut-pro/">Final Cut Pro</a>). The software you received with your digital camera may cover all your needs.</p>
+
+<h3 id="Publishing_tools">Publishing tools</h3>
+
+<p>You also need a way to upload files: from your hard drive to a distant web server. To do that you should use a publishing tool such as an (S)<a href="/en-US/docs/Glossary/FTP">FTP client</a>, <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a>, or <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Git/GitHub</a>.</p>
+
+<p>Each operating system includes an (S)FTP client, as part of its file manager. Windows Explorer, Nautilus (a common Linux file manager), and the Mac Finder all include this functionality. However, people often choose dedicated (S)FTP clients to display local or remote directories side-by-side and store server passwords.</p>
+
+<p>If you want to install an (S)FTP client, there are several reliable and free options: for example, <a href="https://filezilla-project.org/">FileZilla</a> for all platforms, <a href="http://winscp.net/">WinSCP</a> for Windows, <a href="https://cyberduck.io/">Cyberduck</a> for Mac or Windows, <a href="https://en.wikipedia.org/wiki/List_of_FTP_server_software">and more</a>.</p>
+
+<p>Because FTP is inherently insecure, you should make sure to use SFTP — the secure, encrypted version of FTP that most hosting sites you'll deal with these days will offer by default — or another secure solution like Rsync over SSH.</p>
+
+<h2 id="Browsers">Browsers</h2>
+
+<p>You either already have a browser or can get one for free. If necessary, download Firefox <a href="https://www.mozilla.org/en-US/firefox/all/">here</a> or Google Chrome <a href="https://www.google.com/chrome/browser/">here</a>.</p>
+
+<h2 id="Web_access">Web access</h2>
+
+<h3 id="Computer_modem">Computer / modem</h3>
+
+<p>You need a computer. Costs can vary tremendously, depending on your budget, and where you live. To publish a barebones website, you only need a basic computer capable of launching an editor, and a Web browser, so the entry level can be quite low.</p>
+
+<p>Of course, you'll need a more serious computer if you want to produce complicated designs, touch up photos, or produce audio and video files.</p>
+
+<p>You need to upload content to a remote server (see <em>Hosting</em> below), so you need a modem. Your {{Glossary("ISP")}} can rent Internet connectivity to you for a few dollars per month, though your budget might vary, depending on your location.</p>
+
+<h3 id="ISP_access">ISP access</h3>
+
+<p>Make sure that you have sufficient {{Glossary("Bandwidth", "bandwidth")}}:</p>
+
+<ul>
+ <li>Low-bandwidth access may be adequate to support a 'simple' website: reasonably-sized images, texts, some CSS and JavaScript. That will likely cost you a few dozen dollars, including the rent for the modem.</li>
+ <li>On the other hand, you'll need a high-bandwidth connections, such as DSL, cable, or fiber access, if you want a more advanced website with hundreds of files, or if you want to deliver heavy video/audio files directly from your web server. It could cost the same as low-bandwidth access, upwards to several hundred dollars per month for more professional needs.</li>
+</ul>
+
+<h2 id="Hosting">Hosting</h2>
+
+<h3 id="Understanding_bandwidth">Understanding bandwidth</h3>
+
+<p>Hosting providers charge you according to how much {{Glossary("Bandwidth", "bandwidth")}} your website consumes. This depends on how many people, and Web crawling robots, access your content during a given time, and how much server space your content takes up. This is why people usually store their videos on dedicated services such as Youtube, Dailymotion, and Vimeo. For example, your provider may have a plan that includes up to several thousand visitors per day, for “reasonable” bandwidth usage. Be careful, however as this is defined differently from one hosting provider to another. As a rule of thumb, recognize that reliable, paid, personal hosting can cost around ten to fifteen dollars per month.</p>
+
+<div class="note">
+<p>Note that there is no such thing as “unlimited” bandwidth. If you consume a huge amount of bandwidth, expect to pay a huge amount of money.</p>
+</div>
+
+<h3 id="Domain_names">Domain names</h3>
+
+<p>Your domain name has to be purchased through a domain name provider (a registrar). Your hosting provider may also be a registrar (<a href="https://www.1and1.com/">1&amp;1</a>, <a href="https://www.gandi.net/?lang=en">Gandi</a> for instance are at the same time registrars and hosting providers). The domain name usually costs $5-15 per year. This cost varies depending on:</p>
+
+<ul>
+ <li>Local obligations: some country top-level domain names are more costly, as different countries set different prices.</li>
+ <li>Services associated with the domain name: some registrars provide spam protection by hiding your postal address and email address behind their own addresses: the postal address can be provided in care of the registrar, and your email address can be obscured via your registrar's alias.</li>
+</ul>
+
+<h3 id="Do-it-yourself_hosting_vs._“packaged”_hosting">Do-it-yourself hosting vs. “packaged” hosting</h3>
+
+<p>When you want to publish a website, you could do everything by yourself: set up a database (if needed), Content Management System, or {{Glossary("CMS")}} (like <a href="http://wordpress.org/">Wordpress</a>, <a href="http://dotclear.org/">Dotclear</a>, <a href="http://www.spip.net/en_rubrique25.html">spip</a>, etc.), upload pre-made or your own templates.</p>
+
+<p>You could use your hosting provider's environment, for roughly ten to fifteen dollars per month, or subscribe directly to a dedicated hosting service with pre-packaged CMSs (e.g., <a href="http://wordpress.com/">Wordpress</a>, <a href="https://www.tumblr.com/">Tumblr</a>, <a href="https://www.blogger.com/">Blogger</a>). For the latter, you won't have to pay anything, but you may have less control over templating and other options.</p>
+
+<h3 id="Free_hosting_vs._paid_hosting">Free hosting vs. paid hosting</h3>
+
+<p>You might ask, why should I pay for my hosting when there are so many free services?</p>
+
+<ul>
+ <li>You have more freedom when you pay. Your website is yours, and you can migrate seamlessly from one hosting provider to the next.</li>
+ <li>Free hosting providers may add advertising to your content, beyond your control.</li>
+</ul>
+
+<p>It is better to go for paid hosting rather than relying on free hosting, as it is possible to move your files easily and uptime is <span>guaranteed </span>by most paid sites. Most hosting providers give you a huge discount to start with.</p>
+
+<p>Some people opt for a mixed approach. For example, their main blog on a paid host with a full domain name, and spontaneous, less strategic, content on a free host service.</p>
+
+<h2 id="Professional_website_agencies_and_hosting">Professional website agencies and hosting</h2>
+
+<p>If you desire a professional website, you will likely ask a web agency to do it for you.<br>
+ <br>
+ Here, costs depend on multiple factors, such as:</p>
+
+<ul>
+ <li>Is this a simple website with a few pages of text? Or a more complex, thousand-pages-long website?</li>
+ <li>Will you want to update it regularly? Or will it be a static website?</li>
+ <li>Must the website connect to your company’s IT structure to gather content (say, internal data)?</li>
+ <li>Do you want some shiny new feature that is the rage of the moment? At the time of writing, clients are seeking single pages with complex parallax</li>
+ <li>Will you need the agency to think up user stories or solve complex {{Glossary("UX")}} problems? For example, creating a strategy to engage users, or A/B testing to choose a solution among several ideas</li>
+</ul>
+
+<p>...and for hosting:</p>
+
+<ul>
+ <li>Do you want redundant servers, in case your server goes down?</li>
+ <li>Is 95% percent reliability adequate, or do you need professional, around-the-clock service?</li>
+ <li>Do you want high-profile, ultra-responsive dedicated servers, or can you cope with a slower, shared machine?</li>
+</ul>
+
+<p>Depending on how you answer these questions, your site could cost thousands to hundreds of thousands of dollars.</p>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<p>Now that you understand what kind of money your website may cost you, it's time to start designing that website and <a href="/en-US/docs/Learn/Set_up_a_basic_working_environment">setting up your work environment</a>.</p>
+
+<ul>
+ <li>Read on about <a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">how to choose and install a text editor</a>.</li>
+ <li>If you're more focused on design, take a look at the <a href="/en-US/Learn/Anatomy_of_a_web_page">anatomy of a web page</a>.</li>
+</ul>
diff --git a/files/pt-br/learn/common_questions/que_software_eu_preciso/index.html b/files/pt-br/learn/common_questions/que_software_eu_preciso/index.html
new file mode 100644
index 0000000000..392b7fd03a
--- /dev/null
+++ b/files/pt-br/learn/common_questions/que_software_eu_preciso/index.html
@@ -0,0 +1,222 @@
+---
+title: Que software eu preciso para construir um site?
+slug: Learn/Common_questions/Que_software_eu_preciso
+tags:
+  - Iniciante
+translation_of: Learn/Common_questions/What_software_do_I_need
+---
+<div class="summary">
+
+
+<p>Neste artigo nós destacamos quais <em>softwares</em> você precisa para editar, fazer <em>upload</em> ou visualizar um <em>site</em>.</p>
+</div>
+
+<table class="learn-box nostripe standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré requisitos:</th>
+   <td>Você deve saber <a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">a diferença entre páginas <em>web</em>, <em>sites web</em>, servidores<em>web</em>, e mecanismos de busca.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender quais <em>softwares</em> você precisa se quiser editar, fazer <em>upload</em>, ou visualizar um <em>site</em>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p>Você pode baixar a maioria dos programas que precisa para desenvolvimento <em>web</em> gratuitamente. Nós disponibilizamos alguns links neste artigo.</p>
+
+<p>Você precisa de ferramentas para:</p>
+
+<ul>
+ <li>Criar e editar páginas <em>web</em></li>
+ <li>Fazer <em>upload</em> de arquivos para o seu servidor web</li>
+ <li>Visualizar seu <em>site</em></li>
+</ul>
+
+<p>Quase todos os sistemas operacionais incluem por padrão um editor de texto e um navegador de internet que você pode usar para visualizar sites. Como resultado, normalmente você só precisa obter um <em>software</em> para transferir arquivos para o seu servidor <em>web</em>.</p>
+
+<h2 id="Práticas">Práticas</h2>
+
+<p>Ainda não existem práticas disponíveis. <a href="/en-US/docs/MDN/Getting_started">Por favor, considere contribuir</a>.</p>
+
+<h2 id="Aprofundando">Aprofundando</h2>
+
+<h3 id="Criando_e_editando_páginas_web">Criando e editando páginas <em>web</em></h3>
+
+<p>Para criar e editar um <em>site</em>, você precisa de um editor de texto. Editores de texto criam e modificam arquivos de texto não formatados. Outros formatos, como <strong>{{Glossary("RTF")}}</strong>, permitem que você adicione formatação, como negrito ou sublinhado. Esses formatos não são adequados para escrever em páginas <em>web.</em> Você deve pensar bem em qual editor de texto vai usar, considerando que você trabalhará por bastante tempo nele enquanto estiver construíndo seu <em>site</em>.</p>
+
+<p>Todos os sistemas operacionais <em>desktop</em> possuem um editor de texto básico. Todos esses editores são diretos em sua função, mas não possuem os recursos especiais para codificar uma página <em>web</em>. Se você quiser algo um pouco mais sofisticado, existem muitas ferramentas de terceiros disponíveis. Editores de terceiros possuem funções extras, como coloração de sintaxe, autocompletação, separadores de seção, e busca de código. Aqui está uma pequena lista de editores:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Sistema Operacional</th>
+   <th scope="col">Editores Padrão</th>
+   <th scope="col">Editores de Terceiros</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Windows</td>
+   <td>
+    <ul>
+     <li><a href="http://en.wikipedia.org/wiki/Notepad_%28software%29" rel="external">Notepad</a></li>
+    </ul>
+   </td>
+   <td>
+    <ul>
+     <li><a href="http://notepad-plus-plus.org/">Notepad++</a></li>
+     <li><a href="https://www.visualstudio.com/">Visual Studio Code</a></li>
+     <li><a href="https://www.jetbrains.com/webstorm/">Web Storm</a></li>
+     <li><a href="http://brackets.io/">Brackets</a></li>
+     <li><a href="https://shiftedit.net/">ShiftEdit</a></li>
+     <li><a href="https://www.sublimetext.com/">Sublime Text</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Mac OS</td>
+   <td>
+    <ul>
+     <li><a href="http://en.wikipedia.org/wiki/TextEdit" rel="external">TextEdit</a></li>
+    </ul>
+   </td>
+   <td>
+    <ul>
+     <li><a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a></li>
+     <li><a href="https://www.visualstudio.com/">Visual Studio Code</a></li>
+     <li><a href="http://brackets.io/">Brackets</a></li>
+     <li><a href="https://shiftedit.net/">ShiftEdit</a></li>
+     <li><a href="https://www.sublimetext.com/">Sublime Text</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Linux</td>
+   <td>
+    <ul>
+     <li><a href="http://en.wikipedia.org/wiki/Vi" rel="external">Vi</a> (All UNIX)</li>
+     <li><a href="http://en.wikipedia.org/wiki/Gedit" rel="external">GEdit</a> (Gnome)</li>
+     <li><a href="http://en.wikipedia.org/wiki/Kate_%28text_editor%29" rel="external">Kate</a> (KDE)</li>
+     <li><a href="http://en.wikipedia.org/wiki/Leafpad" rel="external">LeafPad</a> (Xfce)</li>
+    </ul>
+   </td>
+   <td>
+    <ul>
+     <li><a href="http://www.gnu.org/software/emacs/">Emacs</a></li>
+     <li><a href="http://www.vim.org/" rel="external">Vim</a></li>
+     <li><a href="https://www.visualstudio.com/">Visual Studio Code</a></li>
+     <li><a href="http://brackets.io/">Brackets</a></li>
+     <li><a href="https://shiftedit.net/">ShiftEdit</a></li>
+     <li><a href="https://www.sublimetext.com/">Sublime Text</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Chrome OS</td>
+   <td></td>
+   <td>
+    <ul>
+     <li><a href="https://shiftedit.net/">ShiftEdit</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Aqui está uma captura de tela de um editor de texto avançado:</p>
+
+<p><img alt="Screenshot of Notepad++." src="https://mdn.mozillademos.org/files/8221/NotepadPlusPlus.png" style="display: block; height: 311px; margin: 0 auto; width: 450px;"> </p>
+
+<p>Aqui está uma captura de tela de um editor de texto online:</p>
+
+<p><img alt="Screenshot of ShiftEdit" src="https://mdn.mozillademos.org/files/15837/shiftedit.png" style="display: block; height: 311px; margin: 0 auto; width: 475px;"></p>
+
+<h3 id="Fazendo_upload_de_arquivos_na_web">Fazendo <em>upload</em> de arquivos na <em>web</em></h3>
+
+<p>Quando seu <em>site</em> está pronto para visualização pública, você precisa fazer <em>upload</em> de suas páginas <em>web</em> para o seu servidor<em>web. </em>Você precisa comprar espaço em um servidor, entre vários provedores (veja <a class="new" href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">Quanto custa fazer algo na <em>web</em></a>). Após você decidir qual provedor usar, o provador te enviará um <em>e-mail</em> com suas informações de acesso, normalmente em forma de uma SFTP URL, nome de usuário, senha, e outra informação necessária para conectar no servidor. Tenha em mente que (S)FTP está um tanto quanto antiquado, e outros sistemas de <em>upload</em> de arquivos estão se tornando populares, como <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a> e <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Git/GitHub</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota: </strong>FTP é inerentemente inseguro. Você precisa se certificar que seu provedor permite o uso de uma conexão segura, por exemplo o SFTP ou RSync com SSH.</p>
+</div>
+
+<p>Fazer <em>upload</em> de arquivos para um servidor <em>web</em> é um importante passo durante a criação de um <em>site</em>, por isso cobrimos isso detalhadamente em um <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">artigo separado</a>. Agora, aqui está uma pequena lista de clientes (S)FTP básicos e gratuítos:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Sistema Operacional</th>
+   <th colspan="2" rowspan="1" scope="col" style="text-align: center;"> Cliente FTP</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Windows</td>
+   <td>
+    <ul>
+     <li><a href="http://winscp.net" rel="external">WinSCP</a></li>
+     <li><a href="http://mobaxterm.mobatek.net/">Moba Xterm</a></li>
+    </ul>
+   </td>
+   <td colspan="1" rowspan="3">
+    <ul>
+     <li><a href="https://filezilla-project.org/">FileZilla</a> (Qualquer Sistema Operacional)</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Linux</td>
+   <td>
+    <ul>
+     <li><a href="https://wiki.gnome.org/action/show/Apps/Files?action=show&amp;redirect=Apps%2FNautilus" rel="external">Nautilus/Files</a> (Gnome)</li>
+     <li><a href="http://dolphin.com/" rel="external">Dolphin</a> (KDE)</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Mac OS</td>
+   <td>
+    <ul>
+     <li><a href="http://cyberduck.de/">Cyberduck</a></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>Chrome OS</td>
+   <td>
+    <ul>
+     <li><a href="https://shiftedit.net/">ShiftEdit</a> (Qualquer Sistema Operacional)</li>
+    </ul>
+   </td>
+   <td colspan="1"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Navegando_em_sites">Navegando em <em>sites</em></h3>
+
+<p>Como você já sabe, é necessário um navegador <em>web</em> para visualizar <em>sites</em>. Existem dezenas de opções de navegadores <em>web </em>para seu uso pessoal, mas quando você está desenvolvendo um <em>site</em>, deve testá-lo ao menos nestes navegadores principais, para garantir que seu <em>site </em>funcionará para a maior parte das pessoas:</p>
+
+<ul>
+ <li><a href="https://www.mozilla.org/en-US/firefox/new/" rel="external">Mozilla Firefox</a></li>
+ <li><a href="https://www.google.com/chrome/" rel="external">Google Chrome</a></li>
+ <li><a href="http://windows.microsoft.com/en-US/internet-explorer/download-ie" rel="external">Microsoft Internet Explorer</a></li>
+ <li><a href="http://www.apple.com/safari/" rel="external">Apple Safari</a></li>
+</ul>
+
+<p>Se você estiver buscando um grupo espécífico (como usuários de uma plataforma ou de algum país), deve testar seu <em>site</em> em navegadores adicionais, como <a href="http://www.opera.com/" rel="external">Opera</a>, <a href="http://www.konqueror.org/">Konqueror</a>, ou<a href="http://www.ucweb.com/ucbrowser/" rel="external"> UC Browser</a>.</p>
+
+<p>Mas testar é complicado, pois alguns navegadores apenas funcionam em determinados sistemas operacionais. O <em>Apple Safari</em> funciona no <em>iOS</em> e no <em>Mac OS</em>, enquanto o <em>Internet Explorer</em> funciona apenas no <em>Windows</em>. É melhor se valer dos benefícios de serviços como o<span style=""> </span><a href="http://browsershots.org/" rel="external" style="">Browsershots</a><span style=""> ou </span><a href="http://www.browserstack.com/" rel="external" style="">Browserstack</a><span style="">. O <em>Browsershots</em> fornece capturas de tela de como seu <em>site</em> é visto por vários navegadores. O <em>Browserstack</em> atualmente concede a você total acesso remoto à máquinas virtuais de forma que você pode testar seu site nos ambientes mais comuns. Alternativamente você pode configurar sua própria máquina virtual, mas isso demanda certos conhecimentos específicos. (Se você quiser seguir esse caminho, a <em>Microsoft</em> possui algumas ferramentas para desenvoledores, incluíndo uma máquina virtual pronta para o uso, chamada </span><a href="https://modern.ie" rel="external" style="">modern.ie</a><span style="">.).</span></p>
+
+<p>Por todos os meios possíveis, execute testes em dispositivos reais, especialmente em dispositivos móveis reais. Simulação de dispositivos móveis é uma nova tecnologia, está em evolução e é menos confiável que a simulação de computadores. Dispositivos móveis custam dinheiro, é claro, portanto sugerimos que se veja a <a href="http://opendevicelab.com/" rel="external">Open Device Lab initiative</a>. Você também pode compartilhar dispositivos se quiser testar em várias plataformas sem gastar muito.</p>
+
+<h2 id="Próximos_passos">Próximos passos</h2>
+
+<ul>
+ <li>Alguns desses <em>software</em> são gratis, mas não todos eles. <a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">Descubra quanto custa fazer algo na <em>web</em></a><a class="new" href="/en-US/docs/Learn/How_much_does_it_cost">.</a></li>
+ <li>Se você deseja aprender mais sobre editores de texto, leia nosso artigo sobre <a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">como escolher e instalar um editor de texto.</a></li>
+ <li>Se você está se perguntando como publicar seu<em>site</em> na<em>web</em>, veja <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">"Como fazer <em>upload</em> para um servidor<em>web</em>"</a>.</li>
+</ul>
diff --git a/files/pt-br/learn/common_questions/upload_files_to_a_web_server/index.html b/files/pt-br/learn/common_questions/upload_files_to_a_web_server/index.html
new file mode 100644
index 0000000000..a7d7fe509f
--- /dev/null
+++ b/files/pt-br/learn/common_questions/upload_files_to_a_web_server/index.html
@@ -0,0 +1,172 @@
+---
+title: Como eu faço o upload de arquivos para um servidor web ?
+slug: Learn/Common_questions/Upload_files_to_a_web_server
+tags:
+  - FTP
+  - GitHub
+  - Iniciante
+  - MecanismosWeb
+  - hospedagem
+  - rsync
+  - sftp
+translation_of: Learn/Common_questions/Upload_files_to_a_web_server
+---
+<div class="summary">
+<p>Este artigo mostra como publicar seu site online usando ferramentas de transferência de arquivos.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos :</th>
+   <td>Você deve saber  <a href="https://developer.mozilla.org/en-US/Learn/What_is_a_web_server">what a web server is</a> e <a href="https://developer.mozilla.org/en-US/Learn/Understanding_domain_names">how domain names work</a>. Você também deve saber como <a href="/en-US/Learn/Set_up_a_basic_working_environment">set up a basic environment</a> e como <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">write a simple webpage</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender como enviar arquivos para um servidor usando as várias ferramentas de transferências de arquivos disponíveis.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>Se você construiu uma página web básica (veja <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a>, por exemplo), provavelmente desejará colocá-la online, em um servidor da web. Neste artigo, discutiremos como fazer isso, usando várias opções disponíveis, como clientes SFTP, RSync e Github.</p>
+
+<h2 id="SFTP">SFTP</h2>
+
+<p>Existem vários clientes SFTP . Nossa demo cobre o FileZilla, já que é gratuito e está disponível para Windows, macOS e Linux. Para instalar o FileZilla, vá para a página de downloads do FileZilla, clique no botão Download grande e instale a partir do arquivo de instalação da maneira usual.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Claro que existem outras opções. Consulte <a href="/en-US/Learn/How_much_does_it_cost#Publishing_tools.3A_FTP_client">Publishing tools</a> para mais informações.</p>
+</div>
+
+<p>Abra o FileZilla, você verá algo semelhante a isso: </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15767/filezilla-ui.png" style="display: block; height: 451px; margin: 0px auto; width: 690px;"></p>
+
+<h3 id="Logging_in">Logging in</h3>
+
+<p>Para este exemplo, vamos supor que nosso provedor de hospedagem (o serviço que hospedará nosso servidor web HTTP) seja uma empresa fictícia ,"Example hosting provider" , cujos URLs são semelhantes a este:  <code>mypersonalwebsite.examplehostingprovider.net</code>.</p>
+
+<p>Acabamos de abrir uma conta e receber estas informações : </p>
+
+<blockquote>
+<p>Parabéns por abrir uma conta no Example Hosting Provider.</p>
+
+<p>Sua conta: <code>demozilla</code></p>
+
+<p>Seu site estará disponível em :   <code>demozilla.examplehostingprovider.net</code></p>
+
+<p>Para publicar nessa conta, conecte-se por meio do SFTP com as seguintes credenciais :</p>
+
+<ul>
+ <li>Servidor SFTP: <code>sftp://demozilla.examplehostingprovider.net</code></li>
+ <li>Usuário: <code>demozilla</code></li>
+ <li>Senha: <code>quickbrownfox</code></li>
+ <li>Porta: <code>5548</code></li>
+ <li>Para publicar na web, coloque seus arquivos no diretório <code>Public/htdocs</code> .</li>
+</ul>
+</blockquote>
+
+<p>Primeiramente, olhe em <code>http://demozilla.examplehostingprovider.net/</code> — como você pode ver até o momento, não há nada lá :</p>
+
+<p><img alt="Our demozilla personal website, seen in a browser: it's empty" src="https://mdn.mozillademos.org/files/9615/demozilla-empty.png" style="border-style: solid; border-width: 1px; display: block; height: 233px; margin: 0 auto; width: 409px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Dependendo do seu provedor de hospedagem, na maioria das vezes você verá uma página dizendo algo como como "Este site é hospedado por [serviço de hospedagem]".Isso é claro, quando você acessa seu endereço da web pela primeira vez.</p>
+</div>
+
+<p>Para conectar seu cliente SFTP ao servidor, siga estas etapas:</p>
+
+<ol>
+ <li>Escolha o arquivo<em> &gt; Site Manager(Gerenciador de sites)...</em> no menu principal.</li>
+ <li>Na janela do gerenciador de site, vá em novo site e preencha o nome do site como <strong>demozilla</strong> no espaço fornecido.</li>
+ <li>Preencha o servidor SFTP que seu host forneceu no campo <em>Host:</em> field.</li>
+ <li>Em <em>Logon Type(tipo de LogOn):</em> Escolha normal  e ,em seguida , preencha com o nome de usuário e a senha fornecida nos campos relevantes.</li>
+ <li>Preencha a porta correta e outras informações.</li>
+</ol>
+
+<p>Sua janela estará semelhante a esta: </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15769/site-manager.png" style="display: block; height: 561px; margin: 0px auto; width: 684px;"></p>
+
+<p>Agora pressione <em>Connect</em> para conectar ao servidor SFTP.</p>
+
+<p>Nota: Atenção, certifique-se de que seu provedor de hospedagem oferece conexão SFTP (FTP seguro) ao seu espaço de hospedagem. O FTP é inerentemente inseguro e você não deve usá-lo.</p>
+
+<h3 id="Visão_local_e_remota">Visão local e remota</h3>
+
+<p>Depois de conectada, sua tela deve ser semelhante a esta (conectamos a um exemplo nosso para lhe dar uma ideia):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15768/connected.png" style="border-style: solid; border-width: 1px; display: block; height: 199px; margin: 0px auto; width: 700px;"></p>
+
+<p>Vamos analisar o que você está vendo:</p>
+
+<ul>
+ <li>No painel esquerdo central, você vê seus arquivos locais. Navegue até o diretório onde você armazena seu site (e.g. <code>mdn</code>).</li>
+ <li>No painel direito central, você vê arquivos remotos.Estamos conectados em nossa raiz FTP distante(Nesse caso, <code>users/demozilla</code>)</li>
+ <li>No momento, você pode ignorar os painéis inferiores e superiores.Respectivamente, trata-se de um log de mensagens que mostra o status de conexão entre seu computador e o servidor SFTP e um log em tempo real de cada interação entre seu cliente SFTP e o servidor.</li>
+</ul>
+
+<h3 id="Enviando_para_o_servidor">Enviando para o servidor </h3>
+
+<p>Nossas instruções de host de exemplo nos disseram "Para publicar na web, coloque seus arquivos no diretório <code>Public/htdocs</code> " Você precisa navegar até o diretório especificado no painel direito. Este diretório é efetivamente a raiz do seu site — onde seu arquivo <code>index.html</code> e outros irão.</p>
+
+<p>Depois de encontrar o diretório remoto correto para colocar seus arquivos, para carregá-los no servidor, você precisa arrastá-los e soltá-los do painel esquerdo para o painel direito.</p>
+
+<h3 id="Eles_estão_realmente_online">Eles estão realmente online ?</h3>
+
+<p>Até agora, tudo bem ,  mas os arquivos estão realmente online ? Você pode verificar novamente voltando ao seu site (e.g. <code>http://demozilla.examplehostingprovider.net/</code>) no seu navegador:</p>
+
+<p><img alt="Here we go: our website is live!" src="https://mdn.mozillademos.org/files/9627/here-we-go.png" style="border-style: solid; border-width: 1px; display: block; height: 442px; margin: 0 auto; width: 400px;"></p>
+
+<p><span lang="fr">E </span><em lang="fr">voilà</em>! Nosso website está vivo!</p>
+
+<h2 id="Rsync">Rsync</h2>
+
+<p>{{Glossary("Rsync")}} é uma ferramenta de sincronização de arquivos local para remoto, que geralmente está disponível na maioria dos sistemas baseados em Unix (como macOS e Linux), mas também existem versões do Windows.</p>
+
+<p>É visto como uma ferramenta mais avançada do que o SFTP, porque por padrão é usado na linha de comando. Um comando básico se parece com isto:</p>
+
+<pre class="brush: bash notranslate">rsync [-options] SOURCE user@x.x.x.x:DESTINATION</pre>
+
+<ul>
+ <li><code>-options</code> é um travessão seguido por uma ou mais letras, por exemplo -v para mensagens de erros detalhadas e -b para fazer backups. Você pode ver a lista completa em <a href="https://linux.die.net/man/1/rsync">rsync man page</a> (Pesquise por "Options summary").</li>
+ <li><code>SOURCE</code> é o caminho para o arquivo ou diretório local do qual você deseja copiar os arquivos.</li>
+ <li><code>user@</code> são as credenciais de usuário no servidor remoto para o qual você deseja copiar os arquivos.</li>
+ <li><code>x.x.x.x</code>  é o endereço de IP do servidor remoto.</li>
+ <li><code>DESTINATION</code> é o caminho para o local que você deseja copiar seu diretório ou arquivos no servidor remoto.</li>
+</ul>
+
+<p>Você precisa obter esses detalhes do seu provedor de hospedagem.</p>
+
+<p>Para mais informações, veja <a href="https://www.atlantic.net/hipaa-compliant-cloud-hosting-services/how-to-use-rsync-copy-sync-files-servers/">How to Use Rsync to Copy/Sync Files Between Servers</a>.</p>
+
+<p>Obviamente, é uma boa ideia usar uma conexão segura, como no FTP. No caso do Rsync, você especifica os detalhes do SSH para fazer a conexão por SSH, usando a opção -e. Por exemplo:</p>
+
+<pre class="brush: bash notranslate">rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION</pre>
+
+<p>Você  pode encontrar mais detalhes sobre o assunto em <a href="https://www.digitalocean.com/community/tutorials/how-to-copy-files-with-rsync-over-ssh">How To Copy Files With Rsync Over SSH</a>.</p>
+
+<h3 id="Ferramentas_Rsync_GUI">Ferramentas Rsync GUI</h3>
+
+<p>Ferramentas GUI estão disponíveis para Rsync (para aqueles que não se sentem tão confortáveis ​​com o uso da linha de comando). <a href="https://acrosync.com/mac.html">Acrosync</a> é uma dessas ferramentas e está disponível para Windows e macOS</p>
+
+<p>Novamente, você teria que obter as credenciais de conexão do seu provedor de hospedagem, mas desta forma você teria uma GUI para inseri-lás.</p>
+
+<h2 id="GitHub">GitHub</h2>
+
+<p>Github permite você publicar páginas por meio do <a href="https://pages.github.com/">GitHub pages</a> (gh-pages).</p>
+
+<p>Cobrimos o básico de como usar isso no <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a> artigo do guia <a href="/en-US/Learn/Getting_started_with_the_web">Getting started with the Web</a> , então não vamos repetir tudo aqui.</p>
+
+<p>No entanto, é importante saber que você também pode hospedar um site no GitHub, mas usar um domínio personalizado com ele. Para obter um guia detalhado, consulte <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Using a custom domain with GitHub Pages</a> .</p>
+
+<h2 id="Outros_métodos_para_enviar_arquivos">Outros métodos para enviar arquivos</h2>
+
+<p>O protocolo FTP é um método conhecido de publicação de um site, mas não o único. Aqui estão algumas outras possibilidades:</p>
+
+<ul>
+ <li><strong>Web interfaces(Interfaces Web)</strong>. Uma interface HTML que atua como front-end para um serviço de envio de arquivo remoto. Fornecido pelo seu serviço de hospedagem.</li>
+ <li><strong>{{Glossary("WebDAV")}}</strong>. Uma extensão do protocolo {{Glossary("HTTP")}} para permitir um gerenciamento de arquivos mais avançado.</li>
+</ul>
diff --git a/files/pt-br/learn/common_questions/using_github_pages/index.html b/files/pt-br/learn/common_questions/using_github_pages/index.html
new file mode 100644
index 0000000000..35c7636ef2
--- /dev/null
+++ b/files/pt-br/learn/common_questions/using_github_pages/index.html
@@ -0,0 +1,101 @@
+---
+title: How do I use GitHub Pages?
+slug: Learn/Common_questions/Using_Github_pages
+translation_of: Learn/Common_questions/Using_Github_pages
+---
+<p class="summcary"><a href="https://github.com/">GitHub</a> is a "social coding" site. It allows you to upload code repositories for
+ storage in thecelio <a href="http://git-scm.com/">Git</a> <strong>version control system. </strong>You can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your GitHub code, use it, learn from it, and improve on it. You can do that with other people's code too! This article provides a basic guide to publishing content using Github's gh-pages feature.</p>
+
+<h2 id="Publishing_content">Publishing content</h2>
+
+<p>GitHub is a very important and useful community to get involved in, and Git/GitHub is a very popular <a href="http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control">version control system</a> — most tech companies now use it in their workflow. GitHub has a very useful feature called <a href="https://pages.github.com/">GitHub Pages</a>, which allows you to publish website code live on the Web.</p>
+
+<h3 id="Basic_Github_setup">Basic Github setup</h3>
+
+<ol>
+ <li>First of all, <a href="http://git-scm.com/downloads">install Git</a> on your machine. This is the underlying version control system software that GitHub works on top of.</li>
+ <li>Next, <a href="https://github.com/join">sign up for a GitHub account</a>. It's simple and easy.</li>
+ <li>Once you've signed up, log in to <a href="https://github.com">github.com</a> with your username and password.</li>
+</ol>
+
+<h3 id="Preparing_your_code_for_upload">Preparing your code for upload</h3>
+
+<p>You can store any code you like in a Github repository, but to use the GitHub Pages feature to full effect, your code should be structured as a typical website, e.g. with the primary entry point being an HTML file called <code>index.html</code>.</p>
+
+<p>The other thing you need to do before moving on is to initialise your code directory as a Git repository. To do this:</p>
+
+<ol>
+ <li>Point the command line to your <code>test-site</code> directory (or whatever you called the directory containing your website). For this, use the <code>cd</code> command (i.e. "<em>c</em>hange <em>d</em>irectory"). Here's what you'd type if you've put your website in a directory called <code>test-site</code> on your desktop:
+
+  <pre class="brush: bash">cd Desktop/test-site</pre>
+ </li>
+ <li>When the command line is pointing inside your website directory, type the following command, which tells the <code>git</code> tool to turn the directory into a git repository:
+  <pre class="brush: bash">git init</pre>
+ </li>
+</ol>
+
+<h4 id="An_aside_on_command_line_interfaces">An aside on command line interfaces</h4>
+
+<p>The best way to upload your code to Github is via the command line — this is a window where you type in commands to do things like create files and run programs, rather than clicking inside a user interface. It will look something like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9483/command-line.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You could also consider using a <a href="http://git-scm.com/downloads/guis">Git graphical user interface</a> to do the same work, if you feel uncomfortable with the command line.</p>
+</div>
+
+<p><span id="command-line">Every operating system comes with a command line tool:</span></p>
+
+<ul>
+ <li><strong>Windows</strong>: <strong>Command Prompt</strong> can be accessed by pressing the Windows key, typing <em>Command Prompt</em>, and choosing it from the list that appears. Note that Windows has its own command conventions differing from Linux and OS X, so the commands below may vary on your machine.</li>
+ <li><strong>OS X</strong>: <strong>Terminal</strong> can be found in <em>Applications &gt; Utilities</em>.</li>
+ <li><strong>Linux</strong>: Usually you can pull up a terminal with <em>Ctrl + Alt + T</em>. If that doesn't work, look for <strong>Terminal </strong>in an app bar or menu.</li>
+</ul>
+
+<p>This may seem a bit scary at first, but don't worry — you'll soon get the hang of the basics. You tell the computer to do something in the terminal by typing in a command and hitting Enter, as seen above.</p>
+
+<h3 id="Creating_a_repo_for_your_code">Creating a repo for your code</h3>
+
+<ol>
+ <li>Next, you need to create a new repo for your files to go in. Click Plus (+) in the top right of the GitHub homepage, then choose <em>New Repository</em>.</li>
+ <li>On this page, in the <em>Repository name</em> box, enter a name for your code repository, for example <em>my-repository</em>.</li>
+ <li>Also fill in a description to say what your repository is going to contain. Your screen should look like this:<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/12143/create-new-repo.png" style="display: block; height: 548px; margin: 0px auto; width: 800px;"></li>
+ <li>Click <em>Create repository</em>; this should bring you to the following page: <br>
+  <img alt="" src="https://mdn.mozillademos.org/files/12141/github-repo.png" style="display: block; height: 520px; margin: 0px auto; width: 800px;"></li>
+</ol>
+
+<h3 id="Uploading_your_files_to_GitHub">Uploading your files to GitHub</h3>
+
+<ol>
+ <li>On the current page, you are interested in the section <em>…or push an existing repository from the command line</em>. You should see two lines of code listed in this section. Copy the whole of the first line, paste it into the command line, and press Enter. The command should look something like this:
+
+  <pre class="copyable-terminal-content js-zeroclipboard-target"><span class="user-select-contain">git remote add origin <span class="js-live-clone-url">https://github.com/chrisdavidmills/my-repository.git</span></span></pre>
+ </li>
+ <li>Next, type the following two commands, pressing Enter after each one. These prepare the code for uploading to GitHub, and ask Git to manage these files.
+  <pre class="brush: bash">git add --all
+git commit -m 'adding my files to my repository'</pre>
+ </li>
+ <li>Finally, push the code up to GitHub by going to the GitHub web page you're on and entering into the terminal the second of the two commands we saw the <em>…or push an existing repository from the command line</em> section:
+  <pre class="brush: bash">git push -u origin master</pre>
+ </li>
+ <li>Now you need to create a gh-pages branch of your repo; refresh the current page and you'll see a repository page something like the one below. You need to press the button that says <em>Branch: <strong>master</strong></em>, type <em>gh-pages</em> in the text input, then press the blue button that says <em>Create branch: gh-pages</em>. This creates a special code branch called gh-pages that is published at a special location. It's URL takes the form <em>username.github.io/my-repository-name</em>, so in my example's case, the URL would be <em>https://chrisdavidmills.github.io/my-repository</em>. The page shown is the index.html page.<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/12145/repo-site.png" style="display: block; margin: 0 auto;"></li>
+ <li>Navigate to your GitHub Pages' web address in a new browser tab, and you should see your site online! Email it to your friends and show off your mastery.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: If you get stuck, the <a href="https://pages.github.com/">GitHub Pages homepage</a> is also really helpful.</p>
+</div>
+
+<h3 id="Further_GitHub_knowledge">Further GitHub knowledge</h3>
+
+<p>If you want to make more changes to your test site and upload those to GitHub, you simply need to make the change to your files just like you did before. Then, you need to enter the following commands (pressing Enter after each one) to push those changes to GitHub:</p>
+
+<pre>git add --all
+git commit -m 'another commit'
+git push</pre>
+
+<p>You can replace <em>another commit</em> with a more suitable message to describe what change you just made.</p>
+
+<p>We have barely scratched the surface of Git. To learn more, start off with the <a href="https://help.github.com/index.html">GitHub Help site</a>.</p>
diff --git a/files/pt-br/learn/common_questions/what_is_a_domain_name/index.html b/files/pt-br/learn/common_questions/what_is_a_domain_name/index.html
new file mode 100644
index 0000000000..998e1091d6
--- /dev/null
+++ b/files/pt-br/learn/common_questions/what_is_a_domain_name/index.html
@@ -0,0 +1,152 @@
+---
+title: O que é um nome de domínio?
+slug: Learn/Common_questions/What_is_a_domain_name
+translation_of: Learn/Common_questions/What_is_a_domain_name
+---
+<div class="summary">
+<p>Nesse artigo examinaremos nomes de domínios: o que são, como são estruturados, e como conseguir um.</p>
+</div>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Primeiro você precisa conhecer <strong><a href="https://developer.mozilla.org/pt-BR/docs/Learn/Common_questions/Como_a_internet_funciona">como a Internet funciona</a></strong> e entender <strong><a href="/en-US/Learn/Understanding_URLs">what URLs are</a>.</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivos:</th>
+   <td>Aprender o que são <strong>"nomes de domínios"</strong>, como funcionam, e porquê são importantes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sumário">Sumário</h2>
+
+<p><span class="seoSummary">"Nomes de Domínios" são uma parte fundamental da infraestrutura da Internet.  Eles provêm um endereço legível para qualquer  servidor web disponível na Internet.</span></p>
+
+<p>Qualquer computador conectado na Internet pode ser alcançado através de um endereço {{Glossary("IP")}} público, consistido de 32 bits para IPv4 (eles são, normalmente, escritos com quatro grupos de três números entre 0 e 255, separados por pontos (p.e., <code>173.194.121.32</code>) ou consistidos de 128 bits para IPv6 (eles são normalmente escritos com oito grupos de 4 números hexadecimais, separados por dois pontos (p.e., <code>2027:0da8:8b73:0000:0000:8a2e:0370:1337</code>). Computadores podem manipular esses endereços facilmente, mas as pessoas tem dificuldade em descobrir quem está executando o servidor ou que serviço o site oferece. Endereços de IP são difíceis de lembrar e podem mudar com o tempo. Para resolver todos esses problemas nós usamos endereços legíveis chamados domain names (nomes de domínio).</p>
+
+<h2 id="Active_Learning">Active Learning</h2>
+
+<p><em>There is no active learning available yet. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
+
+<h2 id="Deeper_dive">Deeper dive</h2>
+
+<h3 id="Estrutura_dos_domain_names">Estrutura dos domain names</h3>
+
+<p>Um "nome de domínio" tem uma estrutura simples feita de várias partes (pode ser apenas uma parte, duas, três...), separados por pontos e<strong> lidos da direita para a esquerda</strong>:</p>
+
+<p><img alt="Anatomy of the MDN domain name" src="https://mdn.mozillademos.org/files/11229/structure.png" style="height: 76px; width: 252px;"></p>
+
+<p>Cada uma dessas partes fornece informações específicas sobre todo o domain name.</p>
+
+<dl>
+ <dt>{{Glossary("TLD")}} (Top-Level Domain).</dt>
+ <dd>O TLD fornece as informações mais genéricas. TLDs informa aos usuários o propósito geral do serviço por trás do nome de domínio. Os TLDs mais genéricos (.com, .org, .net) não requer web services para atender a critérios rigorosos, mas alguns TLDs impõem políticas mais rigorosas. Por exemplo, TLDs locais tais como .us, .fr, or .sh podem exigir que o serviço seja fornecido em um determinado idioma ou hospedado em um determinado país.</dd>
+ <dt>Label (ou componente)</dt>
+ <dd>Os labels são os que seguem o TLD. Um label pode ser qualquer coisa, de uma letra a uma frase completa. O label localizado a direita antes do TLD pode também ser referido como um <em>Domínio de Nível Secundário</em> (SLD). Um <em>nome de domínio</em> pode ter muitos labels, não é obrigatório nem necessário ter 3 labels para formar um nome de domínio. Por exemplo, www.inf.ed.ac.uk é um nome de domínio correto. Ao controlar a parte "superior" de um nome de domínio (p.e. <a href="https://mozilla.org">mozilla.org</a>), pode-se criar outros nomes de domínios (às vezes chamados de "subdomínios") (p.e. <a href="https://developer.mozilla.org">developer.mozilla.org</a>).</dd>
+</dl>
+
+<h3 id="Comprando_um_nome_de_domínio">Comprando um nome de domínio</h3>
+
+<h4 id="Quem_possui_um_nome_de_domínio">Quem possui um nome de domínio?</h4>
+
+<p>Você não pode “comprar um nome de domínio”. Você paga pelo direito de usar um nome de domínio por um ano ou mais. Você pode renovar seu direito, e sua renovação tem prioridade sobre as aplicações de outras pessoas. Mas você nunca possui o nome de domínio.</p>
+
+<p>As empresas chamadas registradoras usam registros de nome de domínio para acompanhar as informações técnicas e administrativas que conectam você a seu nome de domínio.</p>
+
+<div class="note">
+<p><strong>Nota : </strong>Alguns nomes de domínios podem não ter um registrador encarregado de acompanhar. Por exemplo, todo o nome sob o domínio .fire é gerenciado pela Amazon.</p>
+</div>
+
+<h4 id="Encontrando_um_nome_de_domínio_disponível">Encontrando um nome de domínio disponível</h4>
+
+<p>Para descobrir se um determinado domain name está disponível,</p>
+
+<ul>
+ <li>Ir até um site registrador de nome de domínio. A maioria deles fornece um serviço “whois” que diz se seu nome de domínio está disponível.</li>
+ <li>Alternativamente, se você usa um sistema com shell embutido nele, digite um comnaod <code>whois</code> nele, como mostrado aqui para <code>mozilla.org</code>:</li>
+</ul>
+
+<pre>$ whois mozilla.org
+Domain Name:MOZILLA.ORG
+Domain ID: D1409563-LROR
+Creation Date: 1998-01-24T05:00:00Z
+Updated Date: 2013-12-08T01:16:57Z
+Registry Expiry Date: 2015-01-23T05:00:00Z
+Sponsoring Registrar:MarkMonitor Inc. (R37-LROR)
+Sponsoring Registrar IANA ID: 292
+WHOIS Server:
+Referral URL:
+Domain Status: clientDeleteProhibited
+Domain Status: clientTransferProhibited
+Domain Status: clientUpdateProhibited
+Registrant ID:mmr-33684
+Registrant Name:DNS Admin
+Registrant Organization:Mozilla Foundation
+Registrant Street: 650 Castro St Ste 300
+Registrant City:Mountain View
+Registrant State/Province:CA
+Registrant Postal Code:94041
+Registrant Country:US
+Registrant Phone:+1.6509030800
+</pre>
+
+<p>Como você pode ver, eu não posso registrar <code>mozilla.org</code> porque a Mozilla Foundation já registrou.</p>
+
+<p>Por outro lado, vamos ver se eu poderia registrar <code>afunkydomainname.org</code>:</p>
+
+<pre>$ whois afunkydomainname.org
+NOT FOUND
+</pre>
+
+<p>Como você pode ver, o domínio não existe no banco de dados <code>whois</code> (neste momento em que escrevo), então poderíamos pedir para registrá-lo. Bom saber!</p>
+
+<h4 id="Obtendo_um_nome_de_domínio">Obtendo um nome de domínio</h4>
+
+<p>O processo é bastante simples:</p>
+
+<ol>
+ <li>Ir para o site de um registrador.</li>
+ <li>Geralmente há um apelo chamativo “Obeter um domain name” call to action. Clique nele.</li>
+ <li>Preencher o formulário com todos os detalhes requeridos. Certifique-se especialmente de que você não digitou incorretamente o domain name desejado. Uma vez pago, é tarde demais!</li>
+ <li>O registrador informará quando o domain name estiver registrado corretamente. Dentro de algumas horas, todos os servidores de DNS receberão suas informações de DNS.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota:</strong> Este tempo é frequentemente chamado de <strong>tempo de propagação.</strong> No entanto, este termo não é preciso, pois a atualização não está se propagando (top → down). Os servidores DNS consultados pelo seu computador (abaixo) são aqueles que buscam as informações do servidor autoritativo (superior) quando precisam.</p>
+</div>
+
+<h4 id="Atualização_de_DNS">Atualização de DNS</h4>
+
+<p>Bancos de dados DNS são armazenados em todos os servidores DNS em todo o mundo, e todos esses servidores referem-se a alguns chamados "servidores de nome autoritativo" ou "servidores DNS de  nível superior". Sempre que seu registrador cria ou atualiza qualquer informação para um determinado domínio, a informação deve ser atualizada em todo banco de dados DNS. Cada servidor DNS que conhece um determinado domínio armazena as informações por algum tempo antes de serem automaticamente invalidadas e atualizadas (o servidor DNS cosulta novamente um servidor autoritativo). Assim, leva algum tempo para que os servidores DNS que conhecem esse nome de domínio obtenham as informações atualizadas.</p>
+
+<div class="note">
+<p><strong>Note :</strong> This time is often called <strong>propagation time</strong>. However this term is not precise since the update is not propagating itself (top → down). DNS servers queried by your computer (down) are the ones that fetch the information from the authoritative server (top) when they need it.</p>
+</div>
+
+<h3 id="Como_funciona_uma_solicitação_de_DNS">Como funciona uma solicitação de DNS?</h3>
+
+<p> </p>
+
+<p>Como já vimos, quando você deseja exibir uma página da Web em seu navegador, é mais fácil digitar um nome de domínio do que um endereço IP. Vamos dar uma olhada no processo:</p>
+
+<ol>
+ <li>Digite mozilla.org na barra de localização do seu navegador.</li>
+ <li>Seu navegador pergunta ao seu computador se ele já reconhece o endereço IP identificado por esse nome de domínio (usando um cache DNS local). Em caso afirmativo, o nome é traduzido para o endereço IP e o navegador negocia o conteúdo com o servidor da Web. Fim da história.</li>
+ <li>Se o seu computador não sabe qual IP está por trás do nome mozilla.org, ele vai perguntar a um servidor DNS, cujo trabalho é precisamente informar ao seu computador qual endereço IP corresponde a cada nome de domínio registrado.</li>
+ <li>Agora que o computador conhece o endereço IP solicitado, seu navegador pode negociar o conteúdo com o servidor da web.</li>
+</ol>
+
+<p><img alt="Explanation of the steps needed to obtain the result to a DNS request" src="https://mdn.mozillademos.org/files/8961/2014-10-dns-request2.png" style="height: 702px; width: 544px;"></p>
+
+<h2 id="Próximos_passos">Próximos passos</h2>
+
+<p>Ok, conversamos muito sobre processos e arquitetura. Hora de seguir em frente.</p>
+
+<ul>
+ <li>Se você quer se envolver, é um bom momento para começar a investigar o design e explorar a <a href="/en-US/Learn/Anatomy_of_a_web_page">anatomia de uma página da web.</a></li>
+ <li>É importante notar também que alguns aspectos da construção de um site custam dinheiro. Por favor, <a href="/en-US/docs/Learn/How_much_does_it_cost">consulte quanto custa construir um site</a>.</li>
+ <li>Ou leia mais sobre o <a href="http://en.wikipedia.org/wiki/Domain_name">nome de domínio</a> na Wikipedia.</li>
+ <li>Você também pode encontrar <a href="https://howdns.works/">aqui </a>uma explicação divertida e colorida de como o DNS funciona.</li>
+</ul>