0

Aumentando o desempenho de seus sites - Parte 2

by Luiz Jr 4. janeiro 2013 22:10

Neste post continuo com mais dicas para melhorar a performance de sites que possuam muitas visitas. A primeira versão deste post pode ser encontrada neste link.

Carregue componentes após o load

Você deve olhar para sua página e se questionar: "O que é absolutamente necessário para que a página renderize?". O resto do conteúdo e dos componentes podem esperar.

JavaScript é um candidato ideal para ser carregado depois do evento load. Por exemplo se você tem um código JavaScript para fazer animações em botões, eles podem esperar, porque as animações só vão fazer sentido depois que toda página tiver sido renderizada. Outros locais a se dar uma olhada incluem conteúdo oculto (conteúdos que aparecem somente após alguma interação do usuário) e algumas imagens que não são visualizadas em um primeiro momento.

É bacana quando os objetivos de performance estão alinhados com as melhoras práticas web. Neste caso, a idéia de aperfeiçoamentos progressivos nos diz que Javascript, quando suportado, pode melhorar a experiência do usuário, mas você tem que ter certeza de que a página funciona mesmo sem JavaScript. Então depois que tiver certeza disso, você pode aperfeiçoar ela com alguns scripts pós-carregados que dêem mais recursos à página, como botões animados.

Carregue componentes antes do load

Pré-carregar pode ser entendido como o oposto de Pós-carregar, mas na verdade ele possui um objetivo diferente. Pré-carregar componentes lhe dá uma vantagem sobre o tempo ocioso do browser, quando ele poderia, por exemplo, estar carregando imagens que serão usadas futuramente. A idéia é quando o usuário troque de página, ele tenha uma experiência ainda mais rápida do que na primeira página.

Existem vários tipos de pré-carregamento:

  • Não-condicional: assim que o load inicia, vá em frente e carregue uns componentes extras. O site do Google utiliza esta técnica, carregando todas imagens através de CSS Sprite que serão usadas nas páginas seguintes (página de resultados, por exemplo)
  • Condicional: baseado na ação do usuário você faz um palpite do que o usuáro está pensando e já carrega os próximos componentes. O Yahoo usa esta técnica na caixa de busca deles, carregando alguns componentes conforme o que o usuário digita na caixa de busca.
  • Antecipado: esta técnica é utilizada quando você está pensando em trocar o layout do seu site em breve. Geralmente você ouve coisas do tipo "Muito legal o novo site do fulano, mas o antigo era mais rápido.". Isso acontece porque o site antigo já estava com os elementos em cache, como imagens, JS e CSS, enquanto que no novo site tudo teve de ser baixado. O pré-carregamento antecipado consiste em fazer com que seus visitantes do site antigo já baixem alguns componentes e deixem-os em cache no navegador, para quando o novo site for pro ar, a transição seja mais suave. Faça isso linkando CSS e JS antecipados, alguns dias antes do lançamento. Colocar algumas imagens sobrepostas também pode ajudar.

Divida componentes entre domínios

Dividir os componentes entre domínios pode maximizar o download paralelo de componentes. Garanta que não está usando mais do que 2-4 domínios por causa do tempo de resolução de DNS ou a técnica sairá pela culatra. Por exemplo, você pode hospedar seu HTML e conteúdo dinâmico em www.teste.com.br e dividir componentes estáticos ente img.teste.com.br e css-js.teste.com.br.

Fora 404!

Requisições HTTP são recursos "caros" à performance de um site o que torna uma imensa burrice permitir erros 404 em seu site por preguiça ou ignorância.

Alguns sites possuem páginas 404 bacanas que ajudam o usuário a encontrar o que não acharam na URL acessada, entretanto, mesmo estas páginas consomem recursos do servidor. Pior ainda é quando os erros 404 são causados por links de JS e CSS quebrados. No primeiro caso, além de gerar uma custosa requisição, o carregamento do restante da página irá travar até que o referido erro aconteça porque o download de javascript não permite outros downloads em paralelo. Como se não fosse o bastante, muitos browsers tentarão ler a página 404 procurando algum script útil pois buscavam um arquivo de scripts...

Use link ao invés de @import

Uma das melhores práticas que citei na parte 1 deste post dizia que CSS deve estar no topo da página para permitir a renderização progressiva. No IE a diretiva @import tem o mesmo comportamento que usar um <link> no rodapé da página, então é melhor não usá-la.

Otimize as imagens

Depois que o designer tenha terminado de criar as imagens para sua página, existem ainda algumas coisas que você pode fazer antes de enviar as imagens para seu servidor.

  • você pode verificar os GIFs e ver se eles estão usando um tamanho de palheta correspondente ao número de cores na imagem. Usando o software ImageMagick é fácil de verificar com o comando: identify -verbose imagem.gif. Quando você ver que uma imagem está usando 4 cores e uma palheta de 256 cores, há espaço para melhoria.
  • Tente converter GIFs para PNGs e ver se há alguma economia. Geralmente tem. Desenvolvedores muitas vezes hesitam em usar PNGs devido ao suporte limitado nos browsers, mas isto é coisa do passado. O único problema real é a transparência-alfa em PNGs true color, mas novamente, GIFs não são true color e não suportam transparência variável. Então qualquer coisa que um GIF possa fazer um PNG também faz (exceto animações). Este simples comando do ImageMagick gera PNGs seguros para usar: convert image.gif image.png
  • Execute o aplicativo pngcrush (ou qualquer outro otmizador de PNG) em todos seus PNGs, por exemplo, com este comando: pngcrush imagem.png -rem alla -reduce -brute resultado.png
  • Execute o aplicativo jpegtran em todos seus JPEGs. Esta ferramenta faz operações sem perdas em JPEGs como rotação e também pode ser usada para otimizar e remover comentários e outras informações inúteis (como informações EXIF) em suas imagens. Ex: jpegtran -copy none -optimize -perfect imagem.jpg destino.jpg

Otimize seus CSS Sprites

Aqui vão algumas dicas que deixarão seus sprites ainda mais otimizados:

  • organizar as imagens no sprite horizontalmente ao invés de verticalmente resultará em arquivos menores
  • combinar cores similares em uma sprite lhe ajuda a manter a contagem de cores baixa, idealmente abaixo de 256 cores para que se encaixe em um arquivo PNG8.
  • não deixe grandes espaços entre as imagens do sprite. Isto não afeta muito o tamanho do arquivo mas requer menos memória do usuário para descomprimir a imagem em um mapa de pixels. Uma imagem 100x100 tem 10 mil pixels, enquanto uma 1000x1000 tem um milhão

Não escale as imagens no HTML

Não use uma imagem grande que você precise definir a largura e altura dela em HTML. Se você precisar fazer isso:
<img width="100" height="100" src="meucachorro.jpg" alt="Meu Cachorro" />
então sua imagem (meucachorro.jpg) deve ter o tamanho de 100x100px ao invés redimensionar uma imagem de 500x500px, por exemplo.

Mantenha seus componentes abaixo de 25K

Esta restrição está relacionada ao fato que o iPhone não faz cache de componentes maiores que 25K. Note que este é o tamanho não comprimido. Isto é um exemplo de onde a minificação é importante porque o gzip sozinho pode não ser suficiente. Para mais informações, busque por iPhone Cacheability no Google.

Evite imagens com Src vazio

Imagens com o atributo src vazio provocam requisições ao seu servidor, em busca das imagens. Independente da forma que você fez isso:

<img src="">

ou

var img = new Image();
img.src = "";

Por quê este comportamento é ruim? Simplesmente porque lota seus servidores enviando um monte de tráfego inesperado, especialmente em páginas que recebem milhões de pages views por dia. Como se isso não fosse o bastante, você gasta tempo de processamento gerando páginas que não serão visualizadas. E por último, mas não menos importante, você pode acabar corrompendo dados. Se você está rastreando estado na requisição, seja por cookies ou de outra forma, você tem a possibilidade de destruir esses dados. Isso porque a requisição de imagem não retorna uma imagem, todos os cabeçalhos são lidos e aceitos pelo browser, incluindo todos cookies. Enquanto que o resto da resposta é jogada fora, o dano já pode ter sido feito.

A causa raiz deste comportamento é que a resolução de URLs dos browsers é definida na RFC 3986 - Uniform Resource Identifiers. Quando uma string vazia é encontrada como uma URI, ela é considerada uma URI relativa e é resolvida de acordo. Então tecnicamente, os browsers estão fazendo o que é esperado que façam para resolver URLs relativas. O problema é que neste contexto, a string vazia é claramente intencional.

HTML5 adiciona à RFC instruções aos browsers não fazerem requisições adicionais. Espera-se que em um futuro próximo não tenhamos mais esse problema, embora a RFC não cubra <script src=""> and <link href="">.

Conclusões

Neste post continuei um post muito antigo sobre dicas de otimização de sites. Muitas delas aplico em projetos que participo e que atinjam milhares de visitantes por dia, como o Busca Acelerada que possui mais de 240mil page-views por mês. Estas dicas foram retiradas de diversas fontes da Internet, em especial das guidelines de performance do Yahoo e de palestras que assisti sobre o assunto em diversos eventos pelo país. Em um post futuro, quero dar dicas específicas para desenvolvedores ASP.NET, sobre como turbinar suas web applications. Então aguardem!

Tags: , ,

Benchmark | Dica | Web

4

Relançamento do Busca Acelerada

by Luiz Jr 9. agosto 2012 20:50

Busca Acelerada

Boa noite pessoal. Hoje o post na verdade é um jabá descarado de um antigo projeto que só agora foi voltar ao ar: o Busca Acelerada (http://www.buscaacelerada.com.br).

Se eu tivesse que resumir do que se trata o site eu diria que é "O Google dos carros.". Ok, é uma analogia meio pretensiosa mas é basicamente isso mesmo. A ideia é que as pessoas não tenham mais que entrar em diversos sites de anúncios de carros para encontrar o veículo que procuram. Você entra no Busca Acelerada, digita os termos que definem o carro que busca (marca, modelo, etc) e o Busca Acelerada lhe traz o resultado de dezenas de sites de classificados, em milésimos de segundo e com possibilidades de filtrar os resultados, ordenar, etc.

Por enquanto o projeto está em testes (beta) e somente está englobando os cerca de 5700 anúncios de veículos da cidade de Gravataí-RS (a minha). Ainda assim, eu gostaria que acessassem e dessem um feedback, seja aqui pelo blog, pela página do facebook (http://www.facebook.com/BuscaAcelerada). Em breve estarei, em conjunto de meus sócios Lucas Pfeiffer e Adriano Costa, expandindo o sistema para todo RS e posteriormente para todo Brasil. Então mesmo que não seja Gravataiense como eu, me ajude a construir a melhor ferramenta de busca de veículos do país.

Valeu!

Tags: , ,

ASP.NET | Projetos | Web

0

Maratona de Eventos em Maio e Junho

by Luiz Jr 15. junho 2012 23:45

Maio e junho tem sido de longe os meses mais corridos para mim desde...sei lá, desde muito tempo. Esses dois últimos meses fizeram com que eu batesse todas minhas metas pessoais de eventos de divulgação da empresa em que trabalho, dos nossos serviços e por que não dizer, do meu trabalho. Muitas metas que havia traçado no final de 2011 para serem cumpridas até dezembro deste ano, já foram ultrapassados a muito tempo. O post de hoje é para compartilhar um pouco desses resultados a quem possa interessar.

Palestra sobre carreira na FTEC

WebMatrix pelo estado afora!

Graças a uma parceria com a Microsoft Brasil, eu e o Especialista de Produto Fabrício Sanchez (@sanchezfabricio) visitamos várias instituições com a palestra do Fabrício que trata das Tecnologias Microsoft para Desenvolvimento Web. Todo esse roadshow pode ser conferido no site dele em http://fabriciosanchez.com.br. Este projeto de divulgação, principalmente da ferramenta WebMatrix, se deu em função de termos obtido o título de primeiro provedor de hospedagem homologado pela Microsoft para hospedagem WebMatrix, título esse que nos rendeu um vídeo no Microsoft Showcase, como pode ser conferido em: http://www.microsoft.com/pt-br/showcase/details.aspx?uuid=e3afb47b-2dd3-4e95-b38d-5e7ff892dca4

Durante todo o mês de maio estivemos presente em instituições até então inéditas para a RedeHost, como Faccat, Ulbra Torres e IPA, entre outras mais tradicionais como FAQI e Facensa.

Palestra sobre Desafios da Web Atual no Dom Feliciano

Semana Acadêmica na UFRGS

Como convidados na Semana Acadêmica da Universidade Federal do Rio Grande do Sul, ministramos 3 palestras, sendo que participei da tradicional "Cloud Computing: do Conceito à Prática", o Cristiano Diedrich palestrou sobre "Segurança e Alta Disponibilidade em Servidores Apache" e por fim o Fábio Borges estreou como palestrante com a excelente "Gerenciamento de Projetos com Metodologias Ágeis".

Palestrar na UFRGS foi interessante pois a instituição possui muito respeito a nível nacional, e eu mesmo tive uma curta participação no programa de Mestrado deles no ano passado e pude comprovar na prática a qualidade do ensino deles. Acredito que este tenha sido o primeiro de muitos eventos em conjunto.

Reunião na Acigra em Gravataí

Outros Eventos

Além dos carros chefes de maio e junho com WebMatrix e nossa visita à UFRGS, participei da semana acadêmica na FTEC (Porto Alegre) na palestra de abertura do evento, tratando sobre "Carreira e Desafios em TI". Na Ulbra Gravataí também participei com a palestra sobre Cloud, que nos abriu espaço para dois cursos de extensão na instituição (que estarão acontecendo até o final deste mês) sobre ASP.NET e Linux (fora a 2a edição do curso de Android, mas disso eu falarei mais tarde).

E por fim, no Colégio Dom Feliciano, em Gravataí, organizei um evento muito especial para os alunos e egressos do curso Técnico em Informática. A ideia era montar uma atualização profissional ao pessoal do curso com relação à web atual, seus desafios, suas tecnologias, etc. O evento durou um dia inteiro, com direito à coffe-breaks fornecidos pela escola. Como ninguém aguentaria me ver palestrar um dia inteiro, montei um cronograma bacanudo junto com colegas da RedeHost que palestraram sobre ORM (Tiago Fonseca), MVC (Fernando Mondo), WebStandards (Adriano Costa) e eu, que abri e fechei o evento com uma palestra sobre "Desafios da Web Atual" e outra sobre "Carreira e Desafios em TI". Acredito que todos tenham aproveitado bastante, tanto os alunos quanto os meus amigos que eram palestrantes de primeira viagem, hehehehe.

À Seguir

Como citei, estão acontecendo os cursos de Linux e de ASP.NET, ministrados pelo Cristiano e por mim, respectivamente. Ainda em julho eu e o Cristiano Diedrich estaremos participando da Semana Acadêmica do IBGEN em Porto Alegre, com duas palestras. Na sequência, estarei ministrando de forma autônoma (i.e. sem patrocínio da RedeHost) a 2a edição do curso básico de Android na Ulbra Gravataí, em julho. Também em julho, estarei ministrando o curso de ASP.NET aos alunos da FTEC.

Em paralelo com tudo isso, participei de uma reunião na Acigra (Associação do Comércio, Indústria e Serviços de Gravataí) recentemente que serviu para estreitar nossos laços com eles. Também estou tocando um projeto muito ousado com o Unilasalle de Canoas que não posso dar detalhes no momento entre outros inúmeros projetos junto à RedeHost.

É, a vida é dura, mas não dá pra parar agora. Recentemente, no dia 06 de junho, completei mais um ano de empresa e quanto mais veterano eu me torno, mais responsabilidade recai sobre meus ombros para tomar partido nas ações da empresa. Um abraço e até a próxima.

Tags: , , ,

ASP.NET | Eventos | Experiências | Mercado | Treinamentos | Web

0

HTML 5 + CSS3, C# + Java e Windows Phone 7 em um post!

by Luiz Jr 24. dezembro 2011 10:43

Sim, este post tratará sobre estes três assuntos: HTML5 + CSS3 (+Javascript), interoperabilidade entre sistemas Java e .NET (não necessariamente C#) e Windows Phone 7, mas não, não serão ao mesmo tempo, hehehe. Neste final de ano o pessoal da Microsoft Brasil resolveu suar a camisa e nos entregar uma série de treinamentos gratuitos para capacitar os desenvolvedores de suas plataformas melhor. O post é breve, afinal ninguém quer ficar lendo nerdices em plena véspera de Natal, exceto eu é claro...

HTML5 &  Javascript Center

A Microsoft criou um hotsite chamado HTML5 & Javascript Center, onde dão muitas informações sobre como utilizar HTML5, CSS3 e Javascript juntos para criar páginas web ainda melhores. O site já contém muito material, incluindo tutoriais simples como uso da tag Áudio e Vídeo até coisas mais complexas como manipulação da tag Canvas (o canivete suíço do HTML5). Além disso, boa parte desse material está em Português, e mesmo o material em inglês é fácil de entender (afinal HTML é HTML em qualquer idioma...). O site também contém links de referências e está muito bem organizado por categoprias. Vale a pena conferir no http://msdn.microsoft.com/pt-br/hh442325.

Interoperabilidade entre Java e .NET

Desde que venho acompanhando a comunidade em torno da Microsoft Brasil em 2008, pude notar que uma postura que se instaurou na cia. é a de interoperabilidade de plataformas. Ultimamente a Microsoft tem lançado cada vez mais soluções interoperáveis, como seu Hyper-V e SCVMM para Linux, WebMatrix para PHP, TFS para Eclipse, Azure para PHP, Java, etc; material dedicado a HTML5 + CSS3 (existe algo mais interoperável que uma página HTML?), disponibilização de fontes para o pessoal do projeto Mono e Moonlight e por aí vai. Isto foi uma atitude muito inteligente do novo CEO Steve Ballmer, que tem atraído mais união entre os desenvolvedores de diferentes plataformas.

Dentro desta mesma linha, recentemente a Microsoft Brasil colocou no ar uma nova página dentro de seu famoso Centro de Treinamento (que eu já citei em outro post): Interoperabilidade entre Java e .NET. Todo mundo que está no mercado a alguns anos e já trabalhou em algumas empresas diferentes sabe que hoje Java e .NET são os bam-bam-bams do mercado mundial de software. As maiores cias. de software do mundo desenvolvem em tais tecnologias e os maiores salários do mercado são ofertados para analistas e desenvolvedores das mesmas. Parece que esse panorama não irá mudar nem mesmo com a crescente das aplicações móveis, uma vez que você pode continuar usando Java e .NET para programar para Android e iOS.

Mas voltando ao assunto da página, acesse http://msdn.microsoft.com/pt-br/hh314025, lá você encontra tutoriais em português sobre o funcionamento das arquiteturas (que são muuuito parecidas), sobre como fazer serviços Java conversarem com .NET e o inverso, como utilizar WCF e Glassfish e inclusive como colocar JEE na nuvem do Azure!

Windows Phone 7

E a minha notícia favorita de final de ano: uma página novinha em folha no Centro de Treinamento somente sobre Windows Phone 7 e 100% em português! Lembram-se de meu post anterior sobre Windows Phone 7, onde falei sobre os vídeos existentes no Channel 9, com o Bob Tabor? Pois é, agora temos a nossa versão tupiniquim e com ótimo conteúdo. Acesse http://msdn.microsoft.com/pt-br/hh230679 e veja uma gama completa de conteúdos como instalação do ambiente, Silverlight, XNA, deploy, debug, app lifeycle, gestos, orientação, themes, globalization, SQL Server Compact (toma SQLite!), GPS e por aí vai.

Resta saber se a parceria Microsoft + Nokia vai emplacar o WP7 na terra do Blanka, uma vez que nossa carga tributária é altíssima e fica difícil concorrer com o Android, que possui aparelhos em torno de R$500. Mas já é bom ir se adiantando, não é mesmo?

Para ajudar o blog, dê uma olhada nos preços dos livros de Windows Phone no Buscapé.

Tags: , , , , , ,

ASP.NET | Dica | Java | Mercado | Mobile | Web | WP7

0

TextBox com recurso auto-complete com ASP.NET + JQuery

by Luiz Jr 15. dezembro 2011 20:55

Todos os leitores deste blog já devem ter sido ajudados algum dia por recursos de auto-complete em caixas de texto. Você está digitando sua pesquisa no Google e...PIMBA! De acordo com as primeiras letras que digitou, ele completa o resto da frase. Ou então você está no Mercado Livre escrevendo o nome de um produto e...ZÁZ! Ele lhe sugere o produto certo. Recursos desse tipo nos poupam muito tempo enquanto estamos buscando coisas na web. Masi que o tempo de digitar uma frase, o fato do sistema ter lhe dado uma sugestão de palavra(s) significa que ele retornará algo com a consulta e que provavelmente outras pessoas também já realizaram a mesma.

Entretanto, esse tipo de recurso muitas vezes amedronta jovens programadores, quando o assunto é ELES colocarem esse recurso em suas caixas de pesquisa. Programadores ASP.NET que o digam, pois geralmente estamos acostumados com nosso mundinho perfeito de server-side e nos esquecemos do poder de coisas triviais como Javascript, para fornecer estes recursos extremamente úteis aos usuários. O post de hoje trata de soluções existentes para o problema, uma boa solução e fornece uma solução (quase) perfeita para o problema, que você pode fazer download no final do post.

JQuery

Soluções Existentes

Quando o assunto é Javascript, a onda do momento é falar de JQuery (http://jquery.com). O framework Javascript mais badalado do momento é extremamente poderoso e produtivo, e consequentemente muitas extensões do mesmo surgiram, como o JQuery UI (http://jqueryui.com). Neste conjunto de componentes JQuery prontos, temos o Autocomplete (http://jqueryui.com/demos/autocomplete/), uma caixa de texto que carrega uma coleção de JSONs com as possíveis sugestões. Se você não conhece JSON e/ou se amedronta só em ouvir, esqueça. Para que este Autocomplete funciona você terá de escrever Javascript dinamicamente na página, de acordo com o que o usuário digitar, ou então, escrever toneladas de JSON na tela para todas as possíveis sugestões. Apesar de ser puramente escrito em Javascript e muito completo, ele carece de desempenho...

Outra solução muito comum de ser vista na web, quando o assunto é ASP.NET é utilizando ASP.NET Ajax. Todo mundo que já usou ASP.NET Ajax e Ajax tradicional sabe das diferenças entre eles, principalmente no quesito performance. O ASP.NET Ajax abstrai do desenvolvedor toneladas de conceitos em cima de Javascript e XML em componentes como Update Panel e Timer, porém ao custo de ser mais lento que o Ajax tradicional e emporcalhar toda sua página com Javascript que você não pediu. Geralmente a solução mais encontrada envolve colocar um TextBox dentro de um UpdatePanel, setando uma consulta SQL no evento OnTextChanged do TextBox, ou seja, para cada letra digitada no TextBox, uma consulta SQL será realizada, retornando os resultados em uma DIV e como está tudo dentro de um UpdatePanel, a impressão que dá (não fosse a lerdeza) é de que você fez mágica!

A solução que vou propor a seguir é uma mescla dos dois conceitos e foi a melhor forma que encontrei de fazer isso até o momento. Sinceramente me diverti no processo (ok, eu sou nerd), o que foi um dos motivos de eu não ter procurado mais soluções existentes antes de desenvolver a minha.

SugestBox

Solução Proposta

Minha vida mudou depois que conheci a função 'load' do JQuery (http://api.jquery.com/load/), basicamente você usa os seletores para encontrar uma DIV e carrega pra dentro dela o conteúdo de uma URL que você passa como parâmetro para a função, em uma versão bem simples de Ajax que funciona perfeitamente. Quando você cai na real, percebe que o load é uma forma muito elegante e escalável de carregar trechos de HTML dinamicamente, dando um efeito mágico às suas páginas. Imagine listas de produtos que se carregam sozinhos sem esperar que a página inteira carregue. Ou DIVs que carregam seu conteúdo conforme opções que o usuário escolhe. Ou imagine que enquanto você digita um texto em um TextBox, sugestões aparecem...Ei!

//exemplo de uso do load
$('#div').load('http://minhaurl.com/default.aspx');

O load apenas acessa uma URL assincronamente ao restante da página e devolve o HTML. Ou seja, com ele você pode chamar uma página em sua linguagem de programação favorita (aham...ASP.NET) e colar o resultado da execução em uma div. Com um pouco mais de criatividade, você pode fazer coisas como:

//chamando uma página e passando parâmetros
$('#div').load('http://minhaurl.com/default.aspx?busca=carro');

Enquanto isso, na página Default.aspx, você pode colocar o código que quiser na sua linguagem favorita, bastando dar um Response.Write na própria página, para que o load pegue o conteúdo da página e jogue na DIV. Como exemplificado:

 

//dentro do Page_Load da Default.aspx
if(Request.QueryString["busca"] != null)
{
   if(Request.QueryString["busca"] == "carro")
      Response.Write("");
}

Obviamente este meu exemplo foi bem simplório, mas a idéia é demonstrar que você pode fazer o que quiser, capturando os valores vindos pela URL e utilizando-os em estruturas condicionais, consultas SQL, e por aí vai. E uma vez que no lado do cliente estamos trabalhando com Javascript, basta que a gente manipule os eventos do teclado via Javascript para saber quando um usuário digitou no TextBox (evento OnKeyPress) e devemos fazer o load no servidor, como segue:

//coloque o nome da function abaixo no OnKeypress do seu TextBox
//se estiver usando ASP.NET 4, coloque os IDs em Static Mode
function CarregarSugestoes()
{
   if($('#mytextbox').attr('value').length > 3)
   {
      $('#div').load('http://minhaurl.com/Default.aspx?busca=' + $('#mytextbox').attr('value'));
   }
}

Ou seja, se o usuário digitou mais de 3 letras no TextBox com ID mytextbox, ela enviará a palavra digitada à página Default.aspx para ser usada na busca de sugestões para aquela palavra, jogando o HTML de resultado na DIV. Fácil assim!

Como meu forte não é HTML, CSS e Javascript, mas sei o bastante para sobreviver, não entrarei em detalhes, apenas faça o download do código-fonte e dê uma analisada no que foi feito. Está muito bem escrito e limpo. Basicamente eu criei uma DIV que fica 'grudada' no meu TextBox, que conforme o usuário digita palavras, ela mostra sempre o mesmo conteúdo como sugestão. Você pode experimentar novos conteúdo apenas alterando o conteúdo do evento Page_Load da página Sugestao.aspx, inclusive conectando na sua base de dados favorita. Com um pouco de CSS e Javascript dei uma melhorada na usabilidade manipulando os eventos OnBlur do TextBox, realçando a sugestão selecionada da DIV e até comecei a esboçar o uso das setas do teclado para escolha da sugestão, usando o keyup do JQuery (http://api.jquery.com/keyup/). Nada muito sofisticado, mas muito bem feito. Aproveite e comente!

SugestBox.rar (49,69 kb)

Tags: , ,

ASP.NET | JQuery | Web

Powered by BlogEngine.NET 1.6.1.0
Design por Laptop Geek, adaptado por onesoft e personalizado por mim.