Web social. Site Pessoal

Vejamos como criar uma web social a partir de Webmatrix de Microsoft.

Por Jaime Peña Tresancos - Tradução CRV


Publicado em: 27/2/13
Valorize este artigo:
Ao longo do Manual de WebMatrix vimos muitas das utilidades que nos oferece este programa para criar de uma maneira simples muitos tipos de projetos web.

No presente artigo vamos fazer um exemplo, mediante um layout predefinido em WebMatrix, com o que mostraremos até que ponto é fácil criar um site pessoal com interessantes capacidades sociais. Criaremos um site que constará de:

  1. Uma página inicial de apresentação e links
  2. Outra que contém um blog de notícias, obtidas de um foro externo
  3. Outra que se conecta com nossa página pessoal de fotos em Flickr
  4. Uma última que dá acesso aos Tweets de uma determinada conta de Twitter
Começaremos criando um novo projeto baseado em um layout (Template).

Clicaremos sobre Templates na tela inicial de WebMatrix.

Dentre os layouts existentes, selecionamos Personal Site, damos a ele um Site Name, por exemplo WebPersonal, e finalizamos clicando sobre o botão OK.

Já na área de trabalho de WebMatrix, clicamos sobre Files, na área inferior esquerda da janela de WebMatrix, para mostrar o painel de edição e, no momento, fundamentalmente ver toda a serie de arquivos criados e que possam ser de nosso interesse.

Observemos, desdobrando o nó da pasta Contents, nos três que contêm:

  • _Blog.cshtlm: é uma maquete para acesso a um blog RSS
  • _Photos.cshtlm: a maquete para acesso a páginas pessoais Flickr
  • _Twitter.cshtlm: outra maquete para exposição de Tweets

Para ver o comportamento inicial, cliquemos sobre o botão Run ou então cliquemos com o botão direito do mouse sobre WebPersonal e selecionemos Launch in browser.

Inicialmente não funcionará nenhum dos hiperlinks da página Web de entrada: BLOG, TWITTER e PHOTOS, a não ser para nos levar a páginas de informação, como veremos em cada um dos casos que trataremos a seguir, uma programação simples fará com que mostrem informação viva de sites externos.

Programação e personalização da página BLOG

Na maquete de um blog está pré-programado o acesso a um site que proporcione informação em forma de feeds, que serão mostrados como breves entradas que se podem expandir para sua leitura completa.

Nota: Só suporta feeds RSS 2.0 e Atom 1.0.

O código fonte da página correspondente, _Blog.cshtml, é o que segue e ressaltamos nele a linha de código que necessitamos programar para que funcionem os links para feeds do blog.

Em resumo, se trata de passar a referencia a URL (Universal Resource Locator) do endereço do servidor dos feeds; na figura que segue se mostra o que nos indicaria se não o colocássemos ou se fosse incorreto.

@{
    //Example: http://www.zdnet.com/blog/microsoft/rss
   string blogUrl = "";
}

@if (String.IsNullOrEmpty(blogUrl)) {
    <p>
       Welcome to the RSS page! Please view the Contents/_Blog.cshtml page and provide a URL for the blog that you would like to display. Note that this page only supports RSS 2.0 and Atom 1.0 feeds.
   </p>
} else {
    var feedItems = BlogHelper.GetFeedItems(blogUrl);
       foreach (var item in feedItems) {
         <article class="newsitem">
             <div class="newsbody">
                <header>
                   <h1>@item.Title</h1>
                  <h2>@item.Author</h2>
               </header>
                <p>@Html.Raw(item.HtmlContent)</p>
               <a href="@item.WebUrl" target="_blank">Read more</a>
               <p class="pubdate">Published: <span>@item.PublishedDate.ToLocalTime().DateTime</span></p>
            </div>
          </article>
   }
}

Imaginemos que colocamos a URL do canal RSS de notícias de MSN Espanha:

@{
    //Example: http://www.zdnet.com/blog/microsoft/rss
   string blogUrl = "http://noticias.es.msn.com/rss";
}

Introduzido o dado, clicamos sobre o botão Run ou então clicamos com o botão direito do mouse sobre WebPersonal e selecionamos Launch in browser.

Já na janela do explorador de Internet, clicamos sobre o hiperlink BLOG e nos mostrará algo similar ao reunido na figura anexa.

Há inúmeros sites que podemos colocar, por exemplo, teste com os dois que seguem; cremos que é de especial interesse o segundo dado que se refere a como criar um link a modo de blog para uma página pessoal de Flickr:

Programação e personalização da página TWITTER

Com relação à página que se exibirá ao clicarmos sobre o hiperenlink TWITTER, nos mostrará um listado dos últimos Tweets que tenhamos criado em nossa conta ou que se tenham criado na conta que lhe seja passada , se for o caso-.

O código fonte da página correspondente, _Twitter.cshtml, é o que segue e ressaltamos nele a linha de código que necessitamos programar para que funcionem os links para Tweets.

Resumindo se trata de lhe passar, nada mais, a referência de m nome de link Twitter (@identificador); na figura que segue se mostra o que nos indicaria se não o colocássemos ou se fosse incorreto.

@{
    // provide your Twitter screen name
    string screenName = "";
}

@if (String.IsNullOrEmpty(screenName)) {
    <p>
       Welcome to the Twitter Page! Please view the Contents/_Twitter.cshtml page and fill out your Twitter screen name.
    </p>
} else {
    var tweets = TwitterHelper.GetUserTimelime(screenName);
    if (tweets.Count > 0) {
       <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

       foreach (var item in tweets) {
          <article class="twitteritem">
             <div class="twitterbody">
                <header>
                   <h1>@item.Title</h1>
                </header>
                <p>@Html.Raw(item.HtmlContent)</p>
                <p class="pubdate">Tweeted <span>@item.PublishedDate.ToLocalTime().DateTime.ToShortTimeString()</span></p>
                <ul class="twitteractions">
                   <li>@TwitterHelper.ReplyToTweet(item.Id)</li>
                   <li>@TwitterHelper.Retweet(item.Id)</li>
                   <li>@TwitterHelper.FavoriteTweet(item.Id)</li>
               </ul>
             </div>
          </article>
       }
    } else {
       <p>There was a problem contacting Twitter: you may be behind a proxy or have hit your request limit temporarily.</p>
    }
}

O único que teremos que colocar é o Screen Name de usuario de Twitter correto (@jpt219, no meu caso).

Para testá-lo, clicamos sobre o botão Run ou então clicamos com o botão direito do mouse sobre WebPersonal e selecionamos Launch in browser.

Já na janela do explorador de Internet, clicamos sobre o hiperelink TWITTER e nos mostrará algo similar ao reunido na figura anexa.

Programação e personalização da página PHOTOS

Esta página, apesar do seu nome tão genérico, está pré-programada para a exposição de galerias de fotos de Flickr ,exclusivamente-.

O código fonte da página correspondente, _Photos.cshtml, é o que segue e ressaltamos nele as linhas de código que necessitamos programar para que funcionem os links para Flickr.

Na figura que segue se mostra o que nos indicaria se não as colocássemos ou se fossem incorretas.

@{
    //Set Flickr parameters
   string flickrKey = "";
    string flickrUserName = "";
}

@if (String.IsNullOrEmpty(flickrKey) || String.IsNullOrEmpty(flickrUserName)) {
    <p>
       Welcome to the Photos Page! Please look at the Contents/_Photos.cshtml page and set up Flickr photo display.
       You can get Flickr API keys
       <a href="http://www.flickr.com/services/apps/create/apply">here</a>.
    </p>
} else {
    var photos = Flickr.GetPhotos(flickrKey, flickrUserName);
    <h1>My Flickr Photos</h1>
    <ul class="thumbnails">
       @foreach (var item in photos) {
          if (item.PhotoUrl != null) {
             <li>
             <a href="@item.WebUrl" target="_blank">
                <img src="@item.PhotoUrl" alt="Photo of @item.Title" class="thumbnail-border"/>
                <span class="image-overlay">@item.Title</span>
             </a>
             </li>
          }
       }
    </ul>
}

Supondo que não tivéssemos os dados, prosseguiríamos clicando em here.

Isso nos levaria às páginas de Flickr nas que, se já somos usuários, poderemos pedir os dados, preenchendo os formulários correspondentes.

Se não formos ser usuários, deveremos registrar-nos como tal e posteriormente voltar a este ponto.

Posteriormente, receberemos por e-mail 2 dados:

  • chave, com o formato de 32 caracteres
  • segredo, com o formato de 16 caracteres
Deveremos utilizar a chave como flickrKey de modo que ficaria o código seguinte, observe que flickrUserName é o nome completo de registro, não o nome curto de usuário:

@{
    //Set Flickr parameters
   string flickrKey = "f1deb83122ab69bcf91b35f9ad70cbcc";
    string flickrUserName = "Jaime Peña-Tresancos";
}

Nota: Los datos flickrKey y flickrUserName aquí dados son ficticios

Finalmente para testá-lo, clicamos sobre o botão Run ou então clicamos com o botão direito do mouse sobre WebPersonal e selecionamos Launch in browser.

Já na janela do explorador de Internet, clicamos sobre o hiperlink PHOTOS e nos mostrará algo similar ao reunido na próxima figura.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

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