unb 2012.1 - dweb - 02 - por onde começar
TRANSCRIPT
![Page 1: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/1.jpg)
DWEB – Design para Web
1 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
“Conserva o modelo das sãs palavras que de mim tens ouvido, na fé e no amor que há em Cristo Jesus.” 2 Timóteo 1:13
Curso Superior de Tecnologia em Design Gráfico
2 Por onde começar?
![Page 2: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/2.jpg)
DWEB – Design para Web / Carlos José
2 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Contato
Carlos José
[email protected] www.carlosjose.net
twitter.com/carlosjoser2n
![Page 3: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/3.jpg)
DWEB – Design para Web / Carlos José
3 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Objetivo da Aula
n Descrever a profissão de web design, bem como suas atribuições e realizações.
![Page 4: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/4.jpg)
DWEB – Design para Web / Carlos José
4 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Agenda
n Por onde começar? n O que preciso aprender? n Frontend vs Backend n As camadas n Uma visão de futuro para web n Diagramação na web
![Page 5: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/5.jpg)
DWEB – Design para Web / Carlos José
5 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Começando...
n Introdução î Desde que a web foi criada em meados de 1989
com suas motivações iniciais muita coisa mudou! î A web como meio de comunicação e veículo
comercial, veio para ficar, sendo assim: n Serve como oportunidade de carreira; n Um estimulo para acompanhar os concorrentes; n Apenas uma possibilidade de conseguir mostrar para
o mundo o que você faz.
![Page 6: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/6.jpg)
DWEB – Design para Web / Carlos José
6 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Começando...
n Por onde começo? î O primeiro passo é ter uma compreensão básica
de como a web funciona e seus documentos. n O que preciso aprender?
î O web design combina várias habilidades: n Design gráfico n Design de informação + Arquitetura da informação n Design de interface n (x)HTML + CSS n Programação n Multimídia
![Page 7: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/7.jpg)
DWEB – Design para Web / Carlos José
7 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Começando...
n Frontend Vs Backend î Frontend
n Refere-se a qualquer aspecto do processo de design relacionado diretamente ao navegador (browser).
n Tarefas do frontend: î Design gráfico î Design de interface î Design de informação î Utilização dos Web Standards para produção de websites
§ (x)HTML + CSS + Javascript (jQuery)
![Page 8: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/8.jpg)
DWEB – Design para Web / Carlos José
8 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Começando...
n Frontend Vs Backend Grandes empresas, como Yahoo!, Google, Twitter, Microsoft e Adobe, investem pesado em front-end
A falta de um profissional especializado nessa área pode representar risco ao projeto
O domínio de especialidades de front-end pela equipe é essencial para o sucesso de um produto na web
Edição 81 Novembro/Dezembro 2010
![Page 9: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/9.jpg)
DWEB – Design para Web / Carlos José
9 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Começando...
n Frontend Vs Backend î backend
n Refere-se aos programas e scripts que rodam no servidor web para tornar dos documentos web dinâmicos e interativos.
n Tarefas do frontend: î Design de informação relacionado a como a informação é
organizada no servidor web. î Processamento de formulários eletrônicos î Programação de banco de dados î Sistemas de gerenciamento de conteúdo î Programação web
§ PHP, ASP, JSP, Rubi on Rails, Java e etc.
![Page 10: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/10.jpg)
DWEB – Design para Web / Carlos José
10 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Começando...
n As camadas! î O web design contemporâneo é composto de
três camadas: n Camada de Estrutura
î O conteúdo do documento web com suas marcações (X)HTML.
î É a base sobre a qual as outras camadas serão assentadas n Camada de Apresentação
î Controlar a aparência visual formatando com CSS todo o conteúdo que deverá aparecer no navegador.
n Camada de Comportamento î Inclui os scripts jQuery de programação que tornam a
experiência do usuário interativa.
![Page 11: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/11.jpg)
DWEB – Design para Web / Carlos José
11 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Começando...
n Uma visão de futuro para a web
http://inspirationfeed.com/2011/01/20-inspiring-ted-videos-for-graphic-and-web-designers/
![Page 12: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/12.jpg)
DWEB – Design para Web / Carlos José
12 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Começando...
n Diagramação na web Cada recomendação gerada em wireframe foi pensada e tem uma razão de ser. Logo, deve ser respeitada pelo designer. Em qualquer tipo de interface, contraste, ritmo, harmonia e equilíbrio estão presentes na composição. Agregaram-se então a arquitetura de informação e a usabilidade como campos de estudo do que podemos chamar de “diagramação digital”.
Edição 71 Novembro 2009
![Page 13: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/13.jpg)
DWEB – Design para Web / Carlos José
13 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Começando...
n Diagramação na web: Grid System Grids não são uma moda passageira: foram criados antes dos tipos móveis. Parece que todos os designers interativos estão, pela primeira vez em suas carreiras, olhando para os impressos e para a teoria gráfica em busca de inspiração. As pessoas justificam um projeto ruim porque “não quebra o grid”, eles esquecem que feio é sempre feio. O grid é uma ajuda, não uma garantia.
Edição 125 Dezembro 2010
![Page 14: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/14.jpg)
DWEB – Design para Web / Carlos José
14 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Começando...
n Diagramação na web:– 960.gs
![Page 15: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/15.jpg)
DWEB – Design para Web / Carlos José
15 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Começando...
n Diagramação na web:– 960.gs
![Page 16: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/16.jpg)
DWEB – Design para Web / Carlos José
16 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Começando...
n Diagramação na web:– 960.gs
![Page 17: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/17.jpg)
DWEB – Design para Web / Carlos José
17 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Começando...
n Diagramação na web:– 960.gs
![Page 18: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/18.jpg)
DWEB – Design para Web / Carlos José
18 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Começando...
n Diagramação na web:– 960.gs
![Page 19: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/19.jpg)
DWEB – Design para Web / Carlos José
19 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Começando...
n Diagramação na web:– 960.gs
![Page 20: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/20.jpg)
DWEB – Design para Web / Carlos José
20 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Começando...
n Diagramação na web:– na prática!
![Page 21: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/21.jpg)
DWEB – Design para Web / Carlos José
21 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Começando...
n Diagramação na web:– na prática!
![Page 22: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/22.jpg)
DWEB – Design para Web / Carlos José
22 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Perguntas
?
![Page 23: Unb 2012.1 - dweb - 02 - por onde começar](https://reader034.vdocuments.pub/reader034/viewer/2022051516/559aead41a28ab6c4e8b47ec/html5/thumbnails/23.jpg)
DWEB – Design para Web / Carlos José
23 Sunday, 29 de January de 12 Capítulo 2 - Por onde começar?
Considerações Finais
Fonte: ROBBINS, Jennifer Niederst. Aprendendo Web Design – guia para iniciantes, 3ª Edição