Monografia Web 2.0

Web 2.0A migração para a Web socialA migração para a Web social

Aluna: Crystiam Kelle Pereira e SilvaCrystiam Kelle Pereira e SilvaOrientador: Tarcísio de Souza LimaTarcísio de Souza Lima

Web 2.0 Agenda IntroduçãoIntrodução

Mudança de paradigma

Web como plataforma

Características da Web 2.0Características da Web 2.0 Definição

Características

Elementos da Web 2.0Elementos da Web 2.0 Usuário

Conteúdo

Design

Publicidade e Marketing

A plataforma Web 2.0A plataforma Web 2.0 Serviços Web 2.0

Estudo de casoEstudo de caso

ConclusãoConclusão

Críticas à Web 2.0Críticas à Web 2.0

Trabalhos FuturosTrabalhos Futuros

Web 2.0 IntroduçãoIntrodução Anos 1980 Anos 1980

Criação da Web Interesse comercial na rede Sites textuais, poucas imagens

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

AtualmenteAtualmente Sites dinâmicos Interatividade Serviços simples Participação e colaboração

Web 2.0 Quebra de ParadigmasQuebra de Paradigmas

tags ("folksonomy")diretórios (taxonomia)wikissistema de gerenciamento de conteúdo

Syndication (disponibilização de conteúdo) stickiness

ParticipaçãoPublicaçãoweb servicesscreen scraping

Custo por clickVisitas a páginasotimização de ferramentas de buscaespeculação de domíniosupcoming.org e EVDBeviteBlogswebsites pessoaisWikipediaEnciclopédia Britânica onlineNapsterMp3.comBitTorrentAkamaiFlickrOfotoGoogle AdSenseDoubleClick

Web 2.0Web 1.0

Web 2.0 Web como plataformaWeb como plataforma

Aplicativos que utilizam a rede como plataformaAplicativos que utilizam a rede como plataforma

Web oferece serviços para o desenvolvimentoWeb oferece serviços para o desenvolvimento

Vantagens 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.0Definição de Web 2.0

"Web 2.0 é a mudança para uma internetinternet como plataformacomo 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 se tornarem melhores quanto mais são usados pelas pessoaspessoas, aproveitando a inteligência coletivainteligência coletiva“

(O’ REILLY, 2005).

Web 2.0 Características da Web 2.0Características da Web 2.0 ParticipaçãoParticipação

Inteligência Coletiva: Wikipedia

Comunidade: Orkut, Gazzag

CooperaçãoCooperação

O controle de dados não é uma prática desejável

Utilização e a melhoria de serviços já criados: Google Maps

UsabilidadeUsabilidade

Facilitar o uso, intuitivo

Testes feitos com grande freqüência e muitos usuários

Web 2.0 Características da Web 2.0Características da Web 2.0

Descentralização dos dadosDescentralização dos dados

Aplicativos em diversos dispositivos

Arquitetura P2P

Confiança no conteúdo dos usuáriosConfianç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

Web 2.0 Características da Web 2.0Características da Web 2.0

Experiência rica para o usuárioExperiência rica para o usuário

Páginas mais leves, interativas e agradáveis

Formato próximo ao Desktop

PersonalizaçãoPersonalização

Usuário escolhe o conteúdo

Informações recebidas em diferentes dispositivos

Atualizações freqüentesAtualizações freqüentes

Lançar logo, lançar sempre

Web 2.0 Ferramentas Web 2.0Ferramentas Web 2.0

Wikis

Blogs

Sites sociais

Bookmarking social

Vídeos e fotos

Web 2.0 Elementos da Web 2.0Elementos da Web 2.0

UsuárioUsuário Usuário é o principal objetivo das companhias

Cria, avalia, edita, organiza, compartilha, escolha como e o que deseja ver

Serviços devem estimularestimular a participação do usuário

Usuário não adiciona conteúdo sem obter vantagemsem obter vantagem

Vantagem econômica

- Usuário faz a manutenção do sistema


ConteúdoConteúdo

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

selecioná-lo e distribuí-lo.


OrganizaçãoOrganização Folksonomia – tags

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

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


DesignDesignA pretensão do designer é estimular o usuário a participar

da Web e permitir a ele autonomiaautonomia, facilidade e essencialmente simplicidadesimplicidade na sua busca por informação

e na colaboração no desenvolvimento desta.

TendênciasTendê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


PublicidadePublicidade

“O marketing viralmarketing viral e a publicidade viralpublicidade 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)


PublicidadePublicidade

EmpresaEmpresa

ConsumidorConsumidor ConsumidorConsumidor ConsumidorConsumidor

Web 1.0

Web 2.0

Web 2.0 A plataforma Web 2.0A plataforma Web 2.0

Web 2.0 Serviços Web 2.0 - RSSServiç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

RDFRDF 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 - RSSServiços Web 2.0 - RSS

Fácil para codificação manualÚtil para ser integrado a sistemas de Web Semântica

SimplicidadeDetalhamento da especificação

Utiliza namespaces XML de acordo com o padrão W3C

Utiliza namespaces XML de acordo com o padrão W3C

Foi originariamente documentada pela Netscape e aperfeiçoada pela

Userland.Baseada na versão RSS 0.91.

Desenvolvida por um grupo de desenvolvedores através da

continuação da versão RSS 0.9

Really Simple SyndicationRDF Site Summary

RSS 2.0RSS 1.0

Web 2.0 Serviços Web 2.0 – RSS 1.0Serviços Web 2.0 – RSS 1.001 <?xml version="1.0"?>02 <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"03 xmlns="http://purl.org/rss/1.0/"04 xmlns:dc="http://purl.org/dc/elements/1.1/">05 <channel rdf:about="http://exemplo.com/news.rss">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="http://exemplo.com/2002/09/01/"/>12 <rdf:li resource="http://exemplo.com/2002/09/02/"/>13 </rdf:Seq>14 </items>15 </channel>16 <item rdf:about="http://exemplo.com/2002/09/01/">17 <title></title>1819 <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.0Serviços Web 2.0 – RSS 2.0

01 <?xml version="1.0"?>02 <rss version="2.0">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 – Serviços Web 2.0 – MashupsMashups

Um mashupmashup é 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

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

Web 2.0 Serviços Web 2.0 - AJAXServiç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:O AJAX incorpora as seguintes tecnologias:

Padrões de apresentação utilizando XHTMLXHTML e CSSCSS;

Apresentações dinâmicas e interativas utilizando Document Document Object ModelObject Model - DOMDOM;

Manipulação de elementos de uma página utilizando XMLXML e XSLTXSLT;

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

e JavaScriptJavaScript que junta tudo isso. (GARRET, 2005)


Web 2.0 Estudo de casoEstudo de caso

Protótipo do portal da UFJFProtótipo do portal da UFJF

ObjetivoObjetivo: Criar um website mais interativointerativo e permitir a distribuiçãodistribuição 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 acessibilidadeacessibilidade e usabilidadeusabilidade.

Foram usados PHP e MySQL.


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


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

01 <?xml version="1.0" 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.gif12 </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=2521 </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) inscreve25 famílias que se interessam em hospedar alunos...</P> ]]> 26

</description> 27 <guid>http://www.portal.ufjf.br/teste/ver_not.php?idnoticia=2528 </guid>29 </item>30 </channel>31 </rss>


Agregação do conteúdo RSS do Agregação do conteúdo RSS do websitewebsite Tempo Agora Tempo Agora

01 function geraRSS($tabs,$endereco,$origem,$tipo='dl',$maxitens){02

if($tipo!='ul' && $tipo!='ol' && $tipo != 'dl'){ 0echo "<p class='error'>No momento são válidos apenas 'ul', 'ol' 'dl' para

005 tipo</p>";}06 $metas = array();07 $xml2a = new XMLToArray();08 $root_node = $xml2a->parse(file_get_contents($endereco));09 $drive = array_shift($root_node["_ELEMENTS"]);10 $ret = $tabs."<$tipo>\n";11 $i = 0;12 13 foreach($drive["_ELEMENTS"][0]["_ELEMENTS"] as $elem){14 if($elem["_NAME"]=="item" && $i<$maxitens){15 $i++; 16 foreach($elem["_ELEMENTS"] as $not){17 $$not["_NAME"] = $not["_DATA"];18 }19 if($tipo=='dl'){20 $ret .= $tabs." <dt><a href='".$link."' target='_blank'>" 21 .htmlentities(utf8_decode($title))."</a></dt>\n";22 $ret .= $tabs."<dd>".htmlentities(utf8_decode($description))."</dd>\n";23 }else{24 $ret .= $tabs."<li>25 <a href='".$link."'target='_blank'>".26 htmlentities(utf8_decode($title))." \n";27 $ret .= $tabs." 28 <span class='desc'>29 ".htmlentities(utf8_decode($description))."30 </span>31 </a></li>\n";32 }33 }else{ //pegando os outros meta dados34 $metas[$elem["_NAME"]] = $elem["_DATA"];35 }36 }37 $ret .= $tabs."</$tipo>\n";38 $ret .= $tabs."<p>Fonte: <a href='".$metas["link"]."' target='_blank' ";39 $ret .= "title='".htmlentities40 (utf8_decode($metas["copyright"]))."'>".$origem."</a></p>\n";41 //return $ret;42 43 $str = explode("<br />", $description);


ParticipaçãoParticipaçã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 greyboxgreybox.


AvaliaçãoAvaliação

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

Usada biblioteca Ajax Poller

01 // Insere novo voto na base de dados0203 if($optionId)mysql_query("insert into poller_vote(optionID,ipAddress)04 values('".$optionId."','".getenv("REMOTE_ADDR")."')");0506 //Retorna resultado como um XML07 echo '<?xml version="1.0" ?>';0809 $res = mysql_query("select ID,pollerTitle from 10 poller where ID='".$pollId."'");11 if($inf = mysql_fetch_array($res)){12 echo "<pollerTitle>".$inf["pollerTitle"]."</pollerTitle>\n";1314 $resOptions = mysql_query("select ID,optionText from 15 poller_option where pollerID='".$inf["ID"]."' 16 order by pollerOrder") or die(mysql_error());17 while($infOptions = mysql_fetch_array($resOptions)){18 echo "<option>\n";19 echo "\t<optionText>".$infOptions["optionText"]."</optionText>\n";20 echo "\t<optionId>".$infOptions["ID"]."</optionId>\n";2122 $resVotes = mysql_query("select count(ID) from 23 poller_vote where optionID='".$infOptions["ID"]."'");24 if($infVotes = mysql_fetch_array($resVotes)){25 echo "\t<votes>".$infVotes["count(ID)"]."</votes>\n";26 }27 echo "</option>";28 }29 }30 exit;

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


Avaliação dos resultadosAvaliaçã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 passosPró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;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ãoConclusã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.0Críticas à Web 2.0

CríticasCríticasComo 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???O comportamento do usuário é o mesmo???A forma de gerar conteúdo não mudou??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 FuturosTrabalhos 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áficasReferê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.

Web 2.0

Perguntas?

Business

Monografia Web 2.0