O documento discute conceitos fundamentais de design para web, incluindo a metodologia de J.J. Garrett para análise de experiência do usuário em sites. Ele também fornece instruções para um exercício no qual os alunos escolhem um site e analisam suas categorias usando a metodologia proposta. Por fim, aborda brevemente conceitos de literacia digital e codificação web.

1. <web>DESIGN</web>
UTFPR
DESIGN
GRÁFICO
interação, interface, estratégias no design para web
MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.

2. Exercício 01
Analisando a experiência
de um website
MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.
UTFPR
DESIGN
GRÁFICO
MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.

3. “a experiência de comprar um livro na net”
sequência de decisões feitas pelo usuário,
orientadas por um ‘caminho’

4. Superfície
O que eu vejo: fotografias, ícones, textos.

5. Esqueleto/Estrutura Grids
O que dá ordem visual para os elementos
da superfície: posicionamento,
agrupamento, alinhamento.

6. Estrutura
O que dá ordem conceitual/cognitiva aos
elementos da interface: configura as
‘intenções’ do conteúdo e da navegação.

7. Escopo/funcionalidade
O que define as funções de um website - o
que o usuário pode fazer neste website?

8. Estratégia
O que define as intenções do website - o
que eu espero que o usuário faça?

9. Exercício 01
MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.
Escolha um website:
- Institucional
- Comércio eletrônico
- Serviços
- Rede Social
- Sistema
- Editorial/blog
- Portal de Conteúdo
E analise as categorias
propostas por
J.J. Garrett
20 min
print
das telas
USE um PLUGIN
do Fire ou Chrome
Exemplo:
UPLOAD
SCREENSHOT

10. na metodologiaJ.J.Garrett

12. Um pouco sobre
Literacia
Digital
MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.
UTFPR
DESIGN
GRÁFICO
MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.

13. Então, você quer saber mais sobre webdesign...

14. Conjunto de habilidades
MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.
Envolve compreender, compartilhar e criar
sentido e significado com ferramentas digitais,
nos diversos meios.
Mas também....
Fazer isso de modo crítico e contextual,
buscando os meios estratégicos de
comunicação de uma ideia ou sentido.

19. Origens
Arpanet e a Guerra Fria
J.C.R. Licklider, 1962 MIT | Leonard Kleinrock 1961 | Ivan Sutherland, Bob Taylor, e Lawrence G. Roberts
“Pacotes” de dados
Telefonia base para transmissão
de dados
Conexões entre universidades
Thomas Merril, 1964.

20. Origens
Anos 80 - NSF e a fibra ótica
No Brasil
1991 RNP (Rede Nacional de Pesquisas) - Universidade e Setor Público
1995 provedores comerciais
National Science Foundation

21. mas afinal,
que raios é a Internet?
Projeto An Atlas of Cyberspace - finalizou em 2004
http://personalpages.manchester.ac.uk/staff/m.dodge/cybergeography/atlas/geographic.html

22. O original não está disponível:
Ver backup e post comentado em http://ansonalex.com/technology/the-world-map-of-internet-connections/

24. http://docs.escolamupi.com.br/conteudos/internet-infografico

25. http://docs.escolamupi.com.br/conteudos/internet-infografico

26. http://docs.escolamupi.com.br/conteudos/internet-infografico

27. http://docs.escolamupi.com.br/conteudos/internet-infografico

28. de quem é?
WhO OWS THE WEB
www.landingnet.co.uk

29. é de todos/é de ninguém...
Será?
MeioBit

30. www
Tim Berners-Lee, 1992
ProtocoloHTTP (hyper text transfer protocol)
Documentos HTML via browser

31. o que acontece quando...
http://www.utfpr.edu.br
PROTOCOLO DE
COMUNICAÇÃO ENDEREÇO - URL DOMÍNIO
vira um endereço IP
200.134.95.110 VIA DOMAIN NAME
SYSTEM (DNS)

32. no navegador/browser...
interpretação dos dados
CÓDIGO (html, css, scripts)
+
requisições de dados
OBJETOS, DADOS DE
BANCO, et.c..

39. Bluefish, TextWrangler, Dreammweaver
editores

41. É uma linguagem de programação que permite controlar o
comportamento (behaviors) da página no navegador (browser),
criando comunicação dinâmica para o website. Um código Javascript
pode estar dentro de um arquivo de extensão .html ou fora dele, com
extensão .js.
javascript
É uma biblioteca de acesso aberto de códigos javascripts, que se
tornaram populares desde sua criação em 2006. Serve, dentre outras
coisas, para organizar, diminuir código, dar segurança a interações de
baixo nível (servidor).
jqueries

42. São linguagens de suporte ao html utilizadas para a comunicação
com servidores de dados, e servem, dentre várias coisas, para
administrar a comunicação entre cliente-servidor gerando páginas
dinamicamente.
php, asp, asp., aspnet,...

44. FileZilla, Dreamweaver
ftp

49. É mesmo?

56. bora codificar!Código é design! Código é lindo!

57. html

58. css

60. #CC6600
hexadecimal

61. font
font-family
font-face [api]
tipografia

62. div
span [inline, menores, reuso]
html 5: article, nav, footer, header,
fig, figcaption...
blocos

63. webutfpr.tumblr.com
material de aula