O que é um servidor web (web server)? - Aprendendo desenvolvimento web

O que é um servidor web (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. 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 URLs (endereços web) e HTTP (o protocolo que seu navegador utiliza para visualizar páginas web.

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](/pt-BR/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server/web-server.svg)

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

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

* está sempre "vivo" e rodando
* está sempre conectado à Internet
* tem o mesmo endereço IP sempre (nem todos ISPs (en-US) fornecem um endereço IP fixo para linhas domésticas)
* é mantido por um provedor de terceiros

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

### Comunicando através do HTTP

Segundo, um servidor web fornece suporte para 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:

* Somente *clientes* podem fazer requisições HTTP, e somente para *servidores.* Servidores podem apenas *responder* a uma requisição HTTP dos *clientes*.
* Quando fizer a requisição de um arquivo via HTTP, os clientes devem fornecer a URL do arquivo.
* O servidor web *deve responder* todas as requisições HTTP, mesmo que seja com uma mensagem de erro.

![The MDN 404 page as an example of such error page](/pt-BR/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server/mdn-404.jpg)Em 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. 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. 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.)
### 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 (en-US) 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 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:

* ler sobre quanto custa desenvolver para a web (en-US) (em inglês)
* aprender mais sobre os vários softwares necessários para criar um site (en-US) (em inglês)
* partir para a prática de como fazer o upload de arquivos em um servidor web (en-US) (em inglês).


Como eu começo a criar meu site? - Aprendendo desenvolvimento web

Como eu começo a criar meu site?
================================

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:

* O que exatamente eu quero realizar?
* Como um site me ajudará a atingir meus objetivos?
* O que precisa ser feito, e em que ordem, para alcançar meus objetivos?

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

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:

* Deixar as pessoas ouvirem sua música.
* Vender guloseimas.
* Conhecer outros músicos.
* Falar sobre sua música.
* Ensinar música através de vídeos.
* Publicar fotos de seus gatos.
* Encontrar um(a) novo(a) namorado(a).

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. Deixar as pessoas ouvirem sua música.
3. Falar sobre sua música.
4. Conhecer outros músicos.
5. Vender guloseimas.
6. Ensinar música através de vídeos.
7. Publicar fotos de seus gatos.

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:

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

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.


CSS

CSS
===

**CSS** (***Cascading Style Sheets* ou Folhas de Estilo em Cascata)** é uma linguagem de estilo (en-US) usada para descrever a apresentação de um documento escrito em HTML ou em XML (incluindo várias linguagens em XML como SVG, MathML ou XHTML). O CSS descreve como elementos são mostrados na tela, no papel, na fala ou em outras mídias.

CSS é uma das principais linguagens da **open web** e é padronizada em navegadores web de acordo com as especificação da W3C. Desenvolvido em níveis, o CSS1 está atualmente obsoleto, o CSS2.1 é uma recomendação e o CSS3, agora dividido em pequenos módulos, está progredindo para a sua padronização.

* Introdução CSS
 Se você é novo no desenvolvimento web, certifique-se de ler nosso artigo CSS básico para aprender o que é CSS e como usá-lo.
* Tutoriais CSS
 Nossa área de aprendizado CSS contém diversos tutoriais para levá-lo do nível iniciante ao avançado, cobrindo todos os fundamentos.
* Referências CSS
 Nossa extensa referência CSS para desenvolvedores web experientes descreve todas as propriedades e conceitos do CSS.
Tutoriais
---------

Nossa área de aprendizado CSS contempla múltiplos módulos que ensinam CSS desde o início — não é necessário conhecimento prévio.

**Introdução ao CSS**

Esse módulo inicia com o funcionamento básico do CSS, incluindo seletores e propriedades, escrever regras CSS, aplicar CSS ao HTML, como especificar comprimento, cor, e outras unidades em CSS, cascata e herança, o básico do modelo de caixas, e depuração de CSS.

**Estilização do texto**

Esse módulo discute os fundamentos da estilização de textos, incluindo a definição de fontes, negritos, itálicos, linhas e espaçamentos de letras, sombras e outras propriedades de textos.

**Estilização de caixas**

Esse módulo foca na estilização de caixas, um dos passos fundamentais para o layout de uma página web. Nesse módulo nós recapitulamos o modelo de caixas, então abordamos o controle do layout das caixas definindo margens, bordas e preenchimento, cores de fundo customizadas, imagens e outras características extravagantes como sombras e filtros em caixas.

**Layout CSS**

Neste ponto nós já vimos os fundamentos do CSS, como estilizar texto e estilizar e manipular caixas que contém seu conteúdo. Agora veremos como posicionar suas caixas no lugar certo em relação à janela de exibição e um ao outro. Nós cobrimos os pré-requisitos necessários e agora você pode se aprofundar no layout do CSS com diferentes configurações de exibição, métodos tradicionais de layout envolvendo float e posicionamento, e modernas ferramentas para layout como flexbox.

Referências
-----------

* Referências CSS: Essa extensa referência para desenvolvedores web experientes descreve todas as propriedades e conceitos do CSS.
* Conceitos chave do CSS:
    + A sintaxe e formas da linguagem
    + Especificidade, herança e cascata (en-US)
    + Box model e colapso de margem
    + O containing block (en-US)
    + Empilhamento e block-formatting context (en-US)
    + Valores iniciais, computados, usados e reais
    + Propriedades abreviadas do CSS
    + CSS Flexible Box Layout
    + CSS Grid Layout
    + Media queries
Livro de receitas
-----------------

O livro de receitas de layout CSS tem como objetivo juntar receitas para padrões comuns de layout, coisas que você pode precisar para implementar em seus sites. Além de prover código você pode usá-lo como ponto de partida em seus projetos, essas receitas destacam as diferentes formas de utilização das especificações de layout e as escolhas que você pode fazer como desenvolvedor.

Ferramentas para desenvolvimento de CSS
---------------------------------------

* Você pode usar o W3C CSS Validation Service para verificar se o seu CSS é válido. Essa é uma ferramenta indispensável de depuração.
* As Ferramentas do Firefox para desenvolvedores permitem ver e editar o CSS de uma página ao vivo usando as ferramentas de Inspeção e Editor de Estilo.
* O complemento Web Developer para Firefox também permite a observação e edição de CSS ao vivo dos sites visualizados.
* A comunidade web criou várias outras pequenas ferramentas CSS para você usar.
Veja também
-----------

* CSS demos: Inspire-se explorando criativos exemplos das mais recentes tecnologias CSS em ação.
* Linguagens web nas quais o CSS é frequentemente aplicado: HTML, SVG, MathML, XHTML e XML.
* Tecnologias Mozilla que usam extensivamente o CSS: XUL, complementos e temas do Firefox e Thunderbird.


HTTP

HTTP
====

***Hypertext Transfer Protocol (HTTP)*** é um protocolo de camada de aplicação para transmissão de documentos hipermídia, como o HTML. Foi desenvolvido para comunicação entre navegadores web e servidores web, porém pode ser utilizado para outros propósitos também. Segue um modelo cliente-servidor clássico, onde um cliente abre uma conexão, executa uma requisição e espera até receber uma resposta. É também um protocolo sem estado ou stateless protocol, que significa que o servidor não mantem nenhum dado entre duas requisições (*state*). Apesar de ser frequentemente baseado em uma camada TCP/IP, pode ser utilizado em qualquer camada de transporte confiável, ou seja, um protocolo que não perde mensagens silenciosamente como o UDP.

Tutoriais
---------

Aprenda como usar HTTP com guias e tutoriais.

Visão geral do HTTP

Apresenta os recursos básicos do protocolo cliente-servidor: o que pode fazer e quais seus usos.

Cache HTTP

O Cache é muito importante para websites rápidos. Este artigo descreve diferentes métodos de cache e como utilizar os cabeçalhos HTTP para controlá-los.

Cookies HTTP

O funcionamento dos cookies é definido pela RFC 6265. Ao receber uma requisição HTTP, o servidor pode enviar um cabeçalho `Set-Cookie` com a resposta. Depois, o cliente retorna o valor do cookie a cada requisição ao mesmo servidor na forma de um cabeçalho `Cookie` HTTP. O cookie também pode ser configurado para expirar em um determinado tempo ou permanecer restrito a um domínio ou endereço específicos.

Controle de Acesso HTTP (CORS)

**As requisições CORS** são requisições HTTP de recursos de domínios diferentes do domínio que está fazendo a requisição. um exemplo é um site A (SiteA.com) realizando uma requisição de uma imagem por meio de um elemento *img* para um site B (SiteB.com/img.png). Hoje em dia encontramos o CORS em grande maioria das páginas webs, carregando scripts, imagens, folhas de estilos, etc.

Dicas de cliente HTTP (en-US)

**Dicas do cliente** são um conjunto de cabeçalhos de resposta que um servidor pode usar para solicitar proativamente informações de um cliente sobre o dispositivo, a rede, o usuário e as preferências específicas do agente do usuário.
 O servidor pode então determinar quais recursos enviar, com base nas informações que o cliente escolher fornecer.

Evolução do HTTP (en-US)

Uma breve descrição das mudanças que ocorreram no HTTP em versões mais antigas para o moderno HTTP/2 em diante.

Diretrizes de segurança da Web da Mozilla

uma coleção de dicas para ajudar as equipes operacionais na criação de aplicativos Web seguros.

Mensagens HTTP

Descreve os tipos e a estrutura das diferentes mensagens do HTTP/1.x e HTTP/2.

Uma sessão típica em HTTP

Mostra e explica o fluxo de uma sessão HTTP normal.

Gerenciamento de conexões em HTTP/1.x

Descreve os três modelos de conexão disponíveis no HTTP/1.x, seus pontos fortes e fracos.

Controlando a pré-busca de DNS (en-US)

O Firefox e outros navegadores atuais utilizam a **pré-busca de** **DNS**, ou seja, o navegador faz a busca do nome do domínio nos links contidos numa página antes que o recurso seja requisitado, como por exemplo imagens, scripts e folhas de estilo. Isto tudo ocorre em segundo plano, para que quando o recurso necessite ser carregado, o endereço DNS já esteja resolvido. Isto diminui a latência quando, por exemplo, um usuário clica em um link.

Referências
-----------

Navegue por uma detalhada documentação de referências em HTTP.

Cabeçalhos HTTP

As mensagens de cabeçalho HTTP são utilizadas para realizar a descrição de algum recurso ou comportamento do cliente ou servidor. Propriedades personalizadas nos cabeçalhos utilizam o prefixo 'X-' ; Outras no registro IANA, cujo conteúdo original foi definido na RFC 4229. IANA também mantém o registro de novas propostas para mensagens de cabeçalhos HTTP.

Métodos de requisição HTTP

As mais diferentes requisições podem ser utilizadas pelos métodos de requisições HTTP: `GET` e `POST`, mas também algumas requisições menos comuns pelos métodos `OPTIONS`, `DELETE` ou `TRACE`.

Respostas de códigos de status em HTTP (en-US)

Os códigos de status do HTTP indicam quando uma requisição foi completada. Códigos de status são agrupados em cinco classes: Informações, respostas, respostas de sucesso, redirecionamentos, erros de cliente e erros de servidor.

Diretivas CSP

Os campos de cabeçalho de resposta `Content-Security-Policy` permitem que os administradores do site controlem os recursos que o agente do usuário pode carregar para uma determinada página. Com algumas exceções, as políticas envolvem principalmente a especificação de origens de servidor e endpoints de script.

Ferramentas & recursos
----------------------

Ferramentas que irão lhe ajudar a testar e debugar as suas requisições HTTP.

Ferramentas de desenvolvedores Firefox

Network monitor

Observatório Mozilla

Um projeto desenvolvido para ajudar desenvolvedores, administradores de sistema e profissionais de segurança a configurar seus sites com segurança.

RedBot

Uma ferramenta para visualizar seus Headers relacionados em cache.

Como os navegadores funcionam (2011)

Um artigo bem abrangente sobre a parte interna dos navegadores e os fluxos de requisições via protocolo HTTP. Um artigo que todos os desenvolvedores web, com certeza, deveriam ler.


MathML

MathML
======

**Mathematical Markup Language (MathML)** é uma linguagem de marcação baseada em XML (en-US) para descrever notações matemáticas e capturar tanto a sua estrutura quanto seu conteúdo. Aqui você encontrará links para a documentação e exemplos, bem como ferramentas para o seu trabalho com esta poderosa tecnologia. Para uma visão rápida, veja os slides da feira de inovação do Mozilla Summit 2013.

Referências de MathML
---------------------

Referência de elementos de MathML

Detalhes sobre cada elemento de MathML e informações sobre compatibilidade para navegadores desktop e móveis.

Referência de atributos de MathML (en-US)

Informações sobre atributos de MathML que modificam a aparência e o comportamento dos elementos.

Exemplos de MathML

Amostras e exemplos de MathML para ajudá-lo a compreender como a linguagem funciona.

Escrevendo em MathML (en-US)

Dicas e sugestões para escrever em MathML, incluindo sugestões de editores MathML e como capturar suas saídas para integrar em conteúdos Web.

Ferramentas
-----------

* Validador W3C
* Extensão do Firefox FireMath
* Coleção de extensões Firefox Mathzilla
* TeXZilla - Conversor de Javascript LaTeX para MathML (live demo, Firefox OS webapp, Firefox add-on, using in a Web Page, JS program etc)
* LaTeXML - Conversão de documentos LaTeX para páginas web HTML+MathML
* Web Equation - Transforma equações escritas a mão em MathML ou LaTeX
* MathJax - Motor de visualização JavaScript entre navegadores para matemática. Veja também a Extensão MathML Nativa MathJax.
Tópicos Relacionados
--------------------

* CSS
* HTML
* SVG
Compatibilidade dos Browsers
----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Acessibilidade

Acessibilidade
==============

Acessiblidade no desenvolvimento Web significa permitir que o máximo possível de pessoas possa acessar os sites da web mesmo quando suas habilidades são limitadas de alguma forma. Aqui nós fornecemos informações sobre o desenvolvimento de conteúdo acessível.

"A palavra Acessibilidade é, frequentemente, usada para descrever facilidades ou assistências às pessoas com necessidades especiais, como em *acessível para cadeirantes*. Isto pode se estender para o Sistema Braille, rampas para cadeirantes, sinais sonoros em passagens de pedestres, modelos de páginas e assim por diante". Acessibilidade na Wikipedia

"**A *Web* é, fundamentalmente, projetada para funcionar para todas as pessoas**, independentemente de máquina, programas, língua, cultura, localização ou capacidade física ou mental de seus utilizadores. Quando a web atende a esses requisitos, ela se torna acessível a pessoas com dificuldades auditivas, motoras, visuais e cognitivas". W3C - Acessibilidade

Tutoriais fundamentais
----------------------

A área de aprendizado de acessibilidade da MDN contém tutoriais modernos e atualizados que abordam os seguintes aspectos essenciais de acessibilidade:

O que é acessibilidade? (en-US)

Este artigo fornece uma visão geral do que é a acessibilidade - isso inclui quais grupos de pessoas devemos considerar e o motivo, quais ferramentas de acessibilidade são utilizadas para interagir com a web e como podemos fazer da acessibilidade web parte do nosso fluxo de desenvolvimento.

HTML: A base para a acessibilidade

Boa parte do conteúdo da Web pode ser 'acessível' apenas garantindo que as tags HTML sejam sempre usadas para a finalidade correta. Este artigo analisa detalhadamente como utilizar o HTML garantindo a máxima acessibilidade.

CSS e JavaScript: accessibilidade e boas práticas (en-US)

CSS e JavaScript, usados corretamente, também podem proporcionar experiências acessíveis na web, mas se mal utilizadas, podem prejudicar a navegação. Este artigo descreve como utilizar o CSS e JS de forma a garantir que mesmo conteúdos complexos sejam acessíveis.

Básico de WAI-ARIA (en-US)

Continuando to tópico anterior, não é facil fazer interfaces web com HTML e conteúdo dinâmico atualizado por JavaScript. O WAI-ARIA é uma tecnologia que pode ajudar com esses problemas, adicionando mais propriedades semanticas que navegadores e tecnologias assistivas podem reconhecer e usar para permitir que os usuários saibam o que está acontecendo na tela. Aqui mostraremos o básico destas técnicas para melhorar a acessibilidade.

Multimedia acessível (en-US)

Outra categoria de conteúdo que pode criar problemas de acessibilidade é a multimédia - Audio, vídeo e imagens precisam de alternativas textuais, assim poderão ser compreendidas por tecnologias assistivas de seus usuários. Este artigo detalha como.

Accessibilidade Mobile (en-US)

O acesso por dispositivos móveis e smartphones é muito popular, e plataformas como iOS e Android já possuem ferramentas bastante consolidadas, assim é importante considerar a acessibilidade do seu conteúdo também nestas plataformas. Este artigo faz considerações sobre acessibilidade mobile.

Documentação
------------

Desenvolvimento Web (en-US)

Uma coleção de artigos destinados a mostrar as principais questões de desenvolvimento web no mundo da acessibilidade.

Introdução à cor e acessibilidade (en-US)

Este artigo discute nossa percepção de luz e cor, oferecendo a base para o uso de cores em designs acessíveis, e demonstra as melhores práticas para conteúdo visual e legível.

Widgets JavaScript navegáveis pelo teclado (en-US)

Até agora, os desenvolvedores web que desejavam tornar seus widgets baseados em `<div>` e `<span>` acessíveis têm enfrentado a falta de técnicas adequadas. A **acessibilidade por teclado** faz parte dos requisitos mínimos de acessibilidade, dos quais um desenvolvedor deve estar ciente.

ARIA (en-US)

Uma coleção de artigos para aprender como usar ARIA e tornar seus documentos HTML mais acessíveis.

Acessibilidade em dispositivos móveis

Esse documento fornece uma breve lista das necessidades da acessibilidade para desenvolvedores de aplicativos móveis.

Acessibilidade cognitiva (en-US)

Este artigo explica como assegurar que o conteúdo web que você está criando é acessível para pessoas com limitações cognitivas.

Acessibilidade para distúrbios convulsivos (en-US)

Alguns tipos de conteúdo visual na web podem induzir convulsões ou ataques epiléticos em pessoas com certos distúrbios cerebrais. Este artigo o auxilia a entender os tipos de conteúdo que podem ser problemáticos e a encontrar ferramentas e estratégias que ajudam a evitá-los.

Ferramentas para desenvolvedores web
------------------------------------

* Emulador de leitor de tela Fangs
* Emulador de leitor de tela Claws
Outras páginas úteis
--------------------

* Lista de leitores de tela


SVG: Gráficos Vetoriais Escaláveis

SVG: Gráficos Vetoriais Escaláveis
==================================

**Iniciando** Este tutorial irá ajudá-lo a começar a trabalhar com SVG.

**Gráficos Vetoriais Escaláveis (SVG)** é uma linguagem de marcação XML (en-US) para descrever gráficos vetoriais bidimensionais. Essencialmente, SVG é para gráficos o que o XHTML é para texto.

SVG é similar em escopo à tecnologia Flash, propriedade da Adobe, mas se distingue por ser uma recomendação da W3C, ou seja, um padrão, e por ser baseado em XML e não em um formato binário fechado. O SVG foi criado para funcionar com outros padrões da W3C, tais como CSS, DOM (en-US) e SMIL.

Documentação
------------

Referência de elementos SVG

Veja detalhes sobre cada elemento SVG.

Referência de atributos SVG (en-US)

Veja detalhes sobre cada atributo SVG.

Referência da API de DOM do SVG

Veja detalhes sobre toda a API de DOM do SVG.

Melhorando o conteúdo HTML

O SVG funciona juntamente com HTML, CSS e JavaScript. Use o SVG para melhorar uma página comum HTML ou uma aplicação web.

SVG na Mozilla

Notas e informações sobre como o SVG é implementado na Mozilla.

* Como o SVG e implementado no Firefox
* Tutorial sobre como usá-lo
* SVG em XHTML (en-US)

Ferramentas
-----------

* Suíte de Teste SVG
* Validador SVG (Descontinuado)
* Mais Ferramentas...
* Outros recursos: XML (en-US), CSS, DOM (en-US), Canvas
Exemplos
--------

* Google Maps (route overlay) & Docs (spreadsheet charting)
* Menus bubble SVG
* Orientações para autoria SVG
* Uma visão geral do Projeto SVG da Mozilla
* Perguntas frequentes sobre SVG e Mozilla
* Slides e demos da palestra SVG and Mozilla no SVG Open 2009
* SVG como uma imagem (en-US)
* Animação SVG com SMIL (en-US)
* Leão, Borboleta & Tigre
* Galeria de arte SVG
* Mais exemplos (SVG Samples croczilla.com, carto.net)
### Animação e interações

Assim como o HTML, o SVG tem um modelo de documento (DOM), eventos e é acessível por JavaScript. Isto permite aos desenvolvedores criar animações e imagens interativas.

* Algumas imagens SVG impressionantes em svg-wow.org
* Extensão do Firefox (Grafox) para adicionar suporte a um subconjunto de animação SMIL
* Manipulação interativa de fotos
* Transformações HTML usando `foreignObject` do SVG
* Arte animada
### Mapeamentos, gráficos, jogos & experimentos 3D

Embora o SVG ainda tenha de percorrer um longo caminho para prover conteúdo web avançado, aqui estão alguns exemplos de uso intensivo de SVG.

* Um Tetris SVG & Connect 4
* Find the State
* Mapa da população dos EUA
* 3D box & 3D boxes
* jVectorMap (mapas interativos para visualização de dados)


Segurança Web

Segurança Web
=============

Assegurar-se de que seu website ou sua aplicação web aberta esteja segura é um ponto crucial. Até pequenos bugs no seu código podem resultar em vazamento de informações privadas e há muita gente mal intencionada por aí tentando encontrar meios de roubar dados. Estes artigos contêm informações que podem ajudá-lo a manter seu código seguro.

Deixando seu site seguroHá várias coisas que você pode fazer para ajudar na segurança do seu site. Esse artigo oferece uma série de sugestões, bem como links para outros artigos fornecendo informações mais úteis.


Demonstrações de tecnologia web aberta

Demonstrações de tecnologia web aberta
======================================

A mozilla suporta uma grande variedade de tecnologias abertas da web aberta e nós encorajamos seu uso.Esta página oferece links para demonstrações interessantes dessas tecnologia.

Se você conhece uma boa demonstração ou aplicação da tecnologia web aberta, adicione um link para a seção apropriada aqui.

Gráficos 2D
-----------

### Tela de pintura

* Blob Sallad: an interactive blob using javascript and canvas (code demos)
* Flying through space
* 3D RayCaster
* processing.js
* 3D on 2D Canvas
* miniPaint: Image editor (source code)
### SVG

* Bubblemenu (visual effects and interaction)
* HTML transformations using `foreignObject` (visual effects and transforms)
* Phonetics Guide (interactive)
* 3D objects demo (interactive)
* Blobular (interactive)
* Video embedded in SVG (or use the local download)
* Summer HTML image map creator (source code)
### Vídeo

* Video 3D Animation "mozilla constantly evolving"
* Video 3D animation "Floating Dance"
* Streaming Anime, Movie Trailer and Interview
* Billy's Browser Firefox Flick
* Virtual Barber Shop
* Transformers Movie Trailer
* A Scanner Darkly Movie Trailer (with built in controls)
* Events firing and volume control
* Dragable and sizable videos
Gráficos 3D
-----------

### WebGL

* Web Audio Fireworks
* IoQuake3 (source code)
* Escher puzzle (source code)
* Kai 'Opua (source code)
### Realidade virtual

* The Polar Sea (source code)
* Sechelt fly-through (source code)
CSS
---

* CSS Zen Garden
* CSS floating logo "mozilla"
* Paperfold
* CSS Blockout
* Rubik's cube
* Pure CSS Slides
* Planetarium (source code)
### Transformações

* Impress.js (source code)
jogos
-----

* IoQuake3 (source code)
* Kai 'Opua (source code)
* Game canvas (source code)
HTML
----

* Zen Photon Garden (source code)
API da Web
----------

### API de notificações

* HTML5 Notifications (source code)
### API de áudio da Web

* Web Audio Fireworks
* oscope.js - JavaScript oscilloscope
* HTML5 Web Audio Showcase (source code)
* HTML5 Audio Visualizer (source code)
* Graphical Filter Editor and Visualizer (source code)
### API de arquivos

* Slide My Text - presentation from plain text files
### Trabalhadores da Web

* Web Worker Fractals
* Photo editor
* Coral generator
* Raytracer
* HotCold Touch Typing


Web App Manifest

Web App Manifest
================

O manifesto do aplicativo web fornece informações sobre uma aplicação (como nome, autor, icone, e descrição) em um arquivo de texto. O propósito do manifesto é instalar aplicações web na tela inicial de um aparelho, propiciando aos usuários um acesso mais rápido e uma experiência enriquecida.

Os manifestos dos aplicativos web fazem parte de um acervo de tecnologias de rede chamadas aplicativos web progressivos (en-US), sendo estes aplicativos web que podem ser instalados na tela inicial de um aparelho sem obrigar um usuário a passar por uma loja de aplicativos, dispondo também de outros superpoderes como estar disponíveis offline e apresentando aos usuários notificações push quando houverem mudanças de conteúdo do aplicativo.

Implementando um manifesto
--------------------------

Manifesto de aplicativos web são implementados em suas páginas HTML usando uma etiqueta de link no cabeçalho do documento:

```html
<link rel="manifest" href="/manifest.webmanifest" />
```

**Nota:** A extensão `.webmanifest` está especificada na sessão de Media type registration da especificação, mas no geral os navegadores suportam manifestos em outras extensões apropriadas como `.json`

**Nota:** Se o manifesto precisa de credenciais para ser buscado, você deve adicionar o atributo `crossorigin` (en-US) mesmo que o arquivo de manifesto esteja na mesma origem da página atual.

Exemplo de manifesto
--------------------

```json
{
  "name": "HackerWeb",
  "short\_name": "HackerWeb",
  "start\_url": ".",
  "display": "standalone",
  "background\_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [
    {
      "src": "images/touch/homescreen48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen168.png",
      "sizes": "168x168",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "related\_applications": [
    {
      "platform": "web"
    },
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
    }
  ]
}
```

Métodos
-------

Manifest can contain the following keys:

### background\_color

Define a "cor de fundo" esperada para o website. Este valor repete o que já é disponível no CSS do site, mas pode ser usada por navegadores para desenhar cor de um atalho quando o manifesto estiver disponível antes que a folha de estilo (stylesheet) ter carregado. Isso cria uma transição suave entre a execução do aplicativo e o conteúdo do site.

```json
"background\_color": "red"
```

**Nota:** O membro `background_color` tem o único intuito de melhorar a experiência de usuário enquanto o site apontado está carregando, e não deve ser usado pelo agente de usuário como o `background color` quando a folha de estilo do aplicativo web progressivo (PWA) estiver disponível.

### description

Fornece uma descrição geral do que a aplicação faz.

```json
"description": "O aplicativo que ajuda você a encontrar a melhor comida na cidade!"
```

### dir

Especifica a direção primário do texto para os membros `name`, `short_name`, e `description`. Junto com o membro `lang` , ajuda a mostrar corretamente idiomas escritos da direita para esquerda.

```json
"dir": "rtl",
"lang": "ar",
"short\_name": "أنا من التطبيق!"
```

Pode ter um dos valores a seguir:

* `ltr` (left-to-right)
* `rtl` (right-to-left)
* `auto` (hints to the browser to use the Unicode bidirectional algorithm to make a best guess about the text's direction.)

**Nota:** When the value is omitted, it defaults to `auto`.

### display

Define o modo de exibição preferido do desenvolvedor para a aplicação.

```json
"display": "standalone"
```

Valid values are:

| Member | Description |
| --- | --- |
| `sizes` | A string containing space-separated image dimensions. |
| `src` |
 The path to the image file. If `src` is a relative URL, the
 base URL will be the URL of the manifest.
  |
| `type` |
 A hint as to the media type of the image. The purpose of this member is
 to allow a user agent to quickly ignore images of media types it does
 not support.
  |
| `purpose` |
 Defines the purpose of the image, for example that the image is
 intended to serve some special purpose in the context of the host OS
 (i.e., for better integration).

 The
 purpose member
 can have the following values:
 * "**badge**": A user agent can present this icon where
 space constraints and/or color requirements differ from those of the
 application icon.
* "**maskable**": The image is designed with
 icon masks and safe zone
 in mind, such that any part of the image that is outside the safe
 zone can safely be ignored and masked away by the user agent.
* "**any**": The user agent is free to display the icon
 in any context (this is the default value).
 |

**Nota:** You can selectively apply CSS to your app based on the display mode, using the display-mode media feature. This can be used to provide a consistent user experience between launching a site from an URL and launching it from a desktop icon.

### icons

Specifies an array of image objects that can serve as application icons in various contexts. For example, they can be used to represent the web application amongst a list of other applications, or to integrate the web application with an OS's task switcher and/or system preferences.

```json
"icons": [
  {
    "src": "icon/lowres.webp",
    "sizes": "48x48",
    "type": "image/webp"
  },
  {
    "src": "icon/lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon/hd\_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon/hd\_hi.svg",
    "sizes": "72x72"
  }
]
```

Objetos de imagens podem conter os seguintes valores:

| Member | Description |
| --- | --- |
| `sizes` | A string containing space-separated image dimensions. |
| `src` | The path to the image file. |
| `type` | A hint as to the media type of the image.The purpose of this member is to allow a user agent to quickly ignore images of media types it does not support. |

### lang

Specifies the primary language for the values in the `name` and `short_name` members. This value is a string containing a single language tag.

```json
"lang": "en-US"
```

### name

Provides a human-readable name for the application as it is intended to be displayed to the user, for example among a list of other applications or as a label for an icon.

```json
"name": "Google I/O 2015"
```

### orientation

Defines the default orientation for all the web application's top level browsing contexts (en-US).

```json
"orientation": "portrait-primary"
```

Orientation pode ser um dos seguintes valores:

* `any`
* `natural`
* `landscape`
* `landscape-primary`
* `landscape-secondary`
* `portrait`
* `portrait-primary`
* `portrait-secondary`
### prefer\_related\_applications

Specifies a boolean value that hints for the user agent to indicate to the user that the specified related applications (see below) are available, and recommended over the web application. This should only be used if the related native apps really do offer something that the web application can't do.

```json
"prefer\_related\_applications": false
```

**Nota:** If omitted, the value defaults to `false`.

### related\_applications

Specifies an array of "application objects" representing native applications that are installable by, or accessible to, the underlying platform — for example a native Android application obtainable through the Google Play Store. Such applications are intended to be alternatives to the web application that provide similar or equivalent functionality — like the native app version of the web app.

```json
"related\_applications": [
  {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
    "id": "com.example.app1"
  }, {
    "platform": "itunes",
    "url": "https://itunes.apple.com/app/example-app1/id123456789"
  }]
```

Application objects may contain the following values:

| Member | Description |
| --- | --- |
| `platform` | The platform on which the application can be found. |
| `url` | The URL at which the application can be found. |
| `id` | The ID used to represent the application on the specified platform. |

### scope

Defines the navigation scope of this web application's application context. This basically restricts what web pages can be viewed while the manifest is applied. If the user navigates the application outside the scope, it returns to being a normal web page.

```json
"scope": "/myapp/"
```

### short\_name

Provides a short human-readable name for the application. This is intended for use where there is insufficient space to display the full name of the web application.

```json
"short\_name": "I/O 2015"
```

### start\_url

Specifies the URL that loads when a user launches the application from a device.

```json
"start\_url": "./?utm\_source=web\_app\_manifest"
```

### theme\_color

Defines the default theme color for an application. This sometimes affects how the application is displayed by the OS (e.g., on Android's task switcher, the theme color surrounds the application).

```json
"theme\_color": "aliceblue"
```

Splash screens
--------------

In Chrome 47 and later, a splash screen is displayed for a web application launched from a home screen. This splashscreen is auto-generated using properties in the web app manifest, specifically: `name`, `background_color`, and the icon in the `icons` array that is closest to 128dpi for the device.

Mime type
---------

Manifests should be served using the `application/manifest+json` MIME type. However, it is optional to do so.

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTML: Linguagem de Marcação de Hipertexto
=========================================

**HTML** (Linguagem de Marcação de HiperTexto) é o bloco de construção mais básico da web. Define o significado e a estrutura do conteúdo da web. Outras tecnologias além do HTML geralmente são usadas para descrever a aparência/apresentação (CSS) ou a funcionalidade/comportamento (JavaScript) de uma página da web.

"Hipertexto" refere-se aos *links* que conectam páginas da Web entre si, seja dentro de um único site ou entre sites. Links são um aspecto fundamental da web. Ao carregar conteúdo na Internet e vinculá-lo a páginas criadas por outras pessoas, você se torna um participante ativo na world wide web.

O HTML usa "Marcação" para anotar texto, imagem e outros conteúdos para exibição em um navegador da Web. A marcação HTML inclui "elementos" especiais, como `<head>`, `<title>`, `<body>`, `<header>`, `<footer>`, `<article>`, `<section>`, `<p>`, `<div>`, `<span>`, `<img>`, `<aside>`, `<audio>`, `<canvas>`, `<datalist>`, `<details>`, `<embed>`, `<nav>`, `<output>`, `<progress>`, `<video>`, `<ul>`, `<ol>`, `<li>` e muitos outros.

Um elemento HTML é separado de outro texto em um documento por "tags", que consistem no nome do elemento entre "`<`" e "`>`". O nome de um elemento dentro de uma tag é insensível a maiúsculas e minúsculas. Isto é, pode ser escrito em maiúsculas, minúsculas ou um mistura. Por exemplo, a tag `<title>` pode ser escrita como `<Title>`, `<TITLE>` ou de qualquer outra forma.

Os artigos abaixo podem ajudá-lo a aprender mais sobre HTML.

* Introdução ao HTML
 Se você é novo no desenvolvimento web, não deixe de ler nosso artigo O Básico do HTML para aprender o que é HTML e como usá-lo.
* Tutoriais HTML
 Para artigos sobre como usar o HTML, assim como tutoriais e exemplos completos, confira nossa Área de Aprendizado de HTML.
* Referência do HTML
 Em nossa extensa seção de Referência do HTML, você encontrará os detalhes sobre cada elemento e atributo do HTML.
Tutoriais para iniciantes
-------------------------

Nossa Área de Aprendizado de HTML apresenta vários módulos que ensinam HTML desde o início — sem necessidade de conhecimento prévio.

Introdução ao HTML

Este módulo fornece uma base de conhecimento, permitindo que você acostume-se com os conceitos e sintaxes importantes, tais como aplicar HTML para texto, como criar *hyperlinks* e como usar HTML para estruturar uma página web.

Multimídia e como incorporá-la

Este módulo explora como usar HTML para incluir multimídia em sua página web, incluindo as diferentes maneiras para incluir imagens, e como incorporar vídeos, áudios e até como colocar uma página inteira em outras páginas web.

Tabelas HTML

Representar dados tabulares em uma página web de maneira entendível e acessível pode ser um desafio. Este módulo cobre marcação tabular básica, junto com outras funcionalidades mais complexas como legendas e sumários.

Formulários HTML (en-US)

Formulários são partes muito importantes na Web — proporcionam muitas das funcionalidades que você precisa para interagir em páginas web. Exemplos disso são registrar-se e conectar-se, enviar comentários, comprar produtos e muito mais. Este módulo lhe permite começar a criar as partes visíveis dos formulários, ou seja, as partes que os usuários interagem.

Usando HTML para resolver problemas comuns

Apresenta links para seções com conteúdo explicando como usar HTML para resolver problemas muito comuns, quando se cria uma página web: como trabalhar com títulos, agregar imagens ou vídeos, colocar ênfase em conteúdo, criar um formulário básico, etc.

Tópicos avançados
-----------------

Habilitando Imagem CORS

O atributo `crossorigin`, em combinação com um cabeçalho CORS adequado, permite definir imagens pelo elemento `<img>` para ser carregado de outras fontes em um elemento `<canvas>` como se estivessem sendo carregados da fonte atual.

Configuração de atributos CORS (en-US)

Alguns elementos em HTML que suportam CORS (en-US), como por exemplo o `<img>` ou `<video>`, têm o atributo `crossorigin` (a propriedade `crossOrigin`), que permite configurar as requisições CORS para os dados recebidos pelo elemento.

Gerenciamento de foco em HTML (en-US)

O atributo DOM `activeElement` e o método DOM `hasFocus()` lhe ajudam a melhorar a interação entre o usuário e os elementos da página.

Tipos de conexões (en-US)

Em HTML, vários tipos de links podem ser utilizados para realizar conexões entre documentos, como por exemplo `<a>`, `<area>` e `<link>`.

Formatos de arquivos suportados pelos elementos de áudio e vídeo em HTML (en-US)

Os elementos `<audio>` e `<video>` permitem que você reproduza áudios e vídeos no seu HTML. Estes elementos fornecem uma alternativa nativa de recursos do navegador, parecidos com a do Adobe Flash Player e outros plug-ins.

Usando o cachê de aplicação

O cachê de aplicação tem como o objetivo executar a aplicação offline. Você pode usar a interface **Application Cache** (*AppCache*) para escolher elementos que o browser possa guardar, deixando-os disponíveis para usuários desconectados. As aplicações que forem armazenadas em cache podem ser utilizadas sem nenhum problema, mesmo que o usuário clique no botão de atualizar a página enquanto estiver offline.

Pré-carregando conteúdo com rel="preload" (en-US)

O valor `preload` do atributo `rel` do elemento `<link>` permite que você escreva solicitações de busca declarativas em seu elemento `<head>` do HTML, especificando recursos que suas páginas vão utilizar logo após o carregamento. Você também pode necessitar que estes recursos sejam pré-carregados ao início do ciclo de execução da página e depois que o mecanismo de renderização do navegador comece a agir. Isso garante que estarão disponíveis mais cedo e que seja menos provável que sua página seja bloqueada do processo de renderizar. Isso aumenta a performance da página. Este artigo oferece um guia básico de como `preload` funciona.

Referências
-----------

Referência do HTML

HTML é formado de **elementos**, onde cada um deles pode ser modificado por alguns **atributos**. Documentos HTML são interconectados através de links (en-US).

Referência dos Elementos HTML

Navegue em uma lista com todos os elementos HTML.

Referência de atributos em HTML

Elementos em HTML possuem atributos. Estes configuram ou ajustam o funcionamento e o comportamento dos seus elementos de muitas maneiras.

Atributos Globais

Os atributos globais podem ser utilizados em todos os elementos HTML, *mesmo aqueles que não são especificados como padrão*. Isso significa que qualquer elemento não padrão vai permitir estes atributos, mesmo que este retorne um documento HTML5 incompatível.

Elementos em linha e Elementos em nível de bloco

Elementos HTML são normalmente elementos *inline* (em linha) ou *block-level* (em nível de bloco). Um elemento em linha ocupa somente o espaço limitado pelas tags que o definem. Um elemento em nível de bloco ocupa o espaço inteiro do elemento pai (container), portanto criando um bloco.

Tipos de Links (en-US)

No HTML, vários tipos de links podem ser utilizados para estabelecer e definir o relacionamento entre dois documentos. Os tipos de elementos de link que podem ser incluídos são `<a>`, `<area>` e `<link>`.

Formatos de mídia suportados pelos elementos vídeo e áudio do HTML (en-US)

Os elementos `<audio>` e `<video>` permitem que você reproduza mídias de áudio e vídeo. Estes elementos fornecem uma alternativa nativa para o navegador reproduzir recursos similares aos encontrados no Adobe Flash e outros plug-ins.

Tipos de conteúdo HTML (en-US)

O HTML é composto de uma grande diversidade de conteúdos, e cada um pode ser usado em certos contextos e não ser permitido em outros. Da mesma forma, cada um tem um conjunto de outras categorias de conteúdos que podem ou não serem usadas dentro deles. Este é um guia destas categorias.

Os Modos Quirks e o Modo Padrão

Informações sobre a história dos Modos *Quirks* e o Modo padrão.

Tópicos relacionados
--------------------

Aplicando cores em elementos HTML usando CSS

Este artigo mostra as principais formas de se usar CSS para adicionar cores ao seu conteúdo HTML, mostrando que partes dos documentos HTML podem ser coloridas e quais propriedades utilizar. Inclui exemplos e links para ferramentas de *palette-building*, entre outros.


JavaScript

JavaScript
==========

**JavaScript®** (às vezes abreviado para **JS**) é uma linguagem leve, interpretada e baseada em objetos com *funções de primeira classe,* mais conhecida como a linguagem de script para páginas Web, mas usada também em vários outros ambientes sem browser, tais como node.js, Apache CouchDB e Adobe Acrobat. O JavaScript é uma linguagem baseada em protótipos, multi-paradigma e dinâmica, suportando estilos de orientação a objetos, imperativos e declarativos (como por exemplo a programação funcional). Saiba mais sobre o JavaScript.

Essa seção do site é dedicada à linguagem JavaScript e não às partes que são específicas para páginas Web e outros ambientes. Para mais informações sobre as APIs específicas para páginas Web, por favor consulte as seções Web APIs e DOM.

O padrão JavaScript é ECMAScript. Desde 2012, todos os navegadores modernos possuem suporte total ao ECMAScript 5.1. Navegadores mais antigos suportam pelo menos ECMAScript 3. Em 17 de Junho de 2015, a ECMA International publicou a sexta versão do ECMAScript, que é oficialmente chamado de ECMAScript 2015, e foi inicialmente conhecido como ECMAScript 6 ou ES6. Desde então, as especificações do ECMAScript são lançadas anualmente. Essa documentação faz referência à última versão de referência, que atualmente é a ECMAScript 2018.

Não se deve confundir o JavaScript com a linguagem de programação Java. Tanto *Java* quanto *JavaScript* são marcas registradas da Oracle nos Estados Unidos da América e em outros países. No entanto, as duas linguagens de programação possuem sintaxe, semânticas e usos muito diferentes.

Tutoriais
---------

Aprenda a programar em JavaScript com guias e tutoriais.

### Para iniciantes

Vá para a Área de aprendizado de JavaScript se você quer aprender JavaScript mas não tem experiência prévia com JavaScript ou programação. Os módulos completos que estão disponíveis lá são os seguintes:

Primeiros passos em JavaScript

Respostas para algumas perguntas básicas como *O que é JavaScript?*, *Com o que se parece?* e *O que se pode fazer?*, bem como funcionalidades importantes do JavaScript, tais como variáveis, strings, números e vetores.

Elementos básicos do JavaScript

Continuamos nossa cobertura das funcionalidades fundamentais do JavaScript, direcionando nossa atenção para tipos de blocos de código encontrados comumente, como expressões condicionais, laços, funções e eventos.

Introduzindo objetos em JavaScript

O entendimento da natureza da orientação à objetos do JavaScript é importante se você quiser levar o seu conhecimento da linguagem para o próximo nível e escrever códigos mais eficientes, por isso oferecemos esse módulo para te ajudar.

### Guia do JavaScript

Guia do JavaScript

Um guia muito mais detalhado sobre a linguagem JavaScript, para pessoas que possuem experiência prévia com JavaScript ou outra linguagem de programação.

### Intermediário

Uma re-introdução ao JavaScript

Uma visão geral para aqueles que *pensam* que conhecem JavaScript.

Estruturas de dados do JavaScript

Um resumo das estruturas de dados disponíveis em JavaScript.

Comparações de igualdade e uniformidade

O JavaScript fornece três operações diferentes para comparar valores: igualdade estrita utilizando `===`, igualdade ampla usando `==` e o método `Object.is()`.

### Avançado

Herança e a cadeia de protótipos

Explicação da herança baseada em protótipos, que costuma ser amplamente mal entendida e subestimada.

Modo estrito

O modo estrito define que você não pode usar nenhuma variável antes de inicializá-la. É uma variante restrita do ECMAScript 5, para um desempenho mais performático e uma depuração mais fácil.

Vetores JavaScript tipados

Vetores JavaScript tipados oferecem um mecanismo para acesso a dados binários brutos.

Gerenciamento de memória

Ciclo de vida da memória e coleta de lixo em JavaScript.

Modelo de concorrência e o loop de eventos

JavaScript tem um modelo de concorrência baseado em *loop de eventos*.

Referência
----------

Navegue pela documentação completa da Referência de JavaScript.

Objetos globais

Conheça os objetos padrão nativos `Array`, `Boolean`, `Date`, `Error`, `Function`, `JSON`, `Math`, `Number`, `Object`, `RegExp`, `String`, `Map`, `Set`, `WeakMap` e `WeakSet`, entre outros.

Expressões e operadores

Saiba mais sobre o comportamento dos operadores de JavaScript `instanceof`, `typeof`, `new`, `this`, a precedência dos operadores e muito mais.

Instruções e declarações

Saiba como `do-while`, `for-in`, `for-of`, `try-catch`, `let`, `var`, `const`, `if-else`, `switch` e outras instruções e palavras-chave do JavaScript funcionam.

Funções

Aprenda como trabalhar com funções em JavaScript para desenvolver suas aplicações.

Ferramentas & recursos
----------------------

Ferramentas úteis para escrever e depurar seu código **JavaScript**.

Ferramentas do Firefox para desenvolvedores

Scratchpad, Web Console, JavaScript Profiler (en-US), Debugger e muito mais.

JavaScript Shells (en-US)

Um shell JavaScript permite que você teste rapidamente fragmentos de código JavaScript.

TogetherJS

Colaboração fácil. Ao adicionar o TogetherJS ao seu site, seus usuários podem ajudar uns aos outros em tempo real!

Stack Overflow

Perguntas do Stack Overflow com a tag *JavaScript*.

Versões do JavaScript e notas de lançamento

Navegue no histórico de funcionalidades do JavaScript e no status das implementações.

JSFiddle

Edite JavaScript, CSS e HTML e obtenha resultados em tempo real. Utilize recursos externos e colabore com sua equipe online.


Guia do desenvolvedor web

Guia do desenvolvedor web
=========================

**Estes artigos fornecem informações para ajudá-lo a fazer uso de tecnologias e APIs específicas.**

Guia do desenvolvedor HTML

**HyperText Markup Language** **(HTML)** é a linguagem principal de praticamente todo o conteúdo da Web. Muito do que você vê na tela do seu navegador é descrito, fundamentalmente, em HTML.

Guia do desenvolvedor CSS (en-US)

Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para descrever a apresentação de um documento escrito em HTML.

Distribuição de áudio e vídeo (en-US)

Podemos distribuir conteúdos de áudio e vídeo na web de muitas maneiras, estendendo de uma mídia 'estática' para streams adaptativas e vivas. Este artigo propõe explorar a variedade de mecanismos de distribuição de mídia baseados na web e sua compatibilidade com os navegadores mais populares.

Manipulação de áudio e vídeo (en-US)

A beleza da web é que você pode combinar tecnologias para criar novas formas. Possuir áudio nativo e vídeo no navegador significa que você pode usar esses data streams com tecnologias semelhantes ao `<canvas>`, WebGL or Web Audio API para modificar o áudio e vídeo diretamente. Por exemplo, adicionando efeitos de reverb/compression ( ressonância/compressão) para áudios, ou filtros de grayscale/sepia (escala cinza/sépia) para vídeos. Esse artigo proporciona uma referência para explicar tudo o que você precisa para fazê-los.

Guia de eventos do desenvolvedor (en-US)

Eventos referem-se tanto à um padrão de design, utilizado para o tratamento assíncrono de vários incidentes que ocorrem durante a vida de uma página web, como para a nomeação, caracterização, e uso de um largo número de ocorrências de diferentes tipos de mecanismos de entregadas da web

AJAX

AJAX é um termo que define um grupo de tecnologias que permitem as aplicações web realizarem rapidamente atualizações incrementais na interface do usuário sem ser necessário recarregar a página inteira do navegador. Isso faz com que a aplicação seja mais rápida e mais responsiva as ações do usuário.

Gráficos na Web

Web sites modernos e aplicativos, muitas vezes precisam apresentar gráficos de diferentes graus de satisfação.

Guia para APIs da Web (en-US)

Um lista de todas as APIs da Web e o que elas fazem.

JavaScript

JavaScript é uma poderosa linguagem de scripts utilizada para criar aplicativos para a Web.

Localizações e codificação de caracteres

Internamente, navegadores processam texto como Unicode. Entretanto, uma forma de representar caracteres em termos de bytes (codificação de caracteres) deve ser utilizada para transferência de texto da rede para o navegador. A recomendação da especificação HTML é utilizar UTF-8 (que é capaz de representar todo o conteúdo Unicode). Independentemente da escolha da codificação, ela precisa ser declarada no conteúdo Web.

Desenvolvimento Web móvel

Esta página fornece uma visão geral de algumas das principais técnicas necessárias para projetar sites que funcionam bem em dispositivos móveis. Se você está procurando informações sobre o projeto Firefox OS da Mozilla, consulte a página Firefox OS. Ou você pode estar interessado em detalhes sobre Firefox para Android.

Aplicativos da web progressivos

Aplicações progressivas web(PWAs) usam modernas web APIs juntamente com a estratégia tradicional de aprimoramento progressivo para criar aplicações web multiplataforma. Esses aplicações funcionam em qualquer lugar e fornecem vários recursos que proporcionam as mesmas vantagens da experiência de usuário (UX) tal como em aplicações nativas. Este conjunto de guias informa tudo o que você precisa saber sobre PWAs.

Otimização e desempenho

Ao construir aplicativos e sites Web modernos, é importante fazer o seu conteúdo funcionar de forma rápida e eficiente. Isso o torna efetivo tanto em poderosos dispositivos Desktop quanto em outros mais fracos como um celular.

*Analisando e serializando XML* (en-US)

A plataforma Web oferece diferentes métodos de *parsing* e *serializing* de XML, cada um com suas próprias vantagens e desvantagens.

O Web Open Font Format (WOFF) (en-US)

**WOFF** (**Web Open Font Format**) é um formato de arquivo para fontes que é livre para qualquer um usar.

Usando Objetos FormData (en-US)

O objeto `FormData` permite compilar um conjunto de pares de chave / valor para enviar usando XMLHttpRequest. É destinado principalmente para o envio de dados do formulário, mas pode ser utilizado de forma independente destes a fim de transmitir dados. A transmissão é realizada no mesmo formato que o método do formulário `submit()` iria usar para enviar os dados se o tipo de forma de codificação fosse definido como "multipart / form-data".

Glossário

Define vários termos técnicos relacionados à Web e Internet.

Veja também
-----------

* Referência do desenvolvedor web (en-US)


Otimização e Performance

Otimização e Performance
========================

Quando construímos aplicações para web e sites modernos, é importante fazer seu conteúdo funcionar bem. Isso é, faze-lo funcionar eficientemente e rápido. Isso permite que ele funcione com eficaz tanto para usuários de computadores mais poderosos quanto para dispositivos portáteis com menos poder. Existem diversas ferramentas disponíveis para checar a performance de um site ou blog. As mais notáveis seguem abaixo:

Os recursos acima também incluem as melhores práticas de performance web. Fazer da performance web uma prioridade ao considera-la durante o processo de desenvolvimento é importante para assegurar que os usuários tenham a melhor experiência possível.


Tutoriais

Tutoriais
=========

Os links nesta página levam a uma variedade de tutoriais e materiais de treinamento. **Se você está apenas começando, aprendendo o básico ou é um veterano em desenvolvimento web, aqui você pode encontrar recursos úteis, bem como as melhores práticas**. Esses recursos são criados por empresas com visão de futuro e desenvolvedores que adotaram padrões e boas práticas para desenvolvimento na web, e que fornecem e permitem diferentes interpretações de acordo com a solução adotada pelo usuário, tudo isso através de uma licença de conteúdo aberto, como é o caso da Creative Commons.

Para nível iniciante da Web
---------------------------

Iniciando com a Web

*Iniciando com a Web* é uma séria concisa que apresenta a você os aspectos práticos do desenvolvimento web. Você configurará as ferramentas que você precisa para construir uma página web simples e publicará seu próprio código simples.

Tutoriais de HTML
-----------------

### Nível inicial

Introdução ao HTML

Este módulo lhe dá a base necessária, levando-o a fazer uso de conceitos e sintaxe fundamentais e ensinando como aplicar HTML ao texto, bem como criar *hiperlinks* e fazer uso do HTML para estruturar uma página da web.

**Referência de Elementos HTML da MDN**

Uma referência abrangente para elementos HTML e como são suportados pelos diferentes navegadores.

**Criando uma Página Web simples com HTML** (The Blog Starter)

Um guia HTML para iniciantes que inclui explicações de *tags* comums, incluindo tags HTML5. Também inclui um guia passo a passo sobre como criar uma página da web com exemplos de códigos já usados.

**Guia do Iniciante em HTML (Website Setup)**

Este guia para iniciantes em HTML ensina você como configurar um website básico usando HTML e as novas tags HTML5. Um tutorial passo a passo com imagens e recursos que você pode usar para melhorar suas habilidades de codificação.

**Desafio HTML (Wikiversity)**

Use esses desafios para aprimorar suas habilidades em HTML (como por exemplo, *Eu devo usar um elemento <h2> ou um elemento <strong>?*), focando numa melhor produtividade.

### Nível Intermediário

Multimídia e Incorporação

Este módulo explora como usar HTML para adicionar multimídia em suas páginas web, incluindo as diferentes maneiras pelas quais as imagens podem ser adicionadas, e como incorporar vídeo, áudio e até outras páginas web inteiras.

Tabelas em HTML

Representar dados de tabela em uma página da Web de um modo compreensível e acessível pode ser um desafio. Este módulo abrange a marcação básica da tabela, juntamente com recursos mais complexos como a implementação de legendas e resumos.

### Nível avançado

Formulários em HTML (HTML forms) (en-US)

Formulários são uma parte muito importante da Web - fornecem grande parte das funcionalidades que você precisa para interagir com sites da Web, como por exemplo registrando e efetuando login, enviando comentários, comprando produtos e muito mais. Este módulo começa com a criação de formulários da parte do cliente.

**Dicas para criar páginas HTML de carregamento rápido (en-US)**

Otimize páginas da web para fornecer um site mais receptivo para visitantes e reduzir a carga em seu servidor web juntamente com a conexão com a Internet.

Tutoriais CSS
-------------

### Nível inicial

CSS Básico (en-US)

CSS (Cascading Style Sheets) é o código que você usa para pôr estilo em suas páginas web. *CSS Básico* traz o que você precisa para começar. Nós responderemos questões como: Como eu faço meu texto preto ou vermelho? Como eu faço meu conteúdo aparecer neste ou naquele lugar da tela? Como eu decoro minha página web com imagens e cores de fundo?

Introdução ao CSS (en-US)

Este módulo vai a fundo em como o CSS trabalha, incluíndo seletores e propriedades, escrevendo regras CSS, aplicando CSS no HTML, como especificar cores e outras unidades em CSS, herança em cascata, modelos de *boxes* e *debug* em CSS.

Estilizando *Boxes* (en-US)

A seguir nós veremos em estilização *boxes* (caixas), um dos passos fundamentais para a apresentação de uma página web. Neste módulo nós recapitulamos o modelo de caixa, em seguida olhamos para o controle de layouts de caixas, configurando preenchimento, bordas e margens, definindo cores de fundo personalizadas, imagens e outros recursos e recursos extravagantes, como sombras e filtros de *boxes*.

Estilizando texto

Aqui nós olhamos para fundamentos de estilização de texto, incluíndo configuração de fonte, negritos, itálicos, espaçamento de linha e letras, sombras e outros recursos de texto. Nós completamos o módulo analizando a aplicação de fontes customizadas em sua página e estilizando listas e *links*.

**Questões comuns de CSS (en-US)**

Perguntas e respostas comuns para iniciantes.

### Nível intermediário

CSS layout

Até este ponto nós vimos CSS básico, como estilizar texto e como formatar e manipular caixas dentro do seu conteúdo. Agora veremos como colocar suas caixas no lugar certo em relação à *viewport* e vice-versa. Nós já cobrimos os pré-requisitos, então agora podemos mergulhar profundamente no *layout* CSS, olhando para diferentes configurações de tela, métodos de *layout* tradicionais envolvendo flutuação e posicionamento e novas ferramentas de *layout* como o *flexbox*.

**Referência CSS**

Referência completa de CSS, com detalhes e suporte pelo Firefox e outros navegadores.

**Grades Fluídas (Uma lista a parte)**

*Layouts* de *design* que redimensionam fluidamente com a janela do navegador, enquanto ainda estiver usando uma grade tipográfica.

**Desafios CSS (Wikiversity)**

Dar uma maior flexibilidade nas suas habilidades de utilização do CSS e ver onde você precisa de mais prática.

### Nível avançado

**Usando transformações CSS**

Aplique rotação, inclinação, escala e translação utilizando CSS.

**CSS Transições (en-US)**

Transições CSS, parte do projecto de especificação CSS3, fornecem uma maneira de animar as alterações nas propriedades CSS, ao invés de executar as alterações imediatamente.

**Guia Rápido para implementar Fontes da Web com @font-face (HTML5 Rocks)**

O recurso @font-face do CSS3 permite que você use fontes personalizadas na web de uma forma acessível, manipulável e escalável.

**Começando a escrever CSS (David Walsh)**

Uma introdução às ferramentas e metodologias para escrever CSS mais sucinto, sustentável e escalável.

Tutorial Canvas

Aprenda a desenhar gráficos usando *scripts* e usando o elemento `canvas`.

**HTML5 Doctor**

Artigos sobre o uso de HTML5.

Tutoriais Javascript
--------------------

### Nível iniciante

Primeiros passos em JavaScript

Em nosso primeiro módulo JavaScript, nós respondemos algumas questões fundamentais como *O que é JavaScript?*, *Com o que se parece?* e *O que se pode fazer com ele?* antes de avançar para levá-lo através da sua primeira experiência prática de escrever JavaScript. Depois disso, discutimos detalhadamente alguns recursos chaves de JavaScript, como variáveis, strings, números e matrizes.

Construindo blocos com JavaScript

Neste módulo, continuamos a nossa cobertura de todos os recursos fundamentais do JavaScript, voltando a nossa atenção para os tipos de códigos comumente encontrados, como declarações condicionais, laços, funções e eventos. Você já viu esses tópicos no curso, mas apenas de passagem - aqui vamos discutir tudo de forma explícita.

Começando com JavaScript

O que é JavaScript e como pode lhe ajudar?

**Codecademy (Codecademy)**

Codecademy é uma maneira fácil de aprender como codificar em JavaScript. É interativo e você pode aprender junto dos seus amigos.

### Nível intermediário

Introdução a objetos em JavaScript

Em JavaScript, a maioria das coisas são objetos, desde recursos do núcleo do JavaScript como strings e arrays até APIs do navegador construídas em JavaScript. Você pode criar sues próprios objetos para encapsular funções e variáveis dentro de pacotes. A natureza orientada a objetos do JavaScript é importante se você quer ir a fundo com seu conhecimento na linguagem e escrever códigos mais eficientes, então nós fornecemos este módulo para ajudar você. Aqui você aprende a teoria de orientação a objetos em detalhes, vê como criar seus próprios objetos, e explicamos o que são dados JSON e como trabalhar com eles.

APIs da web do lado do cliente

Quando se programa em JavaScript do lado do cliente (*client-side*) para sites ou aplicações web, voce não vai muito longe antes de precisar usar APIs - interfaces para manipular diferentes aspectos do navegador e do sistema operacional onde o site está executando, ou mesmo dados de outro serviço da web ou site. Neste módulo nós vamos explorar o que são APIs e como usar algumas das APIs mais comuns que você encontrará frequentemente eu seu trabalho.

**Uma Reintrodução ao JavaScript**

Uma recapitulação da linguagem de programação JavaScript destinada a desenvolvedores de nível intermediário.

**JavaScript Eloquente**

Um guia compreensivo para metodologias intermediárias e avançadas em JavaScript.

**Falando JavaScript (Dr. Axel Rauschmayer)**

Para programadores que querem aprender JavaScript de uma maneira focada e rápida e para os desenvolvedores que buscam aprimorar suas habilidades ou procuram se aprofundar em um tópico.

**Padrões de Design Essenciais em JavaScript (Addy Osmani)**

Uma introdução para padrões de design essenciais em JavaScript.

### Nível avançado

Guia de JavaScript

Um guia completo, atualizado regularmente, de JavaScript para todos os níveis de ensino, do básico ao avançado.

**Você não conhece JS (Kyle Simpson)**

Uma série de livros que mergulham profundamente nos principais mecanismos da linguagem JavaScript.

**JavaScript Garden**

Documentação de partes mais peculiares do JavaScript.

**Explorando ES6 (Dr. Axel Rauschmayer)**

Informações profundas e confiáveis sobre ECMAScript 2015.

**Padrões JavaScipt**

Uma coleção de padrões e antipadrões que cobre padrões de funções, padrões jQuery, padrões de plugins jQuery, padrões de design, padões em geral, padrões de literais e construtores, padrões de criação de objetos, padrões de reuso de código e DOM.

**Como navegadores trabalham**

Um artigo detalhado descrevendo diferentes navegadores modernos, seus motores, renderização de páginas, etc.

Vídeos sobre JavaScript (GitHub)

Uma coleção de vídeos sobre JavaScript para se aprofundar no assunto.

### Estendendo o desenvolvimento

WebExtensions

WebExtensions é um sistema entre navegadores para desenvolver complementos de navegador. Em larga escala o sistema é compatível com a API de extensão suportada pelos navegadores Google Chrome e Opera. Extensões escritas para estes navegadores na maioria dos casos funcionam no Firefox ou Microsoft Edge com poucas mudanças. A API é também completamente compatível com multiprocessos Firefox.