<web>DESIGN</web>

UTFPRDESIGN

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.

Exercício 01Analisando a experiência de um website

MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.

UTFPRDESIGN

GRÁFICO

MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.

“a experiência de comprar um livro na net”

sequência de decisões feitas pelo usuário, orientadas por um ‘caminho’

Superfície

O que eu vejo: fotografias, ícones, textos.

Esqueleto/Estrutura Grids

O que dá ordem visual para os elementos da superfície: posicionamento, agrupamento, alinhamento.

Estrutura

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

Escopo/funcionalidade

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

Estratégia

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

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 porJ.J. Garrett

20 minprintdas telas

USE um PLUGIN do Fire ou ChromeExemplo:UPLOADSCREENSHOT

na metodologiaJ.J.Garrett

Um pouco sobreLiteraciaDigital

MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.

UTFPRDESIGN

GRÁFICO

MATERIAL DE APOIO da Profa. Claudia Bordin Rodrigues Se quiser usar, seja legal e cite a fonte.

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

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.

OrigensArpanet e a Guerra Fria J.C.R. Licklider, 1962 MIT | Leonard Kleinrock 1961 | Ivan Sutherland, Bob Taylor, e Lawrence G. Roberts

“Pacotes” de dadosTelefonia base para transmissão de dadosConexões entre universidades

Thomas Merril, 1964.

OrigensAnos 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

mas afinal,que raios é a Internet?

Projeto An Atlas of Cyberspace - finalizou em 2004http://personalpages.manchester.ac.uk/staff/m.dodge/cybergeography/atlas/geographic.html

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

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

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

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

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

de quem é?WhO OWS THE WEB

www.landingnet.co.uk

é de todos/é de ninguém...

Será?

MeioBit

www

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

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.110VIA DOMAIN NAME

SYSTEM (DNS)

no navegador/browser...

interpretação dos dadosCÓDIGO (html, css, scripts)+requisições de dadosOBJETOS, DADOS DE BANCO, et.c..

Bluefish, TextWrangler, Dreammweavereditores

É 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

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

FileZilla, Dreamweaverftp

É mesmo?

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

html

css

#CC6600hexadecimal

fontfont-familyfont-face [api]

tipografia

divspan [inline, menores, reuso]

html 5: article, nav, footer, header, fig, figcaption...

blocos

webutfpr.tumblr.commaterial de aula