Monografia Web 2.0

Web 2.0
A migração para a Web social

Aluna: Crystiam Kelle Pereira e Silva
Orientador: Tarcísio de Souza Lima

Web 2.0 Agenda
 Introdução  A plataforma Web 2.0
Mudança de paradigma  Serviços Web 2.0


Web como plataforma


 Estudo de caso
 Características da Web 2.0
 Conclusão
Definição

 Críticas à Web 2.0
Características

 Trabalhos Futuros
 Elementos da Web 2.0
Usuário


Conteúdo


Design


Publicidade e Marketing


Web 2.0 Introdução
 Anos 1980
Criação da Web


Interesse comercial na rede


Sites textuais, poucas imagens


 Anos 1990
Applets Java, animações, cores, muitas imagens


Atualmente

Sites dinâmicos


Interatividade


Serviços simples


Participação e colaboração


Web 2.0 Quebra de Paradigmas
Web 1.0 Web 2.0
DoubleClick Google AdSense
Ofoto Flickr
Akamai BitTorrent
Mp3.com Napster
Enciclopédia Britânica online Wikipedia
websites pessoais Blogs
evite upcoming.org e EVDB
especulação de domínios otimização de ferramentas de busca
Visitas a páginas Custo por click
screen scraping web services
Publicação Participação
sistema de gerenciamento de conteúdo wikis
diretórios (taxonomia) tags (quot;folksonomyquot;)
stickiness Syndication (disponibilização de conteúdo)

Web 2.0 Web como plataforma

 Aplicativos que utilizam a rede como plataforma

 Web oferece serviços para o desenvolvimento

 Vantagens
Serviços sempre disponíveis


Armazenamento de dados online


Acessíveis de qualquer dispositivo


Isentos de instalação


Atualizações automáticas


Independente do SO


Web 2.0 Definição de Web 2.0

quot;Web 2.0 é a mudança para uma internet como plataforma,
plataforma
e um entendimento das regras para obter sucesso nesta nova
plataforma. Entre outras, a regra mais importante é
desenvolver aplicativos que aproveitem os efeitos de rede
para se tornarem melhores quanto mais são usados pelas
pessoas, aproveitando a inteligência coletiva“
pessoas coletiva
(O’ REILLY, 2005).

Web 2.0 Características da Web 2.0
 Participação
 Inteligência Coletiva: Wikipedia
 Comunidade: Orkut, Gazzag

 Cooperação
 O controle de dados não é uma prática desejável
 Utilização e a melhoria de serviços já criados: Google Maps

 Usabilidade
 Facilitar o uso, intuitivo
 Testes feitos com grande freqüência e muitos usuários


 Descentralização dos dados
 Aplicativos em diversos dispositivos
 Arquitetura P2P

 Confiança no conteúdo dos usuários
 “Com um número suficiente de olhos, todos os bugs tornam-se
visíveis“
 Usuários avaliam, corrigem, sugerem...
 Informações erradas são rapidamente denunciadas


 Experiência rica para o usuário
 Páginas mais leves, interativas e agradáveis
 Formato próximo ao Desktop

 Personalização
 Usuário escolhe o conteúdo
 Informações recebidas em diferentes dispositivos

 Atualizações freqüentes
 Lançar logo, lançar sempre

Web 2.0 Ferramentas Web 2.0

Wikis
Blogs
Sites sociais
Bookmarking social
Vídeos e fotos

Web 2.0 Elementos da Web 2.0

 Usuário
 Usuário é o principal objetivo das companhias
 Cria, avalia, edita, organiza, compartilha, escolha como e o
que deseja ver
 Serviços devem estimular a participação do usuário
 Usuário não adiciona conteúdo sem obter vantagem
 Vantagem econômica
- Usuário faz a manutenção do sistema


 Conteúdo

A preocupação não está mais em publicar o conteúdo e
sim em criar alternativas que ajudem a organizá-lo,
selecioná-lo e distribuí-lo.


 Organização
 Folksonomia – tags

 Avaliação
 Denúncia de abusos e erros
 Estímulo à avaliação – DIGG

 Distribuição
 Bom uso em vários dispositivos
 Disponibilizar o conteúdo – Youtube
 Long Tail

 Design
A pretensão do designer é estimular o usuário a participar
da Web e permitir a ele autonomia, facilidade
autonomia
e essencialmente simplicidade na sua busca por informação
e na colaboração no desenvolvimento desta.

 Tendências
Layout simples

Projete o conteúdo e não a página

Uso de espaços em branco

Textos grandes

Cores fortes e contrastantes


 Publicidade
“O marketing viral e a publicidade viral referem-se a técnicas
de marketing que tentam explorar redes sociais pré-
existentes para produzir aumentos exponenciais em
conhecimento de marca, com processos similares a
extensão de uma epidemia” (WIKIPEDIA, 2006)

“Pode-se ter certeza de que, se um site ou produto depende de

publicidade para se tornar conhecido, não é Web 2.0” (O’
REILLY, 2005)

 Publicidade

Empresa

Consumidor Consumidor Consumidor

Web 1.0

Web 2.0

Web 2.0 A plataforma Web 2.0

Web 2.0 Serviços Web 2.0 - RSS
 RSS é um recurso que permite o compartilhamento de conteúdo na
Web.

 São gerados arquivos (feeds) com extensão .xml ou .rss ou ainda .rdf.

 Busca feita por agregadores RSS

 Reúne em apenas um lugar informações de vários serviços

 RDF
 Representar claramente informações
de recursos da Web de forma que possa
ser processado por máquina

Web 2.0 Serviços Web 2.0 - RSS

RSS 1.0 RSS 2.0
RDF Site Summary Really Simple Syndication
Desenvolvida por um grupo de Foi originariamente documentada
desenvolvedores através da pela Netscape e aperfeiçoada pela
continuação da versão RSS 0.9 Userland.
Baseada na versão RSS 0.91.

Utiliza namespaces XML de Utiliza namespaces XML de acordo
acordo com o padrão W3C com o padrão W3C
Detalhamento da especificação Simplicidade
Útil para ser integrado a sistemas Fácil para codificação manual
de Web Semântica

Web 2.0 Serviços Web 2.0 – RSS 1.0
01 <?xml version=quot;1.0quot;?>
02 <rdf:RDF xmlns:rdf=quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#quot;
03 xmlns=quot;http://purl.org/rss/1.0/quot;
04 xmlns:dc=quot;http://purl.org/dc/elements/1.1/quot;>
05 <channel rdf:about=quot;http://exemplo.com/news.rssquot;>
06 <title>EXEMPLO</title>
07 <link>http://exemplo.com/ <link>
08 <description>Exemplo de RSS 1.0</description>
09 <items>
10 <rdf:Seq>
11 <rdf:li resource=quot;http://exemplo.com/2002/09/01/quot;/>
12 <rdf:li resource=quot;http://exemplo.com/2002/09/02/quot;/>
13 </rdf:Seq>
14 </items>
15 </channel>
16 <item rdf:about=quot;http://exemplo.com/2002/09/01/quot;>
17 <title></title>
18
19 <link></link>
20 <description> </description>
21 <dc:date></dc:date>
22 </item>
23 </rdf:RDF>

Web 2.0 Serviços Web 2.0 – RSS 2.0

01 <?xml version=quot;1.0quot;?>
02 <rss version=quot;2.0quot;>
03 <channel>
04 <title>Exemplo de RSS 2.0</title>
05 <link>http://exemplo.com/</link>
06 <description> Exemplo de RSS 2.0 - Monografia</description>
07
08 <item>
09 <title>Noticia 01</title>
10 <link>http://noticia.com</link>
11 <description>Descrição da noticia 01 </description>
12 </item>
13 </channel>
14 </rss>

Web 2.0 Serviços Web 2.0 – Mashups

Um mashup é um website ou uma aplicação web que
descontinuamente combina em seu conteúdo mais de um
código (WIKIPEDIA, 2007).

 Utiliza RSS e APIs
 Google Maps: mostrar imagens
 Google Calendar: marcar datas de festas

 API
 Conjunto de rotinas e padrões estabelecidos por um software para
utilização de suas funcionalidades por programas aplicativos sem
envolver com detalhes de implementação. (WIKIPEDIA, 2007a)

Web 2.0 Serviços Web 2.0 – API
01 <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot;
02 quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;>
03 <html xmlns=quot;http://www.w3.org/1999/xhtmlquot;>
04 <head>
05 <meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot;/>
06 <title>Google Maps JavaScript API Example</title>
07 <script src=quot;http://maps.google.com/maps?file=api&v=2&key=
08 ABQIAAAAkLV-dnEEwgYAx4vzE4TrTBQeaAGtUU6K5zApHkQGXCeE_3kH7RQl7_
09 VO71PNYzHE0LAcwAsjOLpjVgquot; type=quot;text/javascriptquot;></script>
10 <script type=quot;text/javascriptquot;>
11 //<![CDATA[
12 function load() {
13 if (GBrowserIsCompatible()) {
14 var map = new GMap2(document.getElementById(quot;mapquot;));
15 map.setCenter(new GLatLng(37.4419, -122.1419), 13);
16 }
17 }
18 //]]>
19 </script>
20 </head>
21 <body onload=quot;load()quot; onunload=quot;GUnload()quot;>
22 <div id=quot;mapquot; style=quot;width: 500px; height: 300pxquot;></div>
23 </body>
24 </html>

Web 2.0 Serviços Web 2.0 - AJAX

 Aplicações mais dinâmicas

 Atualiza apenas a informação solicitada

 Comunicação assíncrona

 Menor uso de banda

 Rapidez e eficiência na navegação


 O AJAX incorpora as seguintes tecnologias:

 Padrões de apresentação utilizando XHTML e CSS;
CSS

 Apresentações dinâmicas e interativas utilizando Document
Object Model - DOM;
DOM

 Manipulação de elementos de uma página utilizando XML e
XSLT;
XSLT

 Recuperação de dados assíncrona usando o método
XMLHttpRequest;
XMLHttpRequest

 e JavaScript que junta tudo isso. (GARRET, 2005)

Web 2.0 Estudo de caso

Protótipo do portal da UFJF

 Objetivo: Criar um website mais interativo e permitir a distribuição
Objetivo
do conteúdo gerado pela UFJF, usando recursos da Web 2.0.
Além disso, o protótipo foi idealizado de acordo com os padrões
Web, preocupando-se com acessibilidade e usabilidade.
usabilidade

 Foram usados PHP e MySQL.


 Distribuição do conteúdo através de RSS 2.0


 Distribuição do conteúdo através de RSS 2.0
01 foreach($arnots as $linha){
02 $date = $linha->getdt_publicacao();
03 $date = date('D, d M Y H:m:s');
04 fwrite($ponteiro,quot;
05 <item>
06 <title>quot;.htmlspecialchars($linha->gettitulo()).quot;</title>
07 <link>http://www.portal.ufjf.br/teste/ver_not.php?
08 idnoticia=quot;.$linha->getidnoticia().quot;</link>
09 <pubDate>quot;.$date.quot; -0200</pubDate>
10 <description>
11 <![CDATA[ <P>quot;.htmlspecialchars($linha->getchamada()).
12 quot;</P> ]]>
13 </description>
14 <guid>http://www.portal.ufjf.br/teste/ver_not.php?
15 idnoticia=quot;.$linha->getidnoticia().quot;</guid>
16 </item>quot;);
17 }

01 <?xml version=quot;1.0quot; encoding='iso-8859-1' ?>
02 <rss version='2.0'>
03 <channel>
04 <title>Portal UFJF - Notícias</title>
05 <link>http://www.portal.ufjf.br</link>
06 <description>UFJF - A sua universidade Pública!</description>
07 <language>pt-br</language>
08 <copyright>Portal UFJF - Todos os direitos reservados.</copyright>
09 <image>
10 <title>Portal UFJF</title>
11 <url>http://www.portal.ufjf.br/teste/imagens/icones/logo_ufjf.gif
12 </url>
13 <link>http://www.portal.ufjf.br</link>
14 </image>
15 <lastBuildDate>Fri, 29 Jun 2007 18:55:54 -0300</lastBuildDate>
16 <ttl>20</ttl>
17 <item>
18 <title>Relações Internacionais cadastra famílias para receber
19 intercambistas - alterado</title>
20 <link>http://www.portal.ufjf.br/teste/ver_not.php?idnoticia=25
21 </link>
22 <pubDate>Fri, 29 Jun 2007 18:06:54 -0200</pubDate>
23 <description><![CDATA[ <P>A Coordenação de Relações Internacionais 24
(CRI) da Universidade Federal de Juiz de Fora (UFJF) inscreve
25 famílias que se interessam em hospedar alunos...</P> ]]> 26
</description>
27 <guid>http://www.portal.ufjf.br/teste/ver_not.php?idnoticia=25
28 </guid>
29 </item>
30 </channel>
31 </rss>


 Agregação do conteúdo RSS do website Tempo Agora

01 function geraRSS($tabs,$endereco,$origem,$tipo='dl',$maxitens){
02
if($tipo!='ul' && $tipo!='ol' && $tipo != 'dl'){
0echo quot;<p class='error'>No momento são válidos apenas 'ul', 'ol' 'dl' para
005 tipo</p>quot;;}
06 $metas = array();
07 $xml2a = new XMLToArray();
08 $root_node = $xml2a->parse(file_get_contents($endereco));
09 $drive = array_shift($root_node[quot;_ELEMENTSquot;]);
10 $ret = $tabs.quot;<$tipo>nquot;;
11 $i = 0;
12
13 foreach($drive[quot;_ELEMENTSquot;][0][quot;_ELEMENTSquot;] as $elem){
14 if($elem[quot;_NAMEquot;]==quot;itemquot; && $i<$maxitens){
15 $i++;
16 foreach($elem[quot;_ELEMENTSquot;] as $not){
17 $$not[quot;_NAMEquot;] = $not[quot;_DATAquot;];
18 }
19 if($tipo=='dl'){
20 $ret .= $tabs.quot; <dt><a href='quot;.$link.quot;' target='_blank'>quot;
21 .htmlentities(utf8_decode($title)).quot;</a></dt>nquot;;
22 $ret .= $tabs.quot;<dd>quot;.htmlentities(utf8_decode($description)).quot;</dd>nquot;;
23 }else{
24 $ret .= $tabs.quot;<li>
25 <a href='quot;.$link.quot;'target='_blank'>quot;.
26 htmlentities(utf8_decode($title)).quot; nquot;;
27 $ret .= $tabs.quot;
28 <span class='desc'>
29 quot;.htmlentities(utf8_decode($description)).quot;
30 </span>
31 </a></li>nquot;;
32 }
33 }else{ //pegando os outros meta dados
34 $metas[$elem[quot;_NAMEquot;]] = $elem[quot;_DATAquot;];
35 }
36 }
37 $ret .= $tabs.quot;</$tipo>nquot;;
38 $ret .= $tabs.quot;<p>Fonte: <a href='quot;.$metas[quot;linkquot;].quot;' target='_blank' quot;;
39 $ret .= quot;title='quot;.htmlentities
40 (utf8_decode($metas[quot;copyrightquot;])).quot;'>quot;.$origem.quot;</a></p>nquot;;
41 //return $ret;
42


 Participação

 Formulário: estimular a participação e interação entre os
avaliadores, que deixavam opiniões, sugestões e podiam
visualizar os comentários dos demais.

 Foi utilizada a biblioteca greybox.
greybox


 Avaliação
 Enquete: permitir uma avaliação rápida, com opções definidas

 Usada biblioteca Ajax Poller

01 // Insere novo voto na base de dados
02
03 if($optionId)mysql_query(quot;insert into poller_vote(optionID,ipAddress)
04 values('quot;.$optionId.quot;','quot;.getenv(quot;REMOTE_ADDRquot;).quot;')quot;);
05
06 //Retorna resultado como um XML
07 echo '<?xml version=quot;1.0quot; ?>';
08
09 $res = mysql_query(quot;select ID,pollerTitle from
10 poller where ID='quot;.$pollId.quot;'quot;);
11 if($inf = mysql_fetch_array($res)){
12 echo quot;<pollerTitle>quot;.$inf[quot;pollerTitlequot;].quot;</pollerTitle>nquot;;
13
14 $resOptions = mysql_query(quot;select ID,optionText from
15 poller_option where pollerID='quot;.$inf[quot;IDquot;].quot;'
16 order by pollerOrderquot;) or die(mysql_error());
17 while($infOptions = mysql_fetch_array($resOptions)){
18 echo quot;<option>nquot;;
19 echo quot;t<optionText>quot;.$infOptions[quot;optionTextquot;].quot;</optionText>nquot;;
20 echo quot;t<optionId>quot;.$infOptions[quot;IDquot;].quot;</optionId>nquot;;
21
22 $resVotes = mysql_query(quot;select count(ID) from
23 poller_vote where optionID='quot;.$infOptions[quot;IDquot;].quot;'quot;);
24 if($infVotes = mysql_fetch_array($resVotes)){
25 echo quot;t<votes>quot;.$infVotes[quot;count(ID)quot;].quot;</votes>nquot;;
26 }
27 echo quot;</option>quot;;
28 }
29 }
30 exit;

01 this.createAJAX = function() {
02 try {
03 this.xmlhttp = new ActiveXObject(quot;Msxml2.XMLHTTPquot;);
04 } catch (e1) {
05
06 try {
07 this.xmlhttp = new 08ActiveXObject(quot;Microsoft.XMLHTTPquot;);
09 } catch (e2) {
10 this.xmlhttp = null;
11 }
12 }
13 if (! this.xmlhttp) {
14 if (typeof XMLHttpRequest != quot;undefinedquot;) {
15 this.xmlhttp = new XMLHttpRequest();
16 } else {
17 this.failed = true;
18 }
19 }
20 };


 Avaliação dos resultados
 Protótipo não se tornou um serviço Web 2.0;

 Objetivo era usar recursos Web 2.0;

 Favoreceu a avaliação e sugestões;

 Navegação mais simples e rápida;

 Maior velocidade no carregamento das páginas;

 Distribuição de conteúdo através de RSS (validada)


Próximos passos
 Disponibilizar projetos de alunos e departamentos, trabalhos de
conclusão de curso;
 Desenvolver maior interação entre os sites setoriais e o portal da UFJF;
 Comunidade para incentivar discussões entre os alunos e professores;
 Incentivar a avaliação e sugestão de eventos e atividades culturais;
 Passar o conteúdo do portal todo para uma base de dados;
 Desenvolver uma busca eficiente que atingisse, além do conteúdo do
portal, outras instituições de ensino;
 Permitir que o usuário fizesse pequenas modificações na visualização
do portal - cor e disposição de elementos na página.

Web 2.0 Conclusão

O ponto principal da Web 2.0 é o envolvimento de pessoas
no processo de desenvolvimento. Ocorreu uma migração
para a Web social, voltada para a colaboração, participação
e descentralização. Desta forma, a Web passou de uma
ferramenta para uma plataforma, que dá suporte ao
desenvolvimento de inúmeros serviços e integração dos
mesmos.

Web 2.0 Críticas à Web 2.0

Críticas
Como você pode notar, as coisas que realmente dão valor a tal Web 2.0 já são
valiosas há algum tempo. Já há algum tempo que isso tudo vem dando certo
também. (FERREIRA, 2006)

O comportamento do usuário é o mesmo???
A forma de gerar conteúdo não mudou??

A Web 2.0 não aconteceu de uma hora para a outra, logo após uma conferência,
ou assim que foi escrito o artigo do O’REILLY (2005) sobre o assunto. Ela vem
acontecendo, se transformando, num processo que acabou culminando na
eliminação de alguns conceitos antigos e na adoção de outros conceitos que
mostraram dar mais resultado quando se faz um projeto de internet. Ou seja, é
óbvio que muito se não tudo que se tem dito que é Web 2.0 remete a projetos
antigos de internet que deram certo. (ALVES JR, 2006)

Web 2.0 Trabalhos Futuros

 Web 3.0 ou Web semântica

 Tecnologias para suportar densidade de dados

 Formas de organizar e armazenar informações

 Comunicação na Web

 Formas de obter lucros

 A posse dos dados

Web 2.0 Referências Bibliográficas

FERREIRA, E. Web 2.0 pé no chão. 2006. Disponível em:
<http://www.imasters.com.br/artigo/4387/webstandards/web_20_pe_no_chao/>.
Último acesso em: 28 jun. 2007.

GARRET, J.J. Ajax: A New Approach to Web Applications. 2005. Disponível em:
<http://www.adaptivepath.com/publications/essays/archives/000385.php>. Último
acesso em: 15 jun. 2007.

O’REILLY, T. What Is Web 2.0. 2005. Disponível em:
<http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-
20.html>. Último acesso em: 05 jul. 2007.

WIKIPEDIA. API. 2007a. Disponível em: < http://pt.wikipedia.org/wiki/API>. Último
acesso em: 26 jun. 2007.

WIKIPEDIA. Web 2.0. 2007g. Disponível em:
<http://pt.wikipedia.org/wiki/Web_2.0>. Acesso em: 26 mar. 2006.

Monografia Web 2.0

Recommended

Recommended

More Related Content

What's hot

What's hot (15)

Viewers also liked

Viewers also liked (11)

Similar to Monografia Web 2.0

Similar to Monografia Web 2.0 (20)

Recently uploaded

Recently uploaded (14)

Monografia Web 2.0