Cuidados na hora de escrever JavaScripts que vão ser usados em outros sites
A utilização de JavaScript cross-site não para de crescer. Hoje é difícil você acessar algum grande site que não tenha alguma chamada para um código que esteja hospedado em outro domínio.
Isso acontece porque os sites querem aumentar o número de recursos oferecidos para seus visitantes, prendendo a atenção com mais ofertas e possivelmente ganhar algum dinheiro. Isso tudo é feito colocando conteúdos, publicidades e ofertas que vem de sites parceiros.
Para fazer isso, os desenvolvedores Web dos sites que são fornecedores usam um jeito bem prático, de fácil manutenção e de fácil instalação para os parceiros. Eles produzem um arquivo JavaScript que fica hospedado em sua própria infra-estrutura e solicitam àqueles que forem usar seu código que simplesmente acrescentem uma tag em seu site que aponte para esse arquivo.
Para exemplificar de maneira fácil, esta página que você está lendo tem uma chamada para o ranking do BlogBlogs na coluna da direita. Toda vez que um visitante entra aqui, além do meu servidor de hospedagem ter que responder para montar toda a página, o servidor do BlogBlogs também recebe um pedido e tem que entregar o código responsável em montar o box de ranking.
Para o visitante, isso é péssimo, pois toda vez que o navegador começa a renderizar uma página e encontra um arquivo JavaScript externo, ele para de renderizar e espera o arquivo chegar para poder ser interpretado.
O engine dos navegadores assume que o código externo pode mudar o layout do site atual ou simplesmente interferir na renderização de alguma forma e, de forma correta, ele espera o código chegar, interpreta e continua com a renderização.
E como fazer para resolver esse problema de carregamento? Bem, existem diversas formas, algumas pouco conhecidas e outras que exigem apenas o bom senso de quem desenvolve códigos que serão usados em diversos sites.
Umas das formas de contornar o problema de espera do browser é simples. Basta você acrescentar um atributo na tag JavaScript que aponta para o código que está em outro domínio. Esse atributo é o defer="defer". Apesar de ser bem simples, isso tem que ser feito com muita consciência.
O resultado do uso desse atributo, dependendo do que o código externo faz em sua página, pode ser catastrófico, principalmente se o código externo usar o document.write. Como ele informa para o engine do navegador que ele não precisa esperar o código chegar para continuar renderizando a página, no final da renderização o código externo pode quebrar completamente seu site, substituindo todo o HTML já carregado.
Umas das soluções que considero boa mas não vejo muita gente usando é trocar o uso do document.write por innerHTML. A diferença é que daria um pouco mais de trabalho para os parceiros. Como seria?
Pegando esse exemplo do box de ranking. Ao invés de você colocar uma tag JavaScript no lugar onde quer que o box apareça no seu site, você colocaria apenas um elemento div com id="ranking_blogblogs". No final do seu código você colocaria a chamada para o arquivo externo com o atributo defer="defer". Esse código, ao invés de usar document.write, usaria documnet.getElementByID("ranking_blogblogs").innerHTML = "código HTML da box".
Desta forma, o carregamento do seu site não ía ser prejudicado de nenhuma forma pelo conteúdo externo. O tempo de carregamento até os visitantes enxergarem alguma coisa certamente dimuniria e todos ficariam mais contentes. A única coisa que mudaria de fato é que o box, que é o exemplo em questão, não seria uma das primeiras coisas a aparecer no seu site pois, a ordem de carregamento das coisas foi alterada.
Nada mais justo não? Carregar primeiro seu conteúdo depois o que vem de fora. Para registrar, tenho visto isso acontecendo com frequência com link patrocinados, barras de shopping, widgets, rankings de blogs entre outros.
Conclusão, quando você for desenvolver algo que será usado em um grande número de sites, considere que se seu servidor demorar pra responder, você irá prejudicar seus parceiros. Se este for seu caso, reescreva seu código.
O dia em que removeremos os principais programas do nosso micro está cada vez mais próximo
Temos visto um mar de novidades na Web e, como já é sabido, os aplicativos Web estão cada vez mais próximos da possibilidade de substituir os de desktop. Já temos na Web muitos jogos, editores de texto, de planilhas, slides, gerenciadores de arquivos, fotos, etc.
No esquema atual, cada um tem sua máquina, normalmente um PC ou um Mac que vem com Windows, Linux ou MacOS. Além do sistema operacional, o proprietário, dependendo da finalidade da máquina, instala um conjunto de programas para que ele possa trabalhar.
Com o surgimento dos aplicativos Web, que usam apenas um navegador que pode ser instalado em qualquer sistema operacional, as coisas estão mudando e as perguntas que começam a passar na cabeça dos usuários certamente assustam cada vez mais os sobreviventes do mercado de softwares para desktop. Vou colocar abaixo algumas perguntas que venho escutando ultimamente:
- Para que eu vou pagar para ter um editor de textos no meu micro sendo que eu posso usar um gratuito e que se aproxima muito do pago?
- O que é melhor, ter um programa que consome boa parte dos recursos da minha máquina ou usar uma versão que usa recursos do servidor onde ele fica hospedado?
- Não é muito melhor usar um programa que fica hospedado na Web e que me permita gravar e compartilhar arquivos com todo mundo?
- Ao invés de comprar um software, não é melhor pagar para usá-lo, algo como uma mensalidade que me possibilite acessá-lo de qualquer lugar através do browser?
Apesar do caminho não estar muito claro para alguns, já tem muita gente se movimentando na direção do desenvolvimento de softwares que usam apenas os navegadores como plataforma. Esses dias esbarrei com "um" muito interessante. É o eyeOS.
Os desenvolvedores reuniram um conjunto de programas comuns nos sistemas operacionais citados acima, arrumaram um jeito bacana de gerenciá-los e batizaram de sistema operacional. A diferença é que tudo funciona no navegador e todos seus arquivos, planilhas, etc. ficam armazenados nos servidores deles.
Existe também a possibilidade de instalar uma versão do software na sua máquina. Nesta opção, o que vai acontecer na verdade é que o pacote que você pegar, vai instalar um servidor Web (Apache) e ligar um "site" que irá funcionar no seu micro.
Pra quem gosta de novidades deste tipo, recomendo dar uma boa olhada e, prestar atenção em uma coisa que certamente será confusa pra muita gente. No eyeOS tem um navegador Web (eyeNav). Você pode abrir seu navegador preferido, logar no eyeOS, abrir o eyeNav e acessar algum site. É bem esquisito e, no mínimo curioso, mas acho que serve pra abrir a mente.
É importante registrar que o projeto é Open Source.
Desvendando os relatórios de audiência do seu site
Com o crescente surgimento e utilização de ferramentas de análise de audiência, é cada vez mais comum ver funcionários de diferentes departamentos acessarem os relatórios fornecidos e ficarem confusos. Se você se encaixa neste perfil, este post é pra você.
Para tentar explicar os termos e suas diferenças, vou fazer uma analogia com o dia-a-dia da maioria das pessoas que gostam de ler na internet. Vamos ao cenário.
Você chega logo cedo para trabalhar e entra neste blog pela primeira vez (nunca tinha entrado). Além deste post, você acaba lendo outros dois. Assim que termina de ler os três, fecha o navegador e começa a trabalhar. O tempo que você investiu na leitura foi de 10 minutos. No final do dia você lembra da leitura esclarecedora que tinha feito pela manhã e entra novamente para pegar o endereço e passar para um amigo. 
Supondo que este blog não tenha tido mais nenhum visitante durante todo o dia em que você o conheceu, acesso o relatório de audiência do Google Analytics, que é a ferramenta que uso para mensurar a visitação deste blog, no dia seguinte e descubro o seguinte:
No dia anterior tive duas visitas, ou seja, você entrou pela manhã, leu 3 posts e entrou no final do dia em 1 post. Podemos fazer uma analogia com aquela visita que você fez ontem cedo na casa nova (site/blog) da sua sogra . Você chega lá, toca a campainha, entra (1 visita), conhece alguns cômodos (3 páginas vistas), ela te convida pra tomar uma sopa, você recusa pois sabe que a sopa dela é horrível , olha pro relógio, descobre que está batendo o recorde de permanência lá pois já se passaram 10 minutos, vira e sai correndo. No final do dia, para sua infelicidade, você tem que passar novamente lá para pegar sua carteira em cima da mesa (Segunda visita). Inventa uma boa desculpa e consegue entrar e sair com a carteira na mão em apenas 1 minuto.
Além das duas visitas, vejo que tive 4 páginas vistas (Page views), ou seja, 3 posts pela manhã e 1 no final do dia. Vejo também a média de páginas vistas por visita (Pages/Visit). 3 páginas na primeira visita + 1 página na segunda visita. Isso dá uma média de duas páginas por visita.
O tempo médio de permanência no site (Average Time on Site) é de 5 minutos e 30 segundos, ou seja, 10 minutos na primeira visita mais 1 minuto na segunda. Tudo isso somado e dividido por 2 que é o número de visitas.
O número de visitantes únicos (Unique Visitors) é 1. Da mesma forma que você foi duas vezes na casa da sua sogra e ela te reconhece como 1 mala só, no relatório, você também é visto como apenas um. Visitantes únicos são considerados como o número de pessoas diferentes que acessaram seu site, não importando o número de visitas e páginas vistas.
Outro dado importante é número de novos visitantes (New Visitors). Como você nunca tinha entrado no meu blog. Você aparece no relatório como 1 novo visitante. Caso faça mais visitas, irá aparece como visitante que retorna (Returning Visitors).
Uma medida extremamente importante, dependendo do tipo de conteúdo do seu site, é o número de abandonos (Bounce Rate). Este número é mostrado de forma percentual e indica quem chega no seu site e vai embora sem entrar em uma segunda página. Disse que é importante pois, se for alto, significa que suas páginas não estão oferecendo para os visitantes algo além do texto que faça com que ele continue navegando.
É importante registrar que alguns cálculos mudam de acordo com a ferramenta que você usa. Apenas como exemplo, o Google Analytics considera duas visitas se você ler 1 post, deixar o navegador aberto durante 30 minutos e depois ler outro. Isso muda de ferramenta para ferramenta.
Caso você tenha alguma dúvida de algum termo que não mencionei aqui ou, queira discutir seu relatório. Envie suas dúvidas.
WeeWar, simplesmente imperdível
Para quem gosta de jogos de estratégia, não deixem de conhecer o WeeWar. O site, que é a entrada para um jogo muito bem feito de estratégia, está ficando famoso.
Todo o jogo é baseado em Ajax e DHTML. Você faz sua jogada e o sistema envia um e-mail para seu oponente avisando que é a vez dele. Isso permite você travar boas e longas batalhas com amigos sem atrapalhar o trabalho.
O jogo ainda é beta e para conseguir entrar, você precisa solicitar um convite que, até hoje, todos que conheço conseguiram.
Para quem quiser saber mais, tem um blog abastecido pelos criadores com as principais novidades e correções.
Anotem aí, não demora muito para alguém grande comprar
Safari para Windows, vale a pena?
Depois de muito ouvir do último lançamento da Apple, resolvi tirar minhas próprias conclusões sobre o lançamento do navegador Safari que, já é muito popular entre os usuários de Mac e agora, tenta entrar na acirrada briga entre os navegadores para Windows que, até o momento, é disputada pelo Internet Explorer e Firefox.
Depois do download dos 8MB, que foi consideravelmente rápido, fui para instalação. Tudo é em Inglês pois eles ainda não internacionalizaram o software. Na página com as descrições do browser, diz que eles já estão trabalhando nisso. É o famoso "Coming Soon"!
Logo no começo o instalador me perguntou se eu queria instalar um tal de Bonjour Service e ainda, o software que seria responsável em fazer as atualizações do navegador. Como estou interessado em apenas testar o browser, resolvi não instalar.
Assim que carreguei o programa, sai navegando em algumas páginas que já estou bem acostumado, para ver se notava alguma diferença. A primeira delas foi em relação aos formulários.
Talvez como tentativa de melhorar a usabilidade, o navegador coloca automaticamente uma borda azul nos campos que estão com o foco. Eu não gostei pois acho que isso deve ser feito por quem faz a página e, como era esperado, isso acaba conflitando com formulários que já fazem uso deste recurso atavés do CSS, sem contar que muita gente usa campos de texto escondidos e flutando sobre imagens para dar uma "cara" melhor para os formulários. Neste caso o Safari estraga a tentativa do web designer.
As fontes, radio buttons, selects, botões e outros elementos que temos em formulários ficam com uma aparência totalmente diferente, claro, com cara de Mac. Fontes mais arredondadas, radio usando efeito acqua, selects redondos e assim por diante. Ainda falando sobre formulários, você consegue redimensionar os textareas dos formulários de uma forma bem fácil.
Como as fontes ficam totalmente diferentes, as páginas acabam não ficando exatamente como seus desenvolvedores planejaram. Vi coisas "quebradas" na capa dos principais portais Brasileiros, mas são irrelevantes.
Resolvi entrar no Gmail, que faz bastante uso de Ajax, para ver o que acontecia. Aparentemente tudo funcionou só que os formulários ficaram meio doidos, principalmente o de criar nova mensagem. Os campos ficaram desformatados e o redimencionamento citado acima não funcionou como esperado.
Quando entrei na caixa de Spam, que sempre é enorme, notei que o scroll da página ficou super lento. Resolvi então dar uma verificada no consumo de processamento e memória e, para minha surpresa, ele estava consumindo mais memória do que o Firefox e IE, que também estavam abertos. Detalhe: estava com 5 abas abertas no Firefox e apenas uma no Safari. O consumo era de aproximadamente 88MB do Safari contra 80MB do Firefox e 40MB do IE.
Uma das afirmações da Apple é que o Safari é mais rápido do que os concorrentes tanto em tempo de carregamento de páginas como em interpretação de JavaScript. Não peguei o cronômetro e, aparentemente achei que é mais rápido mesmo mas, fica evidente que a forma que ele faz para carregar as imagens é bem diferente. Parece que todas as imagens se transofrmam em progressivas, ou seja, aparecem com uma resolução ruim e vão melhorando com a chegada de mais dados.
O bloqueador de popups funciona, ou seja, impede que eles abram mas, o usuário simplesmente não sabe que o browser acabou de bloquear um conteúdo que poderia interessar. Só depois de desligá-lo através das configurações é que consegui ver um popup.
A integração com RSS é bem diferente dos concorrentes mas ainda não está funcionando direito. Quando você carrega um RSS e tenta adicioná-lo como bookmark, nada acontece. Na verdade toda a barra de ferramentas que abre do lado direito da página de RSS não funciona direito, acho que eles deixaram pra arrumar isso pra versão estável, eu espero.
Uma coisa que eu achei ruim foi eles terem mudado atalhos que já são padrão em aplicativos Windows. Por exemplo, o Ctrl+Tab não muda abas.
O plugin do Flash precisa amadurecer bastante. Encontrei diversos problemas em sites feitos em Flash que impediram minha navegação. Scrolls não funcionam, o ponteiro do mouse não vira uma "mãozinha" quando temos botões, entre outros problemas.
A busca nas páginas é interessante, na veradade a solução visual que eles dão para marcar os termos procurados me agradou bastante mas, infelizmente a busca não encontra o que está dentro de formulários. Isso faz muita falta!
Uma das coisas que dá bastante problema no Firefox é abrir arquivos PDF, tentei com o Safari e também não consegui. Tive que "matar" o programa através do Gerenciador de Tarefas. Depois de reiniciá-lo, resolvi fazer o último teste. Fazer vários downloads ao mesmo tempo pra ver como funciona o gerenciador de downloads que, pelo menos pra mim, é fundamental em um browser.
Os arquivos que peguei vieram bem. O único detalhe é que ele simplesmente começou a gravá-los e eu não fazia idéia do diretório de destino. Quando entrei nas configurações e vi que era o desktop, procurei uma opção que fizesse com que ele perguntasse toda vez que fosse fazer um download e não encontrei. Só é possível escolher outro diretório diferente do desktop.
A conclusão que tirei foi: não vale a pena. Achei muita ousadia e pretenção da Apple não seguir os temas do Windows, ou seja, todo o layout do navegador é diferente do que o usuário está acostumado a ver e, pelo menos até onde sei, não dá pra mudar isso. As fontes também não me agradaram nem um pouco.
Sobre os problemas, ainda existe o pretexto de ser versão beta então, não adianta ficar falando. Quando instalamos programas betas, sabemos que vamos encontrar problemas. Tudo bem, talvez não tantos, mas não é o caso. Mesmo que eles corrigam as principais falhas, ainda fico com o Firefox porém, achei ótimo o lançamento pois é mais um pra concorrer e, quem realmente ganha com essas concorrências somos nós!
Safari para Windows
Para melhorar ainda mais a briga entre os navegadores, a Apple disponibilizou para download a versão beta do Safari para Windows.
A Microsoft, depois de anos sem se mexer por causa do domínio absoluto do mercado de browsers, começou a correr atrás do que poderia ou pode ser um prejuízo graças ao crescimento de uso do Firefox.
A Apple, por sua vez, com esse lançamento que definitivamente quebra um enorme paradigma, mostra a importância de estar presente nesse segmento pois, com as mudanças tecnológicas recentes, o navegador está se tornando o software mais importante para qualquer dispositivo.
Se as coisas continuarem caminhando assim, em breve só precisaremos de uma máquina, seja ela qual for, com acesso à Web e um browser. Por enquanto eu escolho o Firefox e você?
Wi-Fi ponto a ponto
Neste último final de semana estava com dois notebooks que têm wireless 802.11g e precisava passar aproximadamente 10GB de dados entre eles. Eu até tinha um pen drive de 2GB mas queria algo melhor do que o atualizado protocolo PPC-PPL (pen drive pra cá, pen drive pra lá). Atualizado porque recentemente substituiu o DPC-DPL (disquete pra cá, disquete pra lá).
Até então, tinha usado wireless somente conectando notebooks e PDAs à uma rede sem fio já existente e, conexão direta entre dois micros só através de cabo cross-over.
No trabalho, que tem uma LAN tradicional, temos um access point que dá acesso sem fio para os dispositivos, normalmente notebooks de clientes, que precisam navegar na internet ou até mesmo pegar algum dado nos nossos servidores de arquivos.
Em casa, tenho ADSL via cabo coaxial que ligo em um roteador que tem 4 portas físicas e também é wireless. Conecto meu desktop no roteador através de cabo e o notebook que uso para trabalhar através da rede sem fio.
Depois de pesquisar um pouco, achei o Wipeer que é um programa bem interessante que faz todo o trabalho e é bem fácil de usar. Além de gerenciar a conexão, ele tem uma interface bem agradável e vem com chat, uma área para compartilhamento de arquivos e 4 jogos simples para serem jogados através da conexão P2P.
Com ele instalado, consegui fazer os dois notebooks conversarem e copiei os 10GB sem usar o pen drive. Apesar de ter achado a velocidade de transimissão bem lenta, recomendo pois, no mínimo dá pra se divertir com os jogos e com o chat.
O único detalhe impotante é que para instalá-lo no Windows XP, é necessário ter o .Net Framework 2.0 que tem aproximadamente 23MB.
Comprador de carro é sinônimo de sofredor, e viva as injustiças!
Sempre fui interessado pelo mercado de veículos e últimamente tenho acompanhado preços, feirões e anúncios na web. Com esse tempo levantei vários dados interessantes que certamente são muito úteis para quem está procurando um carro. Como é comum aqui no Brasil, alguns dados são lamentáveis.
A primeira coisa é, já que o foco deste blog é web: não comprem carros novos pela web - pelo menos não enquanto as empresas não amadurecerem ou pelo menos entenderem o que é a tal da internet. É simples, o mercado de veículos é muito grande, existem milhares de concessionárias e lojas que seriam prejudicadas diretamente se as montadoras fizessem vendas diretas com custos inferiores àqueles praticados no mercado, ou seja, o preço que você encontra nos sites das montadoras é razoável, mas estando em uma concessionária é sempre possível conseguir preços menores, sem contar que normalmente você acaba conseguindo outros tipos de benefícios e acessórios que não consegue pela web. Vejam, não comprem não significa não pesquisem.
Começando a citar coisas lamentáveis, é inacreditável como deixam brechas para empresas ganharem dinheiro de maneira fácil. Locadoras de veículos, que compram carros com aproximadamente 20% do preço de mercado, são obrigadas a ficar pelo menos seis meses com os carros, isso para não sairem comprando e vendendo. Pois bem, mesmo com os seis meses, é exatamente o que elas fazem, compram milhares de carros, locam por seis meses e colocam pra vender. Isso é feito apenas com os carros que têm mais liquidez de mercado. Com isso elas ganham bastante dinheiro e ainda prejudicam lojas de semi-novos que não conseguem concorrer pois não tem os mesmos benefícios.
Agora o fato mais lamentável. Compradores de carros novos, fiéis a marcas, sofrem constantes traições. O pior, não tem jeito, não existe nenhuma fiel. Estamos chegando no meio do ano e já temos carros 2008. Quem teve a infelicidade de comprar um carro 2007/2007 no começo do ano perdeu uma boa quantia pois logo em seguida as montadoras começaram a lançar carros 2007/2008. Quem é culpado? Montadoras e governo, que provavelmente devem agir juntos. Como é possível permitir um carro fabricado em 2007, que em alguns casos sequer sofreu alteração em seu modelo, tenha documento de 2008?
Esse mercado, assim como muitos outros, é bem sujo. Tem picaretagem pra tudo quanto é lado e quem vai comprar um carro tem que tomar muito cuidado pra não cair em golpes e - apesar de ser difícil, tentar se esquivar de todas essas armadilhas. Estou certo que alguém que está no mercado pode facilmente escrever um livro apenas com as injustiças mas, como envolve muito peixe grande, o melhor é ir pra pizzaria mesmo, pelo menos pizza não tem ágio.
Estava quase esquecendo de citar a mega mutretagem de licenciamento de carros em outros estados que têm o IPVA menor. Parece que tudo é culpa do governo. Vai ver é mesmo
Caso o pessoal do WebMotors passe por aqui, deixo meu recado já que tentei entrar em contato há uns bons anos e nada aconteceu:
1. Arrumem a busca do site de vocês que só funciona direito com o Internet Explorer;
2. Seria razoável poder fazer buscas por mais de um modelo de carro ao mesmo tempo;
3. Deveria ter algum jeito mais fácil de acessar a lista de carros desejados;
A importância da acessibilidade do seu site
Pensando no site da sua empresa ou nos sites que você desenvolve ou desenvolveu, você consegue responder com facilidade as quatro perguntas abaixo?
- Como as pessoas com deficiência acessam o seu site?
- De que maneira o seu site é exibido em celulares, palmtops e handhelds?
- A linguagem utilizada é clara, sem ambigüidade?
- A informação está organizada para ser facilmente encontrada?
Estas perguntas foram extraídas do site do Acesso Digital, que é um grupo que visa a melhoria do acesso à Tecnologia da Informação. Na última semana eles publicaram um vídeo sensacional que mostra claramente como medidas simples na hora da construção de um site podem fazer a diferença para quem tem algum tipo de dificuldade.
O vídeo tem aproximadamente 12 minutos e, além de acrescentar muito, faz críticas diretas à sites de comércio eletrônico, bancos e até a orgãos públicos. Estou certo que a popularidade deste vídeo crescerá rapidamente e fará com que as empresas que aparecem, e também as que sabem que seu site não é acessível, corram atrás para melhorar seus sites.
O mínimo que posso fazer é recomendar o vídeo para todos os profissionais web, sem exceção e, deixar registrado aqui os parabéns pela belíssima atitude do Horácio Pastor Soares, a Lêda Lucia Spelta, o Marco Antonio de Queiroz e o Bruno Torres que formam a equipe do Acesso Digital.
Ruby on Rails x PHP x Java
Os dois desenvolvedores que escrevem o Rails Envy produziram uma série de 4 vídeos bem bacanas comparando o Ruby on Rails com Java e também com PHP.
Os vídeos foram filmados usando o mesmo tipo de comparação que ficou famoso com as propagandas da Apple onde duas pessoas se apresentam como produtos. Quem não se lembra do: "Hi, I am a Mac, and I am a PC".
Apesar de achar que eles misturaram um pouco as coisas (Framework x Linguagem), o resultado final foi bom e, é no mínimo engraçado.
Ruby on Rails X Java #1
Ruby on Rails X PHP #2
Ruby on Rails X PHP #3
Ruby on Rails X PHP #4