Manipulando Listas - Aprendendo desenvolvimento web

Manipulando Listas
==================

* Anterior  (en-US)
* Menu: Styling text
* Próxima  (en-US)

Este é o 10º seção do CSS Introdução (en-US) tutorial; ele descreve como você pode usar CSS para especificar o aparecimento de listas. Você cria um novo documento de amostra contendo listas, e um novo estilo que os estilos das listas.

Informação: Lists
-----------------

Se você aceitou o desafio na última (en-US) seção, em seguida, você viu como você pode adicionar conteúdo antes de qualquer elemento para exibi-lo como um item da lista.

CSS proporciona propriedades especiais que são projetados para listas. Geralmente é mais conveniente usar estas propriedades sempre que puder.

Para especificar o estilo para uma lista, use o `list-style` (en-US) propriedade para especificar o tipo de marcador.

O seletor na sua regra de CSS pode selecionar os elementos de item de lista (por exemplo, `<li>`), ou pode selecionar o elemento primário da lista (por exemplo, `<ul>`) de modo a que os elementos da lista herdam o modelo.

### Listas não ordenadas

Em uma lista *desordenada*, cada item da lista é marcado da mesma forma.

CSS tem três tipos de marcadores, e aqui está como seu navegador exibe-os:

* `disc`
* `circle`
* `square`

none

Alternativamente, você pode especificar o URL de uma imagem.

Exemplo

Essas regras especificam diferentes marcadores para diferentes classes de item da lista:

```css
li.open {
  list-style: circle;
}
li.closed {
  list-style: disc;
}
```

Quando estas classes são usadas em uma lista, que distinguir entre os itens abertos e fechados (por exemplo, em uma lista de tarefas):

```html
<ul>
  <li class="open">Lorem ipsum</li>
  <li class="closed">dolor sit</li>
  <li class="closed">Amet consectetuer</li>
  <li class="open">Magna aliquam</li>
  <li class="closed">Autem veleum</li>
</ul>
```

O resultado pode parecer:

### Listas ordenadas

Em uma lista*ordenada* , cada item da lista é marcado diferentemente para mostrar a sua posição na sequência.

Use a propriedade `list-style` (en-US) para especificar o tipo de marcador:

* `decimal`
* `lower-roman`
* `upper-roman`
* `lower-latin`
* `upper-latin`

Exemplo

Esta regra especifica que em `<ol>` elementos com a classe `informações, os itens são identificados com letras maiúsculas.`
```

<ol class="info">
  <li>Lorem ipsum</li>
  <li>Dolor sit</li>
  <li>Amet consectetuer</li>
  <li>Magna aliquam</li>
  <li>Autem veleum</li>
</ol>
```

```css
ol.info {
  list-style: upper-latin;
}
```

O `<li>` elementos da lista herdam esse estilo:

Mais detalhes

O `list-style` (en-US) propriedade é uma propriedade taquigrafia. Em folhas de estilo complexas você pode preferir usar propriedades separadas para definir valores separados. Para obter links para essas propriedades separadas, e mais detalhes de como CSS especifica listas, consulte o `list-style` (en-US) página de referência.

Se você estiver usando uma linguagem de marcação como HTML que fornece etiquetas convencionais para não-ordenada (`<ul>`) e ordenou (`<ol>`) listas, então é uma boa prática para usar as marcas na forma como eles se destinam. No entanto, você pode usar CSS para fazer `<ul>` exibição ordenada e `<ol>` visualização não ordenada, se desejar.

Browsers diferem na maneira de implementar os estilos para listas. Não espere que sua folha de estilo dê resultados idênticos em todos os navegadores.

### Contadores

**Nota:** Alguns navegadores não suportam contadores. O conteúdo CSS e compatibilidade do navegador página no site de modo Quirks contém um gráfico detalhado de compatibilidade do navegador para este e outros recursos CSS. Páginas individuais na referência CSS neste local também têm tabelas de compatibilidade do navegador.

Você pode usar contadores para numerar quaisquer elementos, não somente itens da lista. Por exemplo, em alguns documentos você pode querer numerar cabeçalhos ou parágrafos.

Para especificar a numeração, você precisa de um *contador* com um nome que você especificar.

Em alguns elementos antes da contagem é começar, reinicie o contador com a propriedade `counter-reset` (en-US) eo nome do seu contador. O pai dos elementos que você estiver contando é um bom lugar para fazer isso, mas você pode usar qualquer elemento que vem antes os itens da lista.

Em cada elemento que o contador é incrementado, use a propriedade `contra-incremento` eo nome do seu contador.

Para mostrar seu contador, adicione `:: before` ou `:: after` para o selector e usar o `conteúdo` da propriedade (como você fez na página anterior, Conteúdo) .

No valor do `conteúdo` de propriedade, especifique `counter ()` com o nome de seu contador. Opcionalmente especifique um tipo. Os tipos são os mesmos que na **lista ordenada** secção acima.

Normalmente, o elemento que apresenta o contador também incrementa-lo.

Exemplo

Esta regra inicializa um contador para cada `<h3>` (en-US) elemento com a classe numeradas:

```css
h3.numbered {
  counter-reset: mynum;
}
```

Esta regra mostra e incrementa o contador para cada `<p>` elemento com a classe numeradas:

```html
<p class="numbered">Lorem ipsum</p>
<p class="numbered">dolor sit</p>
<p class="numbered">Amet consectetuer</p>
<p class="numbered">Magna aliquam</p>
<p class="numbered">Autem veleum</p>
```

```css
body {
  counter-reset: mynum;
}
p.numbered:before {
  content: counter(mynum) ": ";
  counter-increment: mynum;
  font-weight: bold;
}
```

O resultado se parece com isso:

Mais detalhes

Você não pode usar os contadores a menos que você sabe que todo mundo que lê o documento tem um navegador que os suporta.

Se você é capaz de usar contadores, eles têm a vantagem de que você pode estilizar os contadores separadamente dos itens da lista. No exemplo acima, os contadores estão em negrito mas os itens da lista não são.

Você também pode usar contadores em formas mais complexas, por exemplo, para numerar seções, títulos, subtítulos e parágrafos em documentos formais. Para mais detalhes, consulte contadores automáticos e numeração em CSS Specification.

Listas denominadas: Ação
------------------------

Crie um novo documento HTML, doc2.html. Copie e cole o conteúdo daqui:

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Sample document 2</title>
    <link rel="stylesheet" href="style2.css" />
  </head>
  <body>
    <h3 id="oceans">The oceans</h3>
    <ul>
      <li>Arctic</li>
      <li>Atlantic</li>
      <li>Pacific</li>
      <li>Indian</li>
      <li>Southern</li>
    </ul>

    <h3 class="numbered">Numbered paragraphs</h3>
    <p class="numbered">Lorem ipsum</p>
    <p class="numbered">Dolor sit</p>
    <p class="numbered">Amet consectetuer</p>
    <p class="numbered">Magna aliquam</p>
    <p class="numbered">Autem veleum</p>
  </body>
</html>
```

Faça uma nova folha de estilo, style2.css. Copie e cole o conteúdo daqui:

```css
/\* numbered paragraphs \*/
h3.numbered {
  counter-reset: mynum;
}

p.numbered:before {
  content: counter(mynum) ": ";
  counter-increment: mynum;
  font-weight: bold;
}
```

Se o layout e comentário não são a seu gosto, alterá-los.

Abra o documento no seu browser. Se o seu navegador suporta contadores, você verá algo parecido com o exemplo abaixo. Se seu navegador não suporta contadores, então você não ver os números (e provavelmente nem mesmo os dois pontos):

Desafios

Adicione uma regra à sua folha de estilo, para numerar os oceanos usando numerais romanos de I a V:

|  |
| --- |
| **The oceans*** Arctic
* Atlantic
* Pacific
* Indian
* Southern
 |

Mude sua folha de estilo para identificar os títulos com letras maiúsculas em parênteses como este:

| **(A) The oceans**. . .**(B) Numbered paragraphs**. . . |
| --- |

Ver soluções para esses desafios. (en-US)

Qual o proximo?
---------------

Quando seu navegador exibe seu documento de amostra, ele cria espaço ao redor dos elementos quando ele coloca-los na página. A próxima página descreve como você pode usar CSS para trabalhar com as formas subjacentes de elementos, caixas.


CSS - Perguntas frequentes - Aprendendo desenvolvimento web

CSS - Perguntas frequentes
==========================

Por que meu CSS, que é válido, não é renderizado corretamente?
--------------------------------------------------------------

Navegadores usam a declaração de `DOCTYPE` para decidir se devem exibir o documento usando um modo compatível com os padrões da web ou com padrões de navegadores antigos. Usar corretamente a declaração de um `DOCTYPE` moderno no início do seu documento HTML melhorará a forma como o navegador trata os padrões utilizados no documento.

Navegadores modernos possuem dois principais modos de renderização:

* *Modo de peculiaridades (Quirks Mode)*: Também chamado de modo retrocompatível, permite que páginas antigas sejam renderizadas como seus autores pretendiam, seguindo regras de renderização não-padronizadas geralmente encontradas em navegadores antigos. Documentos com uma declaração `DOCTYPE` incompleta, incorreta, que não tenham uma declaração `DOCTYPE` ou não tenham uma declaração comumente utilizada antes de 2001 serão renderizados deste modo.
* *Modo de padrões (Standards Mode)*: Neste modo o navegador tenta seguir os padrões W3C estritamente, ignorando peculiaridades encontradas em documentos designados a navegadores antigos. Espera-se que novas páginas HTML sejam desenvolvidas para navegadores que seguem os padrões da W3C, e como resultado disso, páginas com uma declaração de `DOCTYPE` moderna serão renderizadas deste modo.

Navegadores baseados na engine Gecko possuem um terceiro modo de renderização; *Modo de "quase padrões" (Almost Standards Mode)*, que renderiza as páginas seguindo regras do *Modo de padrões*, porém considerando algumas poucas peculiaridades encontradas em páginas para navegadores antigos.

Esta é uma lista das declarações de `DOCTYPE` mais usadas e que acionarão o modo de padrões ou de "quase padrões":
```

<!DOCTYPE html> /* Este é o doctype HTML5. Levando em consideração que
                   navegadores modernos possuem um parser de HTML5, o
                   uso desta declaração é recomendada */

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"https://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```

Sempre que possível, use a declaração de `DOCTYPE` HTML5.

Por que meu CSS, que é válido, não é renderizado?
-------------------------------------------------

Abaixo temos algumas das possíveis causas:

* O caminho para o arquivo CSS está incorreto.
* Para ser aplicado, uma folha de estilos CSS deve ser servido ao navegador com o tipo MIME `text/css`. Caso o servidor não sirva a folha de estilos com este tipo, as regras CSS não serão interpretadas e aplicadas aos elementos no documento.
Qual a diferença entre `id` e `class`?
--------------------------------------

Elementos HTML podem ter um atributo `id` e/ou um atributo `class`. O atributo `id` designa um nome ao elemento ao qual este é aplicado, e para que a marcação seja válida, deverá haver no documento apenas um elemento com o nome designado (Por exemplo: Caso você designe o nome *janela* a um elemento, nenhum outro elemento poderá ter o nome *janela*).

O atributo `class` designa um ou vários nomes de classes as quais um elemento pertence. Diferentemente do valor designado no atributo `id`, os nomes designados em `class` podem ser reutilizados em outros elementos no documento. De qualquer forma, CSS permite que você aplique estilos tanto para uma `id` particular quanto para `classes`.

Algumas dicas de quando usar `id` e quando usar `class:`

* Utilize classes para estilizar elementos quando você pretender atribuir as mesmas regras de estilização a diversos elementos num documento. Mesmo que você tenha apenas um elemento no momento, utilize classes para sua estilização caso você pretenda reutilizar as mesmas regras em elementos criados futuramente.
* Utilize ids quando você precisar restringir regras de estilização a um determinado bloco ou elemento. Como ids não devem sepetidas num documento, as regras de estilo designadas a uma `id` serão aplicadas apenas àquele elemento.

Geralmente é recomendável que se utilize classes sempre que possível, utilizando ids apenas quando absolutamente necessário para usos específicos (como conectar um `label` a um elemento de formulário, ou para estilizar elementos que necessicam ser semanticamente únicos). Abaixo estão descritas algumas vantagens em utilizar classes como forma principal de estilização:

* Usar classes torna seu código extensível — Mesmo que você tenha apenas um elemento a ser estilizado agora, você pode querer adicionar as mesmas regras a outros elementos futuramente.
* Classes permitem que você estilize diversos elementos. Sendo assim, classes podem ajudar a desenvolver folhas de estilo menores; mais enchutas, já que regras podem ser facilmente reutilizadas entre elementos. Isso não só ajuda na manutenção da folha de estilo, como também agiliza a renderização de páginas, principalmente em conexões lentas.
* Seletores de classes tem menor especificidade (en-US) do que seletores de id, o que torna as regras de estilização mais fáceis de serem sobrepostas.

**Nota:** Veja Seletores (en-US) para mais informações.

Como eu redefino o valor padrão de uma propriedade?
---------------------------------------------------

Inicialmente CSS não propiciava a diretiva "default" e a única forma de redefinir o valor padrão de uma propriedade era expliciatamente redeclarando aquela propriedade. Por exemplo:

```css
/\* A cor padrão do cabeçalho é preta \*/
h1 {
  color: red;
}
h1 {
  color: black;
}
```

Isso mudou com CSS 2; a diretiva initial agora é um valor válido para uma propriedade CSS. Ela redefine tal propriedade para seu valor padrão, o qual é definido nas especificações CSS para tal propriedade.

```css
/\* A cor padrão do cabeçalho é preta \*/
h1 {
  color: red;
}
h1 {
  color: initial;
}
```

Como eu derivo um estilo de outro?
----------------------------------

CSS não exatamente permite que um estilo seja definido com os termos de outro. (Veja as notas de Eric Meyer sobre a posição do grupo de trabalho a respeito do assunto). Entretanto, é possível atingir o mesmo efeito designando diversas classes a um elemento, e Variáveis CSS agora providenciam uma forma de definir informações sobre um estilo em um lugar e reutilizar estas informações em diversos outros lugares.

Como eu aplico diversas classes a um elemento?
----------------------------------------------

Elementos HTML podem ter diversas classes designadas a si, com as classes sendo listadas no atributo `class`, tendo um espaço em branco separando cada uma.

```html
<style type="text/css">
 .news {
 background: black;
 color: white;
 }
 .today {
 font-weight: bold;
 }
</style>

<div class="news today">... content of today's news ...</div>
```

Caso a mesma propriedade seja declara em mais de uma regra, o conflito é resolvido primeiro pela ordem de especificidade e depois através da ordem das declarações CSS, com o último valor definido da propriedade sendo considerado. A ordem em que o nome das classes aparece no atributo `class` é irrelevante.

Por que minhas regras de estilização não funcionam corretamente?
----------------------------------------------------------------

Regras de estilização, mesmo que sejam semanticamente corretas, podem não ser aplicadas em determinadas situações. Você pode utilizar o visualizador de regras CSS do Inspetor de DOM para resolver problemas deste tipo, mas as ocasiões mais frequentes onde regras de estilização são ignoradas estão listadas abaixo.

### Hierarquia dos elementos HTML

A forma como estilos CSS são aplicados a elementos HTML depende também da hierarquia dos elementos HTML. É importante lembrar que a regra aplicada a um descendente sobrepõe a regra do pai, independente de qualquer especificidade ou prioridade das regras CSS.

```html
<style type="text/css">
 .news {
 color: black;
 }
 .corpName {
 font-weight: bold;
 color: red;
 }
</style>

<!-- O texto do item news é preto, mas o nome da corporação é vermelho e em negrito -->
<div class="news">
  (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on
  Thursday...
</div>
```

No caso de hierarquias HTML complexas, se uma regra parece ser ignorada, verifique se o elemento está dentro de outro elemento com um estilo diferente.

### Regra de estilização explicitamente redefinida

Em folhas de estilo CSS, a ordem **é** importante. Se você definir uma propriedade e logo depois redefinir a mesma propriedade, a última regra definida será considerada.

```html
<style>
 #stockTicker {
 font-weight: bold;
 }
 .stockSymbol {
 color: red;
 }
 /\* outras regras \*/
 /\* outras regras \*/
 /\* outras regras \*/
 .stockSymbol {
 font-weight: normal;
 }
</style>

<!-- Boa parte do texto está em negrito, exceto "GE", que é vermelho e não está em negrito -->
<div id="stockTicker">NYS: <span class="stockSymbol">GE</span> +1.0 ...</div>
```

Para evitar que este tipo de problema, tente definir regras apenas uma vez para um determinado seletor e agrupe as regras para aquele seletor.

### Uso de uma propriedade reduzida

Utilizar propriedades reduzidas para definir regra de estilização é interessante pois permite definir diversas propriedade de uma regra em uma sintaxe compacta e que permite otimizar o tamanho da folha de estilos. Utilizar propriedades reduzidas para definir apenas uma propriedade é permitido, mas deve ser lembrado que atributos da propriedade não definidos são redefinidos para seu valor padrão. Ou seja, isso pode acabar sobrepondo regras anteriormente definidas implicitamente..

```html
<style>
 #stockTicker {
 font-size: 12px;
 font-family: Verdana;
 font-weight: bold;
 }
 .stockSymbol {
 font: 14px Arial;
 color: red;
 }
</style>

<div id="stockTicker">NYS: <span class="stockSymbol">GE</span> +1.0 ...</div>
```

No exemplo anterior o problema ocorre em regras pertencentes a diferentes elementos. Mas também poderia acontecer para o mesmo elemento, pois a ordem das regras **é** importante.

```css
#stockTicker {
  font-weight: bold;
  font: 12px Verdana; /\* font-weight agora está definido como "normal" \*/
}
```

### Uso do seletor `*`

O seletor curinga `*` faz referência a qualquer elemento, e deve ser usado com cuidado.

```html
<style>
 body \* {
 font-weight: normal;
 }
 #stockTicker {
 font: 12px Verdana;
 }
 .corpName {
 font-weight: bold;
 }
 .stockUp {
 color: red;
 }
</style>

<div id="section">
  NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
</div>
```

No exemplo acima, o seletor \* aplica a regra para todos os elementos dentro de `body`, em qualquer nível hierarquico, incluindo a classe `.stockUp`. Sendo assim a regra `font-weight: bold;` aplicada à classe `.corpName` é sobreposta por `font-weight: normal;` aplicada a todos os elementos dentro de `body`.

O uso do seletor \* também deve ser minimizado por ser um seletor lento, especialmente quando não utilizado como o primeiro elemento de um seletor. Este seletor deve ser evitado o máximo possível.

### Especificidade em CSS

Quando multiplas regras são aplicadas a um elemento, a regra a ser renderizada depende de sua especificidade (en-US). O estilo *inline* (regras de estilo definidas no atributo `style` de um elemento HTML) tem a mais alta especificidade e irá sobrepor qualquer seletor. Seletores de ID tem a segunda mais alta especificidade, com seletores de classes vindo logo após e, eventualmente, seletores de elementos (tags). Tendo isso em mente, a cor do texto da `<div>` abaixo terá a cor vermelha.

```html
<style>
 div {
 color: black;
 }
 #orange {
 color: orange;
 }
 .green {
 color: green;
 }
</style>

<div id="orange" class="green" style="color: red;">Isso é vermelho</div>
```

As regras se tornam mais complicadas quando o seletor tem diversas partes. Informações mais detalhadas sobre como a especificidade de seletores é calculada podem ser encontradas nas Especificações CSS 2.1, capítulo 6.4.3.

O que as propriedades -moz-\*, -ms-\*, -webkit-\*, -o-\* e -khtml-\* fazem?
---------------------------------------------------------------------------

Estas propriedades, chamadas *propriedades prefixadas*, são extenções ao padrão CSS. Elas permitem o uso de recursos experimentais e fora dos padrões em navegadores sem poluir o namespace convencional, prevenindo que incompatibilidades entre implementações experimentais e fora dos padrões surjam quando os padrões CSS forem expandidos.

Apesar do vasto uso na web, o uso de propriedades prefixadas não é recomendado em ambiente de produção. O uso indiscriminado de funcionalidades experimentais ou não-padrão pode causar problemas de compatibilidade futuros (como uma funcionalidade experimental mudando de nome, ou tendo o mesmo nome de uma outro funcionalidade que no passado tinha uma finalidade completamente diferente) e não renderizar páginas de forma correta em diferentes navegadores. Outro problema muito comum encontrado pelo uso indiscriminado de propriedades prefixadas é a declaração de regras que acabam se tornando exclusivas para determinadas engines, quebrando a renderização em outros navegadores, mesmo estes navegadores dando suporte à propriedade padrão não-prefixada (Por exemplo, apenas a propriedade `-webkit-border-radius` sendo usada em uma regra ao invés de `border-radius`, que é suportada por todos os navegadores, inclusive os baseados em webkit).

Para amenizar os problemas de incompatibilidade gerados pelo uso de propriedades prefixadas (principalmente `-webkit-`), foi estabelecido o Compatibility Living Standard, o qual sugere um conjunto de propriedades `-webkit-` que navegadores (mesmo não utilizando a engine webkit) devem suportar. Outra medida que vem sendo tomada por desenvolvedores de navegadores é abandonar o suporte a propriedades prefixadas em versões estáveis dos navegadores, mantendo suporte a tais propriedades apenas em*Nightly Builds* e similares, desencorajando o uso em ambiente de produção.

Caso você precise usar propriedades prefixadas em seu trabalho, você deve declarar primeiramente as propriedades prefixadas e, por último, declarar a versão padrão não-prefixada da propriedade anteriormente declara, garantindo que o navegador utilize a versão especificada nos padrões assim que suportado. Por exemplo:

```css
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
```

**Nota:** Para mais informações em como lhe dar com propriedades prefixadas, veja Lidando com problemas comuns em HTML e CSS — Lidando com prefixos CSS (en-US) do nosso módulo Teste Cross-browsing (en-US).

**Nota:** Veja a página Extenções CSS Mozilla (en-US) para mais informações sobre propriedades CSS prefixadas da Mozilla.

Como `z-index` está relacionado a posicionamento?
-------------------------------------------------

A propriedade `z-index` especifica a ordem dos elementos da pilha.

Um elemento com z-index/ordem na pilha maior sempre será renderizado à frente de um elemento com um z-index/ordem de pilha menor. `z-index` funcionará apenas em elementos que tenham uma posição especificada (Ou seja, só funcionará caso o elemento tenha `position:absolute`, `position:relative` ou `position:fixed`).

**Nota:** Para mais informações, veja nosso artigo de aprendizado sobre Posicionamento (en-US), e em particular a seção Introduzindo z-index (en-US).


Como eu faço o upload de arquivos para um servidor web ? - Aprendendo desenvolvimento web

Como eu faço o upload de arquivos para um servidor web ?
========================================================

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

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

Resumo
------

Se você construiu uma página web básica (veja HTML basics, por exemplo), provavelmente desejará colocá-la online, em um servidor da web. Neste artigo, discutiremos como fazer isso, usando várias opções disponíveis, como clientes SFTP, RSync e Github.

SFTP
----

Existem vários clientes SFTP . Nossa demo cobre o FileZilla, já que é gratuito e está disponível para Windows, macOS e Linux. Para instalar o FileZilla, vá para a página de downloads do FileZilla, clique no botão Download grande e instale a partir do arquivo de instalação da maneira usual.

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

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

![](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/filezilla-ui.png)

### Logging in

Para este exemplo, vamos supor que nosso provedor de hospedagem (o serviço que hospedará nosso servidor web HTTP) seja uma empresa fictícia ,"Example hosting provider" , cujos URLs são semelhantes a este: `mypersonalwebsite.examplehostingprovider.net`.

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

>
> Parabéns por abrir uma conta no Example Hosting Provider.
>
>
> Sua conta: `demozilla`
>
>
> Seu site estará disponível em : `demozilla.examplehostingprovider.net`
>
>
> Para publicar nessa conta, conecte-se por meio do SFTP com as seguintes credenciais :
>
>
> * Servidor SFTP: `sftp://demozilla.examplehostingprovider.net`
> * Usuário: `demozilla`
> * Senha: `quickbrownfox`
> * Porta: `5548`
> * Para publicar na web, coloque seus arquivos no diretório `Public/htdocs` .
>
>
>

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

![Our demozilla personal website, seen in a browser: it's empty](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/demozilla-empty.png)

**Nota:** Dependendo do seu provedor de hospedagem, na maioria das vezes você verá uma página dizendo algo como como "Este site é hospedado por [serviço de hospedagem]".Isso é claro, quando você acessa seu endereço da web pela primeira vez.

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

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

Sua janela estará semelhante a esta:

![](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/site-manager.png)

Agora pressione *Connect* para conectar ao servidor SFTP.

Nota: Atenção, certifique-se de que seu provedor de hospedagem oferece conexão SFTP (FTP seguro) ao seu espaço de hospedagem. O FTP é inerentemente inseguro e você não deve usá-lo.

### Visão local e remota

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

![](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/connected.png)

Vamos analisar o que você está vendo:

* No painel esquerdo central, você vê seus arquivos locais. Navegue até o diretório onde você armazena seu site (e.g. `mdn`).
* No painel direito central, você vê arquivos remotos.Estamos conectados em nossa raiz FTP distante(Nesse caso, `users/demozilla`)
* No momento, você pode ignorar os painéis inferiores e superiores.Respectivamente, trata-se de um log de mensagens que mostra o status de conexão entre seu computador e o servidor SFTP e um log em tempo real de cada interação entre seu cliente SFTP e o servidor.
### Enviando para o servidor

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

Depois de encontrar o diretório remoto correto para colocar seus arquivos, para carregá-los no servidor, você precisa arrastá-los e soltá-los do painel esquerdo para o painel direito.

### Eles estão realmente online ?

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

![Here we go: our website is live!](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/here-we-go.png)

E *voilà*! Nosso website está vivo!

Rsync
-----

Rsync (en-US) é uma ferramenta de sincronização de arquivos local para remoto, que geralmente está disponível na maioria dos sistemas baseados em Unix (como macOS e Linux), mas também existem versões do Windows.

É visto como uma ferramenta mais avançada do que o SFTP, porque por padrão é usado na linha de comando. Um comando básico se parece com isto:

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

* `-options` é um travessão seguido por uma ou mais letras, por exemplo -v para mensagens de erros detalhadas e -b para fazer backups. Você pode ver a lista completa em rsync man page (Pesquise por "Options summary").
* `SOURCE` é o caminho para o arquivo ou diretório local do qual você deseja copiar os arquivos.
* `user@` são as credenciais de usuário no servidor remoto para o qual você deseja copiar os arquivos.
* `x.x.x.x` é o endereço de IP do servidor remoto.
* `DESTINATION` é o caminho para o local que você deseja copiar seu diretório ou arquivos no servidor remoto.

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

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

Obviamente, é uma boa ideia usar uma conexão segura, como no FTP. No caso do Rsync, você especifica os detalhes do SSH para fazer a conexão por SSH, usando a opção -e. Por exemplo:

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

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

### Ferramentas Rsync GUI

Ferramentas GUI estão disponíveis para Rsync (para aqueles que não se sentem tão confortáveis com o uso da linha de comando). Acrosync é uma dessas ferramentas e está disponível para Windows e macOS

Novamente, você teria que obter as credenciais de conexão do seu provedor de hospedagem, mas desta forma você teria uma GUI para inseri-lás.

GitHub
------

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

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

No entanto, é importante saber que você também pode hospedar um site no GitHub, mas usar um domínio personalizado com ele. Para obter um guia detalhado, consulte Using a custom domain with GitHub Pages .

Outros métodos para enviar arquivos
-----------------------------------

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

* **Web interfaces(Interfaces Web)**. Uma interface HTML que atua como front-end para um serviço de envio de arquivo remoto. Fornecido pelo seu serviço de hospedagem.
* **WebDAV (en-US)**. Uma extensão do protocolo HTTP para permitir um gerenciamento de arquivos mais avançado.


O que são as ferramentas de desenvolvimento do navegador - Aprendendo desenvolvimento web

O que são as ferramentas de desenvolvimento do navegador
========================================================

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:

![](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/screenshot_from_2014-11-25_12-32-57.png)

Como você acessa? Três modos:

* ***Teclado.*** *`Ctrl` + `Shift` + `I`*, exceto:
    + **Internet Explorer.***`F12`*
    + **Mac OS X.** *`⌘` + `⌥` + `I`*
* ***Menu bar.***
    + **Firefox.** Menu
     ![](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/2014-01-10-13-08-08-f52b8c.png) \*➤
     ![](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/screenshot_from_2014-11-26_14-24-56.png) \*➤ Web Developer ➤ Toggle Tools,\_ or \_Tools ➤\_ *Web Developer ➤ Toggle Tools*
    + **Chrome.** *View ➤ Developer ➤ Developer Tools*
    + **Safari.** *Develop ➤ Show Web Inspector.* Se você não consegue ver o *menu Desenvolvedor* , vá para *Safari ➤ Preferências ➤ Avançado* e confira o *Show Develop menu no menu bar* checkbox.
    + **Opera**. *Developer ➤ Web Inspector*
* ***Context menu.*** Pressione-e-segure/botão-direito no item da webpage (Ctrl-click on the Mac), e escolha *Inspect Element no* menu de contexto que aparece. (*An added bonus:* this method straight-away highlights the code of the element you right-clicked.)

![](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/inspect-element-option.png)

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.

![](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/inspector.png)

Se você não vê o inspector,

* Clique a aba *Inspetor.*
* No Internet Explorer, Clique a aba *DOM Explorer,* ou pressione
 `Ctrl`
 +
 `1`
 .
* No Safari, os controles não são apresentados claramente, mas você poderia ver se não tiver selecionado algo para aparecerna janela. Pressione o botão *Style para ver o* CSS.
### 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.

![](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/dev-tool-context-menu.png)

* **Delete Node** (às vezes Delete *Element*). Exclui o elemento atual.
* **Edit as HTML** (às vezes *Add attribute*/*Edit text*). Permite alterar o HTML e ver os resultados na hora. Muito útil para depuração e teste.
* **:hover/:active/:focus**. Força os estados dos elementos a serem alternados, para que você possa ver como seria seu estilo.
* **Copy/Copy as HTML**. Copia o HTML atualmente selecionado.
* Alguns navegadores também têm Copy CSS Path e Copy XPath available, para permitir que você copie o seletor CSS ou a expressão XPath que selecionaria o elemento HTML atual.

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:

![](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/css-viewer-2.png)

Esses recursos são especialmente úteis:

* As regras aplicadas ao elemento atual são mostradas em ordem de mais específicas.
* Clique nas caixas de seleção ao lado de cada declaração para ver o que aconteceria se você removesse a declaração.
* Clique na pequena seta ao lado de cada propriedade abreviada para mostrar os equivalentes de longhand da propriedade.
* Clique no nome ou no valor de uma propriedade para exibir uma caixa de texto, na qual você pode digitar um novo valor para obter uma visualização ao vivo de uma alteração de estilo.
* Ao lado de cada regra está o nome do arquivo e o número da linha em que a regra está definida. Clicar nessa regra faz com que as ferramentas dev pularem para mostrá-la em sua própria visão, onde geralmente podem ser editadas e salvas.
* Você também pode clicar na chave de fechamento de qualquer regra para abrir uma caixa de texto em uma nova linha, onde você pode escrever uma declaração completamente nova para a sua página.

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

* *Computed*: Isso mostra os estilos calculados para o elemento atualmente selecionado (os valores finais normalizados que o navegador aplica).
* *Box model*: Isso representa visualmente o modelo de caixa do elemento atual, para que você possa ver rapidamente o preenchimento, a borda e a margem aplicados a ele e o tamanho do conteúdo.
* *Fonts*: No Firefox, a guia Fontes mostra as fontes aplicadas ao elemento atual.
### Descubra mais

Descubra mais sobre o Inspetor em diferentes navegadores:

* Inspetor de páginas do Firefox
* IE DOM Explorer
* Chrome DOM inspector (Inspetor da Opera funciona da mesma forma)
* Inspetor do Safari DOM e explorador de estilo
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.

![](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/firefox_debugger.png)

Para acessar o (debugger)depurador:

**Firefox**: Clique
 ![](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/2014-01-10-13-08-08-f52b8c.png) ➤ *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.

![](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/file_list.png)

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

![](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/source_code.png)

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

![](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/watch_items.png)

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:
 ![](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/2014-01-10-13-08-08-f52b8c.png) *➤ Web Developer* *➤ Web Console,* or *Tools ➤* *Web Developer ➤ Web Console.*

Aparecerá uma janela como a seguinte:

![](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/console.png)

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

```js
alert("hello!");
```

```js
document.querySelector("html").style.backgroundColor = "purple";
```

```js
const myWordmark = document.createElement("img");
myWordmark.setAttribute(
  "src",
  "https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png",
);
document.querySelector("h1").appendChild(myWordmark);
```

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

```js
alert('hello!);
```

```js
document.cheeseSelector("html").style.backgroundColor = "purple";
```

```js
const myWordmark = document.createElement("img");
myBanana.setAttribute(
  "src",
  "https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png",
);
document.querySelector("h1").appendChild(myWordmark);
```

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:

* Firefox Web Console
* IE JavaScript console
* Chrome JavaScript Console (O inspetor do Ópera funciona da mesma forma)
* Safari Console
Veja também
-----------

* Debugging HTML
* Debugging CSS (en-US)


Como você hospeda seu site no Google App Engine? - Aprendendo desenvolvimento web

Como você hospeda seu site no 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. 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. 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. Clique no botão *Create* para criar o seu projeto.
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. 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.
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. Arraste e solte a pasta `sample-app` dentro do painel esquerdo do editor de código.
3. Rode a seguinte linha de comando dentro para selecionar seu projeto:

```bash
gcloud config set project gaesamplesite
```

4. Logo após rode o seguinte comando para ir ao diretório do seu app:

```bash
cd sample-app
```

5. Você agora está pronto para armazenar sua aplicação, i.e. fazer o upload para o App Engine:

```bash
gcloud app deploy
```

6. Digite um número para escolher a região onde você quer que sua aplicação se localize.
7. Digite `Y` para confirmar.
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.
Veja também
-----------

Para aprender mais, veja Google App Engine Documentation.


Que software eu preciso para construir um site? - Aprendendo desenvolvimento web

Que software eu preciso para construir um site?
===============================================

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*, servidores*web*, e mecanismos de busca. (en-US) |
| --- | --- |
| 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:

* Criar e editar páginas *web*
* Fazer *upload* de arquivos para o seu servidor web
* Visualizar seu *site*

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 (en-US).

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 **RTF (en-US)**, 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 Operacional | Editores Padrão | Editores de Terceiros |
| --- | --- | --- |
| Windows | * Notepad
 | * Notepad++
* Visual Studio Code
* Web Storm
* Brackets
* ShiftEdit
* Sublime Text
 |
| Mac OS | * TextEdit
 | * TextWrangler
* Visual Studio Code
* Brackets
* ShiftEdit
* Sublime Text
 |
| Linux | * Vi (All
 UNIX)
* GEdit
 (Gnome)
* Kate
 (KDE)
* LeafPad
 (Xfce)
 | * Emacs
* Vim
* Visual Studio Code
* Brackets
* ShiftEdit
* Sublime Text
 |
| ChromeOS |  | * ShiftEdit
 |

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

![Screenshot of Notepad++.](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/What_software_do_I_need/notepadplusplus.png)

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

![Screenshot of ShiftEdit](/pt-BR/docs/Learn/Common_questions/Tools_and_setup/What_software_do_I_need/shiftedit.png)

### 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 servidor*web.* Você precisa comprar espaço em um servidor, entre vários provedores (veja Quanto custa fazer algo na *web* (en-US)). 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 (en-US). Agora, aqui está uma pequena lista de clientes (S)FTP básicos e gratuítos:

| Sistema Operacional | Cliente FTP |
| --- | --- |
| Windows | * WinSCP
* Moba Xterm
 | * FileZilla (Qualquer
 Sistema Operacional)
 |
| Linux | * Nautilus/Files
 (Gnome)
* Dolphin (KDE)
 |
| Mac OS | * Cyberduck
 |
| ChromeOS | * ShiftEdit (Qualquer Sistema
 Operacional)
 |  |

### Navegando em *sites*

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:

* Mozilla Firefox
* Google Chrome
* Microsoft Internet Explorer
* Apple Safari

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

* Alguns desses *software* são gratis, mas não todos eles. Descubra quanto custa fazer algo na *web* (en-US). (en-US)
* Se você deseja aprender mais sobre editores de texto, leia nosso artigo sobre como escolher e instalar um editor de texto. (en-US)
* Se você está se perguntando como publicar seu*site* na*web*, veja "Como fazer *upload* para um servidor*web*" (en-US).


Como configurar um servidor de testes local - Aprendendo desenvolvimento web

Como configurar um servidor de testes local
===========================================

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 endereç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:

* **Eles apresentam requisições assíncronas**. Alguns navegadores (incluindo o Chrome) não executarão requisições assíncronas (consulte Buscando dados no servidor) se você simplesmente executar o exemplo de um arquivo local. Isso ocorre devido a restrições de segurança (para mais informações sobre segurança na web, leia Segurança do site).
* **Eles apresentam uma linguagem do site do servidor**. Linguagens do lado do servidor (como PHP ou Python) requerem um servidor especial para interpretar o código e entregar os resultados.
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. Abra seu prompt de comando (Windows)/ terminal (macOS/ Linux). Para verificar se o Python está instalado, digite o seguinte comando:

```bash
python -V
```

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

```bash
# incluir o nome do diretório para entrar, por exemplo
cd Desktop
# use dois pontos para voltar um nível de diretório se você precisar
cd ..
```

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

```bash
# Se a versão do Python retornada acima for 3.X
python3 -m http.server
# No windows, tente "python" em vez de "python3"
# Se a versão do Python retornada acima for 2.X
python -m SimpleHTTPServer
```

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.

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

* Para executar o código Python no lado do servidor, você precisará usar um framework web em Python. Você pode descobrir como usar o framework Django lendo Django Web Framework (Python). O Flask (em inglês) também é uma boa alternativa ao Django (um pouco menos pesada). Para executar isso, você precisará instalar o Python/PIP e em seguida, instalar o Flask usando `pip3 install flask`. Neste ponto, você deve ser capaz de executar os exemplos em Python com Flask usando, por exemplo `python3 python-example.py` e em seguida acessar `localhost:5000` no seu navegador.
* Para executar o código Node.js (JavaScript) no lado do servidor, você precisará usar o nó bruto ou uma estrutura construída sobre ele. Express é uma boa escolha — veja Express Web Framework (Node.js/JavaScript).
* Para executar o código PHP no lado do servidor, inicie o servidor de desenvolvimento interno do PHP:
```

cd path/to/your/php/code
php -S localhost:8000
```


O que é um nome de domínio? - Aprendendo desenvolvimento web

O que é um nome de domínio?
===========================

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

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

Sumário
-------

"Nomes de Domínios" são uma parte fundamental da infraestrutura da Internet. Eles provêm um endereço legível para qualquer servidor web disponível na Internet.

Qualquer computador conectado na Internet pode ser alcançado através de um endereço IP público, consistido de 32 bits para IPv4 (eles são, normalmente, escritos com quatro grupos de três números entre 0 e 255, separados por pontos (p.e., `173.194.121.32`) ou consistidos de 128 bits para IPv6 (eles são normalmente escritos com oito grupos de 4 números hexadecimais, separados por dois pontos (p.e., `2027:0da8:8b73:0000:0000:8a2e:0370:1337`). Computadores podem manipular esses endereços facilmente, mas as pessoas tem dificuldade em descobrir quem está executando o servidor ou que serviço o site oferece. Endereços de IP são difíceis de lembrar e podem mudar com o tempo. Para resolver todos esses problemas nós usamos endereços legíveis chamados domain names (nomes de domínio).

Active Learning
---------------

*There is no active learning available yet. Please, consider contributing (en-US).*

Deeper dive
-----------

### Estrutura dos domain names

Um "nome de domínio" tem uma estrutura simples feita de várias partes (pode ser apenas uma parte, duas, três...), separados por pontos e **lidos da direita para a esquerda**:

![Anatomy of the MDN domain name](/pt-BR/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name/structure.png)

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

TLD (en-US) (Top-Level Domain).

O TLD fornece as informações mais genéricas. TLDs informa aos usuários o propósito geral do serviço por trás do nome de domínio. Os TLDs mais genéricos (.com, .org, .net) não requer web services para atender a critérios rigorosos, mas alguns TLDs impõem políticas mais rigorosas. Por exemplo, TLDs locais tais como .us, .fr, or .sh podem exigir que o serviço seja fornecido em um determinado idioma ou hospedado em um determinado país.

Label (ou componente)

Os labels são os que seguem o TLD. Um label pode ser qualquer coisa, de uma letra a uma frase completa. O label localizado a direita antes do TLD pode também ser referido como um *Domínio de Nível Secundário* (SLD). Um *nome de domínio* pode ter muitos labels, não é obrigatório nem necessário ter 3 labels para formar um nome de domínio. Por exemplo, www.inf.ed.ac.uk é um nome de domínio correto. Ao controlar a parte "superior" de um nome de domínio (p.e. mozilla.org), pode-se criar outros nomes de domínios (às vezes chamados de "subdomínios") (p.e. developer.mozilla.org).

### Comprando um nome de domínio

#### Quem possui um nome de domínio?

Você não pode "comprar um nome de domínio". Você paga pelo direito de usar um nome de domínio por um ano ou mais. Você pode renovar seu direito, e sua renovação tem prioridade sobre as aplicações de outras pessoas. Mas você nunca possui o nome de domínio.

As empresas chamadas registradoras usam registros de nome de domínio para acompanhar as informações técnicas e administrativas que conectam você a seu nome de domínio.

**Nota:** **Nota :** Alguns nomes de domínios podem não ter um registrador encarregado de acompanhar. Por exemplo, todo o nome sob o domínio .fire é gerenciado pela Amazon.

#### Encontrando um nome de domínio disponível

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

* Ir até um site registrador de nome de domínio. A maioria deles fornece um serviço "whois" que diz se seu nome de domínio está disponível.
* Alternativamente, se você usa um sistema com shell embutido nele, digite um comnaod `whois` nele, como mostrado aqui para `mozilla.org`:
```

$ whois mozilla.org
Domain Name:MOZILLA.ORG
Domain ID: D1409563-LROR
Creation Date: 1998-01-24T05:00:00Z
Updated Date: 2013-12-08T01:16:57Z
Registry Expiry Date: 2015-01-23T05:00:00Z
Sponsoring Registrar:MarkMonitor Inc. (R37-LROR)
Sponsoring Registrar IANA ID: 292
WHOIS Server:
Referral URL:
Domain Status: clientDeleteProhibited
Domain Status: clientTransferProhibited
Domain Status: clientUpdateProhibited
Registrant ID:mmr-33684
Registrant Name:DNS Admin
Registrant Organization:Mozilla Foundation
Registrant Street: 650 Castro St Ste 300
Registrant City:Mountain View
Registrant State/Province:CA
Registrant Postal Code:94041
Registrant Country:US
Registrant Phone:+1.6509030800
```

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

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

$ whois afunkydomainname.org
NOT FOUND
```

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

#### Obtendo um nome de domínio

O processo é bastante simples:

1. Ir para o site de um registrador.
2. Geralmente há um apelo chamativo "Obeter um domain name" call to action. Clique nele.
3. Preencher o formulário com todos os detalhes requeridos. Certifique-se especialmente de que você não digitou incorretamente o domain name desejado. Uma vez pago, é tarde demais!
4. O registrador informará quando o domain name estiver registrado corretamente. Dentro de algumas horas, todos os servidores de DNS receberão suas informações de DNS.

**Nota:** Este tempo é frequentemente chamado de **tempo de propagação.** No entanto, este termo não é preciso, pois a atualização não está se propagando (top → down). Os servidores DNS consultados pelo seu computador (abaixo) são aqueles que buscam as informações do servidor autoritativo (superior) quando precisam.

#### Atualização de DNS

Bancos de dados DNS são armazenados em todos os servidores DNS em todo o mundo, e todos esses servidores referem-se a alguns chamados "servidores de nome autoritativo" ou "servidores DNS de nível superior". Sempre que seu registrador cria ou atualiza qualquer informação para um determinado domínio, a informação deve ser atualizada em todo banco de dados DNS. Cada servidor DNS que conhece um determinado domínio armazena as informações por algum tempo antes de serem automaticamente invalidadas e atualizadas (o servidor DNS cosulta novamente um servidor autoritativo). Assim, leva algum tempo para que os servidores DNS que conhecem esse nome de domínio obtenham as informações atualizadas.

**Nota:** **Note :** This time is often called **propagation time**. However this term is not precise since the update is not propagating itself (top → down). DNS servers queried by your computer (down) are the ones that fetch the information from the authoritative server (top) when they need it.

### Como funciona uma solicitação de DNS?

Como já vimos, quando você deseja exibir uma página da Web em seu navegador, é mais fácil digitar um nome de domínio do que um endereço IP. Vamos dar uma olhada no processo:

1. Digite mozilla.org na barra de localização do seu navegador.
2. Seu navegador pergunta ao seu computador se ele já reconhece o endereço IP identificado por esse nome de domínio (usando um cache DNS local). Em caso afirmativo, o nome é traduzido para o endereço IP e o navegador negocia o conteúdo com o servidor da Web. Fim da história.
3. Se o seu computador não sabe qual IP está por trás do nome mozilla.org, ele vai perguntar a um servidor DNS, cujo trabalho é precisamente informar ao seu computador qual endereço IP corresponde a cada nome de domínio registrado.
4. Agora que o computador conhece o endereço IP solicitado, seu navegador pode negociar o conteúdo com o servidor da web.

![Explanation of the steps needed to obtain the result to a DNS request](/pt-BR/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name/2014-10-dns-request2.png)

Próximos passos
---------------

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

* Se você quer se envolver, é um bom momento para começar a investigar o design e explorar a anatomia de uma página da web.
* É importante notar também que alguns aspectos da construção de um site custam dinheiro. Por favor, consulte quanto custa construir um site (en-US).
* Ou leia mais sobre o nome de domínio na Wikipedia.
* Você também pode encontrar aqui uma explicação divertida e colorida de como o DNS funciona.


Qual a diferença entre página web, site, servidor web e mecanismo de busca? - Aprendendo desenvolvimento web

Qual a diferença entre página web, site, servidor web e mecanismo de busca?
===========================================================================

Neste artigo, iremos apresentar diversos conceitos relacionados à Web: páginas web, sites, servidores web e mecanismos de busca. Estes termos são confundidos frequentemente por iniciantes na web, ou são empregados de forma incorreta. Vamos aprender o que cada um significa!

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

Sumário
-------

Como qualquer outra área do conhecimento, a web possui um grande número de jargões. Não se preocupe, nós não iremos te sobrecarregar com todos eles (temos um glossário se você estiver curioso). Todavia, existem alguns termos básicos que você precisa conhecer inicialmente, já que você sempre ouvirá estas expressões enquanto estiver lendo sobre o assunto. É muito fácil confundir tais termos ocasionalmente, uma vez que eles se referem a funcionalidades relacionadas porém diferentes. Na verdade, às vezes você verá esses termos mal utilizados nos noticiários e em outros lugares, portanto, misturá-los é compreensível.

Cobriremos esses termos e tecnologias com mais detalhes à medida que exploramos mais, mas essas definições rápidas serão um ótimos começo para você:

página web

Um documento que pode ser mostrado em um navegador web como Firefox, Google Chrome, Opera, Microsoft Internet Explorer ou Edge, ou Safari da Apple. Tais documentos também podem ser referenciados apenas por "páginas".

site

Um conjunto de páginas web agrupadas juntas e geralmente conectadas juntas de diversas formas. Também conhecido como "web site" ou simplesmente "site".

servidor web

Um computador que hospeda um site na Internet.

mecanismo de busca

Um serviço da web que te auxilia a encontrar outras páginas da web, como o Google, o Bing, o Yahoo ou o DuckDuckGo. Os motores de busca são normalmente acessados através de um navegador da web (por exemplo, você pode realizar pesquisas em mecanismos de busca diretamente na barra de endereços do Firefox, Chrome, etc.) ou através de uma página da web (por exemplo, bing.com ou duckduckgo.com).

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

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

Comparemos a biblioteca com um servidor web:

* A biblioteca é como um servidor web. Ela possui muitas seções, tal qual um servidor hospedando múltiplos websites.
* As diferentes seções (Ciências, Matemática, História, etc.) na biblioteca são como os sites. Cada seção é como um único site (duas seções não conterão os mesmos livros).
* Os livros em cada seção correspondem às páginas web. Um website pode conter diversas páginas, por exemplo, na seção de Ciências (o site) terá livros sobre calor, som, termodinâmica, estática, etc. (as páginas web). As páginas da web podem ser encontradas em um local exclusivo (URL).
* O índice de buscas é como o mecanismo de busca. Cada livro possui sua própria localização exclusiva na biblioteca (dois livros não podem ser armazenados no mesmo local), o que é especificado pelo código catalográfico.
Aprendizado ativo
-----------------

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

Imersão a Fundo
---------------

Bem, então vamos escavar um pouco mais a fundo sobre estes quatro termos, em como se inter-relacionam e por qual motivo são, ocasionalmente, confundidos entre si.

### Página web

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

* *informação de estilo* — controlando como a página se apresenta e se comporta (*look-and-feel*)
* *scripts* — os quais são responsáveis por adicionar interatividade à página
* *mídia* — imagens, sons e vídeos.

>
> \*\*Nota:\*\*Navegadores também são capazes de renderizar outros documentos, como arquivos PDF (en-US) ou imagens, porém o termo **página web** se refere especificamente a documentos HTML. Todavia, usaremos apenas o termo **documento**.
>
>
>

Todas as páginas web disponíveis na web são alcançáveis através de um único endereço. Para acessar uma página, basta digitar seu endereço na barra de endereços do seu navegador:

![Example of a web page address in the browser address bar](/pt-BR/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines/web-page.jpg)

### Site

Um *site* é um conjunto de páginas web vinculadas (mais os recursos associados a elas) que compartilham um único nome de domínio. Cada página web de um dado website provê links explícitos - na maior parte do tempo na forma de texto clicável - que possibilitam a um usuário mover-se de uma página do website à outra.

Para acessar um website, digite o nome de domínio na barra de endereço do seu navegador, e então o navegador irá mostrar a página web principal daquele website, ou a *homepage* (casualmente referenciada como "a *home*").

![Example of a web site domain name in the browser address bar](/pt-BR/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines/web-site.jpg)

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

### Servidor web

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

Não confunda *websites* e *servidores*. Por exemplo, caso você ouça alguém dizer: "Meu website não está respondendo", isto atualmente significa que o *servidor web* não está respondendo, logo o *website* encontra-se indisponível. Mais importante, uma vez que um único servidor web é capaz de hospedar múltiplos *websites*, o termo *servidor web* nunca deve ser empregado para se referir a um website, uma vez que isso pode provocar uma grande confusão. Em nosso exemplo anterior, caso disséssemos: "Meu servidor web não está respondendo", significaria que todos os websites hospedados naquele servidor específico encontrariam-se indisponíveis.

### Mecanismos de Pesquisa

Mecanismos de pesquisa são uma fonte comum de confusão na web. Um mecanismo de pesquisa é um tipo especial de website que auxilia usuários a encontrar páginas web de *outros* websites.

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

Muitos iniciantes na web confundem mecanismos de pesquisa e navegadores. Tornemos tudo mais claro: um **navegador** é uma aplicação de software que recupera e renderiza páginas web; um **mecanismo de pesquisa** é um website que ajuda pessoas a encontrarem páginas web de outros websites. A confusão ocorre porque, da primeira vez que alguém executa um navegador, este mostra uma página inicial de um mecanismo de pesquisa. Este comportamento faz sentido, pois, evidentemente, a primeira coisa que você deseja fazer com um navegador é encontrar uma página web para renderizar. Não confunda a infraestrutura (neste caso, o navegador) com o serviço (aqui representado pelo mecanismo de pesquisa). A distinção irá ajudá-lo muito, mas mesmo alguns profissionais tendem a falar de forma mais informal, portanto não se preocupe com isso.

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

![Example of Firefox nightly displaying a custom Google page as default](/pt-BR/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines/search-engine.jpg)

Próximos passos
---------------

* Escavando a fundo: O que é um servidor web (en-US)
* Veja como páginas web são vinculadas dentro de um website: Entendendo links na web


O que são hyperlinks? - Aprendendo desenvolvimento web

O que são 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 coma diferença entre uma página da web, um site, um servidor da web e um
mecanismo de pesquisa (en-US).
  |
| 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. "HTTP", um protocolo de transferência para encontrar documentos ao receber seus URLs;
3. "HTML", um formato de documento que permite incorporar *hyperlinks;*

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](/pt-BR/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks/link-1.png)

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:

### Tipos de links

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](/pt-BR/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks/link-2.png)

### Links e Mecanismos de pesquisa

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:

* O *texto visível* de um link influencia quais consultas de pesquisa encontrarão um determinado URL.
* Quanto mais *links de entrada* uma página da web pode mostrar, melhor ela se classifica nos resultados de pesquisa.
* *Links externos* influenciam a classificação de pesquisa das páginas da web de origem e de destino, mas não está claro quanto.

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.

* Para obter mais informações teóricas, aprenda sobre URLs e sua estrutura (en-US), já que cada link aponta para um URL.
* Quer algo um pouco mais prático? O Criando hyperlinks *(em inglês)*, artigo da nossa Introdução ao HTML *(em inglês)*, explica como implementar links em detalhes.


Como a Internet funciona? - Aprendendo desenvolvimento web

Como a Internet funciona?
=========================

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

|  |  |
| --- | --- |
| Pré-requisitos: |
 Nenhum, mas encorajamos a ler primeiro
 Como eu começo a criar meu site? |
| 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 companhias privadas. As várias tecnologias que suportam a internet evoluíram 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
-----------------

* Como a Internet funciona em 5 minutos: Um vídeo de 5 minutos para entender os conceitos básicos da Internet feito por Aaron Titus.
* Como a Internet funciona?: Vídeo animado de 9 minutos bem detalhado feito pelo canal Lesics (Learn Engineering Through Physics).
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

![Dois computadores conectados](/pt-BR/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-1.png)

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!

![Dez computadores conectados entre si](/pt-BR/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-2.png)

Para resolver este problema, cada computador na rede está conectado a 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 chegue 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 única conexão para cada computador e um roteador com 10 conexões.

![10 computadores com um roteador](/pt-BR/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-3.png)

### Uma rede de redes

Por enquanto, tudo bem. Mas como conectar centenas, milhares, bilhões de computadores? Claro que um único *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.

![Dois roteadores conectados](/pt-BR/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-4.png)

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

![Roteadores conectados a roteadores](/pt-BR/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-5.png)

Esta rede é muito parecida com o que chamamos de Internet, mas alguma coisa está faltando. Nós construímos tais redes para nossos próprios fins. Existem outras redes além das nossas ligadas em outros lugares: nossos amigos, vizinhos, qualquer pessoa pode ter 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, então é exatamente o que nós precisamos. Para conectar nossa rede a rede telefônica, precisamos de um equipamento especial chamado *modem*. Este *modem* transforma a informação da nossa rede em uma informação gerenciável pela rede telefônica e vice-versa.

![Um roteador conectado a um modem](/pt-BR/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-6.png)

Então nós estamos conectados à infraestrutura 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 companhia que gerencia alguns roteadores especiais que são conectados e podem 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.

![Pilha completa da Internet](/pt-BR/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-7.png)

### 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 `142.250.190.78` (no momento em que este artigo foi escrito. Endereços de IP podem mudar). Então, usando o nome de domínio é uma forma mais simples de encontrar um computador na Internet.

![Mostrando como um nome de domínio pode criar um apelido para um endereço IP](/pt-BR/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/dns-ip.png)

### 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 inteligí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 IRC.

### Intranets e Extranets

*Intranets* são redes *privadas* restritas aos membros de uma organização particular.
 Elas são geralmente usadas para prover um portal para que tais membros tenham acesso a recursos compartilhados, possam colaborar e comunicarem-se entre si de forma segura.

Por exemplo, a intranet de uma organização pode hospedar páginas da web para compartilhar informações de departamentos ou equipes, unidades compartilhadas para gerenciamento de documentos e arquivos importantes, portais para executar tarefas de administração de negócios e ferramentas de colaboração como wikis, quadros de discussão e sistemas de mensagens.

*Extranets* são bastante semelhantes às *Intranets*, exceto pelo fato de que abrem toda ou parte de uma rede privada para permitir o compartilhamento e a colaboração com outras organizações.

Elas são normalmente usadas para compartilhar informações de forma segura com clientes e partes interessadas que trabalham em estreita colaboração com uma empresa. Frequentemente, suas funções são semelhantes às fornecidas por uma intranet: informações e compartilhamento de arquivos, ferramentas de colaboração, fóruns de discussão, etc.

Tanto as intranets quanto as extranets são executadas no mesmo tipo de infraestrutura que a *Internet* e usam os mesmos protocolos. Eles podem, portanto, ser acessados por membros autorizados de diferentes locais físicos.

![Representação Gráfica de como uma Extranet e uma Intranet funcionam](/pt-BR/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-8.png)

Próximos passos
---------------

* Como a Web funciona
* Entendendo a diferença entre uma página web, um website, um servidor web e um mecânismo de pesquisa
* Entendendo nomes de domínio