#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, #prosa

HTML5 – Como começar?


Olá pessoal.

Quem trabalha com desenvolvimento web já pelo menos ouviu falar de HTML5 e de suas fantásticas novidades.

Se você ainda não parou para testar e estudar: a hora é agora! Este é um dos itens de estudo da minha lista e pretendo criar alguns posts sobre isto.

Então para aquecimento deixo dois links com cursos introdutórios de HTML5:

HTML5 Tutorial – w3schools.com (Inglês)

HTML5 – Homologado pelo W3C (Português)

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