#desenvolvimento, #projetos

No Comments – Extensão pro Chrome


Olá pessoas.

Após muito tempo sem posts resolvi escrever sobre uma extensão para o Chrome que fiz recentemente. Não irei me ater aos detalhes de como criar a extensão porque acredito que uma lida na documentação é suficiente para este fim.

Meu objetivo é discorrer sobre a motivação para criá-la e os recursos que utilizei.

Alguns sabem que a Web 2.0  trouxe a possibilidade dos usuários colaborarem com o conteúdo publicado através da inclusão de comentários, avaliações, personalização e compartilhamento. A ideia é linda mas o fato é que na maioria dos sites os comentários não adicionam nenhum valor ao conteúdo.

Hoje em uma lista de comentários é raro não ter pelo menos um comentário escrito com o intuito de ofender alguém. Nos grandes sites de notícias do nosso lindo país é comum ver centenas de comentários que nos fazem desacreditar na humanidade.  Às vezes a gente nem quer ler mas acaba lendo involuntariamente ao navegar pela página. E neste caso eu concordo plenamente com a frase: “A ignorância é um dom”. E não, eu não estou sendo contra a liberdade de expressão, só acho que não sou obrigada a ler esses lixos certas opiniões.

Partindo daí eu procurei por alguma extensão, pro Chrome, que bloqueasse a visualização dos comentários. Encontrei algumas, testei mas não funcionaram exatamente como eu queria e por isso eu resolvi desenvolvê-la :D.

O objetivo da extensão é bem simples: ocultar todos os comentários de todas as páginas assim que a página for carregada. Como um plus eu adicionei a possibilidade de reverter o processo porque apesar de tudo ainda tem alguns casos que queremos ver os comentários, mesmo que seja só para rir ou passar raiva.

Talk is cheap. Show me the code.

Torvalds, Linus

Então vamos ver como essa tal extensão foi feita, né.

Para que o seu código seja visto como uma extensão você precisa adicionar um arquivo chamado manifest.json que conterá as definições das propriedades.

{
  ...

  "background": {
    // Define qual é o JS principal da extensão.
    "scripts": ["background.js"]
  },

  "icons": {
    // Define o ícone exibido na lista de extensões (chrome://extensions).
    "128": "icon128.png";
  },

  "browser_action": {
    // Define o ícone exibido na omnibox.
    "default_icon": "icon.png"
  },

  "content_scripts": [ {
    // Define quais JS serão utilizados pela extensão.
    "js": [ "jquery-2.0.3.min.js", "functions.js" ],
    // Define para quais sites a extensão será carregada.
    "matches": [ "http://*/*", "https://*/*" ],
    // Define para quais sites a extensão NÃO será carregada.
    "exclude_matches": [ "https://*.github.com/*" ]
  }]

  ...
}

Como definimos o arquivo background.js como JS principal, ele será executado assim que a extensão for carregada.

// Adiciona o ouvinte para o clique no ícone da extensão.
chrome.browserAction.onClicked.addListener(function(tab) {
  // Define qual JS será executado quando receber o clique.
  chrome.tabs.executeScript(tab.id, {file: 'onclick_script.js'});
});

O arquivo onclick_script.js contém apenas uma verificação para identificar se os comentários serão exibidos ou ocultados no momento em que receber o clique.

if (show){
  show = false;
  showComments();
} else {
  show = true;
  hideComments();
}

E a ~~mágica~~ toda está acontecendo no arquivo functions.js. Aqui eu utilizei o jQuery para facilitar a vida juntamente com este sagaz código que seleciona os elementos utilizando expressão regular. A intenção era encontrar todos os elementos que tivessem nos atributos id e class o conteúdo coment(ario) ou comment. Por fim eu adicionei também um critério para buscar pelos comentários que utilizam o Disqus.

function showComments() {
  // Percorre os elementos encontrados exibindo-os.
  jQuery.each(elementsToShowById, function() {
    $(this).show();
  });
}

function hideComments() {

  var disqusExpression = '.*disqus_thread.*';
  var commentExpression = '.*[Cc]o(m|mm)ent.*';

  getVisibleElements('id', commentExpression);
  getVisibleElements('class', commentExpression);
  getVisibleElements('id', disqusExpression);

  // Percorre os elementos encontrados ocultando-os.
  jQuery.each(elementsToShowById, function() {
    $(this).hide();
  });
}

function getVisibleElements(attribute, expression) {
  // Seleciona os elementos pela expressão regular.
  $(':regex(' + attribute + ', ' + expression + ')').filter(function() {
    // Armazena apenas os elementos que estão visíveis.
    if ($(this).is(':visible')){
      elementsToShowById.push($(this));
    }
  });
}

Claro que esta é somente uma das inúmeras maneiras de fazer isto e que pretendo continuar evoluindo a extensão. De pronto já informo que a primeira melhoria a ser implementada é fazer a extensão ocultar os comentários do Youtube que não utiliza a palavra comments para definir seus elementos relacionados aos comentários.

É isso! Fiquem à vontade para instalar, testar e colaborar com a extensão.

Até breve.

PS.: Como eu disse tem casos que convém ler os comentários por isso mesmo que pareça contraditório eu leio e libero todos os comentários do blog, exceto os de spam ;).

Anúncios
Padrão
#desenvolvimento, #prosa

Estudo para certificação 70-480


Olá pessoal.

Para quem ainda não sabe, a Microsoft liberou alguns vouchers para a prova de certificação 70-480 – Programming in HTML5 with JavaScript and CSS3. E como o conteúdo já era foco dos meus estudos resolvi fazer a prova também.

Criei um projeto no GitHub para poder compartilhar os links, materiais, resumos e códigos que forem úteis para quem tiver interesse em fazer a prova. E se você também estiver estudando, sinta-se encorajado(a) em fazer um fork do projeto e submeter seu pull request 😉

Link do projeto: https://github.com/monteirobrena/estudo_70-480

Link da página do projeto: http://monteirobrena.github.com/estudo_70-480

Até breve.

Padrão
#desenvolvimento

Como utilizar jQuery + AJAX + Handler?


Olá leitores.

Continuando a ~onda~ de posts sobre jQuery dessa vez iremos fazer algo um pouco além do código HTML. Neste post veremos como é possível implementar uma comunicação entre HTML e C# sem utilizar ASP.NET WebForms nem ASP.NET MVC. Para isto utilizaremos os Handlers, que no final das contas é uma classe C#. E para ficar ainda melhor iremos utilizar AJAX e Twitter Bootstrap também.

Então vamos lá.

No Visual Studio, crie um novo projeto ASP.NET Empty Web Application. Com o projeto criado será preciso adicionar:

  • um arquivo HTML denominado index.html.
  • um arquivo Generic Handler denominado Handler.ashx.
  • uma pasta denominada javascript.
  • uma pasta denominada twitter-bootstrap.

Na pasta javascript deverá conter os arquivos:
jquery-1.7.2.min.js
less-1.3.0.min.js
jquery.form.js

E na pasta twitter-bootstrap deve conter apenas as pastas img, js e less contidas nos fontes do Twitter Bootstrap.

No arquivo index.html vamos adicionar as referências aos arquivos CSS:

<link rel="stylesheet/less" type="text/css" href="twitter-bootstrap/less/bootstrap.less">
<link rel="stylesheet/less" type="text/css" href="twitter-bootstrap/less/responsive.less">

E as referências aos arquivos JS:

<script src="javascript/less-1.3.0.min.js"></script>
<script src="javascript/jquery-1.7.2.min.js"></script>
<script src="javascript/jquery.form.js"></script>
<script src="twitter-bootstrap/js/bootstrap-modal.js"></script>

O código abaixo cria um formulário com apenas um campo e um botão. Adicione-o dentro da tag body do arquivo index.html:

<div class="span5 form-horizontal">
   <!-- Formulário -->
   <form id="form-enviar-email">
      <fieldset>
         <legend>Formulário</legend>
         <!-- Campo de e-mail -->
         <div class="control-group">
            <label for="txt-email" class="control-label">E-mail</label>
            <div class="controls">
               <div class="input-prepend">
                  <span class="add-on"><i class="icon-envelope"></i></span><input id="email" required style="text-transform: lowercase;" class="input-xlarge" placeholder="Digite seu e-mail" name="txt-email" type="email">
               </div>
            </div>
         </div>
         <!-- Botão para enviar -->
         <div class="span5 form-actions">
            <button id="btn-adicionar" type="submit" class="btn btn-primary">Enviar</button>
         </div>
      </fieldset>
   </form>
</div>

Vamos adicionar uma div com um modal para exibir o valor digitado no campo:

<!-- Modal -->
<div class="modal hide" id="div-modal">
   <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h3>Mensagem</h3>
   </div>
   <div class="modal-body">
      <!-- E-mail digitado no formulário -->
      <span id="span-email"></span>
   </div>
   <div class="modal-footer">
      <a href="#" class="btn" data-dismiss="modal">Fechar</a>
   </div>
</div>

E para finalizar o conteúdo do arquivo index.html é necessário acrescentar o código responsável pela comunicação com o Handler utilizando o jQuery Form Plugin.

<script type="text/javascript">
   $(document).ready(function () {

      // Adicionar evento de click ao botão "Enviar".
      $('#btn-enviar').click(function () {

         // Cria um conjunto de opções para envio do formulário.
         var opcoes = {

            type: 'POST',        // Define o método de envio como POST.
            url: 'Handler.ashx', // Define qual Handler será chamado.

            // Função executada se a comunicação acontecer corretamente.
            success: function (data) {

               // Adiciona o retorno no Handler para o span contido no modal.
               $('#span-email').html(data);

               // Exibe o modal.
               $('#div-modal').modal();
            },
            // Trata o erro caso aconteça alguma falha na comunicação.
            error: function (data) {
               alert("Ocorreu um erro ao executar a operação.");
            }
         };
         // Prepara o formulário para submissão via AJAX.
         $('#form-enviar-email').ajaxForm(opcoes);
      });
   });
</script>

Falta ainda o código para o Handler funcionar. Precisamos de dois métodos:
ProcessRequest – que é invocado quando o Handler for chamado pelo formulário.

public void ProcessRequest(HttpContext context)
{
   // Obtém o formulário.
   NameValueCollection formulario = context.Request.Form;
   context.Response.ContentType = "text/html";

   // Escreve o retorno do método para a saída do HTTP atual.
   context.Response.Write(ObterEmailInformado(formulario));
}

ObterEmailInformado – que captura o valor informado no campo.

protected string ObterEmailInformado(NameValueCollection formulario)
{
   // Obtém o valor do campo "txt-email".
   string email = formulario["txt-email"];

   // Cria a string de retorno com o e-mail digitado.
   StringBuilder conteudoHtml = new StringBuilder(string.Format("Email: {0}", email));

   return conteudoHtml.ToString();
}

É isso! A príncipio parece algo difícil de entender, mas tentei fazer com que o código ficasse bem simples e espero que seja útil para quem precisar fazer esse tipo de implementação.

Baixe o código completo.

Até breve 😉

Padrão
#desenvolvimento

Carousel simplificado com Twitter Bootstrap e jQuery


Olá pessoal.

Neste post iremos ver mais um plugin jQuery e Twitter Bootstrap, o Carousel. Com ele é possível criar facilmente aquelas transições de imagens. Mas aqui vamos fazer apenas uma transição de divs a título de aprendizado. Para isto aproveitaremos a estrutura feita no post sobre dropdown.

Então só falta criar um arquivo chamado index.html, e acrescentar o código abaixo dentro da tag body:

<!-- Div na qual o "carousel" será aplicado. -->
<div id="div-carousel" class="carousel slide">
   <div class="carousel-inner">
      <!-- Divs com efeito de transição. -->
      <div class="item active">
         Conteúdo da DIV 1.
      </div>
      <div class="item">
         Conteúdo da DIV 2.
      </div>
   </div>
</div>
<div class="row">
   <!-- Botões de navegação -->
   <div id="div-1" class="span2">
      <a id="a-1" class="btn" href="#div-carousel" data-slide="prev"><i class="icon-chevron-left"></i>Voltar para DIV 1</a>
   </div>
   <div id="div-2" class="span2">
      <a id="a-2" class="btn" href="#div-carousel" data-slide="next">Avançar para DIV 2<i class="icon-chevron-right"></i></a>
   </div>
</div>

Para finalizar falta acrescentar o código Javascript que aplicará o efeito do carousel:

<script type="text/javascript">
   $(document).ready(function () {

      // Aplica o efeito de "carousel" nas divs que possuirem a classe carousel.
      $('.carousel').carousel({
         interval: false
      });

      // Oculta o botão de navegação para a div 1.
      $('#div-1').hide();

      // Aplica a transição quando houver click no link AVANÇAR.
      $("#a-1").click(function () {
         $('#div-carousel').carousel(0);
         $('#div-1').hide();
         $('#div-2').show();
         return false;
      });

      // Aplica a transição quando houver click no link VOLTAR.
      $("#a-2").click(function () {
         $('#div-carousel').carousel(1);
         $('#div-1').show();
         $('#div-2').hide();
         return false;
      });
   });
</script>

Com isto implementamos a utilização de um plugin muito útil na construção de sites e sistemas um pouco mais interativos.

Baixe o código completo.

Até breve 😉

Padrão
#desenvolvimento

Popover customizado com Twitter Bootstrap e jQuery


Hi everybody.

Aproveitando o post anterior vamos testar o plugin Popover do Twitter Bootstrap. Seguir a documentação do Bootstrap e utilizar as formas padrões é super tranquilo. O problema acontece quando você precisa fazer algo mais customizado para atender sua necessidade, entretanto é ai que o aprendizado está como diria o Jorge Vercilo.

O comportamento padrão do popover é aparecer quando acontece um evento de HOVER e simplesmente desaparecer como um tooltip. Mas neste post iremos exigir um pouco mais do popover, fazendo com que o popover:

  • Apareça quando o acontecer um evento de clique.
  • Desapareça somente quando acontecer um evento de clique.

Teremos algo semelhante ao mostrado na imagem abaixo:

Imagem do popover aberto.

Popover aberto

Além disso vamos exibir o conteúdo de uma div dentro do popover, e está div contém um botão que abrirá um modal.

Então, vamos ao código.

Faça os passos do post anterior para preparar o seu arquivo HTML.

Dentro da tag body adicione o código abaixo:

<!-- Link que receberá o evento do popover ao ser clicado.-->
<a href="#" id="a-popover" class="btn btn-success">Abrir popover</a>
<!-- Div oculta que será exibida dentro do popover. -->
<div id="div-popover" class="hide">
   Conteúdo do popover.
   <br />
   <br />
   <!-- Botão dentro do popover responsável por abrir o modal. -->
   <button id="btn-modal" class="btn btn-primary">Abrir modal</button>
   <!-- Botão dentro do popover responsável por fechar o popover. -->
   <button id="btn-fechar" class="btn btn-danger" data-dismiss="clickover">Fechar</button>
</div>
<!-- Div oculta utilizada para montar o modal. -->
<div class="modal hide" id="div-modal">
   <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h3>Título modal</h3>
   </div>
   <div class="modal-body">
      Conteúdo do modal.
   </div>
   <div class="modal-footer">
     <!-- Botão dentro do modal responsável por fechar o modal. -->
     <button class="btn" data-dismiss="modal">Fechar modal</button>
   </div>
</div>

Adicione também a tag script abaixo no seu arquivo HTML.

<script type="text/javascript">
   $(document).ready(function () {
      // Associa o evento do popover ao clicar no link.
      $('#a-popover').popover({
         trigger: 'manual',
         html: true,
         title: 'Título popover',
         content: $('#div-popover').html() // Adiciona o conteúdo da div oculta para dentro do popover.
      }).click(function (e) {
         e.preventDefault();
         // Exibe o popover.
         $(this).popover('show');
      });

      $('#btn-fechar').live('click', function (e) {
         // Oculta o popover ao clicar no botão fechar.
         $('#a-popover').popover('hide');
      });

      $('#btn-modal').live('click', function (e) {
         // Oculta o popover ao clicar no botão abrir modal.
         $('#a-popover').popover('hide');
         // Abre o modal.
         $('#div-modal').modal();
      });
   });
 </script>

Pronto, agora é só testar.

Baixe o código completo aqui.

Até breve 😉

Padrão
#desenvolvimento

Dropdown animado com Twitter Bootstrap e jQuery


Olá pessoas.

Neste post iremos fazer um dropdown com efeito slideToggle, mas acredito que com estes passos seja possível aplicar vários outros efeitos.

Eu sei que existem inúmeros plugins que fazem isto, mas queria fazer algo mais simples utilizando apenas jQuery e o Bootstrap.

Então vamos preparar a estrutura para criar o dropdown:

  • Baixe o jQuery, o less o Bootstrap.
  • Crie uma pasta chamada dropdown.
  • Crie uma pasta chamada javascript dentro da pasta dropdown.
  • Copie jquery-1.7.2.min.js para a pasta javascript dentro da pasta dropdown.
  • Copie less-1.3.0.min.js para a pasta javascript dentro da pasta dropdown.
  • Crie uma pasta chamada twitter-bootstrap dentro da pasta dropdown.
  • Extraia o arquivo baixado do Bootstrap e copie as pastas img, js e less para dentro de dropdown/twitter-bootstrap.
  • Crie um arquivo index.html dentro da pasta dropdown.
  • Adicione as referências aos arquivos CSS.
<link rel="stylesheet/less" type="text/css" href="twitter-bootstrap/less/bootstrap.less">
<link rel="stylesheet/less" type="text/css" href="twitter-bootstrap/less/responsive.less">
  • Adicione as referências aos arquivos Javascript.
<script src="javascript/less-1.3.0.min.js"></script>
<script src="javascript/jquery-1.7.2.min.js"></script>
<script src="twitter-bootstrap/js/bootstrap-dropdown.js"></script>
  • Adicione o código abaixo dentro da tag body.
<div class="btn-toolbar">
   <!-- Div para agrupar os botões com texto e com ícone -->
   <div class="btn-group">
      <button id="btn-selecione" class="btn btn-large dropdown-toggle span4" style="text-align: left;">
         Selecione
      </button>
      <button id="btn-caret" class="btn btn-large dropdown-toggle" data-toggle="dropdown">
         <i class="caret"></i>
      </button>
      <!-- Lista de opções -->
      <ul id="ul-dropdown-menu" class="dropdown-menu" style="width: 400px;">
         <!-- Itens -->
         <li id="item-1"><a href="#">Item 1</a></li>
         <li id="item-2"><a href="#">Item 2</a></li>
         <li id="item-3"><a href="#">Item 3</a></li>
      </ul>
   </div>
</div>
<br />
<!-- Exibição do texto referente ao item selecionado -->
<div class="row">
   <div class="alert alert-success span4">
      <span id="span-item-selecionado"></span>
   </div>
</div>
  • Agora falta criarmos o código Javascript para adicionar a aparência e os efeitos ao nosso dropdown.
<script type="text/javascript">
   $(document).ready(function () {
      // Adiciona a aparência de dropdown para os elementos que possuem a classe dropdown-toggle.
      $('.dropdown-toggle').dropdown();
   });

   // Adiciona o efeito slideToogle ao clicar nos botões.
   $('#btn-selecione, #btn-caret').click(function () {
      $('#ul-dropdown-menu').slideToggle();
   });

   // Altera os textos de acordo com o item selecionado.
   $('#ul-dropdown-menu li').click(function () {
      $("#span-item-selecionado").text($(this).text());
      $("#btn-selecione").text($(this).text());
      $('#ul-dropdown-menu').slideToggle();
   });
</script>

Com isto temos um resultado semelhante ao mostrado nas imagens abaixo:

Imagem do dropdown aberto

Dropdown aberto

Imagem do dropdown selecionado

Dropdown selecionado

Este código foi testado no Firefox 14, para baixar o código completo clique aqui.

Isso é tudo pessoal 😉

Padrão
#desenvolvimento

Desenvolvendo um leitor de RSS com jQuery Mobile


Olá pessoal.

Procurando por meios de começar o desenvolvimento para dispositivos móveis encontrei o Sencha Touch e o jQuery Mobile. Brinquei um pouco com Sencha Touch mas percebi que seria necessário estudar o ExtJs primeiro. Então preferi aprofundar no jQuery Mobile e utilizar o conhecimento que tenho sobre jQuery.

Resolvi fazer um leitor de RSS para o meu blog que pode ser acessado aqui, e o código completo encontra-se no meu GitHub.

Inicialmente tive um pouco de dificuldade em ler o feed, já que o RSS do WordPress não é disponibilizado como JSON. (Observação: Para quem possui uma instância do WordPress instalada, existem vários plugins para exportar o feed como JSON.) Após pesquisar encontrei o Google Feed API que faz o download do RSS em vários formatos, incluindo JSON o qual escolhi para fazer o meu leitor de feeds.

Vamos ao código:

Primeiro vamos configurar nossa página para utilizar os plugins necessários.

<!DOCTYPE html>
   <html>
      <head>
         <meta charset="utf-8" />
         <title>Reflexões Brenianas - Feed</title>
         <!-- CSS do jQuery Mobile -->
         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
         <!-- jQuery -->
         <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
         <!-- jQuery Mobile -->
         <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js">
         <!--
              Google Feed API
              Será necessário gera uma chave através do link http://code.google.com/apis/loader/signup.html
         -->
         <script type="text/javascript" src="https://www.google.com/jsapi?key=[SUA_CHAVE_GERADA]"></script>
      </head>

O corpo da página já utiliza as tags do HTML 5 (section, header, footer), mas também é possível fazer com divs.

   <body id="page_body">
      <!-- Início da home -->
      <section id="home" data-role="page">
         <!-- Cabeçalho -->
         <header data-role="header" data-position="fixed">
            <center>
               <h1>Reflexões Brenianas - Feed</h1>
            </center>
         </header>
         <!-- Conteúdo -->
         <div data-role="content">
            <ul data-role="listview">
            </ul>
         </div>
         <!-- Rodapé -->
         <footer data-role="footer" data-position="fixed">
            <center>
               <h3>monteirobrena</h3>
            </center>
         </footer>
      </section>
      <!-- Fim da home -->

Agora falta a codificação Javascript facilitada pelos plugins utilizados 😉

   <script type="text/javascript">
      // Carrega a API do Google para download do Feed.
      google.load("feeds", "1");

      // Inicializa a obtenção do feed.
      function initialize() {

         // Obtém o feed do blog.
         var feed = new google.feeds.Feed("https://monteirobrena.wordpress.com/feed");

         // Define a quantidade de entradas do feed que será buscada.
         feed.setNumEntries(10);

         // Carrega o arquivo do feed.
         feed.load(function(result) {

            // Obtém a página.
            var $page = $("#home");

            // Remove o conteúdo contido na div que utiliza a classe 'content'.
            $page.find(".content").empty();

            // Verifica se houve algum erro ao buscar o feed.
            if (result.error) {
               alert("Nenhum post encontrado.");
            }else{

               // Cria uma nova lista de posts.
               $page.find(".content").html("<ul></ul>");

               // Obtém a lista onde os posts serão adicionados.
               $list = $page.find(".content ul");

               // Percorre a lista de posts.
               for (var count = 0; count < result.feed.entries.length; count++) {

                  // Obtém o item do feed pelo índice.
                  var entry = result.feed.entries[count];

                  // Obtém o título do post.
                  var title = entry.title;

                  // Obtém o link do post.
                  var link = entry.link;

                  // Constrói o item da lista com o título do post e cria um link com o índice.
                  var strLink = '<li><a href="javascript:create_page(' + count + ',\'' + title + '\');">';

                  strLink += title;

                  strLink += '</a></li>\n';

                  // Atribui o html montado para um item.
                  var item = $(strLink);

                  // Adiciona o item na lista de posts.
                  $list.append(item);
            }
            // Atribui a lista montada à listview
            $list.listview();
         }
      });
   }
   // Chama a função que inicializa.
   google.setOnLoadCallback(initialize);

Com este código já conseguimos montar nossa home carregando uma lista com os posts.

Para finalizar falta criarmos uma página com o post no momento que um item da lista for clicado, ou melhor, quando ele receber um evento TAP.

// Cria uma página com o post
function create_page(page_id, title) {

   // Obtém o título.
   var titlePost = title;

   // Obtém o feed do blog.
   var feed = new google.feeds.Feed("https://monteirobrena.wordpress.com/feed");

   // Define a quantidade de entradas do feed que será buscada.
   feed.setNumEntries(10);

   // Carrega o arquivo do feed.
   feed.load(function(result) {

      // Get the content of page.
      var $page = $("#home");

      // Remove o conteúdo contido na div que utiliza a classe 'content'.
      $page.find(".content").empty();

      // Verifica se houve algum erro ao buscar o feed.
      if (result.error) {
         alert("Post não encontrado.");
      }else{
         // Percorre a lista de post.
         for (var count = 0; count < result.feed.entries.length; count++) {

            // Verifica se o título é igual.
            if (titlePost == result.feed.entries[count].title){

               // Obtém o item do feed pelo índice.
               var entry = result.feed.entries[page_id];

               // Obtém o conteúdo do post.
               var post = entry.content;

               // Monta a tela do post.
               var strPost = '<section id="page_' + page_id + '" data-role="page">';
               strPost += '<header data-role="header" data-position="fixed">';

               // Adiciona um link com o estilo de um botão de voltar que chama a função para recarregar a lista de posts.
               strPost += '<a href="#home" data-icon="back" onclick="initialize();">Voltar</a>';

               strPost += '<center><h1>Reflexões Brenianas - Feed</h1></center></header>';
               strPost += '<div data-role="content">';

               // Adiciona o título do post.
               strPost += '<h3>' + title + '</h3>';

               // Adiciona o conteúdo do post.
               strPost += post + '</div>';

               strPost += '<footer data-role="footer" data-position="fixed">';
               strPost += '<center><h3>monteirobrena</h3></center></footer></section>';

               // Adiciona o html montado à página.
               $('#page_body').append(strPost);

               // Inicializa a página.
               $.mobile.initializePage();

               // Navega até a página.
               $.mobile.changePage("#page_" + page_id, "slide", true, false);
            }
         }
      }
   });

Possivelmente deve existir formas mais fáceis para criar uma nova página sem precisar, por exemplo, criar novamente o section e poder reaproveitar o cabeçalho e o rodapé. Mas preferi mostrar um jeito mais didático.

A quem interessar e quiser aprender um pouco mais sobre jQuery Mobile recomendo a leitura do livro jQuery Mobile O’Reilly e jQuery Mobile First Look.

Até breve 😉

Padrão