OFICINA DE TECNOLOGIA

WEBDESIGN

- Meu nome é Barbra mesmo; - Trabalho com Web a 8 anos; - Faço Design e não sei desenhar; - Estou muito nervouser; - Preciso do email de vocês no final; - Não tenho didática para apresentações;

APRESENTAÇÃO

O que você possivelmente irá aprender: - Webdesign é amor; - Front-end é complicado; - Back-end nem se fala; - Respiro sempre é importante; - A série Batman de 1975 é fantástica;

OFICINA DE WEBDESIGN

CONCEITOS MÁGICOS

Só coisa chata, pode dormi

WEB – WWW DESIGN – PROJETISTA WEB-DESIGN – PROJETISTA DE WWW

O QUE É WEBDESIGN?

“O web design pode ser visto como uma extensão da prática

do design, onde o foco do projeto é a criação de web sites e

documentos disponíveis no ambiente da World Wide Web. O web design tende à multidisciplinaridade, uma vez que a construção de páginas web requer subsídios de diversas áreas técnicas, além do design propriamente dito. Áreas como a arquitetura da informação, programação, usabilidade, acessibilidade entre outros.”

O QUE É WEBDESIGN?

- Informações institucionais; - Forma de contato com a pessoa por trás disso; - Conteúdo simples;

O QUE É UM SITE?

O QUE É UM SITE?

- Tenta vender algum produto pra você; - Normalmente esse produto é classificado com preços; - As vezes, os preços são caros e fazem você se sentir pobre ;

O QUE É UM E-COMMERCE?

O QUE É UM SITE?

- Tem muito texto. Sério, muito; - Tem instruções; - Tem temática;

O QUE É UM BLOG?

O QUE É UM SITE?

- Tem informações institucionais; - Fotos de famosos; - Fotos de acidentes;

O QUE É UM PORTAL?

PROCESSOS WEB

Agora é meio importante, não dorme pfv

- Organização da informação para torná-la clara; - Projetar a estrutura, o esqueleto, de um website sobre o qual todas as demais partes irão se apoiar;

PONTO 1 - ARQUITETURA

- Tudo que é bonito;

- Tudo que te auxilia a selecionar opções; - Tudo que eu faço ;)

PONTO 2 - INTERFACE

USABILIDADE

FRONT-END ( ou Jedi )

- Estruturação; - Linguagem básica, comum em todos os sites;

HTML

- Folha de Estilo; - Define como serão exibida as informações HTML em seu site;

CSS

- É Java, só que bonito; - biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML;

JQuery

Softwares

- Photoshop; - Fireworks; - Muse;

Construção Visual

- Dreamweaver; - Sublime Text 2; - Notepad; - Notepad ++;

Front-End e Back End

- Crodmsdi ( Você quis dizer: chrome ); - Firefox ; - Internet Explorer; - Opera;

Navegadores

CONCEPÇÃO

- Escolha adequada ao mercado; - Não escolha cores assim ; - Existem teoria por trás das cores;

Cores

Cores

- Escolha adequada ao mercado; - Não escolha fontes fantasia; - Google Fonts;

Fontes

- Imagens; - Texto; RESPIRO

Composição

- Cores; - Fonte; - Composição;

TUDO JUNTOS

MONTANDO UM SITE

- Servidores; - Domínios;

Começando...

- Arquitetura; - Estudo de mercado;

Adiante...

- Design; - Front-end e back end;

Quase lá...

- Debug e outras informações;

CAIU NA NET

QUERO COMEÇAR!

Então vamlá

- Wix; - Wordpress; - Tumblr; - Blogger;

Ferramentas Gratuitas

TEM MAIS COISA?

Vish tem

- Adsense; - Analytics; - Adwords;

GOOGLE

VALEWS

barbrasp@gmail.com barbra@outlook.com