diff --git a/README.md b/README.md index dc758f8..4dbfd63 100644 --- a/README.md +++ b/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) diff --git a/SUMMARY.md b/SUMMARY.md deleted file mode 100644 index 83d8f2c..0000000 --- a/SUMMARY.md +++ /dev/null @@ -1,27 +0,0 @@ -# Summary - -* [Introdução a como funciona a internet](introducao_a_como_funciona_a_internet/README.md) -* [Arquitetura cliente/servidor](arquitetura_clienteservidor/README.md) -* [Introdução ao design](criando_sites_com_html_e_css/README.md) - * [O Web Design](criando_sites_com_html_e_css/o_que_e_design.md) - * [Referências, referências, referências](criando_sites_com_html_e_css/referencias,_referencias,_referencias.md) - * [A pré-produção](criando_sites_com_html_e_css/a_pre-producao.md) - * [Wireframes](criando_sites_com_html_e_css/wireframes.md) - * [Mockups](criando_sites_com_html_e_css/mockups.md) - * [Protótipos](criando_sites_com_html_e_css/prototipos.md) - * [Ferramentas úteis](criando_sites_com_html_e_css/ferramentas_uteis.md) -* [Criação de websites com HTML e CSS](criacao_de_websites_com_html_e_css/README.md) - * [Hipertext Markup Language](criacao_de_websites_com_html_e_css/hipertext_markup_language.md) - * [Sintaxe e semântica](criacao_de_websites_com_html_e_css/sintaxe_e_semantica.md) - * [Estrutura básica de uma página HTML](criacao_de_websites_com_html_e_css/estrutura_basica_de_uma_pagina_html.md) - * [Elementos textuais](criacao_de_websites_com_html_e_css/principais_tags.md) - * [Elementos estruturais](criacao_de_websites_com_html_e_css/elementos_estruturais.md) - * [Div e span](criacao_de_websites_com_html_e_css/div_e_span.md) - * [Containers](criacao_de_websites_com_html_e_css/containers.md) - * [Pratique!](criacao_de_websites_com_html_e_css/pratique.md) - * [Estilizando o conteúdo com CSS](criacao_de_websites_com_html_e_css/estilizando_o_conteudo_com_css.md) - * [Inserindo CSS](criacao_de_websites_com_html_e_css/inserindo_css.md) - * [Seletores](criacao_de_websites_com_html_e_css/seletores.md) - * [Propriedades tipográficas](criacao_de_websites_com_html_e_css/propriedades_de_estilo.md) - * [Posicionando elementos com CSS](criacao_de_websites_com_html_e_css/posicionando_elementos_com_css.md) - diff --git a/criacao_de_websites_com_html_e_css/README.md b/criacao_de_websites_com_html_e_css/README.md deleted file mode 100644 index 95823f0..0000000 --- a/criacao_de_websites_com_html_e_css/README.md +++ /dev/null @@ -1,4 +0,0 @@ -# Criação de websites com HTML e CSS - -Depois de todo esse apanhado teórico, vamos à prática! -Como explicamos no capítulo 1, os sites são na verdade um conjunto de arquivos, scripts, diff --git a/criacao_de_websites_com_html_e_css/elementos_estruturais.md b/criacao_de_websites_com_html_e_css/elementos_estruturais.md deleted file mode 100644 index a23978e..0000000 --- a/criacao_de_websites_com_html_e_css/elementos_estruturais.md +++ /dev/null @@ -1 +0,0 @@ -# Elementos estruturais diff --git a/criando_sites_com_html_e_css/README.md b/criando_sites_com_html_e_css/README.md deleted file mode 100644 index 9193702..0000000 --- a/criando_sites_com_html_e_css/README.md +++ /dev/null @@ -1,11 +0,0 @@ -# Introdução ao design - -##O que é design? - ->Design é um método para solucionar um problema, seja ele físico ou visual. - -Design é todo o processo de **resolução de problemas** que vai desde a sua descoberta à implementação da solução. Todo design tem que ser bem estruturado e pensado como um todo, de modo que nada deva ser arbitrário. - -**Design é diferente de arte**. É possível enxergar o design como “deixar algo bonito” porque isso, muitas vezes, é consequência de um produto de design bem executado. Mas a principal diferença entre design e arte é que **o design tem um objetivo prático** desde a sua concepção. Uma obra de arte não precisa ser útil, um produto de design, sim, afinal ele nasceu para solucionar ou aprimorar algo. De todo modo, isso não quer dizer que design não envolva preocupações estéticas, uma vez que ele também interfere em como o usuário lida com o produto. - -Saiba mais: conheça o método de [design thinking](http://docs.escolamupi.com.br/design-thinking) para utilizar nos seus projetos. diff --git a/introducao_a_como_funciona_a_internet/README.md b/introducao_a_como_funciona_a_internet/README.md deleted file mode 100644 index 6d16b12..0000000 --- a/introducao_a_como_funciona_a_internet/README.md +++ /dev/null @@ -1,29 +0,0 @@ -# Introdução sobre como funciona 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. - -### 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. - -### 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. - -### 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. - ---- -#### 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 diff --git a/introducao_a_internet/README.md b/introducao_a_internet/README.md new file mode 100644 index 0000000..c935ec6 --- /dev/null +++ b/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 diff --git a/introducao_a_internet/a_internet_e_seu_funcionamento.md b/introducao_a_internet/a_internet_e_seu_funcionamento.md new file mode 100644 index 0000000..7ec6d93 --- /dev/null +++ b/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. diff --git a/arquitetura_clienteservidor/README.md b/introducao_a_internet/arquitetura-cliente-servidor.md similarity index 98% rename from arquitetura_clienteservidor/README.md rename to introducao_a_internet/arquitetura-cliente-servidor.md index aef176d..c4f3679 100644 --- a/arquitetura_clienteservidor/README.md +++ b/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 diff --git a/introducao_a_internet/internet_e_web.md b/introducao_a_internet/internet_e_web.md new file mode 100644 index 0000000..f5389e8 --- /dev/null +++ b/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. diff --git a/introducao_a_internet/origem_das_informacoes.md b/introducao_a_internet/origem_das_informacoes.md new file mode 100644 index 0000000..7dee752 --- /dev/null +++ b/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. diff --git a/introducao_ao_front_end/README.md b/introducao_ao_front_end/README.md new file mode 100644 index 0000000..dbdcac4 --- /dev/null +++ b/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) diff --git a/criacao_de_websites_com_html_e_css/containers.md b/introducao_ao_front_end/containers.md similarity index 100% rename from criacao_de_websites_com_html_e_css/containers.md rename to introducao_ao_front_end/containers.md diff --git a/criacao_de_websites_com_html_e_css/div_e_span.md b/introducao_ao_front_end/div_e_span.md similarity index 100% rename from criacao_de_websites_com_html_e_css/div_e_span.md rename to introducao_ao_front_end/div_e_span.md diff --git a/criacao_de_websites_com_html_e_css/estilizando_o_conteudo_com_css.md b/introducao_ao_front_end/estilizando_o_conteudo_com_css.md similarity index 100% rename from criacao_de_websites_com_html_e_css/estilizando_o_conteudo_com_css.md rename to introducao_ao_front_end/estilizando_o_conteudo_com_css.md diff --git a/criacao_de_websites_com_html_e_css/estrutura_basica_de_uma_pagina_html.md b/introducao_ao_front_end/estrutura_basica_de_uma_pagina_html.md similarity index 100% rename from criacao_de_websites_com_html_e_css/estrutura_basica_de_uma_pagina_html.md rename to introducao_ao_front_end/estrutura_basica_de_uma_pagina_html.md diff --git a/criacao_de_websites_com_html_e_css/hipertext_markup_language.md b/introducao_ao_front_end/hipertext_markup_language.md similarity index 100% rename from criacao_de_websites_com_html_e_css/hipertext_markup_language.md rename to introducao_ao_front_end/hipertext_markup_language.md diff --git a/criacao_de_websites_com_html_e_css/inserindo_css.md b/introducao_ao_front_end/inserindo_css.md similarity index 100% rename from criacao_de_websites_com_html_e_css/inserindo_css.md rename to introducao_ao_front_end/inserindo_css.md diff --git a/introducao_ao_front_end/o_front_end.md b/introducao_ao_front_end/o_front_end.md new file mode 100644 index 0000000..22635c9 --- /dev/null +++ b/introducao_ao_front_end/o_front_end.md @@ -0,0 +1 @@ +# O que vem a ser front-end? diff --git a/criacao_de_websites_com_html_e_css/posicionando_elementos_com_css.md b/introducao_ao_front_end/posicionando_elementos_com_css.md similarity index 100% rename from criacao_de_websites_com_html_e_css/posicionando_elementos_com_css.md rename to introducao_ao_front_end/posicionando_elementos_com_css.md diff --git a/criacao_de_websites_com_html_e_css/pratique.md b/introducao_ao_front_end/pratique.md similarity index 100% rename from criacao_de_websites_com_html_e_css/pratique.md rename to introducao_ao_front_end/pratique.md diff --git a/criacao_de_websites_com_html_e_css/principais_tags.md b/introducao_ao_front_end/principais_tags.md similarity index 100% rename from criacao_de_websites_com_html_e_css/principais_tags.md rename to introducao_ao_front_end/principais_tags.md diff --git a/criacao_de_websites_com_html_e_css/propriedades_de_estilo.md b/introducao_ao_front_end/propriedades_de_estilo.md similarity index 94% rename from criacao_de_websites_com_html_e_css/propriedades_de_estilo.md rename to introducao_ao_front_end/propriedades_de_estilo.md index e5a923d..9873a22 100644 --- a/criacao_de_websites_com_html_e_css/propriedades_de_estilo.md +++ b/introducao_ao_front_end/propriedades_de_estilo.md @@ -1,9 +1,11 @@ -# 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: @@ -11,7 +13,7 @@ Esta propriedade indica qual será a fonte do texto e quais serão as fontes de 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. @@ -19,7 +21,7 @@ No exemplo abaixo, declaramos que todo parágrafo (ou seja, texto contido dentre 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: diff --git a/criacao_de_websites_com_html_e_css/seletores.md b/introducao_ao_front_end/seletores.md similarity index 100% rename from criacao_de_websites_com_html_e_css/seletores.md rename to introducao_ao_front_end/seletores.md diff --git a/criacao_de_websites_com_html_e_css/sintaxe_e_semantica.md b/introducao_ao_front_end/sintaxe_e_semantica.md similarity index 100% rename from criacao_de_websites_com_html_e_css/sintaxe_e_semantica.md rename to introducao_ao_front_end/sintaxe_e_semantica.md diff --git a/introducao_ao_web_design/README.md b/introducao_ao_web_design/README.md new file mode 100644 index 0000000..177dcd7 --- /dev/null +++ b/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? diff --git a/criando_sites_com_html_e_css/ferramentas_uteis.md b/introducao_ao_web_design/ferramentas_uteis.md similarity index 100% rename from criando_sites_com_html_e_css/ferramentas_uteis.md rename to introducao_ao_web_design/ferramentas_uteis.md diff --git a/criando_sites_com_html_e_css/mockups.md b/introducao_ao_web_design/mockups.md similarity index 100% rename from criando_sites_com_html_e_css/mockups.md rename to introducao_ao_web_design/mockups.md diff --git a/criando_sites_com_html_e_css/a_pre-producao.md b/introducao_ao_web_design/pre-producao.md similarity index 100% rename from criando_sites_com_html_e_css/a_pre-producao.md rename to introducao_ao_web_design/pre-producao.md diff --git a/criando_sites_com_html_e_css/prototipos.md b/introducao_ao_web_design/prototipos.md similarity index 97% rename from criando_sites_com_html_e_css/prototipos.md rename to introducao_ao_web_design/prototipos.md index 0422167..0eb0caf 100644 --- a/criando_sites_com_html_e_css/prototipos.md +++ b/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. diff --git a/criando_sites_com_html_e_css/referencias,_referencias,_referencias.md b/introducao_ao_web_design/referencias.md similarity index 96% rename from criando_sites_com_html_e_css/referencias,_referencias,_referencias.md rename to introducao_ao_web_design/referencias.md index 544a3e2..69e2a71 100644 --- a/criando_sites_com_html_e_css/referencias,_referencias,_referencias.md +++ b/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. diff --git a/criando_sites_com_html_e_css/o_que_e_design.md b/introducao_ao_web_design/web_design.md similarity index 97% rename from criando_sites_com_html_e_css/o_que_e_design.md rename to introducao_ao_web_design/web_design.md index d37a40d..7a7d83b 100644 --- a/criando_sites_com_html_e_css/o_que_e_design.md +++ b/introducao_ao_web_design/web_design.md @@ -1,4 +1,4 @@ -#O Web Design +# O Web Design Como o próprio nome indica, Web Design é o design específico pra web. @@ -9,11 +9,11 @@ Por ser um campo vasto, existem vários tipos de especialistas dentro do Web Des Existem algumas formas de pensar o trabalho de Web Design. A que vamos trabalhar aqui é o Design centrado no usuário. Deste modo, durante o processo de design, temos que levar em conta as necessidades, desejos e limitações do ser humano durante todas as etapas de realização do projeto. Termos do desenvolvimento web -##Back-End +## Back-End O acesso a sites utiliza a arquitetura cliente/servidor. A parte do projeto que é executada no servidor chama-se Back-End e utiliza linguagens de programação como PHP, Java e Ruby. -##Front-End +## Front-End Chamamos de desenvolvimento Front-End a criação do layout e a manipulação dos elementos visuais em um web site. Para esta parte do projeto, usamos as linguagens HTML, CSS e Javascript, sendo esse trabalho executado no navegador (cliente). diff --git a/criando_sites_com_html_e_css/wireframes.md b/introducao_ao_web_design/wireframes.md similarity index 100% rename from criando_sites_com_html_e_css/wireframes.md rename to introducao_ao_web_design/wireframes.md