From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../como_a_internet_funciona/index.html | 102 ++++++++++ .../index.html | 112 +++++++++++ .../index.html | 61 ++++++ .../index.html | 221 ++++++++++++++++++++ files/pt-br/learn/common_questions/index.html | 125 ++++++++++++ .../o_que_e_um_web_server/index.html | 121 +++++++++++ .../o_que_s\303\243o_hyperlinks/index.html" | 91 +++++++++ .../index.html | 123 ++++++++++++ .../pensando_antes_de_codificar/index.html | 178 +++++++++++++++++ .../quanto_custa_fazer_algo_web/index.html | 155 ++++++++++++++ .../que_software_eu_preciso/index.html | 222 +++++++++++++++++++++ .../upload_files_to_a_web_server/index.html | 172 ++++++++++++++++ .../common_questions/using_github_pages/index.html | 101 ++++++++++ .../what_is_a_domain_name/index.html | 152 ++++++++++++++ 14 files changed, 1936 insertions(+) create mode 100644 files/pt-br/learn/common_questions/como_a_internet_funciona/index.html create mode 100644 files/pt-br/learn/common_questions/como_configurar_um_servidor_de_testes_local/index.html create mode 100644 files/pt-br/learn/common_questions/como_voce_hospeda_seu_site_google_app_engine/index.html create mode 100644 files/pt-br/learn/common_questions/ferramentas_de_desenvolvimento_do_navegador/index.html create mode 100644 files/pt-br/learn/common_questions/index.html create mode 100644 files/pt-br/learn/common_questions/o_que_e_um_web_server/index.html create mode 100644 "files/pt-br/learn/common_questions/o_que_s\303\243o_hyperlinks/index.html" create mode 100644 files/pt-br/learn/common_questions/pages_sites_servers_and_search_engines/index.html create mode 100644 files/pt-br/learn/common_questions/pensando_antes_de_codificar/index.html create mode 100644 files/pt-br/learn/common_questions/quanto_custa_fazer_algo_web/index.html create mode 100644 files/pt-br/learn/common_questions/que_software_eu_preciso/index.html create mode 100644 files/pt-br/learn/common_questions/upload_files_to_a_web_server/index.html create mode 100644 files/pt-br/learn/common_questions/using_github_pages/index.html create mode 100644 files/pt-br/learn/common_questions/what_is_a_domain_name/index.html (limited to 'files/pt-br/learn/common_questions') 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 +--- +
+

Este artigo discute sobre o que é e como funciona a internet.

+
+ + + + + + + + + + + + +
Pré-requisitos:Nenhum, mas encorajamos a ler primeiro Pensando antes de codificar
Objetivo:Você irá aprender o básico da infraestrutura técnica da Web e a diferença entre Internet e Web.
+ +

Resumo

+ +

A Internet é 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.

+ +

A história da internet é um pouco obscura. 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.

+ +

Aprendizado ativo

+ + + +

Mergulho profundo

+ +

Uma rede simples

+ +

Quando dois computadores precisam se comunicar, você precisa conectá-los, seja fisicamente (normalmente com um Cabo de rede) ou de uma forma sem fio (por exemplo com sistemas WiFi ou Bluetooth). Todos os computadores modernos suportam alguma(s) dessas conexões.

+ +
+

Nota: Até o final deste artigo nós estaremos falando apenas a respeito de cabos físicos, mas redes sem fio funcionam da mesma forma

+
+ +

Two computers linked together

+ +

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.

+ + + +

Ten computers all together

+ +

Para resolver este problema, cada computador na rede está conectado à um pequeno computador especial chamado de roteador. Este roteador 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.

+ +

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.

+ +

Ten computers with a router

+ +

Uma rede de redes

+ +

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.

+ +

Two routers linked together

+ +

Conectando computadores a roteadores, e então roteadores a roteadores, nós podemos escalar nossa rede infinitamente.

+ +

Routers linked to routers

+ +

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 modem. Este modem transforma a informação da nossa rede em uma informação gerenciavel pela rede telefonica e vice-versa.

+ +

A router linked to a modem

+ +

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.

+ +

Full Internet stack

+ +

Encontrando computadores

+ +

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 Internet Protocol, 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.

+ +

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 nome de domínio. 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.

+ +

Show how a domain name can alias an IP address

+ +

A Internet e a Web

+ +

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

+ +

Noções básicas sobre nomes de domínio

+ +

Próximos passos

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

Este artigo explica como configurar um simples servidor de testes local em seu computador e o básico para utiliza-lo.

+
+ + + + + + + + + + + + +
Pré-requisitos: +

Primeiro você precisa saber como a internet funciona e o que é um servidor Web.

+
Objetivo:Você vai aprender como configurar um servidor de testes local.
+ +

Arquivos locais vs. arquivos remotos

+ +

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 > Abrir... e navegando para o arquivo HTML. Existem muitas maneiras de realizar isso.

+ +

Se o caminho do endereço web começa com file:// 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 http:// ou https://, para mostrar que o arquivo foi recebido via HTTP.

+ +

O problema com o teste de arquivos locais

+ +

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:

+ + + +

Executando um servidor HTTP local simples

+ +

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 SimpleHTTPServer do Python.

+ +

Para fazer isso:

+ +
    +
  1. +

    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:

    + +
      +
    • Vá para python.org (em inglês)
      • +
    • Na seção Download, clique no link para Python "3.xxx".
      • +
    • Na parte inferior da página, escolha o instalador executável do Windows x86 e baixe-o.
      • +
    • Quando tiver baixado, execute-o.
      • +
    • Na primeira página do instalador, certifique-se de marcar a caixa de seleção "Adicionar Python 3.xxx ao PATH".
      • +
    • Clique em Instalar e então, clique em Fechar quando a instalação terminar.
      • +
    +
    2. +
  2. +

    Abra seu prompt de comando (Windows)/ terminal (macOS/ Linux). Para verificar se o Python está instalado, digite o seguinte comando:

    + + 
    python -V
    +
    3. +
  3. +

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

    + + 
    # 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 ..
    +
    4. +
  4. +

    Digite o comando para inicializar o servidor nesse diretório:

    + + 
    # 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 SimpleHTTPServer
    +
    5. +
  5. +

    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 localhost:8000 no seu navegador web. Aqui você verá o conteúdo do diretório listado — clique no arquivo HTML que você deseja executar.

    +
    6. +
+ +
+

Nota: 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 python3 -m http.server 7800 (Python 3.x) ou python -m SimpleHTTPServer 7800 (Python 2.x). Você pode acessar seu conteúdo em localhost:7800.

+
+ +

Executando linguagens do lado do servidor localmente

+ +

Os módulos SimpleHTTPServer (python 2.0) e http.server (python 3.0) 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:

+ + + +
$ cd path/to/your/php/code
+$ php -S localhost:8000
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 +--- +

Google App Engine é 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.

+ +

Criando um projeto na plataforma do Google Cloud

+ +

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.

+ +
    +
  1. Vá para o App Engine dashboard no Google Cloud Platform e apert o botão Create (Criar).
    2. +
  2. 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.
    3. +
  3. Digite um nome para o projeto, edite a ID do seu projeto e anote-a. Para este tutorial, os seguintes valores são usados +
      +
    • Nome do projeto: GAE Sample Site
      • +
    • ID do Projeto: gaesamplesite
      • +
    +
    4. +
  4. Clique no botão Create para criar o seu projeto.
    5. +
+ +

Criando uma aplicação

+ +

Cada projeto do Cloud Platform pode conter um aplicativo do App Engine. Vamos preparar um aplicativo para o nosso projeto.

+ +
    +
  1. Precisamos de um aplicativo de amostra para publicar. Se você não tiver um para usar, faça o download e descompacte este aplicativo de exemplo.
    2. +
  2.  Dê uma olhada na estrutura da aplicação padrão — A pasta website contem o conteúdo do seu website e app.yaml é o seu arquivo de configuração da aplicação. +
      +
    • O conteúdo do seu website deve ser posto dentro da pasta website, e sua página de destino deve ser denominada  index.html, mas fora isso ela pode conter qualquer coisa que você desejar.
      • +
    • O arquivo app.yaml é 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.
      • +
    +
    3. +
+ +

Puplicando sua aplicação

+ +

Agora que nós temos o nosso projeto pronto e arquivos padrões de aplicativo colocados juntos, vamos publicar nosso app.

+ +
    +
  1. Abra o Google Cloud Shell.
    2. +
  2. Arraste e solte a pasta sample-app dentro do painel esquerdo do editor de código.
    3. +
  3. Rode a seguinte linha de comando dentro para selecionar seu projeto: + 
    gcloud config set project gaesamplesite
    +
    4. +
  4. Logo após rode o seguinte comando para ir ao diretório do seu app: + 
    cd sample-app
    +
    5. +
  5. Você agora está pronto para armazenar sua aplicação, i.e. fazer o upload para o App Engine: + 
    gcloud app deploy
    +
    6. +
  6. Digite um número para escolher a região onde você quer que sua aplicação se localize.
    7. +
  7. Digite Y para confirmar.
    8. +
  8. Agora navegue no seu navegador para your-project-id.appspot.com to para ver seu website online. Por exemplo, para a ID do projeto gaesamplesite, vá para gaesamplesite.appspot.com.
    9. +
+ +

Veja também

+ +

Para aprender mais, veja Google App Engine Documentation.

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 +--- +
{{IncludeSubnav("/en-US/Learn")}}
+ +
+

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.

+
+ +
+

Nota: Antes de você executar os exemplos abaixo, abra o Beginner's example site (site de exemplos do iniciante) que nós criamos durante o início da série de artigos da Web ( Getting started with the Web ). Você poderá abrir isso enquanto segue os passos abaixo.

+
+ +

Como abrir o devtools no seu navegador

+ +

O devtools está inserido no navegador em uma janela semelhante a esta:

+ +

+ +

Como você acessa? Três modos:

+ + + +

+ +

O Inspetor: DOM explorer e editor CSS

+ +

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.

+ +

+ +

Se você não vê o inspector,

+ + + +

Explore o inspector DOM

+ +

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.

+ +

+ + + +

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.

+ +

Explorando o editor de CSS

+ +

Por padrão, o editor CSS exibe as regras CSS aplicadas ao elemento atualmente selecionado:

+ +

+ +

Esses recursos são especialmente úteis:

+ + + +

Você notará várias guias clicáveis na parte superior do Visualizador de CSS:

+ + + +

Descubra mais

+ +

Descubra mais sobre o Inspetor em diferentes navegadores:

+ + + +

O depurador JavaScript

+ +

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.

+ +

+ +

Para acessar o (debugger)depurador:

+ +

Firefox: Clique ➤ Web Developer ➤ Debugger ou pelo atalho Ctrl + Shift + S para abrir o Debugger Javascript.  Se a ferramenta já estiver vísivel, clique na aba Debugger.

+ +

Chrome: Abra as ferramentas de desenvolvimento e selecione a aba Fontes(Sources). (Opera funciona igualmente).

+ +

Edge e Internet Explorer 11: Aperte F12 então, Ctrl + 3, ou se a ferramenta já estiver visível, clique na aba Debugger(depurador).

+ +

Safari: Abra  as ferramentas de desenvolvedor e então selecione a aba Debugger(depurador).

+ +

Explorando o depurador

+ +

Há três painéis no Depurador(debugger) no Firefox

+ +

Lista de Arquivos

+ +

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.

+ +

+ +

Código fonte

+ +

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

+ +

+ +

Veja as expressões e pontos de paradas

+ +

À direita do painel é exibida uma lista de expressões e pontos de paradas adicionadas.

+ +

Na imagem, na primeira seção,  Watch expressions, mostra a lista de itens e variáveis que foram adicionadas.  Expanda a lista para visualizar os valores no vetor. 

+ +

Na próxima seção, Pontos de paradas, lista os pontos de paradas na página. No arquivo  example.js, um breakpoint foi adicionado listItems.push(inputNewItem.value);

+ +

As duas seções finais aparecem somente quando o código está executando.

+ +

A seção Call stack (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).

+ +

A seção final, Scopes(escopos), 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.

+ +

+ +

O console JavaScript

+ +

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.

+ +

Para acessar o console basta abrir ferramentas de desenvolvimentos e escolher a aba Console.

+ +

No Firefox o atalho é ctrl + shift+ k ou no menu comando:   ➤ Web Developer ➤ Web Console, or Tools ➤ Web Developer ➤ Web Console.

+ +

Aparecerá uma janela como a seguinte:

+ +

+ +

Para ver o que acontece, tente inserir os seguintes trechos de código no console, um por um (e, em seguida, pressione Enter):

+ +
    +
  1. + 
    alert('hello!');
    +
    2. +
  2. + 
    document.querySelector('html').style.backgroundColor = 'purple';
    +
    3. +
  3. + 
    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);
    +
    4. +
+ +

Agora, tente inserir as seguintes versões incorretas do código e veja o que você obtém.

+ +
    +
  1. + 
    alert('hello!);
    +
    2. +
  2. + 
    document.cheeseSelector('html').style.backgroundColor = 'purple';
    +
    3. +
  3. + 
    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);
    +
    4. +
+ +

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!

+ +

Descubra mais

+ +

Descubra mais sobre o console JavaScript em diferentes navegadores:

+ + + +

Veja também

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

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 HTML ou CSS.) Estes artigos foram feitos para funcionar de forma independente.

+ +
+

Questões sobre HTML e CSS

+ +

Leia Use HTML to solve common problems (em inglês) e Use CSS to solve common problems (em inglês) para solução de problemas comuns com HTML/CSS.

+
+ +

Como a Web funciona?

+ +

Esta seção cobre a mecânica da Web —questões relacionadas a conhecimentos gerais sobre o ecossistema da Web e como ele funciona.

+ +
+
+

Como a Internet funciona?

+
+
A Internet é 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.
+
+

Qual a diferença entre webpage, website, web server, and search engine?

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

O que é uma URL?

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

O que é um domain name?

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

O que é um web server?

+
+
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.
+
+ +
+
Nesse artigo, nós veremos do que são hypelinks e porque eles importam.
+
+ +

Tools and setup

+ +

Questions related to the tools/software you can use to build websites.

+ +
+
+

How much does it cost to do something on the Web?

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

What software do I need to build a website?

+
+
In this article we explain which software components you need when you're editing, uploading, or viewing a website.
+
+

What text editors are available?

+
+
In this article we highlight some things to think about when choosing and installing a text editor for web development.
+
+

How do I set up a basic working environment?

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

What are browser developer tools?

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

How do you make sure your website works properly?

+
+
So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.
+
+

How do you upload files to a web server?

+
+
This article shows how to publish your site online with FTP tools — one fo the most common ways to get a website online so others can access it from their computers.
+
+

How do I use GitHub Pages?

+
+
This article provides a basic guide to publishing content using GitHub's gh-pages feature.
+
+

How do you host your website on Google App Engine?

+
+
Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.
+
+

What tools are available to debug and improve website performance?

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

Design and accessibility

+ +

This section lists questions related to aesthetics, page structure, accessibility techniques, etc.

+ +
+
+

How do I start to design my website?

+
+
This article covers the all-important first step of every project: define what you want to accomplish with it.
+
+

What do common web layouts contain?

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

What is accessibility?

+
+
This article introduces the basic concepts behind web accessibility.
+
+

How can we design for all types of users?

+
+
This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.
+
+

What HTML features promote accessibility?

+
+
This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.
+
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 +--- +
+

Neste artigo vamos revisar o que são web servers, como eles funcionam, e por que eles são importantes.

+
+ + + + + + + + + + + + +
Pré-requisitos:Você deve saber como a Internet funciona e entender a diferença entre uma página web, um site, um servidor web e um mecanismo de busca.
Objetivo:Você irá aprender o que é um servidor web e compreender de modo geral como ele funciona.
+ +

Sumário

+ +

"Servidor web (web server)" pode referir ao hardware ou ao software, ou ambos trabalhando juntos.

+ +
    +
  1. 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 mozilla.org.
    2. +
  2. 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 servidor HTTP. 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.
    3. +
+ +

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 servidor HTTP (software) enviará o documento requerido, também via HTTP.

+ +

Basic representation of a client/server connection through HTTP

+ +

Para publicar um website, é necessário ou um servidor web estático ou um dinâmico.

+ +

Um servidor web estático 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.

+ +

Um servidor web dinâmico consiste em um servidor web estático com software adicional, mais comumente um servidor de aplicações (application server) e um banco de dados (database). É chamado "dinâmico" porque o servidor de aplicações atualiza os arquivos hospedados antes de enviá-los ao navegador através do servidor HTTP.

+ +

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 (HTML template) 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 templates HTML e uma gigantesca base de dados. Essa configuração agiliza e facilita o gerenciamento e a entrega do conteúdo.

+ +

Aprendizado ativo

+ +

Ainda não há aprendizado ativo disponível. Por favor, considere contribuir.

+ +

Entrando a  fundo

+ +

Para carregar uma página web, como já foi dito, seu browser envia uma requisição ao servidor web, que busca pelo arquivo requisitado no seu próprio espaço de armazenamento. Ao encontrar o arquivo, o servidor web realiza a leitura, faz os processamentos necessários e o envia ao browser. Vamos olhar mais detalhamente para essas etapas.

+ +

Servindo arquivos

+ +

Um servidor web precisa primeiro armazenar os arquivos dos websites, como todos os documentos HTML e seus assets, que incluem imagens, páginas de estilo CSS, arquivos JavaScript, fontes e vídeos.

+ +

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

+ + + +

Por todas essas razões, encontrar um bom provedor de servidores é a chave para criar seu próprio website.  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 nesse artigo.

+ +

Uma vez que você escolheu uma solução de servidores web, você só precisa fazer o upload dos seus arquivos para o servidor web.

+ +

Comunicando através do HTTP

+ +

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.

+ +

Um protocolo é um conjunto de regras para comunicação entre dois computadores. HTTP é um protocolo textual sem estado.

+ +
+
Textual
+
Todos os comandos são de texto simples e legíveis por humanos.
+
Sem estado
+
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.)
+
+ +

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:

+ + + +

The MDN 404 page as an example of such error pageEm um servidor web, o servidor HTTP é responsável por processar e responder as requisições recebidas.

+ +
    +
  1. Ao receber uma requisição, um servidor HTTP primeiramente confirma se a URL requisitada corresponde ao arquivo existente.
    2. +
  2. 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.
    3. +
  3. 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 páginas de erro do 404.)
    4. +
+ +

Conteúdo estático vs. dinâmico

+ +

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.

+ +

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

+ +

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  Kuma e é desevolvido em Python (usando o framework Django ). A equipe da Mozilla desenvolveu o Kuma devido a necessidades específicas do MDN, mas há muitas aplicações similares em muitas outras tecnologias..

+ +

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.

+ +

Próximos passos

+ +

Agora que está familiarizado com os servidores web, você pode:

+ + diff --git "a/files/pt-br/learn/common_questions/o_que_s\303\243o_hyperlinks/index.html" "b/files/pt-br/learn/common_questions/o_que_s\303\243o_hyperlinks/index.html" new file mode 100644 index 0000000000..5cfb905389 --- /dev/null +++ "b/files/pt-br/learn/common_questions/o_que_s\303\243o_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 +--- +
+

Neste artigo, veremos o que são hiperlinks e por que eles são importantes.

+
+ + + + + + + + + + + + +
Pré requisitos:Você deve saber como a Internet funciona e estar familiarizado com a diferença entre uma página da web, um site, um servidor da web e um mecanismo de pesquisa.
Objetivo:Aprenda sobre links na Web e por que eles são importantes.
+ +

Sumário

+ +

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.

+ +

Em 1989, Tim Berners-Lee, o inventor da Web, falou sobre os três pilares sobre os quais a Web se sustenta:

+ +
    +
  1. "URL", um sistema de endereços que mantém o controle de documentos da Web;
    2. +
  2. "HTTP", um protocolo de transferência para encontrar documentos ao receber seus URLs;
    3. +
  3. "HTML", um formato de documento que permite incorporar hyperlinks;
    4. +
+ +

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.

+ +

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.

+ +

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.

+ +

Example of a basic display and effect of a link in a web page

+ +

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.

+ +

Mergulho Profundo

+ +

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:

+ + + +
+
Link interno
+
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).
+
Link externo
+
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.
+
Links de entrada
+
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.
+
+ +

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.

+ +

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

+ +

Âncoras

+ +

Muitos links unem duas páginas da web. Âncoras 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.

+ +

Example of a basic display and effect of an anchor in a web page

+ + + +

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.

+ +

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:

+ + + +

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

+ +

Próximos Passos

+ +

Agora você vai querer configurar algumas páginas da web com links.

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

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!

+
+ + + + + + + + + + + + +
Pré-requisitos:Você deverá conhecer como a Internet funciona.
Objetivo:Tornar o leitor apto a descrever as diferenças entre uma página web, um site, um servidor web e um mecanismo de busca.
+ +

Sumário

+ +

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 glossário 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.

+ +

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ágina web
+
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".
+
site
+
Um conjunto de páginas web agrupadas juntas e geralmente conectadas juntas de diversas formas. Também conhecido como "web site" ou simplesmente "site".
+
servidor web
+
Um computador que hospeda um site na Internet.
+
mecanismo de busca
+
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, bing.com ou duckduckgo.com).
+
+ +

Vamos ver uma analogia simples - uma biblioteca pública. Isto é o que você geralmente faria ao visitar uma biblioteca:

+ +
    +
  1. Procura no índice de buscas e verifica o título do livro que você deseja.
    2. +
  2. Anota o número de catálogo do livro desejado.
    3. +
  3. Se dirige à seção particular que contém o livro, encontra o número catalográfico correto, e então apanha o livro.
    4. +
+ +

Comparemos a biblioteca com um servidor web:

+ + + +
+
+ +

Aprendizado ativo

+ +

Ainda não há nenhum aprendizado ativo. Por favor, considere fazer uma contribuição.

+ +

Imersão a Fundo

+ +

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ágina web

+ +

Uma página web é simplesmente um documento que é renderizado ("mostrado") por um navegador. Tais documentos são escritos com uso da linguagem {{Glossary("HTML")}} (a qual iremos ver em maiores detalhes em outros artigos). Uma página web pode possuir uma variedade de diferentes tipos de recursos incorporados a ela, como:

+ + + +
+

Nota:  Navegadores também são capazes de renderizar outros documentos, como arquivos {{Glossary("PDF")}} ou imagens, porém o termo página web se refere especificamente a documentos HTML. Todavia, usaremos apenas o termo documento.

+
+ +

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:

+ +

Example of a web page address in the browser address bar

+ +

Site

+ +

Um site é 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.

+ +

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 homepage (casualmente referenciada como "a home").

+ +

Example of a web site domain name in the browser address bar

+ +

Os conceitos de página web e de website são especialmente fáceis de se confundir quando um website  possui apenas uma página web. Websites com esta característica são ocasionalmente chamados de websites de página única (single-page website).

+ +

Servidor web

+ +

Um servidor web nada mais é que um computador hospedando um ou mais websites. "Hospedar" significa que todas as páginas web e seus arquivos auxiliares estão disponíveis a partir daquele computador. O servidor web enviará qualquer página web a partir do website que está hospedado nele para o navegador de qualquer usuário que o tenha requisitado (feito uma requisição).

+ +

Não confunda websites e servidores. Por exemplo, caso você ouça alguém dizer: "Meu website não está respondendo", isto atualmente significa que o servidor web não está respondendo, logo o website encontra-se indisponível. Mais importante, uma vez que um único servidor web é capaz de hospedar múltiplos websites, o termo servidor web 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.

+ +

Mecanismos de Pesquisa

+ +

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

+ +

Há um número abundante destas ferramentas: Google, Bing, Yandex, DuckDuckGo e diversos outros. Alguns são genéricos, outros especializam-se em tópicos específicos. Utilize qualquer um de sua preferência.

+ +

Muitos iniciantes na web confundem mecanismos de pesquisa e navegadores. Tornemos tudo mais claro: um navegador é uma aplicação de software que recupera e renderiza páginas web; um mecanismo de pesquisa é 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.

+ +

Aqui há uma instância do Firefox mostrando uma caixa de pesquisa do Google como sua página inicial padrão:

+ +

Example of Firefox nightly displaying a custom Google page as default

+ +

Próximos passos

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

Este artigo abrange o primeiro passo, muito importante, de cada projeto: definir o que você deseja realizar com ele.

+ + + + + + + + + + + + +
Pré-requisitos:Nenhum
Objetivo: +

Aprenda a definir metas para direcionar seu projeto da web.

+
+ +

Sumário

+ +

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.

+ +

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:

+ + + +

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.

+ +

Aprendizado Ativo

+ +

Ainda não há aprendizado ativo disponível. Por favor, considere contribuir.

+ +

Mergulho mais profundo

+ +

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.

+ +

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.

+ +

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.

+ +
+

Nota: 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 Ideação do Projeto, Planejamento do Projeto, e Gerenciamento do Projeto.

+
+ +

O que exatamente eu quero realizar?

+ +

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.

+ +

Suponha que você seja um músico. Você poderia desejar:

+ + + +

Depois de ter essa lista, você precisa priorizar. Ordene os objetivos do mais importante para o menos importante:

+ +
    +
  1. Encontrar um(a) novo(a) namorado(a).
    2. +
  2. Deixar as pessoas ouvirem sua música.
    3. +
  3. Falar sobre sua música.
    4. +
  4. Conhecer outros músicos.
    5. +
  5. Vender guloseimas.
    6. +
  6. Ensinar música através de vídeos.
    7. +
  7. Publicar fotos de seus gatos.
    8. +
+ +

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

+ +

Então, agora que você tem uma lista de prioridades, vamos para a próxima pergunta.

+ +

Como um site poderia me levar aos meus objetivos?

+ +

Então você tem uma lista de objetivos e acha que precisa de um site para alcançar esses objetivos. Você tem certeza?

+ +

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.

+ +

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.

+ +

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.

+ +

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.

+ +

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?

+ +

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.

+ +

Em vez de passar por uma longa explicação, voltemos ao nosso exemplo com esta tabela:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ObjetivosCoisas a fazer
Deixar as pessoas ouvirem sua música +
    +
  1. Gravar música
    2. +
  2. Preparar alguns arquivos de áudio utilizáveis on-line (você poderia fazer isso com os serviços da Web existentes?)
    3. +
  3. Dar às pessoas acesso à sua música em alguma parte do seu site
    4. +
+
Falar sobre sua música +
    +
  1. Escrever alguns artigos para iniciar a discussão
    2. +
  2. Definir como os artigos devem parecer
    3. +
  3. Publicar esses artigos no site (Como fazer isso?)
    4. +
+
Conhecer outros músicos +
    +
  1. Fornecer maneiras para as pessoas entrarem em contato com você (E-mail? Facebook? Telefone? Correio?)
    2. +
  2. Definir como as pessoas encontrarão esses canais de contato em seu site
    3. +
+
Vender guloseimas +
    +
  1. Criar as guloseimas
    2. +
  2. Armazenar as guloseimas
    3. +
  3. Encontrar uma maneira de lidar com o envio
    4. +
  4. Encontrar uma maneira de lidar com o pagamento
    5. +
  5. Criar um mecanismo no seu site para que as pessoas façam pedidos
    6. +
+
Ensinar música através de vídeos +
    +
  1. Gravar videoaulas
    2. +
  2. Preparar arquivos de vídeo online (Novamente, você poderia fazer isso com os serviços existentes na Web?)
    3. +
  3. Dar às pessoas acesso aos seus vídeos em alguma parte do seu site
    4. +
+
+ +

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.

+ +

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

+ +

Conclusão

+ +

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.

+ +

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 como a Internet funciona.

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

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.

+
+ + + + + + + + + + + + +
Pré-requisitos:You should already understand what software you need, the difference between a webpage, a website, etc., and what a domain name is.
Objetivo:Review the complete process for creating a website and find out how much each step can cost.
+ +

Sumário

+ +

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

+ +

Software

+ +

Editores de texto

+ +

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.

+ +

Many editors are free, for example Atom, Brackets, Bluefish, TextWrangler, Eclipse, Netbeans, and Visual Studio Code. Some, like Sublime Text, you can test as long as you like, but you're encouraged to pay. Some, like PhpStorm, can cost between a few dozen and 200 dollars, depending on the plan you purchase. Some of them, like Microsoft Visual Studio, 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.

+ +

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.

+ +

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.

+ +

Image editors

+ +

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.

+ +

Editors can be free (GIMP, Paint.NET), moderately expensive (PaintShop Pro, less than $100), or several hundred dollars (Adobe Photoshop).

+ +

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 Pixabay provide images under CC0 license, so you can use, edit and publish them even with modification for commercial use.

+ +

Media editors

+ +

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

+ +

For audio files, you can find free software (Audacity, Wavosaur), or paying up to a few hundred dollars (Sony Sound Forge, Adobe Audition). Likewise, video-editing software can be free (PiTiVi, OpenShot for Linux, iMovie for Mac), less than $100 (Adobe Premiere Elements), or several hundred dollars (Adobe Premiere Pro, Avid Media Composer, Final Cut Pro). The software you received with your digital camera may cover all your needs.

+ +

Publishing tools

+ +

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)FTP client, RSync, or Git/GitHub.

+ +

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.

+ +

If you want to install an (S)FTP client, there are several reliable and free options: for example, FileZilla for all platforms, WinSCP for Windows, Cyberduck for Mac or Windows, and more.

+ +

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.

+ +

Browsers

+ +

You either already have a browser or can get one for free. If necessary, download Firefox here or Google Chrome here.

+ +

Web access

+ +

Computer / modem

+ +

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.

+ +

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.

+ +

You need to upload content to a remote server (see Hosting 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.

+ +

ISP access

+ +

Make sure that you have sufficient {{Glossary("Bandwidth", "bandwidth")}}:

+ + + +

Hosting

+ +

Understanding bandwidth

+ +

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.

+ +
+

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.

+
+ +

Domain names

+ +

Your domain name has to be purchased through a domain name provider (a registrar). Your hosting provider may also be a registrar (1&1, Gandi 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:

+ + + +

Do-it-yourself hosting vs. “packaged” hosting

+ +

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 Wordpress, Dotclear, spip, etc.), upload pre-made or your own templates.

+ +

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., Wordpress, Tumblr, Blogger). For the latter, you won't have to pay anything, but you may have less control over templating and other options.

+ +

Free hosting vs. paid hosting

+ +

You might ask, why should I pay for my hosting when there are so many free services?

+ + + +

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 guaranteed by most paid sites. Most hosting providers give you a huge discount to start with.

+ +

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.

+ +

Professional website agencies and hosting

+ +

If you desire a professional website, you will likely ask a web agency to do it for you.
+
+ Here, costs depend on multiple factors, such as:

+ + + +

...and for hosting:

+ + + +

Depending on how you answer these questions, your site could cost thousands to hundreds of thousands of dollars.

+ +

Next steps

+ +

Now that you understand what kind of money your website may cost you, it's time to start designing that website and setting up your work environment.

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

Neste artigo nós destacamos quais softwares você precisa para editar, fazer upload ou visualizar um site.

+
+ + + + + + + + + + + + +
Pré requisitos:Você deve saber a diferença entre páginas web, sites web, servidoresweb, e mecanismos de busca.
Objetivo:Aprender quais softwares você precisa se quiser editar, fazer upload, ou visualizar um site.
+ +

Sumário

+ +

Você pode baixar a maioria dos programas que precisa para desenvolvimento web gratuitamente. Nós disponibilizamos alguns links neste artigo.

+ +

Você precisa de ferramentas para:

+ + + +

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 software para transferir arquivos para o seu servidor web.

+ +

Práticas

+ +

Ainda não existem práticas disponíveis. Por favor, considere contribuir.

+ +

Aprofundando

+ +

Criando e editando páginas web

+ +

Para criar e editar um site, você precisa de um editor de texto. Editores de texto criam e modificam arquivos de texto não formatados. Outros formatos, como {{Glossary("RTF")}}, permitem que você adicione formatação, como negrito ou sublinhado. Esses formatos não são adequados para escrever em páginas web. Você deve pensar bem em qual editor de texto vai usar, considerando que você trabalhará por bastante tempo nele enquanto estiver construíndo seu site.

+ +

Todos os sistemas operacionais desktop 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 web. 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:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sistema OperacionalEditores PadrãoEditores de Terceiros
Windows + + + +
Mac OS + + + +
Linux + + + +
Chrome OS + +
+ +

Aqui está uma captura de tela de um editor de texto avançado:

+ +

Screenshot of Notepad++. 

+ +

Aqui está uma captura de tela de um editor de texto online:

+ +

Screenshot of ShiftEdit

+ +

Fazendo upload de arquivos na web

+ +

Quando seu site está pronto para visualização pública, você precisa fazer upload de suas páginas web para o seu servidorweb. Você precisa comprar espaço em um servidor, entre vários provedores (veja Quanto custa fazer algo na web). Após você decidir qual provedor usar, o provador te enviará um e-mail 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 upload de arquivos estão se tornando populares, como RSync e Git/GitHub.

+ +
+

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

+
+ +

Fazer upload de arquivos para um servidor web é um importante passo durante a criação de um site, por isso cobrimos isso detalhadamente em um artigo separado. Agora, aqui está uma pequena lista de clientes (S)FTP básicos e gratuítos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sistema Operacional Cliente FTP
Windows + + +
    +
  • FileZilla (Qualquer Sistema Operacional)
    • +
+
Linux + +
Mac OS + +
Chrome OS +
    +
  • ShiftEdit (Qualquer Sistema Operacional)
    • +
+
+ + + +

Como você já sabe, é necessário um navegador web para visualizar sites. Existem dezenas de opções de navegadores web para seu uso pessoal, mas quando você está desenvolvendo um site, deve testá-lo ao menos nestes navegadores principais, para garantir que seu site funcionará para a maior parte das pessoas:

+ + + +

Se você estiver buscando um grupo espécífico (como usuários de uma plataforma ou de algum país), deve testar seu site em navegadores adicionais, como Opera, Konqueror, ou UC Browser.

+ +

Mas testar é complicado, pois alguns navegadores apenas funcionam em determinados sistemas operacionais. O Apple Safari funciona no iOS e no Mac OS, enquanto o Internet Explorer funciona apenas no Windows. É melhor se valer dos benefícios de serviços como o Browsershots ou Browserstack. O Browsershots fornece capturas de tela de como seu site é visto por vários navegadores. O Browserstack 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 Microsoft possui algumas ferramentas para desenvoledores, incluíndo uma máquina virtual pronta para o uso, chamada modern.ie.).

+ +

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 Open Device Lab initiative. Você também pode compartilhar dispositivos se quiser testar em várias plataformas sem gastar muito.

+ +

Próximos passos

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

Este artigo mostra como publicar seu site online usando ferramentas de transferência de arquivos.

+
+ + + + + + + + + + + + +
Pré-requisitos :Você deve saber  what a web server is e how domain names work. Você também deve saber como set up a basic environment e como write a simple webpage.
Objetivo:Aprender como enviar arquivos para um servidor usando as várias ferramentas de transferências de arquivos disponíveis.
+ +

Resumo

+ +

Se você construiu uma página web básica (veja HTML basics, 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.

+ +

SFTP

+ +

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.

+ +
+

Nota: Claro que existem outras opções. Consulte Publishing tools para mais informações.

+
+ +

Abra o FileZilla, você verá algo semelhante a isso: 

+ +

+ +

Logging in

+ +

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:  mypersonalwebsite.examplehostingprovider.net.

+ +

Acabamos de abrir uma conta e receber estas informações : 

+ +
+

Parabéns por abrir uma conta no Example Hosting Provider.

+ +

Sua conta: demozilla

+ +

Seu site estará disponível em :   demozilla.examplehostingprovider.net

+ +

Para publicar nessa conta, conecte-se por meio do SFTP com as seguintes credenciais :

+ + +
+ +

Primeiramente, olhe em http://demozilla.examplehostingprovider.net/ — como você pode ver até o momento, não há nada lá :

+ +

Our demozilla personal website, seen in a browser: it's empty

+ +
+

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

+
+ +

Para conectar seu cliente SFTP ao servidor, siga estas etapas:

+ +
    +
  1. Escolha o arquivo > Site Manager(Gerenciador de sites)... no menu principal.
    2. +
  2. Na janela do gerenciador de site, vá em novo site e preencha o nome do site como demozilla no espaço fornecido.
    3. +
  3. Preencha o servidor SFTP que seu host forneceu no campo Host: field.
    4. +
  4. Em Logon Type(tipo de LogOn): Escolha normal  e ,em seguida , preencha com o nome de usuário e a senha fornecida nos campos relevantes.
    5. +
  5. Preencha a porta correta e outras informações.
    6. +
+ +

Sua janela estará semelhante a esta: 

+ +

+ +

Agora pressione Connect para conectar ao servidor SFTP.

+ +

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.

+ +

Visão local e remota

+ +

Depois de conectada, sua tela deve ser semelhante a esta (conectamos a um exemplo nosso para lhe dar uma ideia):

+ +

+ +

Vamos analisar o que você está vendo:

+ + + +

Enviando para o servidor 

+ +

Nossas instruções de host de exemplo nos disseram "Para publicar na web, coloque seus arquivos no diretório Public/htdocs " Você precisa navegar até o diretório especificado no painel direito. Este diretório é efetivamente a raiz do seu site — onde seu arquivo index.html e outros irão.

+ +

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.

+ +

Eles estão realmente online ?

+ +

Até agora, tudo bem ,  mas os arquivos estão realmente online ? Você pode verificar novamente voltando ao seu site (e.g. http://demozilla.examplehostingprovider.net/) no seu navegador:

+ +

Here we go: our website is live!

+ +

E voilà! Nosso website está vivo!

+ +

Rsync

+ +

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

+ +

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

+ +
rsync [-options] SOURCE user@x.x.x.x:DESTINATION
+ + + +

Você precisa obter esses detalhes do seu provedor de hospedagem.

+ +

Para mais informações, veja How to Use Rsync to Copy/Sync Files Between Servers.

+ +

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:

+ +
rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION
+ +

Você  pode encontrar mais detalhes sobre o assunto em How To Copy Files With Rsync Over SSH.

+ +

Ferramentas Rsync GUI

+ +

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). Acrosync é uma dessas ferramentas e está disponível para Windows e macOS

+ +

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.

+ +

GitHub

+ +

Github permite você publicar páginas por meio do GitHub pages (gh-pages).

+ +

Cobrimos o básico de como usar isso no Publishing your website artigo do guia Getting started with the Web , então não vamos repetir tudo aqui.

+ +

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 Using a custom domain with GitHub Pages .

+ +

Outros métodos para enviar arquivos

+ +

O protocolo FTP é um método conhecido de publicação de um site, mas não o único. Aqui estão algumas outras possibilidades:

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

GitHub is a "social coding" site. It allows you to upload code repositories for + storage in thecelio Git version control system. 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.

+ +

Publishing content

+ +

GitHub is a very important and useful community to get involved in, and Git/GitHub is a very popular version control system — most tech companies now use it in their workflow. GitHub has a very useful feature called GitHub Pages, which allows you to publish website code live on the Web.

+ +

Basic Github setup

+ +
    +
  1. First of all, install Git on your machine. This is the underlying version control system software that GitHub works on top of.
    2. +
  2. Next, sign up for a GitHub account. It's simple and easy.
    3. +
  3. Once you've signed up, log in to github.com with your username and password.
    4. +
+ +

Preparing your code for upload

+ +

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

+ +

The other thing you need to do before moving on is to initialise your code directory as a Git repository. To do this:

+ +
    +
  1. Point the command line to your test-site directory (or whatever you called the directory containing your website). For this, use the cd command (i.e. "change directory"). Here's what you'd type if you've put your website in a directory called test-site on your desktop: + + 
    cd Desktop/test-site
    +
    2. +
  2. When the command line is pointing inside your website directory, type the following command, which tells the git tool to turn the directory into a git repository: + 
    git init
    +
    3. +
+ +

An aside on command line interfaces

+ +

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:

+ +

+ +
+

Note: You could also consider using a Git graphical user interface to do the same work, if you feel uncomfortable with the command line.

+
+ +

Every operating system comes with a command line tool:

+ + + +

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.

+ +

Creating a repo for your code

+ +
    +
  1. 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 New Repository.
    2. +
  2. On this page, in the Repository name box, enter a name for your code repository, for example my-repository.
    3. +
  3. Also fill in a description to say what your repository is going to contain. Your screen should look like this:
    +
    4. +
  4. Click Create repository; this should bring you to the following page: 
    +
    5. +
+ +

Uploading your files to GitHub

+ +
    +
  1. On the current page, you are interested in the section …or push an existing repository from the command line. 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: + + 
    git remote add origin https://github.com/chrisdavidmills/my-repository.git
    +
    2. +
  2. 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. + 
    git add --all
+git commit -m 'adding my files to my repository'
    +
    3. +
  3. 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 …or push an existing repository from the command line section: + 
    git push -u origin master
    +
    4. +
  4. 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 Branch: master, type gh-pages in the text input, then press the blue button that says Create branch: gh-pages. This creates a special code branch called gh-pages that is published at a special location. It's URL takes the form username.github.io/my-repository-name, so in my example's case, the URL would be https://chrisdavidmills.github.io/my-repository. The page shown is the index.html page.
    +
    5. +
  5. 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.
    6. +
+ +
+

Note: If you get stuck, the GitHub Pages homepage is also really helpful.

+
+ +

Further GitHub knowledge

+ +

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:

+ +
git add --all
+git commit -m 'another commit'
+git push
+ +

You can replace another commit with a more suitable message to describe what change you just made.

+ +

We have barely scratched the surface of Git. To learn more, start off with the GitHub Help site.

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

Nesse artigo examinaremos nomes de domínios: o que são, como são estruturados, e como conseguir um.

+
+ + + + + + + + + + + + +
Pré-requisitos:Primeiro você precisa conhecer como a Internet funciona e entender what URLs are.
Objetivos:Aprender o que são "nomes de domínios", como funcionam, e porquê são importantes.
+ +

Sumário

+ +

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

+ +

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., 173.194.121.32) 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., 2027:0da8:8b73:0000:0000:8a2e:0370:1337). 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).

+ +

Active Learning

+ +

There is no active learning available yet. Please, consider contributing.

+ +

Deeper dive

+ +

Estrutura dos domain names

+ +

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 lidos da direita para a esquerda:

+ +

Anatomy of the MDN domain name

+ +

Cada uma dessas partes fornece informações específicas sobre todo o domain name.

+ +
+
{{Glossary("TLD")}} (Top-Level Domain).
+
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.
+
Label (ou componente)
+
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 Domínio de Nível Secundário (SLD). Um nome de domínio 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. mozilla.org), pode-se criar outros nomes de domínios (às vezes chamados de "subdomínios") (p.e. developer.mozilla.org).
+
+ +

Comprando um nome de domínio

+ +

Quem possui um nome de domínio?

+ +

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.

+ +

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.

+ +
+

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

+
+ +

Encontrando um nome de domínio disponível

+ +

Para descobrir se um determinado domain name está disponível,

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

Como você pode ver, eu não posso registrar mozilla.org porque a Mozilla Foundation já registrou.

+ +

Por outro lado, vamos ver se eu poderia registrar afunkydomainname.org:

+ +
$ whois afunkydomainname.org
+NOT FOUND
+
+ +

Como você pode ver, o domínio não existe no banco de dados whois (neste momento em que escrevo), então poderíamos pedir para registrá-lo. Bom saber!

+ +

Obtendo um nome de domínio

+ +

O processo é bastante simples:

+ +
    +
  1. Ir para o site de um registrador.
    2. +
  2. Geralmente há um apelo chamativo “Obeter um domain name” call to action. Clique nele.
    3. +
  3. 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!
    4. +
  4. 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.
    5. +
+ +
+

Nota: Este tempo é frequentemente chamado de tempo de propagação. 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.

+
+ +

Atualização de DNS

+ +

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.

+ +
+

Note : This time is often called propagation time. 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.

+
+ +

Como funciona uma solicitação de DNS?

+ +

 

+ +

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:

+ +
    +
  1. Digite mozilla.org na barra de localização do seu navegador.
    2. +
  2. 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.
    3. +
  3. 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.
    4. +
  4. Agora que o computador conhece o endereço IP solicitado, seu navegador pode negociar o conteúdo com o servidor da web.
    5. +
+ +

Explanation of the steps needed to obtain the result to a DNS request

+ +

Próximos passos

+ +

Ok, conversamos muito sobre processos e arquitetura. Hora de seguir em frente.

+ + -- cgit v1.2.3-54-g00ecf