Introdução á disciplina de Webdesign - turma 1 Sem 2015

2.265 visualizações

Publicada em

Material de apoio a disciplina de webdesign, UTFPR, Curitiba. DesignGráfico.

Publicada em: Educação
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.265
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1.658
Ações
Compartilhamentos
0
Downloads
18
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Introdução á disciplina de Webdesign - turma 1 Sem 2015

  1. 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. 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. 3. “a experiência de comprar um livro na net” sequência de decisões feitas pelo usuário, orientadas por um ‘caminho’
  4. 4. Superfície O que eu vejo: fotografias, ícones, textos.
  5. 5. Esqueleto/Estrutura Grids O que dá ordem visual para os elementos da superfície: posicionamento, agrupamento, alinhamento.
  6. 6. Estrutura O que dá ordem conceitual/cognitiva aos elementos da interface: configura as ‘intenções’ do conteúdo e da navegação.
  7. 7. Escopo/funcionalidade O que define as funções de um website - o que o usuário pode fazer neste website?
  8. 8. Estratégia O que define as intenções do website - o que eu espero que o usuário faça?
  9. 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. 10. na metodologiaJ.J.Garrett
  11. 11. 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.
  12. 12. Então, você quer saber mais sobre webdesign...
  13. 13. 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.
  14. 14. 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.
  15. 15. 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
  16. 16. 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
  17. 17. O original não está disponível: Ver backup e post comentado em http://ansonalex.com/technology/the-world-map-of-internet-connections/
  18. 18. http://docs.escolamupi.com.br/conteudos/internet-infografico
  19. 19. http://docs.escolamupi.com.br/conteudos/internet-infografico
  20. 20. http://docs.escolamupi.com.br/conteudos/internet-infografico
  21. 21. http://docs.escolamupi.com.br/conteudos/internet-infografico
  22. 22. de quem é? WhO OWS THE WEB www.landingnet.co.uk
  23. 23. é de todos/é de ninguém... Será? MeioBit
  24. 24. www Tim Berners-Lee, 1992 ProtocoloHTTP (hyper text transfer protocol) Documentos HTML via browser
  25. 25. 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)
  26. 26. no navegador/browser... interpretação dos dados CÓDIGO (html, css, scripts) + requisições de dados OBJETOS, DADOS DE BANCO, et.c..
  27. 27. Bluefish, TextWrangler, Dreammweaver editores
  28. 28. É 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
  29. 29. 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,...
  30. 30. FileZilla, Dreamweaver ftp
  31. 31. É mesmo?
  32. 32. bora codificar!Código é design! Código é lindo!
  33. 33. html
  34. 34. css
  35. 35. #CC6600 hexadecimal
  36. 36. font font-family font-face [api] tipografia
  37. 37. div span [inline, menores, reuso] html 5: article, nav, footer, header, fig, figcaption... blocos
  38. 38. webutfpr.tumblr.com material de aula

×