#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.

Anúncios
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
#prosa

Projeto RoR nas nuvens – Parte 1


Olá pessoal.

Já tem um bom tempo que venho tentando me aprofundar nos estudos de Ruby on Rails. Neste intuito utilizei os livros: Use a cabeça: Rails e Desenvolvendo Aplicações Web com Ruby on Rails 2.3 e PostgreSQL. Confesso que não cheguei a finalizá-los, porque apesar deles serem absurdamente práticos senti a necessidade de começar um projeto “de verdade”.

Sendo assim meu propósito é desenvolver um projeto real e ir documentando através dos posts.

Pretendo utilizar neste projeto as tecnologias atuais e free:

  • Ubuntu Maverick
  • Ruby
  • Rails
  • jQuery
  • CSS3
  • HTML5
  • PostgreSQL
  • Git
  • Github
  • Heroku

Também pretendo utilizar algumas metodologias como TDD.

Por enquanto é isso, o próximo post será sobre configuração do Ruby on Rails. Já postei sobre a configuração do RoR aqui e aqui mas ocorreram algumas mudanças nestas últimas versões.

Até la 😉

Padrão