Dica: Diminuindo o tempo de carregamento de uma página web através do download paralelo de arquivos

Na semana passada, o Cleber Dantas publicou em seu blog um post com uma dica bem interessante sobre o uso de cookie-free domains. Basicamente, a idéia é armazenar arquivos estáticos do site, como imagens, arquivos CSS e JavaScript, que não precisam ter acesso aos cookies, em um subdomínio diferente do site principal. Assim, quando o browser fizer as requisições desses arquivos, os cookies não serão trafegados e, consequentemente, economizaremos no consumo de banda de rede, tornando o processo mais rápido.

Além da vantagem citada no artigo do Cleber, essa abordagem possibilita outro ganho, que é paralelizar o download de arquivos que compõem uma página HTML, tornando seu carregamento mais rápido. O protocolo HTTP 1.1 especifica que os browsers devem permitir duas conexões concorrentes por hostname, no máximo. Ou seja, segundo a especificação, os browsers só poderiam fazer download de dois arquivos simultaneamente de um mesmo hostname. Apesar dessa especificação, a maioria dos browsers mais recentes estabelece valores padrões maiores para o número máximo de conexões e podem ser configurados para outros valores. De qualquer modo, existe um limite. Como uma página HTML normalmente é composta por mais arquivos (considere os arquivos de imagem, CSS, JavaScript, etc), se essa página e todos os recursos que a compõem estiverem em um mesmo hostname, quando se atinge esse limite de requisições simultâneas, o browser enfilera as requisições pendentes até que alguma requisição executada anteriormente termine, e assim possa realizar as demais requisições de forma sequencial.

Ao distribuirmos os arquivos estáticos em múltiplos subdomínios, o limite de conexões simultâneas do browser será aplicado a cada subdomínio, ou seja, se antes uma página e seus elementos ficavam armazenados em somente um hostname e o browser limitava a N conexões simultâneas, com o uso dessa técnica o número de requisições possíveis simultâneas passa a ser N multiplicado pelo número de subdomínios utilizados. Isso torna possível que mais arquivos sejam baixados em paralelo pelo browser, diminuindo assim a fila de requisições de arquivos e o tempo para carregamento da página e de todos seus recursos.

Apesar do ganho poder ser grande, deve-se tomar cuidado com o uso exagerado de subdomínios, pois múltiplas conexões concorrentes aumentam o uso de CPU pelo browser, além de ser necessário estabelecer uma conexão TCP com cada subdomínio e resolver seu nome por DNS, o que pode causar o efeito oposto ao desejado, ou seja, fazer com que a página demore mais para carregar. O número ideal depende de vários fatores e características do site, mas estudos mostram que um número entre 2 e 4 subdomínios é o indicado. Mais informações sobre os ganhos e cuidados com o uso dessa abordagem podem ser encontradas nos links de referência a seguir:

 

Presente de fim de ano

Aqui vão algumas dicas de conteúdo técnico gratuito, para quem estiver a fim de estudar:

Gostaria de aproveitar para desejar a todos que acompanham este blog um feliz Natal e um ótimo ano de 2008!

Conteúdo técnico da Microsoft em português

Não há como negar que a maior parte do conteúdo sobre tecnologia produzido atualmente é feito em inglês. Infelizmente, por diversos motivos, não são todas as pessoas que se sentem à vontade lendo nesse idioma, fazendo com que surjam barreiras na adoção e no uso correto de tecnologias. Já há algum tempo, a Microsoft vem lançando algumas iniciativas que visam fornecer conteúdo técnico localizado para o português do Brasil:

  • muitos artigos do MSDN americano podem ser encontrados traduzidos no MSDN Brasil
  • a revista MSDN Magazine também pode ser lida em português
  • a próxima versão do SQL Server, a 2008, será a primeira com interface traduzida para o português
  • desde o ano passado, está disponível a documentação do Visual Studio 2005 e .NET Framework 2.0 do MSDN em português, em formato wiki
  • recentemente, também foram lançadas as versões em português das documentações do SDK do Office SharePoint Server 2007 e do Windows SharePoint Services 3.0, também em formato wiki

Particularmente, acho o projeto do MSDN Wiki muito interessante. Como seria muito trabalhoso (e caro!) um grupo de pessoas traduzir o conteúdo, optou-se pela tradução automática via software. Imagino que a tradução de textos deve ser um dos maiores desafios da área, já que não basta termos dois dicionários, um em cada idioma, e procurar neles o correspondente de cada palavra. Apesar das línguas possuírem suas regras, as mesmas são flexíveis e possuem muitas nuances, que uma tradução literal não contempla. Além disso, o idioma sofre alterações diárias, não em suas regras, mas no seu uso. Considerando todos esses obstáculos, o nível de tradução obtido pelo MSDN Wiki é muito bom. Claro que alguns pequenos problemas existem, mas na maior parte das vezes, nem se percebe que a tradução foi feita automaticamente, de tão perfeito que é o resultado. O que eu acho mais legal no formato wiki é que, além de corrigir eventuais falhas de tradução, todos nós da comunidade podemos incluir conteúdo, como exemplos, dicas e informações, enriquecendo o material.

Se você não conhece os sites, sugiro visitá-los e contribuir para melhorá-los. E sempre que alguém reclamar sobre a falta de conteúdo em português, não deixe de indicar esses links.

Ferramentas para captura de tela - Parte 3: SnagIt

O Snipping Tool, que vem com o Windows Vista, é uma evolução em relação a tecla Print Screen, e muito útil para quem precisa fazer capturas de telas simples. Entretanto, se você precisa capturar telas para algo mais profissional, como desenvolver o manual de um sistema ou inserir imagens em um artigo técnico que você esteja escrevendo, logo encontrará limitações ou então terá que recorrer a softwares auxiliares, como por exemplo, softwares de edição de imagem. Posso citar como exemplo de uma limitação o fato do cursor do mouse não ser capturado em nenhum dos dois casos apresentados até aqui.

Se você precisa capturar telas de maneira mais profissional, sugiro que avalie o SnagIt, da empresa TechSmith. É uma ferramenta poderosa e fácil de usar, permitindo várias combinações de configurações. Quando se executa o programa, é apresetada uma janela como a imagem abaixo (clique nela para ampliá-la):

 

 Basicamente, temos 3 regiões na janela:

  1. Barra lateral esquerda, que dá acesso à outras ferramentas que fazem parte do pacote, como um editor e um gerenciador de imagens, e atalhos para algumas tarefas;
  2. Profiles, onde ficam os perfis de captura que já vêm pré-configurados no produto. Também podemos criar nossos próprios perfis, ajustados às nossas necessidades;
  3. Profiles settings, onde pode-se configurar o perfil selecionado no item acima. Entre os tipos de configurações possíveis, estão a forma de captura, a saída gerada e efeitos nas imagens capturadas.

As principais regiões do programa são a 2 e a 3, nas quais ficam as funcionalidades principais. Entre os tipos de captura temos a de região da tela (na qual selecionamos um pedaço da tela a ser capturado), da janela ativa, da tela inteira, de um objeto da tela ou de um menu. Também podemos escolher se o cursor do mouse irá aparecer na imagem capturada e também configurar um timer, para que a captura seja feita somente após um determinado período de tempo. Por exemplo, podemos configurar o timer para 10 segundos e fazer a captura de um menu. Assim, temos 10 segundos para abrir o menu e se preparar para a captura, ou seja, a tela a ser capturada não precisa estar pronta para ser capturada imediatamente.

Outra funcionalidade interessante é a captura de tela com scroll. Suponha que você queira capturar uma página web ou o conteúdo de algum documento que não cabe inteiramente na tela, provocando o aparecimento da barra de rolagem vertical. Você pode configurar o SnagIt para que ele faça a captura com o scroll (paginação), ou seja, o software irá simular o funcionamento da tecla PageDown na janela a ser capturada e gerar um única imagem com todo o conteúdo.

Com o SnagIt também podemos extrair o texto de uma janela, fazer o download das imagens de um site, gravar um vídeo com o que acontece na tela, incluindo ou não som, e fazer conversão em lote de vários formatos de imagem. Isso sem falar no editor de imagens, que permite fazer manipulações e aplicar efeitos dos mais variados.

O SnagIt apresenta várias outras possibilidades, ideal para quem precisa de mais opções no momento de captura de tela e não quer recorrer a vários programas para se atingir o efeito desejado. Além disso, ele não é um produto gratuito, mas uma versão de avaliação pode ser obtida no site da TechSmith.

Ferramentas para captura de tela - Parte 2: Snipping Tool

Apesar da tecla Print Screen ser a técnica mais utilizada para captura de telas, ela é muito limitada, pois só captura a tela toda ou então a janela ativa. Além disso, seu uso não é lá muito intuitivo. O Windows Vista traz uma ferramenta que havia passado despercebida para mim até outro dia. Trata-se do Snipping Tool, que pode ser acessado no menu All Programs > Accessories > Snipping Tool, como mostrado abaixo, ou então digitando-se snipping na caixa de busca do Vista.

 

Quando ele é executado, vemos uma pequena janela. Clicando-se na seta do botão New, podemos escolher o formato da captura de tela:

 

Os formatos disponíveis são:

  • Free-form Snip: permite delimitar a área da tela a ser capturada de forma livre, ou seja, nós "recortamos" a área em qualquer formato. Veja um exemplo:

 

  • Rectangular Snip: a área da tela será capturada no formato retangular;
  • Window Snip: captura o conteúdo de uma janela;
  • Full-screen Snip: captura a tela inteira;

As duas últimas opções já eram possíveis com o Print Screen. Após a captura ser feita, é aberta uma outra janela, na qual podemos fazer edições simples, como destacar alguma parte da imagem, salvá-la ou então enviá-la por e-mail. Além disso, se clicarmos no botão Options, podemos fazer algumas configurações, como incluir uma borda na imagem capturada, entre outras.

O Snipping Tool pode ser considerado uma evolução do Print Screen, já que oferece algumas funcionalidades que antes não eram possíveis. É uma alternativa mais intuitiva e bem útil para quem não precisa de algo profissional. É o tipo de utilitário que faz você se questionar por que a Microsoft não havia feito isso nas versões anteriores do Windows.

Ferramentas para captura de tela - Parte 1: Print Screen

Muitas vezes, precisamos capturar a imagem que está sendo exibida atualmente no monitor, seja para colocá-la em algum texto que estamos escrevendo, numa apresentação do PowerPoint, em um e-mail, etc. Pretendo escrever aqui no blog sobre algumas ferramentas que nos permitem realizar a captura da telas, também conhecida como screenshot.

A primeira ferramenta sobre a qual irei comentar não é bem uma ferramenta, mas sim uma técnica. Trata-se da tecla Print Screen do teclado. Fiquei em dúvida se comentaria sobre ela aqui, afinal, essa deve ser uma das dicas mais manjadas que existem, mas cheguei a conclusão de que a série não seria completa se não escrevesse sobre esse clássico. Pois então, caso você não saiba, ao se pressionar a tecla Print Screen, a imagem exata do que está sendo apresentado na tela é copiada para a área de transferêcia (ou clipboard) do Windows. Isso significa que a figura está disponível para ser colada (Ctrl+V), por exemplo, em um documento do Word ou em algum outro aplicativo que suporte imagens.

Pensa que acabou? Essa técnica ainda tem um truque: se você pressionar a tecla Alt em conjunto com Print Screen, somente o conteúdo da janela ativa será copiado para a área de transferência. Apesar de ser uma técnica um tanto quanto rudimentar, é a mais utilizada para capturar telas, pois é simples e prática. Nos próximos posts prometo melhorar o nível e apresentar ferramentas mais elaboradas. Laughing

Imagens amareladas no Windows Photo Gallery do Windows Vista

Outro dia percebi que as imagens abertas no Windows Photo Gallery, do Windows Vista, estavam aparecendo com uma tonalidade de amarelo, como no exemplo abaixo (clique na imagem para vê-la em tamanho maior):

 

Note que não somente a imagem aparece amarelada, mas também boa parte da janela do Windows Photo Gallery. Isso ocorria para qualquer arquivo de imagem. O mais estranho é que se aberta em algum outro programa, a imagem era apresentada com as cores corretas.

O problema estava no profile de cor utilizado pelo monitor. Para corrigir o problema, clique com o botão direito do mouse sobre o desktop > escolha Personalize > Display Settings > clique no botão Advanced Settings > vá à guia Color Management > clique em Color Management > na janela que se abre, selecione a opção Use my settings for this device > clique no botão Add > selecione o profile sRGB IEC61966-2.1 e clique Ok > selecione o profile que acabou de ser incluído e clique em Set as Default Profile. A tela deverá ficar parecida com a imagem abaixo:

 

Reinicialize o computador e tente visualizar alguma imagem no Windows Photo Gallery. Se tudo deu certo, a imagem será mostrada com suas cores corretas, conforme figura abaixo (clique na imagem para vê-la em tamanho maior):

 

Perceba a diferença em relação a imagem anterior. O problema parece ser causado por alguma atualização de driver feita pelo Windows Update, segundo infomações que li. Seguem alguns links utilizados como referência:

Trabalhando com documentos do Office 2007 em versões anteriores do Office

A versão 2007 do Office trabalha, por padrão, com um novo formato de arquivo baseado em XML. A maneira mais fácil de reconhecer este tipo de arquivo é verificar a extensão do mesmo: a letra "x" foi adicionada ao final da mesma. Assim, um documento do Word 2007 possui a extensão .docx, uma planilha do Excel 2007 tem a extensão .xlsx, enquanto que uma apresentação do PowerPoint 2007 agora termina com .pptx.

O que muita gente não sabe é que não é preciso ter a última versão do Office para se trabalhar com estes novos formatos. Caso você possua uma versão do Office a partir da 2000, instalando um pacote de compatibilidade, é possível abrir, editar e salvar arquivos no novo formato. Isso se torma mais importante se considerarmos que já começamos a encontrar documentos neste formato disponíveis para download na Internet.

Instalando o modem ADSL SpeedTouch 330 USB no Windows Vista

Se você utiliza banda larga com o modem SpeedTouch 330 via USB, encontrará problemas no Windows Vista. Isso porque o mesmo não é reconhecido automaticamente pelo novo sistema operacional. Notem que estou me referindo ao modem conectado à porta USB, e não ao modem que é conectado à saída da placa de rede Ethernet. Esse, pelo que fiquei sabendo, o Windows Vista reconhece normalmente, e é isso que, provavelmente, o pessoal do suporte técnico da empresa que vende o serviço de banda larga vai lhe falar. O fato é que a versão USB desse modem é quase uma anomalia (são poucos os felizardos que o possuem), tanto que este modelo nem está mais disponível.

Ao tentar instalar a aplicação que vem no CD (que não foi feita para o Vista), tudo aparentemente vai bem, até o momento do boot. Neste instante, a instalação é interrompida e aparece uma mensagem de erro dizendo que "O cliente PPoE não foi instalado". Neste ponto, apesar da instalação não ter sido concluída, os drivers do modem já foram copiados para o HD e já é possível instalar o modem manualmente. Apesar de assim termos acesso à Internet, não é uma solução muito bonita, pois estamos utilizando uma versão de driver antiga e a mensagem de erro sempre aparece quando inicializamos o computador.

Pesquisando um pouco na Internet, descobri que várias pessoas estavam enfrentando o mesmo problema. Também descobri que, recentemente, a Thomson, fabricante do produto, disponibilizou em seu site uma versão do driver para Windows Vista. Para instalá-lo, siga o seguinte procedimento:

  1. desligue o modem da porta USB; 
  2. caso tenha instalado alguma versão anterior do driver, desinstale-a;
  3. dê um boot no computador;
  4. execute o arquivo copiado do site com os novos drivers;
  5. quando solicitado, conecte o modem à porta USB;

Em minhas pesquisas sobre o assunto, achei um post de um blog brasileiro que explica um outro procedimento. Não cheguei a testá-lo, mas fica aqui a referência, caso alguém precise.

Dica: Filtro de extensões de arquivos para upload

Uma dúvida que aparece freqüentemente nos fóruns do MSDN Brasil é sobre como restringir o upload a determinados tipos de arquivos. A idéia é que, por exemplo, se uma aplicação web disponibiliza a funcionalidade de upload de imagens, não se deveria deixar que fosse feito o upload de um arquivo com extensão .doc.

Podemos fazer essa verificação no servidor. O problema desta abordagem é que uma requisição deve ser feita ao servidor web para que este possa fazer a validação. O ideal seria fazer essa restrição no momento em que o usuário está escolhendo o arquivo, ainda no lado cliente da aplicação.

Apesar da especificação do HTML do W3C prever o atributo accept, que especifica uma lista de tipos permitidos para upload de arquivos, parece que nenhum browser implementou essa característica. Pesquisando na Internet, encontrei um código javascript que permite especificar as extensões de arquivos permitidas para upload. Caso o arquivo escolhido não possua uma das extensões informadas, uma mensagem de aviso é exibida e o upload não é feito.

Algumas observações sobre o script: ele não limita a escolha de arquivo às extensões pré-definidas. Ou seja, na caixa de diálogo para escolha do arquivo, pode-se escolher qualquer um. A consistência é feita somente no momento em que o formulário for submetido ao servidor. Outra ponto que deve ser notado é que, por se tratar de um script que roda no lado cliente da aplicação, não se deve confiar totalmente nele, pois pode ser burlado. Assim, é importante que a validação também seja feita no servidor. Por último, nada impediria que alguém renomeasse um arquivo qualquer para uma das extensões permitidas, mesmo que a nova extensão não tivesse nada a ver com o conteúdo do arquivo.

Também sugiro ler uma FAQ que encontrei, com as principais dúvidas relativas a upload de arquivos em aplicações web.