From 68fc8e96a9629e73469ed457abd955e548ec670c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:58 +0100 Subject: unslug pt-br: move --- .../como_a_internet_funciona/index.html | 102 ---------- .../index.html | 112 ----------- .../index.html | 61 ------ .../index.html | 221 -------------------- .../index.html | 61 ++++++ .../how_does_the_internet_work/index.html | 102 ++++++++++ .../how_much_does_it_cost/index.html | 155 ++++++++++++++ .../o_que_e_um_web_server/index.html | 121 ----------- .../o_que_s\303\243o_hyperlinks/index.html" | 91 --------- .../pensando_antes_de_codificar/index.html | 178 ----------------- .../quanto_custa_fazer_algo_web/index.html | 155 -------------- .../que_software_eu_preciso/index.html | 222 --------------------- .../set_up_a_local_testing_server/index.html | 112 +++++++++++ .../thinking_before_coding/index.html | 178 +++++++++++++++++ .../what_are_browser_developer_tools/index.html | 221 ++++++++++++++++++++ .../what_are_hyperlinks/index.html | 91 +++++++++ .../what_is_a_web_server/index.html | 121 +++++++++++ .../what_software_do_i_need/index.html | 222 +++++++++++++++++++++ 18 files changed, 1263 insertions(+), 1263 deletions(-) delete mode 100644 files/pt-br/learn/common_questions/como_a_internet_funciona/index.html delete mode 100644 files/pt-br/learn/common_questions/como_configurar_um_servidor_de_testes_local/index.html delete mode 100644 files/pt-br/learn/common_questions/como_voce_hospeda_seu_site_google_app_engine/index.html delete mode 100644 files/pt-br/learn/common_questions/ferramentas_de_desenvolvimento_do_navegador/index.html create mode 100644 files/pt-br/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html create mode 100644 files/pt-br/learn/common_questions/how_does_the_internet_work/index.html create mode 100644 files/pt-br/learn/common_questions/how_much_does_it_cost/index.html delete mode 100644 files/pt-br/learn/common_questions/o_que_e_um_web_server/index.html delete mode 100644 "files/pt-br/learn/common_questions/o_que_s\303\243o_hyperlinks/index.html" delete mode 100644 files/pt-br/learn/common_questions/pensando_antes_de_codificar/index.html delete mode 100644 files/pt-br/learn/common_questions/quanto_custa_fazer_algo_web/index.html delete mode 100644 files/pt-br/learn/common_questions/que_software_eu_preciso/index.html create mode 100644 files/pt-br/learn/common_questions/set_up_a_local_testing_server/index.html create mode 100644 files/pt-br/learn/common_questions/thinking_before_coding/index.html create mode 100644 files/pt-br/learn/common_questions/what_are_browser_developer_tools/index.html create mode 100644 files/pt-br/learn/common_questions/what_are_hyperlinks/index.html create mode 100644 files/pt-br/learn/common_questions/what_is_a_web_server/index.html create mode 100644 files/pt-br/learn/common_questions/what_software_do_i_need/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 deleted file mode 100644 index 6bc88ac21f..0000000000 --- a/files/pt-br/learn/common_questions/como_a_internet_funciona/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -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 deleted file mode 100644 index 83b4f50a41..0000000000 --- a/files/pt-br/learn/common_questions/como_configurar_um_servidor_de_testes_local/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -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 deleted file mode 100644 index 762169926c..0000000000 --- a/files/pt-br/learn/common_questions/como_voce_hospeda_seu_site_google_app_engine/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -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 deleted file mode 100644 index 80df8f9ddf..0000000000 --- a/files/pt-br/learn/common_questions/ferramentas_de_desenvolvimento_do_navegador/index.html +++ /dev/null @@ -1,221 +0,0 @@ ---- -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/how_do_you_host_your_website_on_google_app_engine/index.html b/files/pt-br/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html new file mode 100644 index 0000000000..762169926c --- /dev/null +++ b/files/pt-br/learn/common_questions/how_do_you_host_your_website_on_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/how_does_the_internet_work/index.html b/files/pt-br/learn/common_questions/how_does_the_internet_work/index.html new file mode 100644 index 0000000000..6bc88ac21f --- /dev/null +++ b/files/pt-br/learn/common_questions/how_does_the_internet_work/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/how_much_does_it_cost/index.html b/files/pt-br/learn/common_questions/how_much_does_it_cost/index.html new file mode 100644 index 0000000000..7c92c2fb03 --- /dev/null +++ b/files/pt-br/learn/common_questions/how_much_does_it_cost/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/o_que_e_um_web_server/index.html b/files/pt-br/learn/common_questions/o_que_e_um_web_server/index.html deleted file mode 100644 index f963103480..0000000000 --- a/files/pt-br/learn/common_questions/o_que_e_um_web_server/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -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" deleted file mode 100644 index 5cfb905389..0000000000 --- "a/files/pt-br/learn/common_questions/o_que_s\303\243o_hyperlinks/index.html" +++ /dev/null @@ -1,91 +0,0 @@ ---- -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/pensando_antes_de_codificar/index.html b/files/pt-br/learn/common_questions/pensando_antes_de_codificar/index.html deleted file mode 100644 index 342692db46..0000000000 --- a/files/pt-br/learn/common_questions/pensando_antes_de_codificar/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -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 deleted file mode 100644 index 7c92c2fb03..0000000000 --- a/files/pt-br/learn/common_questions/quanto_custa_fazer_algo_web/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -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 deleted file mode 100644 index 392b7fd03a..0000000000 --- a/files/pt-br/learn/common_questions/que_software_eu_preciso/index.html +++ /dev/null @@ -1,222 +0,0 @@ ---- -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/set_up_a_local_testing_server/index.html b/files/pt-br/learn/common_questions/set_up_a_local_testing_server/index.html new file mode 100644 index 0000000000..83b4f50a41 --- /dev/null +++ b/files/pt-br/learn/common_questions/set_up_a_local_testing_server/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/thinking_before_coding/index.html b/files/pt-br/learn/common_questions/thinking_before_coding/index.html new file mode 100644 index 0000000000..342692db46 --- /dev/null +++ b/files/pt-br/learn/common_questions/thinking_before_coding/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/what_are_browser_developer_tools/index.html b/files/pt-br/learn/common_questions/what_are_browser_developer_tools/index.html new file mode 100644 index 0000000000..80df8f9ddf --- /dev/null +++ b/files/pt-br/learn/common_questions/what_are_browser_developer_tools/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/what_are_hyperlinks/index.html b/files/pt-br/learn/common_questions/what_are_hyperlinks/index.html new file mode 100644 index 0000000000..5cfb905389 --- /dev/null +++ b/files/pt-br/learn/common_questions/what_are_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/what_is_a_web_server/index.html b/files/pt-br/learn/common_questions/what_is_a_web_server/index.html new file mode 100644 index 0000000000..f963103480 --- /dev/null +++ b/files/pt-br/learn/common_questions/what_is_a_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/what_software_do_i_need/index.html b/files/pt-br/learn/common_questions/what_software_do_i_need/index.html new file mode 100644 index 0000000000..392b7fd03a --- /dev/null +++ b/files/pt-br/learn/common_questions/what_software_do_i_need/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

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