Oficina de webdesign
-
Upload
barbra-eliza -
Category
Documents
-
view
211 -
download
0
description
Transcript of Oficina de webdesign
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 – WWWDESIGN – PROJETISTA WEB-DESIGN – PROJETISTA DE WWW
EXEMPLO DE WEB-DESIGNER: EUZINHA
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 e pedir o produto vendido pra sua mãe;
O QUE É UM E-COMMERCE?
O QUE É UM SITE?
- Tem muito texto. Sério, muito; - Tem instruções; - Tem temática; - As vezes faz você chorar;
O QUE É UM BLOG?
O QUE É UM SITE?
- Tem informações institucionais; - Fotos de famosos; - Fotos de acidentes; - Textos sobre a Barbara Evans; - Tem uma sessão de comentários engraçada;
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
TAREFINHA 1
- Construir a arquitetura de um site a partir do slide a seguir- Formem duplas maravilhosas para tal
TAREFINHA 1
- Tudo que é bonito; - Tudo que te auxilia a selecionar opções; - Tudo que eu faço ;)
PONTO 2 - INTERFACE
USABILIDADE
FRONT-END ( ou Jedi )
Eu queria tirar essa parte, mas falaram que é importante, então
fazer o que né?
- Estruturação; - Linguagem básica, comum em todos os sites;
HTML
~ AMIGO, PASSA SEU E-MAIL PRA EU TE ENVIAR UMAS PARADA EM HTML ~
HTML
- Folha de Estilo; - Define como serão exibida as informações HTML em seu site;
CSS
~ AMIGO, PASSA SEU E-MAIL PRA EU TE ENVIAR UMAS PARADA EM HTML ~
CSS
- É Java, só que bonito; - biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML;
JQuery
~ AMIGO, PASSA SEU E-MAIL PRA EU TE ENVIAR UMAS PARADA EM HTML ~
JQuery
Softwares
Eu gosto de softwares, sério, eles são funcionais e não reclamam.
- 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; - Tem outros, não me importo.
Navegadores
CONCEPÇÃO
Agora vem a parte útil porque é a parte que eu vim oficinar
- Escolha adequada ao mercado;- Não escolha cores assim ;- Existem teoria por trás das cores;
Vou recomendar dois sites por e-mail
Cores
Cores
- Escolha adequada ao mercado;- Não escolha fontes fantasia;- Google Fonts;
Fontes
- Imagens;- Texto;- Vida
RESPIRO
Composição
- Cores;- Fonte;- Composição;
TUDO JUNTOS
MONTANDO UM SITE
Virus.exe
- 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;