Disciplina: Física Turma: Semi – Extensivo Professor: Fábio Raimundo.
Introdução á disciplina de Webdesign - turma 1 Sem 2015
-
Upload
claudia-bordin-rodrigues -
Category
Education
-
view
658 -
download
4
Transcript of Introdução á disciplina de Webdesign - turma 1 Sem 2015
![Page 1: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/1.jpg)
<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.
![Page 2: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/2.jpg)
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.
![Page 3: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/3.jpg)
“a experiência de comprar um livro na net”
sequência de decisões feitas pelo usuário, orientadas por um ‘caminho’
![Page 4: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/4.jpg)
Superfície
O que eu vejo: fotografias, ícones, textos.
![Page 5: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/5.jpg)
Esqueleto/Estrutura Grids
O que dá ordem visual para os elementos da superfície: posicionamento, agrupamento, alinhamento.
![Page 6: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/6.jpg)
Estrutura
O que dá ordem conceitual/cognitiva aos elementos da interface: configura as ‘intenções’ do conteúdo e da navegação.
![Page 7: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/7.jpg)
Escopo/funcionalidade
O que define as funções de um website - o que o usuário pode fazer neste website?
![Page 8: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/8.jpg)
Estratégia
O que define as intenções do website - o que eu espero que o usuário faça?
![Page 9: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/9.jpg)
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
![Page 10: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/10.jpg)
na metodologiaJ.J.Garrett
![Page 11: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/11.jpg)
![Page 12: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/12.jpg)
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.
![Page 13: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/13.jpg)
Então, você quer saber mais sobre webdesign...
![Page 14: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/14.jpg)
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.
![Page 15: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/15.jpg)
![Page 16: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/16.jpg)
![Page 17: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/17.jpg)
![Page 18: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/18.jpg)
![Page 19: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/19.jpg)
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.
![Page 20: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/20.jpg)
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
![Page 21: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/21.jpg)
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
![Page 22: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/22.jpg)
O original não está disponível:Ver backup e post comentado em http://ansonalex.com/technology/the-world-map-of-internet-connections/
![Page 23: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/23.jpg)
![Page 24: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/24.jpg)
http://docs.escolamupi.com.br/conteudos/internet-infografico
![Page 25: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/25.jpg)
http://docs.escolamupi.com.br/conteudos/internet-infografico
![Page 26: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/26.jpg)
http://docs.escolamupi.com.br/conteudos/internet-infografico
![Page 27: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/27.jpg)
http://docs.escolamupi.com.br/conteudos/internet-infografico
![Page 28: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/28.jpg)
de quem é?WhO OWS THE WEB
www.landingnet.co.uk
![Page 29: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/29.jpg)
é de todos/é de ninguém...
Será?
MeioBit
![Page 30: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/30.jpg)
www
Tim Berners-Lee, 1992Protocolo HTTP (hyper text transfer protocol) Documentos HTML via browser
![Page 31: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/31.jpg)
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)
![Page 32: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/32.jpg)
no navegador/browser...
interpretação dos dadosCÓDIGO (html, css, scripts)+requisições de dadosOBJETOS, DADOS DE BANCO, et.c..
![Page 33: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/33.jpg)
![Page 34: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/34.jpg)
![Page 35: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/35.jpg)
![Page 36: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/36.jpg)
![Page 37: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/37.jpg)
![Page 38: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/38.jpg)
![Page 39: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/39.jpg)
Bluefish, TextWrangler, Dreammweavereditores
![Page 40: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/40.jpg)
![Page 41: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/41.jpg)
É 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
![Page 42: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/42.jpg)
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,...
![Page 43: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/43.jpg)
![Page 44: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/44.jpg)
FileZilla, Dreamweaverftp
![Page 45: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/45.jpg)
![Page 46: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/46.jpg)
![Page 47: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/47.jpg)
![Page 48: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/48.jpg)
![Page 49: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/49.jpg)
É mesmo?
![Page 50: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/50.jpg)
![Page 51: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/51.jpg)
![Page 52: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/52.jpg)
![Page 53: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/53.jpg)
![Page 54: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/54.jpg)
![Page 55: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/55.jpg)
![Page 56: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/56.jpg)
bora codificar!Código é design! Código é lindo!
![Page 57: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/57.jpg)
html
![Page 58: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/58.jpg)
css
![Page 59: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/59.jpg)
![Page 60: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/60.jpg)
#CC6600hexadecimal
![Page 61: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/61.jpg)
fontfont-familyfont-face [api]
tipografia
![Page 62: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/62.jpg)
divspan [inline, menores, reuso]
html 5: article, nav, footer, header, fig, figcaption...
blocos
![Page 63: Introdução á disciplina de Webdesign - turma 1 Sem 2015](https://reader031.fdocument.pub/reader031/viewer/2022020218/55ac9b911a28abd1058b46a0/html5/thumbnails/63.jpg)
webutfpr.tumblr.commaterial de aula