Introdução á disciplina de Webdesign - turma 1 Sem 2015
63
<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.
-
Upload
claudia-bordin-rodrigues -
Category
Education
-
view
658 -
download
4
Transcript of Introdução á disciplina de Webdesign - turma 1 Sem 2015
<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
