História da Web e Evolução do Webdesign

Prévia do material em texto

Aula 2: HISTÓRIA DA WEB 
Webdesign 
WEBDESIGN 
Aula 2: História da web 
Aula 2: HISTÓRIA DA WEB 
Webdesign 
Objetivos desta Aula 
1. Relembrar a história da web; 
2. Discutir a evolução dos ambientes digitais; 
3. Discutir seus modos de interação; 
4. Analisar a evolução das interfaces digitais; 
5. Identificar os elementos de criação; 
6. Identificar as limitações tecnológicas. 
Aula 2: HISTÓRIA DA WEB 
Webdesign 
| 
A evolução web 
• No início do web design, as telas eram literalmente pretas e com limitações de cores; 
• A interface gráfica veio a evoluir por volta de 1990. Os sites eram literalmente baseados em textos, 
com pouquíssimas imagens e com limitações estruturais; 
• Ao longo da história, os avanços tecnológicos proporcionaram novas possibilidades de criação de 
interface e navegação. 
Aula 2: HISTÓRIA DA WEB 
Webdesign 
| 
A evolução web 
Fonte: Autor 
• Em agosto de 1991, Tim Berners-Lee publicou o 
primeiro site, uma página simples, baseado em 
texto com alguns links, o objetivo era falar sobre a 
World Wide Web (link na imagem ao lado); 
• Em 1994, foi formado o Consórcio World Wide 
Web (W3C) no qual organizações filiadas, uma 
equipe em tempo integral e o público trabalham 
juntos para desenvolver padrões para a Web. 
http://info.cern.ch
/hypertext/WWW
/TheProject.html 
O PRIMEIRO 
 WEB SITE: 
Aula 2: HISTÓRIA DA WEB 
Webdesign 
| 
A evolução web 
• Liderado pelo inventor da web Tim Berners-Lee e o CEO Jeffrey Jaffe, o W3C tinha como missão 
conduzir a World Wide Web explorando todo o seu potencial, desenvolvendo protocolos e 
diretrizes a fim de garantir o seu crescimento ao longo dos anos; 
• Por fim, o HTML foi definido como padrão para as páginas de web; 
• Em seguida, as tecnologias de web iniciaram uma escalada vertiginosa. 
Aula 2: HISTÓRIA DA WEB 
Webdesign 
| 
Estilos de estrutura e interface 
• Em 1995, surgiram os primeiros navegadores que pudessem mostrar as imagens; 
• O uso de tabelas passou a ser usado para estruturar os sites, cujo desafio para a criação de 
interfaces era descobrir maneiras inteligentes de mesclar células líquidas com estáticas; 
• As tabelas tinham algumas características consideradas impressionantes, como a capacidade de 
alinhamento vertical dos elementos ser feita em pixels ou em porcentagem. 
Aula 2: HISTÓRIA DA WEB 
Webdesign 
| 
Estilos de estrutura e interface 
Fonte: freerangestock.com 
• Nesta época, surge o Javascript, cujo objetivo era 
ir além das limitações do HTML, possibilitando 
novas formas de criações como no caso da janela 
pop-up; 
• De qualquer forma, o início ficou marcado pelo 
fato de ser comum ver sites com informações 
desordenadas e ausência de estilos. 
Aula 2: HISTÓRIA DA WEB 
Webdesign 
| 
Surgimento do Flash e CSS - 1996 
Fonte: freerangestock.com 
• Em 1996 foi a era do Flash, trazendo uma grande 
liberdade à criação de formas, leiautes, 
animações, interações, uso de fontes etc.; 
• O uso de imagens GIF também se tornou comum. 
Aula 2: HISTÓRIA DA WEB 
Webdesign 
| 
Surgimento do Flash e CSS - 1996 
Fonte: freerangestock.com 
• Essa época foi marcada também pelo 
surgimento do CSS (Cascading Style Sheets), 
tornando-se rapidamente parte do HTML por 
causa de seus muitos benefícios; 
• Em relação às estruturas, o uso de logotipos no 
cabeçalho passou a ser comum, tendência esta 
que persiste até hoje. A introdução do CSS 
possibilitou que os leiautes melhorassem ao 
longo do período. 
Aula 2: HISTÓRIA DA WEB 
Webdesign 
| 
O CSS vai ganhando seu espaço - 1998-2002 
• Foram muitas as mudanças ocorridas nesse período. O avanço da tecnologia foi proporcionando 
novas maneiras de olhar para os elementos que construíam a interface do ambiente digital; 
• Mudanças no uso das cores, tipografias, imagens e até mesmo responsabilidades profissionais 
marcaram o período; 
• Nessa época o profissional responsável pelo desenvolvimento do site era o Webmaster, cuja 
responsabilidade envolvia criação da interface e programação do site. 
Aula 2: HISTÓRIA DA WEB 
Webdesign 
| 
O CSS vai ganhando seu espaço - 1998-2002 
• O webmaster tinha que ter conhecimentos de cores, tipografia, programas de criação de interface 
(Photoshop, por exemplo), e também programar em HTML e Javascript; 
• Em se tratando de desenvolvimento web, as primeiras versões do CSS estavam longe de ser 
flexíveis, porém o maior problema era a compatibilidade com os navegadores. Essa adaptação 
demorou alguns anos; 
• Quanto mais se tornava complexo o desenvolvimento dos sites, mais latente era a necessidade de 
não concentrar isso na mão de um só profissional. Assim, o Web Designer começou a ganhar 
espaço, tendo como função criar o design gráfico da interface digital. 
Aula 2: HISTÓRIA DA WEB 
Webdesign 
| 
O CSS vai ganhando seu espaço - 1998-2002 
Práticas comuns e fatos marcantes no período: 
 
• Espaços em branco eram “inimigos”; 
• Muitos backgrounds com repetição (geralmente mal ajustados); 
• Exploração exagerada de cores; 
• Uso de muitas fontes diferentes e/ou inadequadas; 
• Popularização de botões e ícones; 
• Esqueumorfismo começa a aparecer; 
• Princípio em que as representações mantém detalhes do objeto original; 
• Pixels substituem as polegadas, no desenvolvimento web; 
• Conteúdo ganha mais foco. 
 
Aula 2: HISTÓRIA DA WEB 
Webdesign 
| 
Web 2.0 - 2002-2005 
• Outra era começou em 2002, quando o chamado conceito web 2.0 apareceu pela primeira vez. 
O profissionalismo passou a ser visto cada vez mais nos sites; 
• A interatividade se tornou cada vez maior com os fóruns, plataformas de blogs e serviços de e-mail 
que estavam presentes no cotidiano; 
• O uso de Flash se tornou mais popular e a maioria dos sites passou a explorá-lo cada vez mais. 
As animações estavam presentes da página de introdução até o site como um todo. 
Aula 2: HISTÓRIA DA WEB 
Webdesign 
| 
Web 2.0 - 2002-2005 
Práticas comuns e fatos marcantes no período: 
 
• Popularização dos ícones; 
• Caixa de busca ganha seu lugar; 
• Gifs animados e fundos de repetição começam a desaparecer; 
• Uso de cores se torna mais técnico, com palhetas mais harmoniosas; 
• Mais tipologia e mais estudo do contraste; 
• A partir de 2005, a estética começava a se integrar realmente à usabilidade. 
Aula 2: HISTÓRIA DA WEB 
Webdesign 
| 
A liberdade na navegação - 2006-2012 
• Navegar na internet já era habitual, porém com os uso dos telefones móveis passou a ser um 
desafio; 
• Adaptar os leiautes a estas novas plataformas não foi algo fácil; 
• As primeiras mudanças para tal adaptação foi a utilização de colunas e padronização dos 
elementos comuns como formas, navegação e botões; 
• A navegação ganhou mais liberdade, se dando em qualquer direção do eixo axial. 
Aula 2: HISTÓRIA DA WEB 
Webdesign 
| 
A liberdade na navegação - 2006-2012 
Práticas comuns e fatos marcantes no período: 
 
• Ethan Marcotte propôs o que viria ser conhecido como “Design Responsivo”; 
• 2008: o ano do estilo “retrô”; 
• Flat design entra em cena; 
• Fontes tipográficas digitais (Google Fonts); 
• Mais tipologia e mais estudo do contraste; 
• Minimalismo ganha força a partir de 2010. 
Aula 2: HISTÓRIA DA WEB 
Webdesign 
| 
HTML5, CSS3 e as novas formas de criação - 2013 até hoje 
• Época marcada pela variedade de dispositivos digitais e do Design Responsivo com toda a sua 
flexibilidade, porém com controle total; 
• O problema de compatibilidade dos navegadores já não é tão presente; 
• O HTML e CSS passaram por grandes mudanças permitindo maior flexibilidade para posicionar 
elementos, possibilitandocriar leiautes e modificá-los com uma única propriedade. 
Aula 2: HISTÓRIA DA WEB 
Webdesign 
| 
Proposta de atividade: questão para debate 
Como as interfaces gráficas dos sites facilitaram, ao longo da história, o desenvolvimento 
de um novo tipo de comunicação? 
Aula 2: HISTÓRIA DA WEB 
Webdesign 
Saiba mais 
Analisar a evolução dos sites, do Flash ao HTML5: 
https://thefwa.com/ 
 
Analisar os destaques por épocas abordadas: 
http://awwwards.com 
Aula 2: HISTÓRIA DA WEB 
Webdesign 
VAMOS AOS PRÓXIMOS PASSOS? 
 
 
Planejamento do projeto web; 
 
Conhecendo os profissionais 
envolvidos no processo; 
 
Recursos de linguagens de 
programação; 
 
Briefing, objetivos e escopo. 
AVANCE PARA FINALIZAR 
A APRESENTAÇÃO.