Um pouco de histria o

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Evoluo da WEB e WEB 2.0 ca

Evgueni Dodonov eugeni@dodonov.net
Mandriva

1 / 47

Um pouco de histria o

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Um pouco de histria o
Qual a idade da Internet? e ...e a idade da World Wide Web (WWW)?
1950 1960 1970 1980 1990 2000

Vamos descobrir!

2 / 47

Um pouco de histria o 1950

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Dcada de 1950 e
Mainframes Terminais interconectados Iniciam-se as primeiras pesquisas sobre possibilidades de interconectar computadores independentes

3 / 47

Um pouco de histria o 1960

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

1960
DARPA (Defense Advanced Research Projects Agency) necessita de um meio de comunicao entre ca super-computadores localizados em diferentes lugares dos EUA Surge a primeira rede de comunicao: ARPANET ca Pesquisas so realizadas para possibilitar conectar redes f a sicas de forma a formar redes lgicas o Endereamento lgico e chaveamento de pacotes so a base c o a de uma rede que um dia ser a Internet a Inveno de mecanismos para deixar recados aos usurios ca a predecessor de e-mail Pesquisas e implementaes baseadas em protocolos abertos e co publicamente discutidos (RFC, Request for Comments)
Os RFCs so usados at hoje! a e
4 / 47

Um pouco de histria o 1970

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

1970
Surgem as primeiras redes acess veis ao pblico u Introduo do protocolo X.25, utilizado para comunicao em ca ca grande escala Surgimento dos primrdios da Internet: BBS (Bulletin Board o System), FidoNET Surgimento de email: protocolo UUCP, usado para envio e recebimento de mensagens Surgimento dos protocolos usados at hoje: IP, TCP e Introduo da arquitetura TCP/IP ca Surgimento de primeiros jogos estilo MMORPG: MUD (Multi-User Dungeon) Surgimento do termo Internet
5 / 47

Um pouco de histria o 1980

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

1980
Padronizao dos protocolos e da arquitetura TCP/IP (RFC ca 791, 792 e 793) O mundo passa a adotar a arquitetura TCP/IP Surgimento de redes nacionais: MILNET (EUA), CERNNET e RIPE (Europa), AARNET (Australia), ... Surgimento dos protocolos de comunicao usados at hoje: ca e SMTP, NNTP, ... Adoo em larga escala de redes WAN (Wide Area Network) ca Criao de IETF (Internet Engineering Task Force), ca organizao para desenvolver e promover padres da Internet ca o Inveno de DNS ca Surgimento de primeiros provedores de Internet Surgimento da linguagem HTML
6 / 47

Um pouco de histria o 1990

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

1990
Surgimento de IANA e ICANN entidades para controlar a atribuio dos endereos IP e nomes (DNS) pela Internet ca c Surgimento do protocolo HTTP e, com isso, de World Wide Web Criao de primeiros browsers: Mosaic, Netscape ca Introduo de mecanismos de busca na WEB: WebCrawler, ca Lycos, Yahoo, Altavista, Google (!) Uso de Internet para comrcio e Surgimento de primeiros celulares com acesso a Internet (Nokia) Surgimento de mercado de jogos voltados para Internet Inveno de Java, Javascript, RSS, CSS, ... ca WEB 1.0
7 / 47

Um pouco de histria o WEB 0.1

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

WEB 0.1
BBS

Gopher

8 / 47

Um pouco de histria o WEB 1.0

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

WEB 1.0
CNN

(a) 2000

(b) 2002

(c) 2003

Download.com

(a) 1996

(b) 1998

(c) 2001
9 / 47

Um pouco de histria o WEB 1.0

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

WEB 1.0
Yahoo

(a) 1995

(b) 1998

(c) 2000

News.com

(a) 1996

(b) 1999

(c) 2000
10 / 47

Um pouco de histria o WEB 1.0

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

WEB 1.0
UOL

(a) 1996

(b) 1998

(c) 2002

Terra

(a) 2000

(b) 2001

(c) 2005
11 / 47

Um pouco de histria o WEB 2.0

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

WEB 2.0
WEB 2.0.
Antes de entrar em detalhes, vamos ver alguns exemplos...

12 / 47

Um pouco de histria o WEB 2.0

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

WEB 2.0
Delicious.com

Site para armazenar bookmarks, encontrar recursos populares, trocar links...

13 / 47

Um pouco de histria o WEB 2.0

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

WEB 2.0
Flickr

Site para armazenar fotos, encontrar fotos populares, participar de comunidades com interesses similares...
14 / 47

Um pouco de histria o WEB 2.0

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

WEB 2.0
Digg.com

Site para encontrar not cias populares, trocar not cias com amigos, encontrar not cias sugeridas por outros usurios... a
15 / 47

Um pouco de histria o WEB 2.0

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

WEB 2.0
Facebook.com

Rede social: site para encontrar amigos, sugerir recursos interessantes, colocar fotos, etc.
16 / 47

Um pouco de histria o WEB 2.0

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

WEB 2.0
Linkedin.com

Site para pers de negcios: publicar seu curr o culo, indicar pessoas para cargos, ...
17 / 47

Um pouco de histria o WEB 2.0

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

WEB 2.0
Myspace.com

Rede social: similar ao facebook, com foco em pessoas famosos e m dia.

18 / 47

Um pouco de histria o WEB 2.0

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

WEB 2.0
Wikipedia.org

Enciclopdia on-line, com contedo gerenciado pelos prprios e u o usurios a

19 / 47

Um pouco de histria o WEB 2.0

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

WEB 2.0
Google: gmail, maps, wave, reader...

(a) gmail

(b) google maps

(c) google reader

(d) google wave

20 / 47

Um pouco de histria o WEB 1.0 vs WEB 2.0

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

WEB 1.0
Principais caracter sticas de WEB 1.0.
Web para sites, no para pessoas a Portais genricos e Design padronizado (e, muitas vezes, confuso) Pginas estticas, tendo necessidade de cargos espec a a cos para gerenciar o contedo e aparncia (webmasters) u e Desenvolvimento manual

Principais tecnologias:
Protocolos/Padres: HTML, HTTP o Ferramentas espec cas para criao de sites (Dreamweaver, ca FrontPage, notepad)
Necessita de pessoas qualicadas

Java frequentemente usado em forma de applets e Javascript pouco utilizado e CSS pouco utilizado e Multim dia: GIF (muitas vezes, animado), JPG
21 / 47

Um pouco de histria o WEB 1.0 vs WEB 2.0

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

WEB 2.0
Principais caracter sticas de WEB 2.0:
Web voltada para contedo u Sites desenvolvidos com objetivos precisos Integrao transparente entre diversos sites (google account, ca web snippets, rss) Pginas dinmicas, geradas a cada acesso, trazendo contedo a a u personalizado Contedo gerado pelos prprios usurios u o a

Principais tecnologias:
Protocolos/Padres: HTML/XHTML, HTTP, XML, o XML-RPC, RSS, JSON, ... Uso dos recursos do cliente: javascript, css, composio ca dinmica do contedo a u Recursos ass ncronos: AJAX, RSS, web services Java/python/perl/php utilizados do lado do servidor Design dinmico: Javascript + CSS a Recursos multim dia
22 / 47

Um pouco de histria o WEB 1.0 vs WEB 2.0

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

WEB 2.0
Comparando WEB 1.0 vs WEB 2.0
Caracter stica Protocolos/Padres o Contedo u Foco Interao com outros sites ca Gerao do contedo ca u Uso dos recursos dos clientes Acesso ass ncrono a dados Design Estrutura de pginas a Recursos semnticos a Endereamento de recursos c Interao entre os usurios ca a Recursos multim dia Tecnologias envolvidas WEB 1.0 Desenvolvidos na dcada de 90 e Esttico a Genrico e No a Webmasters No a No a Fixo Baseada em tabelas No a Complexo (/index.aspx?a=l&c=fa3b) No a No a Proprietrias a WEB 2.0 Desenvolvidos na dcada de 90 e Dinmico a Espec co Sim Prprios usurios o a Sim Sim Dinmico e criativo a Baseada em blocos lgicos o Sim Simples (/home/login) Sim Sim Abertas

Anal, o que WEB 2.0? e

Evoluo da WEB tradicional ca Tendncia em construo de sites com foco em facilidade de e ca acesso ao contedo e interao entre os usurios. u ca a

23 / 47

Um pouco de histria o Caracter sticas

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Caracter sticas de WEB 2.0

Novos conceitos (SLATES1 ):
Search: facilidade de encontrar informaes (usando busca co local, tags, busca semntica, ..) a Links: capacidade de agregar informaes a partir de outros co locais da WEB Authoring: contedo criado pelos prprios usurios u o a Tags: categorizao dinmica dos dados ca a Extensions: suporte a adaptaes dinmicas do contedo e co a u aparncia do site (plugins, temas, ...) e Signals: mecanismos ass ncronos para noticar sobre mudanas no contedo (rss, tecnologias push) c u

1 McAfee, A. (2006). Enterprise 2.0: The Dawn of Emergent Collaboration. MIT Sloan Management review. Vol. 47, No. 3, p. 21-28. 24 / 47

Um pouco de histria o Caracter sticas

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Caracter sticas de WEB 2.0

Mistura do conceito de cliente-servidor
WEB 1.0: contedo acessado apenas por meio do browser u e WEB 2.0: contedo pode ser acessado de forma ass u ncrona:
Pelo browser, usando AJAX Por outro servidor: RSS, WEB-services, XML-RPC...

25 / 47

Um pouco de histria o Caracter sticas

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Caracter sticas de WEB 2.0

Formatos de dados interoperveis: a
WEB 1.0: HTML utilizado e WEB 2.0: dados so representados por XML ou JSON, e so a a convertidos para HTML somente quando necessrio2 a

2 http://blogs.msdn.com/wcamb/archive/2008/07/03/cen-rios-de-implementa-o-de-servi-os-com-wcf-parte-3servi-os-para-web-2-0.aspx 26 / 47

Um pouco de histria o Caracter sticas

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Caracter sticas de WEB 2.0

Construo de sites: ca
WEB 1.0: sites so constru a dos de zero WEB 2.0: plataformas e frameworks so utilizados a
PHP: Wordpress, Drupal, Joomla, ...

27 / 47

Um pouco de histria o Caracter sticas

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Caracter sticas de WEB 2.0

Construo de sites: ca
Python: Django, Pylons, TurboGears, ...

28 / 47

Um pouco de histria o Caracter sticas

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Caracter sticas de WEB 2.0

Construo de sites: ca
Java: Struts, Spring, JSF, ... Perl: Catalyst, Jifty, ... Ruby: Ruby on Rails, Merb, Vintage, ... C++: WT, CppCMS Erlang: Erlyweb, Nitrogen Haskell: HAppS, Turbinado etc

Basicamente, para qualquer linguagem de programao existe ca um framework pronto para desenvolver sites O foco passa a ser em contedo do site (e sua apresentao), u ca e no em detalhes tcnicos de implementao a e ca

29 / 47

Um pouco de histria o Caracter sticas

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Caracter sticas de WEB 2.0

Javascript:
WEB 1.0: Geralmente, javascript utilizado manualmente, e para fazer interaes simples co WEB 2.0: Javascript usado constantemente, para realizar e diversas funes: co
Acesso ass ncrono a dados (AJAX) Mudanas na estrutura da pgina c a Download de imagens, acesso a contedo multi-m u dia, interao com teclado e mouse do usurio, etc ca a

Uso de diversos frameworks:

Jquery, ExtJS, MooTools, Dojo toolkit, Yahoo! UI Library, Prototype, script.aculo.us, Midori, ...

Surgimento de servios, desenvolvidos pela comunidade, que c permitem estender os sites usando scriptlets (bookmarklets, userscripts.org, greasemonkey, ...)

30 / 47

Um pouco de histria o Caracter sticas

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Caracter sticas de WEB 2.0

CSS:
WEB 1.0: Pouco utilizado WEB 2.0: Amplamente utilizado, possibilitando alterar temas do site e dos elementos individuais automaticamente
Surgimento de frameworks CSS: Blueprint, YUI Grids, Elastic, ...

Imagens:
WEB 1.0: Formatos JPG e GIF (inclusive animados) WEB 2.0: Formatos vetoriais, exportados para arquivos JPG e PNG; amplo uso de transparncia nas imagens e

Estrutura das pginas: a

WEB 1.0: Estrutura xa, visando agregar a maior quantidade de informaes na pgina co a WEB 2.0: Estrutura ex vel, uso de espaamento maior entre c os itens do site, separao do contedo em diversas pginas ca u a
31 / 47

Um pouco de histria o Caracter sticas

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Novas abordagens adotadas em WEB 2.0

Indexao do contedo por meio de tags e nuvens de tags ca u

Comunicao com (e entre) os usurios ca a

(a) 404uxd.com

(b) artisanthemes.com

(c) designdesease.com
32 / 47

Um pouco de histria o Caracter sticas

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Novas abordagens adotadas em WEB 2.0

Relevncia do contedo julgada pelos prprios usurios a u o a

Agregao e customizao do contedo ca ca u

33 / 47

Um pouco de histria o Design

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Design na poca WEB 2.0 e

Com a evoluo da WEB e surgimento de WEB 2.0, design ca evoluiu tambm: e
Foco do design passa a ser na facilidade de acesso ao contedo, sem abusar de itens decorativos desnecessrios u a Pginas constru a das de forma a facilitar navegao ca Lema principal: deixar apenas o necessrio a

Algumas caracter sticas do design na poca WEB 2.03 : e

Design elegante e simples Uso de sombras Emprego de botes retangulares o Fontes sem-serifa (Sans-Serif) Uso de fontes maiores Uso de botes destacados o Recursos semnticos a Formatao lgica do contedo ca o u Sees superiores e inferiores, separadas do resto da pgina co a Menu de navegao simplicado ca Ausncia de java applets e gifs animados e Logotipos vis veis e destacados SEO (Search Engine Optimization) 3 http://www.creastate.com/design.html 34 / 47 Uso de bordas arredondadas Uso de degrad suave e Uso de cones seguidos por texto Cores mais suaves Elementos de design brilhantes Uso de adesivos para destacar elementos Tpicos com fontes maiores o 2-3 colunas de texto no mximo a Blocos destacados por cor ou espao em branco c Uso de tags e categorizao de informao ca ca Foco no contedo u Navegao padronizada ca SMO (Social Media Optimization)

Um pouco de histria o Design

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Design na poca WEB 2.0 e

Exemplos

35 / 47

Um pouco de histria o Design

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Design na poca WEB 2.0 e

Exemplos

36 / 47

Um pouco de histria o Design

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Design na poca WEB 2.0 e

Exemplos

37 / 47

Um pouco de histria o Design

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Design na poca WEB 2.0 e

Exemplos

38 / 47

Um pouco de histria o Design

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Design na poca WEB 2.0 e

Resumindo: design na poca WEB 2.0 pode ser denido e como:
Simples Inovador Focado em contedo u

39 / 47

Um pouco de histria o Como funciona

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Como funcionam os sites WEB 2.0

Objetivos:
1

Encontrar o usurio-alvo a
SEO, SMO..

Chamar ateno do usurio ca a

Design

Manter usurio no site a

Contedo + Usabilidade u

Fazer com que ele traga mais usurios a

Mecanismos de indicao (..traga seus amigos e participe de ca sorteio..) Sites acess veis apenas por convites (gmail, orkut, google wave, ..)

40 / 47

Um pouco de histria o Como funciona

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Como funcionam os sites WEB 2.0

Modelo de negcios: o
WEB 1.0: site traz $$$
Resultou em Dot-com bubble

WEB 2.0: usurios trazem $$$ a

Youtube, Flickr, Picasa, Skype, PayPal, MySpace, Facebook, Wikipedia, Digg...

Novos conceitos e estratgias e

Startups Blogs, podcasts SMO, SEO, Doorways Slashdot eect, Digg eect Propaganda direcionada (Google AdSense, DoubleClick, pay-per-click, pay-per-view..) ...

41 / 47

Um pouco de histria o Novas tendncias e

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Novas tendncias e
Novos conceitos surgem constantemente
WEB semntica: meta-dados e sua interligao a ca
Facilitar acesso a informaoes c Agregar informaoes de forma dinmica c a Unicar todas as informaoes da Internet c

42 / 47

Um pouco de histria o Novas tendncias e

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Novas tendncias e
Novos conceitos:
Interatividade 3D
Oferecer recursos 3D dentro do prprio browser o Quake Live, Google O3D, WebGL..

43 / 47

Um pouco de histria o Novas tendncias e

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Novas tendncias e
Novos conceitos:
Multi-m dia
Suporte a recursos multi-m dentro do browser dia Firefox 3.5, Google Chrome, Safari...

44 / 47

Um pouco de histria o Novas tendncias e

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Novas tendncias e
Acesso a dados oine:
Google Gears, HTML5 local storage..

45 / 47

Um pouco de histria o Novas tendncias e

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

Novas tendncias e
Tornar aplicao WEB indistingu da local ca vel
Google Docs, Google Wave, Photoshop.com, ...

46 / 47

Um pouco de histria o Concluindo..

Evoluo da WEB ca

WEB 2.0

Novas tendncias e

E o que podemos concluir com tudo isso?

Finalizando...
WEB 2.0 a evoluo da WEB e ca ...a evoluo continua! ca

(a) 1998

(b) 2009

47 / 47