Material de apoio a disciplina de Webdesign, curso de Tecnologia em Design Gráfico, UTFPR - Curitiba. Elaborado pela prof. Claudia Bordin Rodrigues. Uso didático-pedagógico.

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

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

3. Conjunto de habilidades
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.
MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.

8. 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
Thomas Merril, 1964.
Conexões entre universidades

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

10. 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

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

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

14. www
Tim Berners-Lee, 1992
Protocolo HTTP (hyper text transfer protocol)
Documentos HTML via browser

15. 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)

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

23. editores
Bluefish, TextWrangler, Dreammweaver

25. javascript
É 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.
jqueries
É 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).

26. php, asp, asp., aspnet,...
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.

28. ftp
FileZilla, Dreamweaver

33. É mesmo?

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

41. html

42. css

44. hexadecimal
#CC6600

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

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

47. material de aula
webutfpr.tumblr.com

48. seminários
Temas diversos
Em grupo
40 a 50 minutos
Equivale a uma dinâmica/
aula elaborada para uma
atividade com a turma
projeto
pesquisa
conceito
prototipação
testes com usuários
elaboração final (html/css)
implementação
relatório
tema: serviço, campanha,
institucional
go-to-action
1. Apresentar conceito
2. Criar dinâmica
3. Avaliar dinâmica
website social
gerenciais Entrega de etapas, acompanhamento do
projeto, documentação durante etapas