oficina de tecnologia - webdesign
DESCRIPTION
Oficina realizada nos dias 07 e 08 de dezembro, no GibiAnimeFestTRANSCRIPT
![Page 1: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/1.jpg)
OFICINA DE TECNOLOGIA
WEBDESIGN
![Page 2: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/2.jpg)
- 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
![Page 3: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/3.jpg)
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
![Page 4: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/4.jpg)
CONCEITOS MÁGICOS
Só coisa chata, pode dormi
![Page 5: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/5.jpg)
WEB – WWW DESIGN – PROJETISTA WEB-DESIGN – PROJETISTA DE WWW
O QUE É WEBDESIGN?
![Page 6: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/6.jpg)
“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?
![Page 7: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/7.jpg)
- Informações institucionais; - Forma de contato com a pessoa por trás disso; - Conteúdo simples;
O QUE É UM SITE?
![Page 8: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/8.jpg)
O QUE É UM SITE?
![Page 9: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/9.jpg)
- 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?
![Page 10: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/10.jpg)
O QUE É UM SITE?
![Page 11: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/11.jpg)
- Tem muito texto. Sério, muito; - Tem instruções; - Tem temática;
O QUE É UM BLOG?
![Page 12: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/12.jpg)
O QUE É UM SITE?
![Page 13: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/13.jpg)
- Tem informações institucionais; - Fotos de famosos; - Fotos de acidentes;
O QUE É UM PORTAL?
![Page 14: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/14.jpg)
![Page 15: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/15.jpg)
![Page 16: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/16.jpg)
PROCESSOS WEB
Agora é meio importante, não dorme pfv
![Page 17: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/17.jpg)
- 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
![Page 18: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/18.jpg)
![Page 19: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/19.jpg)
- Tudo que é bonito;
- Tudo que te auxilia a selecionar opções; - Tudo que eu faço ;)
PONTO 2 - INTERFACE
![Page 20: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/20.jpg)
![Page 21: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/21.jpg)
USABILIDADE
![Page 22: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/22.jpg)
FRONT-END ( ou Jedi )
![Page 23: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/23.jpg)
- Estruturação; - Linguagem básica, comum em todos os sites;
HTML
![Page 24: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/24.jpg)
![Page 25: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/25.jpg)
- Folha de Estilo; - Define como serão exibida as informações HTML em seu site;
CSS
![Page 26: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/26.jpg)
![Page 27: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/27.jpg)
- É Java, só que bonito; - biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML;
JQuery
![Page 28: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/28.jpg)
![Page 29: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/29.jpg)
Softwares
![Page 30: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/30.jpg)
- Photoshop; - Fireworks; - Muse;
Construção Visual
![Page 31: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/31.jpg)
- Dreamweaver; - Sublime Text 2; - Notepad; - Notepad ++;
Front-End e Back End
![Page 32: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/32.jpg)
![Page 33: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/33.jpg)
- Crodmsdi ( Você quis dizer: chrome ); - Firefox ; - Internet Explorer; - Opera;
Navegadores
![Page 34: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/34.jpg)
CONCEPÇÃO
![Page 35: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/35.jpg)
- Escolha adequada ao mercado; - Não escolha cores assim ; - Existem teoria por trás das cores;
Cores
![Page 36: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/36.jpg)
Cores
![Page 37: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/37.jpg)
- Escolha adequada ao mercado; - Não escolha fontes fantasia; - Google Fonts;
Fontes
![Page 38: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/38.jpg)
- Imagens; - Texto; RESPIRO
Composição
![Page 39: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/39.jpg)
- Cores; - Fonte; - Composição;
TUDO JUNTOS
![Page 40: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/40.jpg)
MONTANDO UM SITE
![Page 41: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/41.jpg)
- Servidores; - Domínios;
Começando...
![Page 42: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/42.jpg)
- Arquitetura; - Estudo de mercado;
Adiante...
![Page 43: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/43.jpg)
- Design; - Front-end e back end;
Quase lá...
![Page 44: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/44.jpg)
- Debug e outras informações;
CAIU NA NET
![Page 45: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/45.jpg)
QUERO COMEÇAR!
Então vamlá
![Page 46: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/46.jpg)
- Wix; - Wordpress; - Tumblr; - Blogger;
Ferramentas Gratuitas
![Page 47: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/47.jpg)
TEM MAIS COISA?
Vish tem
![Page 48: Oficina de Tecnologia - Webdesign](https://reader034.vdocuments.com.br/reader034/viewer/2022042614/5579a1cad8b42ac1148b484f/html5/thumbnails/48.jpg)
- Adsense; - Analytics; - Adwords;