Iniciando com jQuery

Olá, neste artigo iremos aprender algumas coisas básicas para começar a “brincar” com jQuery.

Mas afinal, você sabe o que é jQuery?
jQuery é uma biblioteca JavaScript OpenSource(código aberto) criada para simplificar os códigos client side.
A linguagem é bem clara e objetiva tornando o desenvolvimento bem mais intuitivo.
John Resig criou e apresentou o Jquery em janeiro de 2006 e atualmente é o framework de javaScript mais poupular. Seguindo o mesmo propósito de simplificar as coisas, jQuery também é bem simples de se aprender.

Utilizando jQuery no seu projeto
Para trabalhar com jQuery você precisa baixar a biblioteca do jQuery, incluí-la no seu projeto e referenciá-la em sua página ou então, somente referenciar via CDN(Content Delivery Network) que é uma outra maneira de utilizar a biblioteca que é fornecida por um servidor, não sendo necessário ter o arquivo em seu servidor.
Faça o download da ultima versão do JQuery no seguinte endereço http://jquery.com/.
Lá você vai encontar dois tipos de biblioteca, “Uncompressed” e “Minified”. Basicamente, a diferença é que a biblioteca “Uncompressed” é uma versão que contém o código aberto onde você pode entender como ela funciona, debugar, alterá-la e até mesmo contribuir para a evolução da biblioteca. Já a versão “Minified” é utilizada para ambientes de produção, pois seu código é minimizado, o tamanho do arquivo é bem menor, porém, não é compreensível como é a outra versão.

Apenas uma comparação
Segue abaixo uma comparação de um recurso que utilizamos bastante  no dia-a-dia com javascript e que em jQuery é bem simples de se utilizar.
Vamos supor que você precise pegar um valor em um campo text com o id txtNome.

JavaScript

document.getElementById("txtNome").value;

jQuery

jQuery('#txtNome').val();
ou
$('#txtNome').val();

Agora vamos codificar!
Vamos criar uma página onde iremos aprender algumas coisas básicas do jQuery como:
-Acesso aos valores dos campos;
-Efeitos e manipulação do css.

Nosso projeto contém 3 arquivos.
-Pagina.html(Na raiz do projeto)
-jquery.min-1.7.1.js(No diretório jQuery)
-funcoes.js(No diretório JavaScript)
Os diretórios estão divididos da seguinte forma

Primeiramente, crie o arquivo Pagina.html no diretório do seu projeto. Veja o código HTML abaixo. Pagina.html

    <input id="btnExibeEsconde" style="background: none; border: none; font: bold 16px;" type="button" value="+ Dados" /></pre>
<div id="divCadastro" style="border: 1px gray solid; width: 180px; display: none;">
      Nome<input id="txtNome" type="text" />
      Idade<input id="txtIdade" type="text" />
      Telefone<input id="txtTelefone" type="text" />
      <input id="btnEnviar" type="button" value="Enviar" /></div>
<pre>
<script type="text/javascript" src=".\jQuery\jquery.min-1.7.1.js"></script><script type="text/javascript" src=".\JavaScript\funcoes.js"></script>

Repare que no código da página estamos criando 2 referências, uma para a biblioteca jQuery e outra para o arquivo JavaScript funcoes.js que iremos criar em seguida.

Agora vamos criar o arquivo JavaScript funcoes.js com as nossas funções.

//Função para exibir/esconder a div contendo os campos.
jQuery('#btnExibeEsconde').click(
    function()
    {
        //Verifica se a div esta visível.
        if(jQuery('#divCadastro').is(':visible'))
        {
            //Esconde a div com efeito fadeOut no tempo de 2 segundos
            jQuery('#divCadastro').fadeOut(2000);
            jQuery('#btnExibeEsconde').val('+ Dados');
        }
        //exibe a div
        else
        {
            //Exibe a div com efeito fadeIn no tempo de 2 segundos
            jQuery('#divCadastro').fadeIn(2000);
            jQuery('#btnExibeEsconde').val('- Dados');
        }
    }
 );

//Função para alterar a cor da borda dos campos que não estiverem preenchidos.
jQuery('#btnEnviar').click(
 function()
 {
   jQuery('#txtNome').css('border-color', jQuery('#txtNome').val() == "" ? 'red' : '');
   jQuery('#txtIdade').css('border-color', jQuery('#txtIdade').val() == "" ? 'red' : '');
   jQuery('#txtTelefone').css('border-color', jQuery('#txtTelefone').val() == "" ? 'red' : '');
 }
);
​

Note que não implementamos a chamada do evento click na página HTML, implementamos somente no arquivo JavaScript(se preferir você pode criar a função no JavaScript e chamar a função no evento onClick do botão).

Abra sua página .html, você terá algo semelhante as imagens abaixo.
    Figura 1 – Div escondida

    Figura 2 – Exibição da div e validação do campo sem preenchimento.

Veja este código em execução neste link: http://jsfiddle.net/giancarlofim/aR99g/embedded/result/

Obs.: Na função onde fazemos a verificação dos campos vazios, não é a forma mais correta, pois existe uma implementação mais específica para isso, onde podemos fazer diversos tipos de validações. Porém fizemos desta maneira somente para exemplificar e entender como podemos manipular os valores dos campos e o css pelo jQuery.

Bons Estudos.

Fiquem a vontade para dúvidas, críticas e sugestões.

Criando um controle CAPTCHA em ASP.Net

CAPTCHA é um acrônimo da expressão “Completely Automated Public Turing test to tell Computers and Humans Apart” (Teste de Turing Público Completamente Automatizado para Diferenciação entre Computadores e Humanos)

Provavelmente você já solucionou um algum dia. =D

Simplificadamente é uma técnica para distinguir se o usuário é um sistema ou um humano.

Exemplo, existem sistemas “robo” que podem fazer diversas tentativas a uma área protegida por usuário e senha por exemplo. Como impedir que isso aconteça? Você pode utilizar a técnica CAPTCHA, que é uma imagem com caracteres que deve ser interpretado e informado para que o sistema valide e conceda o acesso. Isso dificulta que um robô prossiga pelo fato de ter de interpretar o texto descrito na imagem. No Facebook por exemplo, tente acessar diversas vezes com uma senha errada. Ele irá te apresentar um CAPTCHA que interpretado corretamente dará o acesso a rede social.

Porém existem sistemas capazes de interpretar o CAPTCHA, é por isso que existem variações de CAPTCHA distorcidos, com diversos traços espalhados, tudo isso para dificultar que um robô interprete o CAPTCHA.

Segundo a Google – “Cerca de 200 milhões CAPTCHAs são solucionados por seres humanos em todo o mundo a cada dia. Em cada caso, cerca de dez segundos de tempo humano estão sendo gastos. Individualmente, isso não é muito tempo, mas em conjunto estes enigmas consumir pouco mais de 150.000 horas a cada dia.”

Neste tutorial vamos desenvolver o código em um controle ascx para gerar um CAPTCHA.

Vamos trabalhar com método Random(para gerar o texto aleatório), e com a classe Draw(para desenhar nosso texto na imagem).

Estarei utilizando neste tutorial as seguintes ferramentas:

-IDE VisualStudio 2010

-Framework .Net 4.0

-Asp.Net  e C#

Vamos codificar?

Crie um projeto WebForm, nele adicionei uma pasta chamada Controle. Nesta pasta adicione um Web Control. Vaje a Figura 1.

 Figura 1 – Adicionando um Web User Control

Ok, agora adicione no projeto uma pasta chamada Imagem. Nesta pasta adicione alguma imagem que servira de fundo para o captcha.

A estrutura do projeto deve ficar similar a Figura 2

                                                                            Figura 2 – Estrutura do projeto

Agora que já montamos nossa estrutura, vamos codificar.

O código principal esta dentro do arquivo ctrCaptcha.ascx.cs. E somente fazemos uma referência desse controle em nossa página Default.aspx

Veja na Listagem 1 o código do controle ctrCaptcha.ascx.cs.

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;
using System.Drawing.Text;
using System.Drawing.Imaging;

namespace Captcha.Controle
{
    public partial class ctrCaptcha : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //Pega valor do método que retorna um valor aleatório
            //e armazena na variavel.
            string valorCaptcha = RetornaValorCaptcha(5);

            //Armazena o valor em uma Session.
            Session["ValorCaptcha"] = valorCaptcha;

            //Método que cria a imagem com o texto.
            CriaCaptcha(valorCaptcha);
        }

        private string RetornaValorCaptcha(int quantidadeCaracteres)
        {
            string valorCaptcha = string.Empty;

            //Todos os itens que poderão aparecer escritos na imagem
            char[] caracteres = new char[]{'0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
                            'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
                            'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
                            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
                          'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'};

            int numRamdom;
            Random random = new Random();

            //Passa pelo loop for e vai armazenando os caracteres sorteados.
            for (int i = 0; i < quantidadeCaracteres; i++)
            {
                numRamdom = random.Next(0, 62);
                valorCaptcha += caracteres[numRamdom];
            }

            return valorCaptcha;
        }

        private void CriaCaptcha(string valorCaptcha)
        {
            //Pega a imagem de fundo de acrodo com o caminho indicado.
            System.Drawing.Image imagemFundo = System.Drawing.Image.FromFile(Server.MapPath("imagem/imgCaptcha.jpg"));

            //Define o tamanho(largura x altura) da imagem.
            Size tamanhoImagem = new Size(160, 50);

            //Cria imagem do tipo BitMap com a imagem e o tamanho definidos anteriormente
            Bitmap objBitMap = new Bitmap(imagemFundo, tamanhoImagem);

            using (Graphics grafico = Graphics.FromImage(objBitMap))
            {
                //Fonte do texto
                Font fonte = new Font("Currier New", 30, FontStyle.Bold);
                //Posição do texto na imagem
                PointF posicao = new PointF(4.0F, 4.0F);

                //Escreve o texto na imagem.
                //Definimos o texto, o tamanho da fonte a cor da letra e a posição das letras na imagem.
                grafico.DrawString(valorCaptcha, fonte, Brushes.White, posicao);

                //Istancia objetos do tipo Pen com a cor e a largura que sera desenhado na tela
                //estamos utilizando para
                Pen CanetaVermelha = new Pen(Color.Red, 2);

                //Define pontos da linha
                Point point1 = new Point(5, 20);
                Point point2 = new Point(40, 25);
                Point point3 = new Point(190, 5);
                Point point4 = new Point(80, 60);
                Point[] curvePoints = { point1, point2, point3, point4 };

                //Cria linha na imagem
                grafico.DrawCurve(CanetaVermelha, curvePoints);
            }

            Response.ContentType = "image/GIF";

            objBitMap.Save(Response.OutputStream, ImageFormat.Gif);

        }
    }
}

Listagem 1 – Código do arquivo ctrCaptcha.ascx.cs

Estando pronto o código do nosso controle, vamos adiciona-lo em nossa página. Veja na Listagem 2 como deve ficar o código da página Default.aspx.

<!-- Declara o nome utilizado para o controle e a localização do controle no projeto. --></pre>
<form id="form1">
<div></div>
</form>
<pre>

Listagem 2 – Adicionando o controle na página.

Pronto, de um Build e execute sua aplicação!
Veja como ficou o resultado na Figura 3.

Figura 3 – Resultado Captcha.

Curiosidades

(http://pt.wikipedia.org/wiki/Captcha)
“A primeira discussão acerca dos testes automatizados que distinguem seres humanos dos computadores com objetivo de controlar o acesso aos serviços da web aparece em um manuscrito 1996 de Moni Naor do instituto de Weizmann de ciência, intitulado “Verification of a human in the loop, or Identification via the Turing Test” (verificação de um ser humano no laço, ou identificação através do teste de Turing).
CAPTCHAs primitivos parecem ter sido desenvolvido mais tarde, em 1997, para o site de procura AltaVista por Andrei Broder e seus colegas para impedir que os bots adicionassemURLs a sua Ferramenta de Busca. Procurando uma maneira fazer suas imagens resistentes ao ataque do OCR, Optical Character Recognition (Reconhecimento Óptico de Caracteres), a equipe olhou o manual de scanner, obtendo recomendações para melhorar os resultados do OCR (typefaces similares, fundos lisos, etc.). A equipe criou enigmas tentando simular o que o manual reivindicado causaria a OCR mau. Em 2000, von Ahn e Blum desenvolveram e publicaram a noção de um CAPTCHA, que incluísse todo o programa que puder distinguir seres humanos dos computadores. Inventaram exemplos múltiplos, incluindo o primeiro CAPTCHAs a ser usado extensamente no Yahoo.”

É isso ai! Bons Estudos!

Fiquem a vontade para dúvidas, críticas e sugestões!

Utilizando o Split do C# para trabalhar com delimitadores

Olá Pessoal, segue uma dica de como utilizar o split para trabalhar com uma string dividida por delimitadores.

Imagine que você receba uma string onde o delimitador é o “|”(pipe).

Por exemplo: Giancarlo|Fim|23|Masculino

Você precisa pegar essas informações e exibi-las na tela separadamente. Como poderiamos fazer isso?

Nesta situação podemos utilizar o split.

Segue abaixo o código de exemplo. Deixei comentado com as explicações de cada etapa.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace ConsoleApplication1
{
    class Program
    {
        static void Main(string[] args)
        {
            //String com a informação com os delimitadores.
            string pDados = "Giancarlo|Fim|23|Masculino";

            //Método onde utilizamos o split para demembrar a informação 
            //e apresentar na tela.
            DesmembraString(pDados);
        }

        private static void DesmembraString(string pDados)
        {
            //Variaveis que receberão os valores desmembrados.
            string nome, sobrenome, idade, sexo;

            //Aqui utilizamos o split, atribuindo a um array.
            //Repare que no split, declaramos o valor char '|' 
            //que é o delimitador que esta sendo utilizado.
            string[] valores = pDados.Split(new char[] { '|' });

            //Aqui pegamos a posição no array onde esta a informação 
            //e atribuimos para cada variavel.
            nome = valores[0].ToString();
            sobrenome = valores[1].ToString();
            idade = valores[2].ToString();
            sexo = valores[3].ToString();

            //Apresentamos na tela os valores de cada variavel.
            Console.WriteLine(" Nome: {0}\n Sobrenome: {1}\n Idade: {2}\n Sexo: {3}", nome, sobrenome, idade, sexo);
            Console.ReadLine();
        }

    }
}

É isso aí! Bons Estudos!

Tratamento de exceção no Sql Server 2008

Olá Pessoal, neste artigo vamos falar sobre tratamentos de exceções no SQL Server, utilizando a condição Try…Catch.

Se você já criou algum tratamento de exceção por exemplo no C# não terá dificuldade. Mas para deixar bem claro caso esteja começando, a estrutura é divida no bloco TRY(onde estará o código principal a ser processado) e CATCH(código que será executado caso algo de errado no processo dentro do bloco TRY).

Segue abaixo alguns exemplos:

Para exemplificar vou simular um erro de um insert em uma tabela.

Execute o código abaixo para criar a tabela, ou se preferir utilize alguma que já esteja criada em seu banco de dados.

create table TesteTryCatch(id int, Texto varchar(5))

Eai, vamos fazer o teste? Perceba que coloquei o campo varchar com limite de 5 caracteres e iremos executar um insert com mais de 5 caracteres para que possa ocorrer a exceção.

BEGIN TRY
    INSERT INTO TesteTryCatch(id, Texto)values(1, 'Testes')
    PRINT 'SUCESSO'
END TRY
BEGIN CATCH
    PRINT 'ERRO'
END CATCH

Neste exemplo ele apresenta “SUCESSO” caso de tudo certo e caso ocorra alguma exceção, é apresentado a mensagem “ERRO”.

Mas podemos também obter informações mais relevantes do que apenas uma mensagem “ERRO”. Você pode utilizar no bloco CATCH algumas funções para retornar dados sobre o erro que ocorreu, podendo ser apresentado uma informação mais concisa do que ocasionou o erro.

Segue a lista de algumas destas funções.

Segue abaixo o mesmo exemplo que utilizamos acima, só que agora implementado com estas funções.

BEGIN TRY
    INSERT INTO TesteTryCatch(id, Texto)values(1, 'Testes')
END TRY
BEGIN CATCH
    SELECT
    ERROR_LINE() AS ErrorLine
    ,ERROR_SEVERITY() AS ErrorSeverity
    ,ERROR_NUMBER() AS ErrorNumber        
    ,ERROR_STATE() AS ErrorState        
    ,ERROR_MESSAGE() AS ErrorMessage
END CATCH

Vejam abaixo exemplo em execução.

Vale lembrar que estas funções que retornam detalhes dos erros devem ser implementadas dentro do bloco CATCH, caso contrário os campos retornarão todos como NULL.

É isso ai! Bons Estudos!

Utilizando o AdRotator

Neste artigo estaremos abordando o controle AdRotator.

Com ele você pode apresentar imagens randomicamente e colocar um link de uma página para onde será redirecionado caso seja clicado. É possível também definir se algum banner aparecerá mais vezes que outro banner.

De onde buscamos as informações? Você pode buscar de um banco de dados ou então de um arquivo .xml, neste artigo trabalharemos com xml.

Neste projeto colocarei 2 imagens(Logotipo dos buscadores Bing e Google) que ficarão alternando a cada refresh da página, ao clicar no banner a página será direcionada para o link do buscador.

Vamos começar?

Crie um novo projeto(ctrl+shift+n) e selecione Web Application, altere o nome do projeto e clique em ok. *No meu caso dei o nome de appAdRotator, mas fica a seu critério. =)

Bom, agora vamos adicionar em nosso projeto 2 imagens. Para isso adicione uma pasta com o nome de img para armazenarmos nossas imagens.

Bom, agora adicione as imagens na pasta img. Clique com o direito do mouse sobre o diretório img, depois Add=>Existing Item(Shift+Alt+A), selecione as imagens e clique em Add.

Vamos em nossa WebForm, abra a aba toolbox e adicione o AdRotator.

Utilizando um WebService de Cep

Olá Pessoal!

Neste artigo iremos criar uma aplicação onde o usuário entrará com a informação do seu cep e a aplicação retornará os dados de endereço.

Exemplo do projeto em funcionamento.

Para isso iremos trabalhar com um WebService. Existem diversos WebService de CEP, no entanto estaremos utilizando o seguinte. http://www.bronzebusiness.com.br/webservices/wscep.asmx?op=cep

Neste exemplo estaremos fazendo um projeto web, mas você pode fazer com a interface que preferir, seja ela Form, WPF, Silverlight, etc.

O artigo será bem objetivo, portanto não estaremos fazendo as tratativas de erros e de validação.
Bom, vamos por a mão na massa?

Tabela de formatação DateTime

Olá Pessoal!

Segue abaixo uma tabela contendo os códigos e o formato de retorno para formatação de campos DateTime .

Segue abaixo um exemplo prático de como utiliza-lo.

select convert(varchar, getdate(), 103) onde me retorna no formato dd/mm/yyyy

É isso aí! Bons estudos!

Verificando tabelas temporárias existentes

Segue uma dica de como verificar as tabelas temporárias existentes na sua base.

Segue exemplo:

SELECT NAME FROM TEMPDB..SYSOBJECTS 

As vezes é necessário também, dentro de um processo, você dar um drop na tabela se ela existir.

Segue exemplo:

IF(EXISTS(SELECT NAME FROM TEMPDB..SYSOBJECTS 
          WHERE NAME = '##TEMP_SUA_TABELA'))
BEGIN
    DROP TABLE ##TEMP_SUA_TABELA
END

É isso aí! Bons estudos!

Microsoft Windows Azure

Video de Eliezer Perlmutter onde em 2 minutos ele explica os conceitos do Windows Azure, Plataforma de Cloud Computing da Microsoft.

Vale a pena conferir!

Alternativa de count da tabela

Existe uma maneira alteranativa muito boa para o famoso count nas tabelas.

Normalmente vemos a seguinte instrução.

select count(nm_coluna) from nm_tabela

Porém quando estamos trabalhando com tabelas enormes,
com milhões e até bilhões de registros, fazer o count dessa maneira não é uma boa alteranativa, além de demorar alguns minutos para retornar o resultado.

Podemos então explorar a tabela sysindexes do Sql Server, nela existe uma coluna chamada rowcnt que armazena exatamente a quantidade de linhas de todas as tabelas do seu banco de dados.

Segue código abaixo:

SELECT ROWCNT FROM sysindexes
WHERE NAME = 'nome_sua_tabela'

Para se ter uma idéia, fiz um teste com uma tabela com 34.164.231 de registros. Um simples count(*) levou 00:04:50. É claro que este tempo varia de acordo com alguns fatores, com o hardware que esteja utilizando, quantidade de processamentos sendo executados, entre outros.

Porém utilizando-se da tabela sysindexes o retorno é imediato, pois a informação já está lá, armazenada na tabela sysindexes, ao contrário do count(*) que percorre todas as linhas da tabela para retornar o resultado.

É isso aí! Bons estudos!