AULA+01+-+Ciência+da+Computação+I

Prévia do material em texto

CIÊNCIA DA COMPUTAÇÃO I
Prof. Milton Palmeira Santana
Programação Web
Um pouco de história
» A internet foi implementada pela primeira vez como conceito na 
segunda metade da década de 1960, pelas forças armadas dos 
EUA, que temiam ataques nucleares por parte dos Soviéticos 
durante a Guerra Fria e buscavam meios de comunicação que 
permitissem que a rede continuasse no ar mesmo que algumas de 
suas partes fossem destruídas.
» Tendo demonstrado que o conceito de comunicação 
descentralizada funcionava, e adotado muitos de seus princípios 
em suas redes particulares, os militares publicaram seus estudos, 
e despertaram o interesse das universidades norte-americanas, 
que rapidamente se interessaram por desenvolver os protocolos 
de comunicação nascentes para, assim, interligar seus 
computadores e centros de pesquisa.
Programação Web
Um pouco de história
» Já no início da década de 70, vários dos protocolos de acesso 
remoto e compartilhamento de arquivos da Internet estavam em 
pleno funcionamento: FTP (transferência de arquivos), Telnet 
(acesso a sistemas e recursos remotos, execução de programas, 
etc.) e SMTP (correio eletrônico) eram os principais deles.
» Durante mais de duas décadas — do início da década de 1970 até 
o início da década de 1990 — a Internet cresceu e floresceu como 
ferramenta de comunicação entre entidades de ensino e, mesmo, 
entre várias empresas do setor de tecnologia (a IBM e a Digital 
Corporation estavam na frente dessa fila).
Programação Web
Um pouco de história
» A partir de março de 1989 Tim Berners-Lee, cientista do CERN 
(Centre Européenne pour la Recherche Nucléaire, ou Centro 
Europeu de Pesquisas Nucleares) criou e, mais tarde, no mesmo 
ano, implementou a comunicação entre computadores utilizando 
um novo protocolo que previa a marcação e editoração de texto, 
inclusão de figuras, e ligação de elementos externos.
» O protocolo se chamava HTTP (Hypertext Transfer Protocol) e a 
linguagem de marcação era o HTML (Hypertext Mark-up 
Language). Era o nascimento da World Wide Web (Rede de 
Alcance Mundial) e o início da massificação da Internet.
Programação Web
Um pouco de história
» Em 06 de Agosto de 1991 surge o primeiro web site, que ainda 
está ativo. 
» https://www.w3.org/History/19921103-
hypertext/hypertext/WWW/TheProject.html
» Já nessa época havia a necessidade de utilizar os navegadores 
para acessar essas páginas. Além de outros, o Mosaic foi um dos 
navegadores mais conhecidos na época e que permitia a 
utilização e visualização de diversos tipos de conteúdo.
Programação Web
Um pouco de história
» Em 1994 foi criado a evolução do Mosaic: o Netscape. 
» Ainda surgiram vários outros navegadores, onde o de maior 
destaque (não pela sua eficiência) o Internet Explorer. O Opera 
também nesse tempo.
» Por conta da popularização do IE o Netscape começou a perder 
espaço e os desenvolvedores dele fundaram a Fundação Mozilla.
» Outro navegador de muito destaque (este mais recente) é o 
Google Chrome fundado em 2008.
Programação Web
A web hoje: Foco no usuário
» Diferentemente das primeiras duas décadas da internet, e mesmo 
dos primórdios da Web, o foco nos dias de hoje é o usuário. Se 
nos primórdios da Web o foco foi a disseminação das informações 
e o crescimento da base de usuários com acesso à infraestrutura 
(inclusão digital), nos dias de hoje as preocupações são bastante 
diferentes.
» Em 2015, segundo a Internet Live Stats (2016), ultrapassamos 3,1 
bilhões de usuários da Web, ou seja, o acesso já é garantido a 
quase metade da população do planeta. Como, ainda segundo a 
Internet Live Stats (2016), já ultrapassamos um bilhão de sites 
ativos, também é visível que a disponibilização de informações é 
um sucesso.
Programação Web
A web hoje: Foco no usuário
» Mas então, qual é o foco agora? O curioso é que a enorme 
quantidade de sites disponíveis gera um problema para qualquer 
um que tenha intenção de disponibilizar informações por meio da 
Web: há escolhas demais para o usuário e, a quantidade de 
escolhas só cresce a cada dia que passa.
» O assunto é tão importante que, no início de década de 2000, 
virou foco da ISO (International Standards Organization, ou 
Organização Internacional de Padronização) que publicou a 
família ISO 9241, que se preocupa especificamente em padronizar 
a experiência do usuário com os sistemas com os quais interage.
» FOCO NA USABILIDADE!
Programação Web
Arquitetura Web
» Pensando nisso, vamos ver alguns conceitos antes de continuar.
» Planejamento. Por que planejamos?
▪ “um bom planejamento deve ser simples o suficiente para que 
todos entendam rapidamente e complexo o suficiente para 
que não fique superficial”
• Escher (Artista Gráfico holandês)
Programação Web
Programação Web
Arquitetura Web – Processo de criação
» CRIATIVIDADE é o processo mental de geração de novas ideias 
por indivíduos ou grupos.
» MITOS sobre criatividade:
▪ Para ser criativo é necessário ser um rebelde, louco, gênio ou 
artista
▪ Criatividade requer um elevado nível de inteligência
▪ A criatividade não pode ser aprendida
▪ As pessoas nascem criativas, ou não
Programação Web
Arquitetura Web – Processo de criação
» Fatores de bloqueio para a criatividade:
▪ Culturais
▪ Ambientais
▪ Intelectuais e de comunicação
▪ Emocionais
▪ Erros de percepção
Programação Web
Arquitetura Web - Briefing
» Briefing é um resumo de uma discussão; são os pontos a discutir. 
Geralmente é aquilo que o cliente transmite, como expressão do 
trabalho que necessita.
» Um bom briefing não se dá pelas respostas certas, mas sim pelas 
perguntas certas.
Programação Web
Arquitetura Web - Briefing
Programação Web
Arquitetura Web - Briefing
» Para que serve o BRIEFING?
▪ Direcionar a estrutura do trabalho
▪ Organizar e disponibilizar informações
▪ Padronizar as informações
▪ Inspirar e alimentar ideias e soluções criativas
▪ Fundamentar e sustentar
▪ Direcionar e delimitar
▪ Evitar informações desencontradas
» IMPORTANTE:O briefing deve ser feito na primeira reunião com o 
cliente, preferencialmente em um encontro pessoal
Programação Web
Evolução da Web
» A Web desde sua criação continua evoluindo.
» A evolução da Web se deu a alguns fatores, que ajudaram a 
evidenciar ainda mais a característica social e colaborativa da 
web:
▪ Disseminação de banda larga
▪ Melhores plataformas de desenvolvimento
▪ Maior volume de pessoas acessando a Internet
▪ Maior volume de mão de obra especializada
▪ Pesquisa e metodologia
▪ Sistemas de informação robusto
Programação Web
Evolução da Web
» Web 1.0 foi a implantação e popularização da internet foi baseada 
somente na publicação de informação.
Programação Web
Evolução da Web
Programação Web
Evolução da Web
» Web 2.0 é baseada no compartilhamento de informação.
Programação Web
Evolução da Web
» Web 3.0 pretende ser a organização e o uso de maneira mais 
inteligente de todo o conhecimento já disponível na Internet.
» https://www.youtube.com/watch?v=i4GG4etWjR8
https://www.youtube.com/watch?v=i4GG4etWjR8
Programação Web
Evolução da Web
» https://www.youtube.com/watch?v=0nz-lcuv3TM&t=1201s
» http://www.evolutionoftheweb.com/
Programação Web
Arquitetura da Informação
» A arquitetura da informação trata da organização da informação 
para torná-la clara, compreensível. Na web, esse objetivo se 
mantém: criar as estruturas de organização da informação de um 
website para que o usuário consiga compreendê-lo com facilidade.
Programação Web
Arquitetura da Informação
» Componentes da AI de um Website
▪ Sistema de organização: método de categorizar e organizar a 
informação, por exemplo: alfabética, cronológica ou por 
assunto.
▪ Sistema de rotulação: estabelece as formas de 
representação da informação definindo rótulos para cada 
elemento informativo, por exemplo: empresa, quem somos, 
serviços, produtos.
▪ Sistemade navegação: determina o modo de navegar ou 
mover-se no espaço informacional, por exemplo: navegação 
global, navegação local.
▪ Sistema de busca: determina as perguntas que o usuário 
pode fazer e o conjunto de respostas que irá obter.
Programação Web
Programação Web
Programação Web
Arquitetura da Informação
» Vamos agora ver alguns exemplos do que fazer (e do que não 
fazer) em um site. Sistema de Organização
Programação Web
Tarefa
Público-alvo e 
localização
Tempo
Assunto
Programação Web
Programação Web
Alfabética
Híbrida 
(Assunto
e Público-Alvo)
Programação Web
Cuidado com as ambigüidades
» Liquidificador está em “Eletrodomésticos” ou 
“Eletroportáteis”
» Walkman está em “Eletrônicos” ou “Eletroportáteis”
» Aparelho de DVD está em “DVDs” ou “Eletrônicos”
Programação Web
Arquitetura da Informação
» Reduza o risco de confusão!
Programação Web
Arquitetura da Informação
» A Lei da Experiência dos Usuários na Web defende que as 
interfaces de navegação precisam ajudar a responder as três 
perguntas fundamentais dos usuários:
▪ Onde estou?
▪ Onde estive?
▪ Onde posso ir?
Programação Web
Onde posso ir
Onde estive
Onde estou
Programação Web
Navegação de 1º nível
Programação Web
Navegação local
Programação Web
Programação Web
Navegação no conteúdo relacionado
Programação Web
Navegação redundante (rodapé)
Programação Web
Programação Web
Arquitetura da Informação – Usabilidade
» A culpa é dos usuários?
Programação Web
Arquitetura da Informação – Usabilidade
» Usuários querem facilidade de Uso.
» Alguns conselhos para criar um website com bons princípios de 
usabilidade:
▪ Hierarquia visual clara em cada página (Ex: globo.com)
▪ Mensagens de erros devem ajudar o usuário a entender e 
resolver o problema. (Ex: erro ao digitar senha no facebook)
▪ Elabore páginas com áreas bem definidas
Programação Web
Arquitetura da Informação – Usabilidade
» Existe um estudo específico para design centro no usuário e 
visando a usabilidade.
» Vamos identificar alguns sites bons e outros nem tanto aqui: 
http://archive.org/web/
» O ideal é fazer sempre um teste de usabilidade. Para isso 
podemos utilizar mockups.
Programação Web
Exemplos de sites/app com boa usabilidade
» www.globo.com
» Mercado livre
» Duolingo
» http://rleonardi.com/
http://rleonardi.com/
Programação Web
Exemplos piores sites do mundo
» https://www.tecmundo.com.br/internet/58846-10-sites-voce-
lembrar-internet-inferno.htm
» http://www.desentupidorarolabosta.com.br/
https://www.tecmundo.com.br/internet/58846-10-sites-voce-lembrar-internet-inferno.htm
http://www.desentupidorarolabosta.com.br/