(Parte 4 de 6)

Se você estiver em um While que trata milhares de registros em um banco de dados e você setou a propriedade buffer para true, a página não aparecerá até que todos os dados estejam no buffer para serem enviados ao browser cliente. Para resolver esse inconveniente, basta usar ocasionalmente o response.flush para que as porções gravadas no buffer sejam descarregadas enquanto o servidor termina de construir o restante da página.

Response Object - Parte 3Redirection Code

O objeto response.redirect pode ser usado para direcionar o usuário para uma determinada página. No exemplo abaixo cada link se refere ao mesmo arquivo asp, entretanto, com o parâmetro where o programa redireciona o usuário para um determinado lugar.

res2.asp?where=principalres2.asp?where=exemplos res2.asp?where=docsres2.asp?where=diversaores2.asp?where=newsres2.asp

1 <%2 response.buffer=true3 %>4 <html><head>5 <title>res2.asp</title></head>6 <body bgcolor="#FFFFFF">7 <%8 ' programa que redireciona URL9 URL_atual = "http://www.geap.com.br"10 where=Request.QueryString("Where")11 Select Case where12 case "principal"13 response.redirect URL_atual & "\"14 case "exemplos"15 response.redirect URL_atual & "/exemplos/exemplos.htm"16 case "docs"17 response.redirect URL_atual & "/aspdocs/roadmap.asp"18 case "news"19 response.redirect "http://www.cnn.com"20 case "diversao"21 response.redirect "http://www.dilbert.com"22 End Select23 response.write "Nao sei para onde você foi, mas...."24 response.write "Eu recomento --> " & "<P>"25 response.write server.htmlencode(URL_atual & "/pagamento") & "<P>"26 response.write "para ver vários exemplos de ASP!" & "<P>"27 %>28 </body></html>

Armazenando Cookies

Formulário que recebe cookies do usuário e repassa para armazenamento.

1 <%2 response.buffer=true3 %>4 <html><head>5 <TITLE>cookiesform.asp</TITLE></head>6 <body bgcolor="#FFFFFF">7 <%8 un=Request.Cookies("Pessoa")("ult_nome")9 pn=Request.Cookies("Pessoa")("primeiro_nome")10 es=Request.Cookies("Pessoa")("estado")11 %>12 <Form action = "cookiesformrespond.asp">13 Formulário com Cookies<p>14 Por favor, entre o seu primeiro nome<p>15 <Input NAME="primeironome" size ="40" value=<%=pn%>>16 <p>17 Por favor entre o seu último nome<p>18 <Input NAME="ultimonome" size ="40" value=<%=un%>>19 <p>20 Por favor entre a abreviação do seu Estado<p>21 <Input NAME="estado" MaxLength="2" value=<%=es%>>22 <Input type=submit></form>23 </body></html>

Formulário Usuário e Senha

Os formulários abaixo estão usando o método GET no envio das informações. Como vimos anteriormente para acessar uma informação enviada por formulário com método GET, usamos: request.querystring("nome_do_campo"). Quando usamos o método POST, usamos: request.form("nome_do_campo")

Exemplo 1: Formulário padrão de Usuário e Senha

1 <html>2 <head>3 <title>sessiontest01.asp</title>4 </head>5 <body bgcolor="#FFFFFF">6 </body>7 </html>8 <html>9 10 <body>11 <form name="meu_autor" action="sessiontest02.asp"12 method="GET">13 <p>Seu Nome: <input type="TEXT" name="seu_nome"></p>14 <p> Sua Senha: <input type="TEXT" name="sua_senha"></p>15 <p> <input type="submit"> </p>16 </form>17 </body>

Exemplo 2: Armazena um Usuário e Senha na sessão

1 <html>2 <head>3 <title>sessiontest02.asp</title>4 </head>5 <body bgcolor="#FFFFFF">6 <% ' Programa ASP que armazena um usuário e uma senha na sessão7 senha_usuario=request.querystring("sua_senha")8 nome_usuario=request.querystring("seu_nome")9 response.write "Fala " & nome_usuario & "<P>"10 select case senha_usuario11 case "666"12 response.write "Sua senha é o número da besta"13 case else14 response.write "Senha não reconhecida!"15 end select16 session("who")=nome_usuario17 session("securitypassword")=senha_usuario18 %>19 </body>20 </html>21

Exemplo 3: Lê as variáveis da sessão

1 <html>2 <head>3 <title>sessiontest03.asp</title>4 </head>5 <body bgcolor="#FFFFFF">6 <%7 ' Programa ASP que lê variáveis da sessão8 response.write "Fala " & session("who") & ".<P>Obrigado por passar aqui.<P>"9 If session("securitypassword")="666" then10 response.write "Encontro secreto na sala do tio Bill"11 else12 response.write "A sala do tio Bill está em reformas. Os encontros foram cancelados."13 end if14 %>15 </body>16 </html>

O que são sessões?

Sessões são uma das facilidades do ASP. Quando alguem visita uma página no seu site, o ASP cria uma sessão e imediatamente pode difereciar aquele usuário de todos os outros que estão no site. Nada armazenado na sessão daquele usuário pode ser recuperado ou manipulado por uma página e pelas próximas páginas que ele visitar. Algumas coisas devem ser ressaltadas:

  • Os dados da sessão são armazenados no servidor e não em cookies. Nenhum usuário pode examinar um cookie e determinar o conteúdo de qualquer variável de sessão.

  • Um cookie é usado para coordenar o session ID do usuário. Novamente, o cookie não contém nenhum dado, somente o session ID. Isto significa que se o usuário não aceita cookies, você não poderá usar as sessões como descrito nesse tutorial.

  • Se você realmente precisa usar sessões sem o browser cliente permitir os cookies, instale um filtro ISAPI chamado "Cookie Munger" que resolverá o seu problema, mas a performance caíra bastante. Este filtro está disponível em http://backoffice.microsoft.com/downtrial/moreinfo/iissamples.asp

GRÁFICOS PARA WEB

Gráficos são elementos importantes na construção de sites web. Além da preocupações comuns relativas à beleza e criatividade, este tipo de gráfico deve ser criado pensando nas limitações relativas a cores e tamanho do arquivo gerado...

Vetores x Mapas de bits

Existem basicamente dois tipos de images feitas por computador: vetoriais e bitmaps. Vetores são imagens definidas a partir de regras como "desenhe uma linha de 10,10 até 120,30", "desenhe um círculo com centro em 50,60 e raio 10", "pinte a área em 20,20". Os bitmaps são diferentes: você tem o desenho feito ponto a ponto, como se ele fosse pintado sobre papel quadriculado, onde cada quadradinho pode ser pintado de apenas uma cor.

Uma imagem vetorial simples é um arquivo pequeno, que pode ser facilmente desenhada em vários tamanhos sem perder qualidade. As extensões de gráficos vetoriais mais conhecidas são WMF (Windows Metafile), CDR (Corel Draw), DWG, DXF (ambos do AutoCAD) e AI (Adobe Illustrator).

Uma imagem em mapa de bits é mais detalhista, mas geralmente ocupa mais espaço que uma imagem vetorial simples. Este formato é necessário quando se utiliza imagens digitalizadas, mas apresenta problemas para ser mostrada em diversos tamanhos. Este tipo de image perde qualidade nos tamanho muito pequenos e fica grosseira em tamanhos muito grandes. As extensões de gráficos mais comuns são BMP (Windows Paint), PCX (Paintbrush), PSD (Adobe Photoshop), CPT (Corel Photopaint), TIF (usado em editoração), GIF e JPG (usados na Internet).

Na Web, a grande maioria dos gráficos são bitmaps com extensão GIF e JPG. A razão é que estes formatos são bitmaps comprimidos. Os arquivos GIF e JPG são bem menores, por exemplo, que a mesma imagem em formato BMP.

Tamanho do arquivo

Existem uma série de fatores que influenciam o tamanho de um arquivo gráfico para a Internet:

  • Número de pontos. Obviamente, a largura e a altura de um gráfico influenciam diretamente o tamanho do arquivo.

  • Número de cores. É necessário guardar informação sobre cores para cada ponto de um bitmap. Em um gráfico que usa cores realísticas, cada ponto ocupa 3 bytes e é possível representar mais de 16 milhões de cores. O mais comum, na Internet, é usar arquivos onde cada cor é guardada em um byte, permitindo usar até 256 cores.

  • Compressão. Os formatos GIF e JPG guardam os bits comprimidos. Esta compressão consiste em achar repetições dentro do arquivo e eliminá-las.

A maioria das pessoas imagina que apenas a dimensão da figura (sua altura e largura em pontos) modificam o tamanho. Como um desenvolvedor de gráficos para a Internet, você deve preocupar-se bastante com a compressão e principalmente com o número de cores de cada figura. Uma mudança nestes ítens pode facilmente reduzir seu arquivo à metade do seu tamanho original. Em alguns casos, o tamanho chega a ser reduzido a um décimo.

Cores

Como já dissemos, o número de cores influencia fortemente o tamanho do arquivo. Saber utilizá-las corretamente pode ser muito trabalhoso, mas vale a pena. Não estou sugerindo que você faça apenas figuras em preto e branco, de agora em diante. O uso de várias cores é fundamental para a aparência do site. A mágica está em reduzir o tamanho do arquivo sem perder qualidade e variedade de cores. Acredito, isto é possível!

Inicialmente você precisa entender em detalhes o quanto as cores influenciam o seu arquivo e como elas são realmente armazenadas e tratadas pelo browser. Observe a tabela abaixo, que mostra o tamanho de um arquivo de 100 x 300 pontos com diversos esquemas de cores:

Tipo de arquivo

Número de Cores

Bits por ponto

Tamanho arquivo*

Preto & Branco

2

1

1.250

Colorido, 16 cores

16

4

5.000

Colorido, 256 cores

256

8

10.000

Cor real, 16 bits

32.768

16

20.000

Cor real, 24 bits

16.777.216

24

30.000

* Bitmap de 100 x 100 pontos, sem compressão, sem cabeçalhos, sem palette, em bytes

Palettes

Quando se utiliza cor real, cada ponto tem sua cor definida através dos componentes em vermelho (red), verde (green) e azul (blue). Estas são as cores básicas para formação de todos os milhões de cores no nosso monitor.

Se você já definiu cores de fundo para páginas, links ou tabelas em HTML, deve conhecer o esquema RGB. Cada cor é definida como um número hexadecimal de 6 dígitos. São 2 dígitos para vermelho, dois para verde e dois para o azul. O valor de cada cor vai de 00 até FF (255 em decimal). Cada componente ocupa um byte e permite, portanto, 256 possibilidades. Multiplicando 256 por 256 por 256, temos as 16.777.216 cores disponíveis.

Quando se utiliza um número menor de cores, não vale a pena gastar três bytes para definir a cor de cada ponto. Nem tampouco deve-se utilizar alguns poucos bits para definir a cor, o que deixaria o número de opções muito restrito. A solução é usar uma tabela de cores, adicionada ao início do arquivo, descrevendo as cores a serem utilizadas no arquivo. Esta tabela é conhecida como "palette".

Observe alguns arquivos com palettes de 8 cores (3 bits) e a respectiva pallete logo abaixo. Note que, do total dos mais de 16 milhões de cores disponíveis, apenas algumas foram escolhidas para fazer parte de cada palette.

O tipo de arquivo mais comum é o que o utiliza uma palette de 256 cores (8 bits). Isto permite uma grande combinação de cores e uma razoável economia em bytes. Só é recomendável usar mais que 256 cores quando o efeito final precisa ter uma aparência "fotográfica".

A palette dos browsers

Um dos problemas básicos dos gráficos na web é saber como as cores serão visualizadas pelos usuários. Todo bom projetista de sites possui uma placa de vídeo capaz de mostrar milhões de cores, mas será que o usuário também tem uma placa assim? A resposta, na maioria das vezes, é não.

A maioria dos usuários utiliza sua placa de vídeo no modo de 256 cores. Alguns usuários possuem placas simples, outros não sabem como instalar o driver mais sofisticado e outros preferem 256 cores para melhorar a performance do Windows, especialmente em jogos.

Mesmo usando 256 cores, seu usuário tem algumas destas cores reservadas para o uso do sistema e do próprio browser. Assim, sobram em torno de 216 cores disponíveis para as suas figuras. Se você utiliza gráficos com palettes com muitas cores, é provável que o usuário não consiga ver o gráfico como você o projetou.

O Netscape e o Explorer possuem, inclusive, uma palette padronizada de 216 cores para usar nas páginas e nos seus gráficos. Esta palette inclui todas as cores básicas (verde, vermelho, azul, amarelo, ciano, magenta, preto e branco) e pelo menos 4 graduações entre cada uma destas cores. Veja no gráfico abaixo a palette padrão dos browsers.

Se você utilizar somente as cores na palette acima, todos os usuários com 256 cores no seu monitor (ou mais) verão sua imagens exatamente como você projetou. Se você utilizar uma palette com mais cores ou cores diferentes das mostradas acima (por exemplo, uma palette com 200 tons de azul), os usuários verão os gráficos de forma diferente, com as cores adaptadas para a palette padrão.

Se você faz gráficos especificamente para a web, é melhor até configurar seu programa de desenho com a palette dos browsers, para ter uma noção precisa de como os internautas comuns verão seus gráficos.

Anti-aliasing

Um terrível efeito colateral no uso de arquivos bitmap é o efeito de "escadinha" que se tem quando o gráfico inclui linhas inclinadas ou curvas. Os americanos chamam este efeito de "aliasing".

No gráfico abaixo, fica claro que as linhas horizontais não apresentam este efeito. O maior problema está nas linhas inclinadas, nas curvas e nos textos. O problema no texto é ainda maior quando as fontes usadas são mais complexas.

Uma forma de evitar este problema é usar somente linhas horizontais e verticais, evitando linhas inclinadas e curvas. Obviamente, isto não é nada prático. Outra solução, mais realista, faz parte dos recursos de alguns programas gráficos e chama-se "anti-aliasing". Este processo consiste em usar cores intermediárias para suavizar as linhas. No Photoshop, por exemplo, quase todas ferramentas podem funcionar com "anti-aliasing". Observe, na figura abaixo, que foram usados diversos tons de cinza para suavizar o efeito "escadinha".

Anti-aliasing exige um número maior de cores na palette. Entretanto, todos devem concordar que vale a pena. Quanto for utilizar anti-aliasing, evite sobrepor objetos de cores diferentes. Quando isso acontece, o número de cores necessárias para o anti-aliasing é maior.

GIF

O formato de arquivos GIF (Graphics Interchange Format) foi criado pela Compuserv, um dos maiores serviços on-line dos EEUU (algo parecido com as antigas BBS). Ele é um formato de bitmaps, trabalha com palettes e inclui uma conversão conhecida como LZW, que é muito eficiente para determinados tipos de arquivos.

A compressão do arquivo GIF consiste em codificar linhas de pontos que possuem várias cores repetidas em seqüência. Se uma linha, por exemplo, possui 10 bits na cor 30, ela pode ser compactada. Normalmente, a linha seria gravada como "30, 30, 30, 30, 30, 30, 30, 30, 30, 30". Depois de compactada, ela seria transformada em algo como "10 x 30". Obviamente, os bits gravados no arquivo não são exatamente como no exemplo acima, mas a idéia é a mesma.

Veja alguns exemplos reais de como se comporta a compressão dos arquivos GIF observando as figuras abaixo, que possuem 100 x 100 pontos cada uma, com palette de 256 cores.

BMP, 11.080 bytes

GIF, 956 bytes

GIF, 1.023 bytes

GIF, 1.121 bytes

GIF, 1.388 bytes

GIF, 8.502 bytes

O maior arquivo é o BMP, que não usa compressão. Entre os GIFs, você percebe que os mais compactáveis são os que possuem grandes linhas horizontais.

Redução de palette de GIFs

Outra forma de comprimir arquivos GIF é utilizar uma palette menor. Isto reduz tanto o cabeçalho do arquivo (a palette em si) quanto o número de bits necessário para armazenar os pontos propriamente ditos. A economia com a redução de palettes pode ser considerável. Para isso, é preciso um software que consiga reduzir as cores criando uma nova palette e ajustando a figura. Observe a economia de espaço e as conseqüencias na figura, através dos exemplos abaixo:

8 bits - 256 cores9767 bytes

7 bits - 128 cores8024 bytes

6 bits - 64 cores6215 bytes

5 bits - 32 cores5026 bytes

4 bits - 16 cores3813 bytes

3 bits - 8 cores2970 bytes

Com a redução da palette de 8 bits (256 cores) para 3 bits (8 cores), diminuímos o arquivo para apenas 30% do seu tamanho. É bem verdade que a imagem de 8 cores ficou bem pior do que o original. A imagem de 32 cores, entretanto, ficou ainda muito boa e nos dá uma economia de bytes da ordem de 50%. Será que não vale a pena?

A principal regra na redução de palette é ir diminuindo o número de cores até que se note uma significativa perda de qualidade. Neste ponto, você desfaz a última redução e salva o arquivo.

JPEG

O formato JPEG (Joint Photographic Experts Group) ou JPG, é adequado para a compressão de arquivos com fotos ou desenhos com muitos detalhes. Ele pode ser configurado em diferentes níveis de compressão que vão de 10 a 100. No nível 100, a imagem obtida do arquivo JPG é idêntica ao original. Nos outros níveis, a imagem é ligeiramente prejudicada, embora ainda seja muito semelhante.

(Parte 4 de 6)

Comentários