WebMatrix e a Web 2.0

Neste artigo iremos esmiuçando alguns dos Helpers sociais que dispõe WebMatrix, para integrar as aplicações web desenvolvidas com serviços da web 2.0, como Facebook, Twitter, Delicious, etc.

Por Javier Holguera - Tradução de Celeste Veiga


Publicado em: 30/1/13
Valorize este artigo:
Todos sabemos, a estas alturas, da importância de integrar corretamente nossas aplicações web com o que se deu por chamar a Web 2.0. Facebook, Twitter, Delicious, Google Buzz, etc., são alguns dos serviços da web social que é importante ter presentes em nossos sites, já que nos proporcionam visibilidade e informação valiosa.

WebMatrix, em seu afã de simplificar o desenvolvimento de websites, oferece um grande número de classes Helper para nos facilitar trabalhar com este tipo de serviços com apenas um par de linhas de código.

1. Twitter

Cada vez há menos web sites que não tenham sua própria conta no Twitter, desde oferecer links à informação que vão publicando, dialogar com os usuários, etc. Ter presença no Twitter e integrar essa presença no website, vem a ser um todo em um. Na grande maioria dos casos, a presença do Twitter no web site se realiza mediante a integração de um dos controles de timeline que nos oferece a própria web de Twitter.

A integração é simples, basta copiar e colar um pedaço de código relativamente grande em nossas páginas. No entanto, ser relativamente simples e rápida não significa que seja elegante ou adequada, posto que estamos introduzindo algo totalmente alheio no nosso desenvolvimento. Seria, portanto, muito mais desejável fazer essa integração com código próprio. Aqui é onde aparece WebMatrix e um de seus Helpers para nos ajudar: o helper Twitter.

Este helper tem dois métodos principais com que trabalhar:

  • Profile: este método recupera a informação específica para uma conta determinada. Seus parámetros, ademais do nome da conta, servem para personalizar o aspecto que vai ter a caixa na que se apresenta a informação.
  • Search: este método serve para mostrar a informação relacionada com uma cadeia de busca, dentro de Twitter. Igual ao método anterior, possui um grande número de parâmetros que servem para personalizar o aspecto da caixa que mostra os resultados.
Vejamos um exemplo de uso rápido. Imaginemos que temos uma aplicação com uma barra lateral e queremos mostrar nela a informação relacionada com uma conta de Twitter. O fragmento de código que necessitaríamos seria algo como o seguinte:

<h4>Barra lateral</h4>
@Twitter.Profile("deswebcom")

Como podemos ver, uma e nada mais que uma linha de código necessitamos para integrar corretamente Twitter em nossas páginas. Se quiséssemos, em lugar de mostrar um perfil concreto, fazer uma busca, a forma seria a mesma, salvo que chamaríamos o método "Search". O resultado, em ambos os casos, seria algo parecido à seguinte imagem.

Ambos, como já comentávamos antes, podem receber uma serie de parâmetros opcionais que servem para personalizar o aspecto da caixa. Na bibliografia se podem encontrar links de páginas nas que se enumeram estes parâmetros assim como seu uso.

2. Facebook

Junto com Twitter, a outra rede social por excelência nos dias de hoje. Neste caso, o Helper que temos a nossa disposição nos permite acrescentar o famoso botão "Eu gosto". Este Helper, chamado como é obvio "Facebook", tem um único método Like. Este método tem 6 parâmetros opcionais. A parte dos habituais relacionados com o aspecto, estes são os mais relevantes:
  • Url: o primeiro parâmetro nos permite modificar a url que o usuário vai indicar que gosta. Por padrão, a url será a da página que contém o botão.
  • Action: podemos mudar a ação por padrão, "Eu gosto", por uma como "Recomendo", mediante este parâmetro.
  • ShowFaces: nos serve para indicar, mediante um booleano, se queremos que sejam mostradas as caras daquelas pessoas que já tenham indicado que gostam deste mesmo item.
Um exemplo de código com vários botões mostrando os valores para os distintos parâmetros:

<div>
<br/>
@Facebook.LikeButton("http://www.desarrollo.com")
<br/>
@Facebook.LikeButton(
url: "http://desarrolloweb.com",
action: "recommend",
width: 350,
layout: "button_count",
showFaces: true)
<br/>
@Facebook.LikeButton(
url: "http://desarrolloweb.com",
width: 350,
layout: "box_count",
showFaces: true)
<br/>
@Facebook.LikeButton(
url: "http://desarrolloweb.com",
width: 350,
showFaces: true,
colorScheme: "dark")
</div>

E uma imagem sobre o aspecto que vão ter os distintos botões.

3. Links para compartilhar

Existem bastantes agregadores de webs, sites de links, páginas de Microblogging, etc., desde as que nossos usuários podem fazer eco dos conteúdos de nossas aplicações web. Fazer uso destes links também resulta tão, simples quanto os exemplos que vimos até agora de integração com outros serviços da web 2.0, como Facebook ou Twitter.

Esta integração de links de compartilhamento se faz mediante o Helper LinkShare, que nos gera automaticamente links com os seguintes sites: Delicious, Digg, Google Buzz, Facebook, Reddit, StumbleUpon e Twitter. Só tem um método que possamos invocar, "GetHtml", e um único parâmetro obrigatório: o título da página, para que conste em alguns sites que podem necessitar (como Delicious, por exemplo).

O resultado seria uma fila de botões similares à seguinte imagem:

E se pressionamos, por exemplo, no botão de Twitter nos conectará a Twitter.com e depois de nos logarmos nos criará automaticamente um twitt para compartilhar o link como se mostra na seguinte imagem.

4. Bing

O último serviço que podemos consumir não é exatamente "social", mas nem por isso deixa de ser útil conhecer as possibilidades que seu Helper nos oferece.

Se trata do buscador Bing, com cujo Helper poderemos realizar buscas de forma simples. Este Helper expõe dois métodos: SearchBox e AdvancedSearchBox. Quanto ao primeiro, pode receber dois parâmetros, a url do site e a largura da caixa, nenhum deles é obrigatório. Um exemplo de uso de ambas as caixas no código seria este:

<div>
<br/>
@Bing.SearchBox()
</div>
<div>
<br/>
@Bing.AdvancedSearchBox()
</div>

O resultado seria a clássica caixa com um botão à direita em forma de lupa, com fundo laranja. Se utilizamos essa caixa para realizar uma busca, nos abre uma nova janela na que poderemos navegar pelos resultados de Bing para esse termo.

Contudo, muito mais espetacular é a opção de busca avançada, posto que, embora a caixa seja idêntica, ao buscar não se abrirá uma nova janela, mas uma espécie de popup enganchado à caixa que nos mostrará os resultados, sem sair de nosso web site. Na imagem seguinte se pode ver esta janela emergente contendo os resultados de busca para o termo "Teste".

5. Conclusões

Vimos até aqui como utilizar alguns dos helpers que nos oferece WebMatrix por padrão para criar surpreendentes efeitos e integrações em nossos web sites, com um esforço mínimo.

Em próximos artigos veremos como criar nossos próprios helpers para evitar repetir certos fragmentos de código HTML uma e outra vez, encapsulando-os dentro.

6. Bibliografia

API de helpers de WebMatrix
Vídeo em espanhol sobre criação de sites com WebMatrix
Centro de desenvolvimento ASP.NET
Site Oficial de WebMatrix






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato