Update Structure and Summary

README.md

@@ -1,7 +1,34 @@
 # Web Design para iniciantes
 
+**Objetivo**: criação de página pessoal usando HTML, CSS hospedada no Github.
 
+Neste minicurso pretendemos passar o conhecimento inicial para qualquer pessoa que tenha interesse em aprender sobre Web Design e criação de websites.
 
-**Objetivo**: criação de página pessoal usando HTML, CSS hospedada no Github
+## Sumário
 
-Neste minicurso pretendemos passar o conhecimento inicial para qualquer pessoa que tenha interesse em aprender sobre Web Design e criação de websites.
+- [Introdução a Internet](introducao_a_internet/)
+- [Introdução ao Web Design](introducao_ao_web_design/)
+    - [O Web Design](introducao_ao_web_design/web_design.md)
+    - [A pré-produção](introducao_ao_web_design/pre-producao.md)
+        - [Wireframes](introducao_ao_web_design/wireframes.md)
+        - [Mockups](introducao_ao_web_design/mockups.md)
+        - [Protótipos](introducao_ao_web_design/prototipos.md)
+        - [Ferramentas úteis](introducao_ao_web_design/ferramentas_uteis.md)
+    - [Referências, referências, referências](introducao_ao_web_design/referencias.md)
+- [Introdução ao Front-End](introducao_ao_front_end/)
+    - [O que é o Front-End?](introducao_ao_front_end/o_front_end.md)
+    - HTML
+        - [Hipertext Markup Language](introducao_ao_front_end/hipertext_markup_language.md)
+        - [Sintaxe e semântica](introducao_ao_front_end/sintaxe_e_semantica.md)
+        - [Estrutura Básica](introducao_ao_front_end/estrutura_basica_de_uma_pagina_html.md)
+        - [Elementos textuais](introducao_ao_front_end/principais_tags.md)
+        - Elementos estruturais
+            - [Containers](introducao_ao_front_end/containers.md)
+            - [Div e Span](introducao_ao_front_end/div_e_span.md)
+    - [Pratique!](introducao_ao_front_end/pratique.md)
+    - CSS
+        - [Seletores](introducao_ao_front_end/seletores.md)
+        - [Estilizando o Conteúdo com CSS](introducao_ao_front_end/estilizando_o_conteudo_com_css.md)
+        - [Propriedades de Estilo](introducao_ao_front_end/propriedades_de_estilo.md)
+        - [Posicionando elementos com CSS](introducao_ao_front_end/posicionando_elementos_com_css.md)
+        - [Inserindo CSS](introducao_ao_front_end/inserindo_css.md)

introducao_a_internet/README.md

@@ -0,0 +1,19 @@
+# Introdução a Internet
+
+**O que é a Internet, a Web, o DNS e os tipos de conteúdo.**
+
+Vamos esclarecer as diferenças entre cada um desses conceitos.
+
+## Sumário
+
+- [O que é a internet e como ela funciona?](a_internet_e_seu_funcionamento.md)
+- [Qual a diferença entre internet e web?](internet_e_web.md)
+- [De onde vem as informações dos sites?](origem_das_informacoes.md)
+- [Arquitetura Cliente-Servidor](arquitetura-cliente-servidor.md)
+
+---
+
+#### Quer aprender mais?
+
+- Leia este pequeno ebook [20 lições que aprendi sobre navegadores e a web](http://www.20thingsilearned.com/pt-BR)
+- [What's my DNS?](https://www.whatsmydns.net/) - Entenda visualmente como funcionam os servidores de DNS descobrindo onde são guardados os endereços dos sites no mundo inteiro os IPs dos servidores de cada site

introducao_a_internet/a_internet_e_seu_funcionamento.md

@@ -0,0 +1,7 @@
+## O que é a internet e como ela funciona?
+
+A internet é uma rede global de computadores interligados que utilizam uma série de regras de comunicação para trocarem informações entre si. Ela surgiu em 1974, quando alguns pesquisadores criarem o **Internet Protocol Suite** ou **TCP/IP**, que um protocolo de comunicação entre computadores.
+
+Com esse protocolo, cada computador possui um endereço único que servirá para que outros computadores o localizem. Esse endereço, chamado de **IP**, é o ponto fundamental para conectar um dispositivo à internet. O IP também é utilizado em redes locais, como por exemplo quando você tem um roteador em casa: esse dispositivo tem um IP próprio com o qual ele se conecta à internet e o seu computador tem um outro IP com o qual ele se conecta ao roteador.
+
+Para trocar informações, todos esses dispositivos utilizam uma série de protocolos que nada mais são do que **regras de comunicação**. Um dos protocolos mais comuns é o TCP, considerado uma das bases da internet sendo que várias regras de comunicação dentro desse contexto baseiam-se nele.

arquitetura_clienteservidor/README.md → introducao_a_internet/arquitetura-cliente-servidor.md

@@ -12,6 +12,9 @@ Bem, nessa arquitetura, cliente é o terminal de acesso e servidor é o computad
 
 Um servidor pode atuar de diversas formas, sendo que seu funcionamento básico é o envio de informações pedidas em um dado terminal que está conectado a ele, localmente ou não. Um servidor pode receber diversos parâmetros enviados pelo cliente por ações do usuário e a resposta que o servidor retornará ao cliente será baseada no processamento dessas informações.
 
-##Saiba mais!
+---
+
+#### Quer aprender mais?
+
 - [Onde mora a internet](http://www.google.com/about/datacenters/gallery/#/) é uma página do próprio Google que expõe fotos de seus gigantescos Data Centers, ou seja, servidores, permitindo visualizar como é por dentro aquilo que denomina-se Internet física.
 - [Como funciona a internet?](http://docs.escolamupi.com.br/internet-infografico) - Pequeno infográfico que demonstra todo o ciclo por trás de quando você digita um endereço até quando as informações chegam até o seu navegador

introducao_a_internet/internet_e_web.md

@@ -0,0 +1,3 @@
+## Qual a diferença entre internet e web?
+
+A internet é a rede de computadores, a Web que é um sistema de documentos interligados que acessamos na internet através de um **navegador**, é o famoso www (World Wide Web). Ao utilizar um navegador, você está, na prática, fazendo uma série de pedidos de informação para servidores na internet. Esses pedidos são feitos utilizando regras específicas que permitem que os servidores e seu navegador troquem informações. Logo, quando colocamos um endereço na barra do navegador, como por exemplo http://gitbook.io, ele gera um pequeno **pacote** com informações e envia para a internet. Este arquivo é utilizado para encontrar o servidor (dependendo do porte do site, podem ser vários servidores!) onde se encontram os arquivos do gitbook que então envia para seu computador, de usuário, as informações pedidas e que são exibidas pelo seu navegador.

introducao_a_internet/origem_das_informacoes.md

@@ -0,0 +1,5 @@
+## De onde vem as informações dos sites?
+
+Enviar arquivos para a internet quer dizer que estes arquivos estão sendo disponibilizados na rede através da placa de rede do seu computador. Ela envia o dado que é capturado pelo seu provedor de internet, que em seguida envia para servidores que contêm um sistema chamado **DNS** (Sistema de Nomes de Domínios), que, por sua vez, descobrem o servidor que contém as informações e arquivos do site que você está buscando. Estes tais servidores DNS são computadores que possuem o endereçamento de vários outros servidores e ajudam a mapear as informações da rede.
+
+Ao receber todas as informações do servidor, seu navegador realiza sua leitura e as exibe em formato de página web. Essas informações vêm em vários formatos, como texto, imagem e vídeos. A informação textual divide-se em duas partes: uma que descreve como a página web deve se apresentar e se comportar e outra que contém o conteúdo a ser exibido.

introducao_ao_front_end/README.md

@@ -0,0 +1,22 @@
+# Introdução ao Front-End
+
+Nesta seção, você entrará em contato com os conceitos básicos do desenvolvimento Front-End, assim como as habilidades e ferramentas necessárias para iniciar a criação de um website.
+
+## Sumário
+
+- [O que é o Front-End?]()
+- HTML
+    - [Hipertext Markup Language](hipertext_markup_language.md)
+    - [Sintaxe e semântica](sintaxe_e_semantica.md)
+    - [Estrutura Básica](estrutura_basica_de_uma_pagina_html.md)
+    - [Elementos textuais](principais_tags.md)
+    - Elementos estruturais
+        - [Containers](containers.md)
+        - [Div e Span](div_e_span.md)
+- [Pratique!](pratique.md)
+- CSS
+    - [Seletores](seletores.md)
+    - [Estilizando o Conteúdo com CSS](estilizando_o_conteudo_com_css.md)
+    - [Propriedades de Estilo](propriedades_de_estilo.md)
+    - [Posicionando elementos com CSS](posicionando_elementos_com_css.md)
+    - [Inserindo CSS](inserindo_css.md)

introducao_ao_front_end/o_front_end.md

@@ -0,0 +1 @@
+# O que vem a ser front-end?

criacao_de_websites_com_html_e_css/propriedades_de_estilo.md → introducao_ao_front_end/propriedades_de_estilo.md

@@ -1,25 +1,27 @@
-# Propriedades tipográficas
+# Propriedades de Estilo
 
-## Cor de texto: `color`
+## Propriedades tipográficas
+
+### Cor de texto: `color`
 Recebe valores em RGB, RGBa, hexadecimal ou nome da cor em inglês. Entenda como funcionam as cores na web [neste artigo](http://docs.escolamupi.com.br/conteudos/design-cores).
 
-## Família de fonte: `font-family`
+### Família de fonte: `font-family`
 
 Esta propriedade indica qual será a fonte do texto e quais serão as fontes de reserva caso a desejada não seja carregada pelo navegador. A sintaxe utilizada para este caso deve ser conforme o exemplo a seguir, que declara fontes para o elemento p:
 
     p {font-family: 'Georgia', 'Courier New', serif;}
 
 A declaração acima significa que todo elemento `p`, ou seja, todos os parágrafos da página serão exibidos com a fonte de nome "Georgia". Caso o navegador não encontre esta fonte ou tenha problemas para exibi-la, ele utilizará a fonte de nome "Courier New" para a exibição dos parágrafos. E, por fim, caso esta também não funcione, ele utilizará a principal fonte com serifa do sistema que o usuário está usando.
 
-## Tamanho da fonte: `font-size`
+### Tamanho da fonte: `font-size`
 
 Com esta propriedade, conseguimos modificar o tamanho do texto numa página. Existem vários tipos de unidade de medida para se declarar o tamanho da fonte, como pixels, porcentagem e pontos. Em nossos exemplos, utilizaremos px que é a unidade de medida em pixels.
 
 No exemplo abaixo, declaramos que todo parágrafo (ou seja, texto contido dentre as tags <p></p>) da página HTML terá seu texto exibido com tamanho de 14 pixels:
 
     p {font-size: 14px;}
 
-## Estilo de fonte: `font-style`
+### Estilo de fonte: `font-style`
 
 A propriedade font-style tem três possibilidades de valor a ser atribuído: `normal` (padrão), `italic` (traduzindo, itálico) e `oblique` (traduzindo, oblíquo).
 
@@ -30,7 +32,7 @@ O exemplo abaixo mostra como declarar esta propriedade a um elemento HTML, no ca
     p {font-style: italic;}
 
 
-## Peso da fonte: `font-weight`
+### Peso da fonte: `font-weight`
 
 Para dar destaque a algum conteúdo, é comum deixarmos o texto em negrito. Para este caso, podemos dizer que aumentamos o "peso" da fonte. É desse contexto que vem o nome da propriedade, em que a palavra inglesa weight, quando traduzida para o português, significa peso. Para ela, podemos atribuir cinco valores: `normal`, `bold` (negrito), `bolder` (um valor mais pesado que o negrito), `lighter` (que traduzido temos "mais leve", ou seja, que deixa a fonte mais "fina") e `inherit` (que traduzido temos "herdado", ou seja, ele recebe o valor que foi atribuído a elementos que o contém).
 
@@ -40,7 +42,7 @@ Observe o exemplo abaixo:
 
     p {font-weight: bold;}
 
-## Altura da linha: `line-height`
+### Altura da linha: `line-height`
 
 A propriedade `line-height` refere-se à distância entre duas linhas de um texto, ou seja, controla o espaçamento das linhas. Os valores que podem ser atribuídos são similares aos possíveis no `font-size` e as medidas mais utilizadas são pixel, porcentagem ou valores numéricos.
 
@@ -50,7 +52,7 @@ Porcentagem, numeral e `em` são valores dinâmicos que se baseiam no tamanho da
 
     p {line-height: 2;}
 
-## A propriedade `font`
+### A propriedade `font`
 
 Diferentemente da propriedade `color` que recebe apenas um valor, a propriedade `font` é uma forma resumida ou a forma curta de aplicar todas as propriedades acima de uma só vez. Para isso, deve-se escrever os valores desejados na seguinte ordem: `font-style`, `font-variant`, `font-weight`, `font-size`, `line-height` e `font-family`, conforme o exemplo a seguir:
 

introducao_ao_web_design/README.md

@@ -0,0 +1,16 @@
+# Introdução ao Web design
+
+Entenda a essência do Design na Web, assim como as suas responsabilidades.
+
+## Sumário
+- [O Web Design](web_design.md)
+- [Pré-produção](pre-producao.md)
+- [Wireframes](wireframes.md)
+- [Mockups](mockups.md)
+- [Prototipos](prototipos.md)
+- [Ferramentas Úteis](ferramentas_uteis.md)
+- [Referências, referências, referências](referencias.md)
+
+---
+
+#### Quer aprender mais?

criando_sites_com_html_e_css/prototipos.md → introducao_ao_web_design/prototipos.md

@@ -1,4 +1,4 @@
-#Protótipos
+# Protótipos
 
 Protótipo é uma representação de média/alta fidelidade do produto final que simula a interação com o usuário. Ele deve permitir que o usuário tenha experiência de conteúdo e interação com a interface e consiga testar as principais interações que deverão conter no produto final.
 

criando_sites_com_html_e_css/referencias,_referencias,_referencias.md → introducao_ao_web_design/referencias.md

@@ -1,4 +1,4 @@
-#Referências, referências, referências
+# Referências, referências, referências
 
 Durante a criação de trabalhos e projetos, coletar o máximo de referências possíveis para inspirar-se é algo que facilita muito. Busque tudo o que achar pertinente, explorando diferentes formatos de mídia: procure imagens, vídeos, músicas, entre muitos outros. Para web, existem vários sites e ferramentas que facilitam esse trabalho.