recursal/MDN huggingface dataset:
Primeiros passos com CSS
========================

CSS ( Planilhas de estilo em cascata) é usada para estilizar e arranjar páginas web — por exemplo, para alterar a fonte, cor, tamanho e espaçamento do seu conteúdo, separá-lo em multiplas colunas, ou então adicionar animações e outras implementações decorativas. Esse módulo provê um começo sutil em seu caminho pelo domínio do CSS com o básico de como ele funciona, como é a aparência da sintaxe e como você pode começar a utilizá-lo para estilizar seu HTML.

Pré-requisitos
--------------

Antes de iniciar este módulo, você deve ter:

1. Familiaridade básica com o uso de computadores e utilização da internet passivamente (Ex: vendo e consumindo o conteúdo.)
2. Um ambiente de trabalho básico configurado conforme detalhado em Instalando Software Básico e um entendimento de como criar e gerenciar arquivos, conforme detalhado em Lidando com Arquivos.
3. Familiaridade básica com HTML, como discutido no módulo Introdução ao HTML.

**Nota:** Se você está trabalhando em um computador/tablet/ou outro dispostivo onde você não tem habilidade para criar seus próprios arquivos, você poderá tentar (a maioria) os exemplos de códigos em um programa online de codificação como JSBin ou Thimble.

Guias
-----

Este módulo contém os seguintes artigos, que o guiarão através de toda a teoria básica do CSS e fornecerão oportunidades para você testar algumas habilidades.

O que é CSS?

**CSS** (Cascading Style Sheets) permite que você crie páginas web com ótima aparência. Mas como isso funciona por debaixo dos panos? Este artigo explica o que é CSS, com um exemplo simples de sintaxe, e também cobre alguns termos importantes sobre a linguagem.

Iniciando com CSS

Neste artigo, pegaremos um documento HTML simples e aplicaremos CSS, aprendendo algumas coisas práticas sobre a linguagem ao longo do caminho.

Como CSS é estruturado

Agora que você tem uma idéia sobre o que é CSS e o básico sobre como usá-lo, é hora de analisar um pouco mais a fundo a estrutura da própria linguagem. Já conhecemos muitos dos conceitos discutidos aqui; você pode retornar a este para recapitular se achar confusos os conceitos posteriores.

Como CSS funciona

Aprendemos o básico do CSS, para que serve e como escrever folhas de estilo simples(Cascading Style Sheets - CSS). Neste exercício, veremos como um navegador utiliza CSS e HTML, e os transforma em uma página da web.

Usando seu novo conhecimento

Com o que aprendeu nas poucas lições anteriores, você já deve estar achando que pode formatar simples documentos de textos usando CSS, para adicionar seu próprio estilo neles. Este artigo te dará a chance de fazê-lo.

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

Conhecimento Intermerdiário da Web 1: Introdução ao CSS

Um excelente curso básico da Mozilla que explora e testa muitas das habilidades mencionadas no módulo Introdução ao CSS. Aprenda sobre o estilo de elementos HTML em uma página web, seletores de CSS, atributos e valores.
Estilizando texto
=================

Com o básico de CSS compreendido, o próximo passo para você se concentrar será a estilização de textos — uma das mais importantes coisas que você fará com CSS. Aqui nós olhamos para os fundamentos de estilização de texto, fontes, negritos, italicos, linha e espaço entre letras, sombreamente e outras características textuais. Completamos o módulo produrando aplicar fontes personalizadas para sua página, e estilizando listas e links.

Pré-requisites
--------------

Antes de começar este módulo, você já deverá ter familiaridade básica com HTML, como dissemos no módulos Introdução ao HTML, e estar confortável com os fundamentos de CSS, como discutido em Introdução ao CSS (en-US).

**Nota:** Se você está usando um computador/tablet/outro dispositivo onde não tem a possibilidade de criar seus próprios arquivos, você poderá treinar os códigos-exemplo em um programa de código online como JSBin, CodePen or Thimble.

Guias
-----

Este módulo contém os seguintes artigos que ensinarão você todos os fundamentos por trás da estilização de conteúdo textual HTML.

Fundamentos da estilização de texto e fontes (en-US)

Neste artigo nós passamos por todo o básico da estilização de texto/fonte, incluindo a configuração weight(negrito), family e style, configuração com forma abreviada, alinhamento textual, linha e espaçamento entre as letras.

Estilizando lista

Listas comportam-se como qualquer texto na maior parte das vezes, ma há algumas propriedades CSS específicas para lista que você precisa conhecer, e algumas boas práticas a considerar. Este artigo esclarecerá tudo.

Estilizando links (en-US)

Na estilização de links, é importante entender como fazer uso de pseudo-classes para estilizar o estado dos links efetivamente, como estilizar links para uso em recursos de interfaces diversas como menus de navegação e guias. Veremos todos esses tópicos neste artigo.

Web Fontes (en-US)

Aqui nós exploraremos Web Fontes em detalhes — isto permite que você baixe fontes personalizadas junto com sua página web, para permitir maior personalização na estilização.

Avaliação
---------

A seguinte avaliação testará seu entendimento das técnicas de estilização de texto cobertas pelo guia acima.

Estilizando a homepage de um escola comunitária

Nesta avaliação nos testeremos seu entendimento de estilização de texto fazendo com que você estilize a homepage de uma escola comunitária.
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.
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.
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
=============

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

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
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.
Guia JavaScript
===============

O Guia JavaScript mostra como usar JavaScript e dá uma visão geral da linguagem. Se você quer começar com JavaScript ou programação em geral, consulte os artigos na área de aprendizagem. Se você precisar de informações mais aprofundadas sobre algum recurso da linguagem, consulte a referência JavaScript.

Capítulos
---------

Este guia está dividido em vários capítulos:

* Introdução
Sobre este guia
Sobre JavaScript
JavaScript e Java
ECMAScript
Ferramentas
Olá Mundo
* Sintaxe e tipos
Sintaxe básica e comentários
Declarações
Escopo de variável
Hoisting
Estruturas de dados e Tipos
Literais
* Controle de fluxo e manipulação de erro
`if...else`
`switch`
`try`/`catch`/`throw`
Objetos de erro
Promises
* Laços e iteração
`for while do...while break/continue for..in for..of`
* Funções
Definição de funções
Chamando funções
Escopo da função
Closures
Argumentos & parâmetros
Funções de seta
* Expressões e operadores
Atribuição & comparações
Operadores aritméticos
Operadores lógicos & bit a bit
Operador condicional (Ternário)
* Números e datas
Números
Objeto de números
Objeto Math
Objeto Data
* Formatação de texto
Strings
Objetos de strings
Modelos de strings
Internacionalização
* Expressões Regular
Criando uma expressão regular
Padrão de escrita de uma expressão regular
Trabalhando com expressões regular
* Coleções Indexadas
Arrays
Arrays digitados
* Coleções Chaveadas
Maps
WeakMaps
Set
WeakSet
* Trabalhando com objetos
Objetos e propriedades
Criando Objetos
Definindo Métodos
Getter e setter
* Detalhes do modelo de objetos
POO baseada na prototipagem
Criando hierarquias de objetos
Herança
* Iteradores e geradores
Iterators
Iterables
Generators
* Meta programação
`Proxy`
Handlers e traps
Proxy revogável
`Refletor`
* Next »
JavaScript error reference
==========================

Lista de erros "globais".

* Erro de Sintaxe: faltando : depois da propriedade id
* Erro de sintaxe falta ) depois da lista de argumentos
* Erro de sintaxe: declaração de função requer um nome
* Error: Permission denied to access property "x"
* InternalError: too much recursion
* RangeError: argument is not a valid code point
* RangeError: invalid array length
* RangeError: invalid date
* RangeError: precision is out of range
* RangeError: repeat count must be non-negative
* ReferenceError: "x" não está definido
* ReferenceError: Atribuição à variável não declarada "x"
* ReferenceError: can't access lexical declaration`X' before initialization
* ReferenceError: invalid assignment left-hand side
* ReferenceError: reference to undefined property "x"
* SyntaxError: JSON.parse: bad parsing
* SyntaxError: Unexpected token
* SyntaxError: as declarações da cabeça do laço for-in podem não ter inicializadores
* SyntaxError: flag de expressão regular inválida "x"
* SyntaxError: illegal character
* SyntaxError: missing formal parameter
* SyntaxError: missing variable name
* SyntaxError: missing } after property list
* SyntaxError: redeclaration of formal parameter "x"
* SyntaxError: uma declaração na cabeça de um laço for-of não pode ter um inicializador
* SyntaxError: unterminated string literal
* TypeError: "x" is (not) "y"
* TypeError: "x" is not a function
* TypeError: "x" is read-only
* TypeError: atribuição inválida para const "x"
* TypeError: can't assign to property "x" on "y": not an object
* TypeError: can't define property "x": "obj" is not extensible
* TypeError: can't redefine non-configurable property "x"
* TypeError: invalid Array.prototype.sort argument
* TypeError: property "x" is non-configurable and can't be deleted
* TypeError: setting getter-only property "x"
* Warning: -file- is being assigned a //# sourceMappingURL, but already has one
* Warning: unreachable code after return statement
block
=====

Uma **declaração em bloco** (ou **declaração composta (compound)** em outras linguagens) é usado para agrupar nenhum ou mais declarações. O bloco é delimitado por um par de chaves e pode opcionalmente ser `nomeado`:

Sintaxe
-------

### Declaração de Bloco
```

{
  ListaDeDeclarações
}
```

### Declaração de Bloco Nomeada
```

NomeIdentificador: {
  ListaDeDeclarações
}
```


`ListaDeDeclarações`

Declarações agroupadas com a declaração em bloco.

`NomeIdentificador`

Um `nome (label)` opcional para identificação visual ou um alvo para `break`.

Descrição
---------

A declaração em bloco é frequentemente chamada de **declaração composta (compound)** em outras linguagens. Ela permite que você use multiplas declarações onde o JavaScript espera apenas uma declaração. Combinar declarações em blocos são uma prática comum em JavaScript. O comportamento oposto é possível usando uma declaração vazia, onde você fornece nenhuma declaração, mesmo que uma seja requerida.

### Regras de Bloqueio de Escopo

#### Com `var`

Variáveis declaradas com `var` **não** possuem bloqueio de escopo. Variáveis introduzidas com um bloco são guardadas no escopo da função que elas estão ou script, e os efeitos de configura-las persistem pelo próprio bloco. Em outras palavras, declarações em bloco não introduzem um escopo. Mesmo blocos "standalone" são sintaxes válidas, você não vai querer usar blocos standalone em JavaScript, porque não fazem o que você pensa que eles fazem, se você pensa que eles fazer coisas como blocos em C ou Java. Por exemplo:


```js
var x = 1;
{
  var x = 2;
}
console.log(x); // imprime 2
```


Isso loga 2 porque a declaração `var x` com o bloco está no mesmo escopo que a declaração `var x` antes do bloco. No C ou Java, o código equivalente iria imprimir 1.

#### Com `let` e `const`

Por contraste, variáveis declaradas com `let` e `const` **tem** escopo bloqueado:


```js
let x = 1;
{
  let x = 2;
}
console.log(x); // imprime 1 1
```


`O x = 2` é limitado ao escopo do bloco em que ele foi definido.

O mesmo true de `const`:


```js
const c = 1;
{
  const c = 2;
}
console.log(c); // imprime 1 e não invoca uma throw SyntaxError...
```


Note que o escope bloqueado de `const c = 2` *não invoca uma* `SyntaxError: Identifier 'c' has already been declared` porque ele foi unicamente declarado no bloco.

Especificações
--------------

| Specification |
| --- |
| ECMAScript Language Specification # sec-block |

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

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

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

* `while`
* `if...else`
* `let`