path: root/files/pt-br/learn/common_questions/que_software_eu_preciso/index.html

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