Pinceladas da Web » Browsers

As engines de JavaScript

Jeronimo Fagundes — Mon, 05 Apr 2010 15:20:55 +0000

Este é um post rápido de se ler. Vai a título de curiosidade.

Com os lançamentos de novos navegadores e novas versões nos últimos anos, o desempenho de JavaScript melhorou muito. Muito disso se deve a melhorias (e mesmo substituições completas) das engines de JavaScript de cada navegador.

A seguir, uma pequena lista das engines de JavaScript atuais, da mais rápida para a mais lenta.

Carakan – é a engine lançada no Opera 10.50. Testes demonstram que ela é a engine mais rápida atualmente.
V8 – a engine do Google Chrome. É muito importante na história recente dos browsers, por ter sido a primeira a dar um salto de desempenho frente às demais engines. Tem praticamente um empare técnico com a Carakan em termos de desempenho, perde por quase nada.
SquirrelFish – antigamente era chamada JavaScriptCore, mas adquiriu seu novo nome após ter integrado o JIT (Just-In-Time compilation). É usada no Safari, sendo parte do WebKit.
TraceMonkey – a engine lançada no Firefox 3.5. Uma evolução da antiga SpiderMonkey, que teve uma grande melhoria de desempenho.
JScript – engine do Internet Explorer, faz parte da engine de layout Trident. Perto das demais engines, tem um péssimo desempenho quanto a tempo de execução.

E essas são as principais engines do mercado atualmente. Espero que tenha sido interessante aos leitores saber dessas informações.

As engines de JavaScript

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Microsoft acerta no desenvolvimento do Internet Explorer 9

Pedro Rogério — Wed, 17 Mar 2010 12:19:13 +0000

Vocês se lembram quando falei que o Internet Explorer 9 teria suporte a HTML5?. Muita gente ficou duvidando, mas eis que a Microsoft resolver surpreender a todos e resolver implementar em seu novo browser suporte a HTML5 e a CSS3.

O anúncio foi feito no MIX 2010, onde a MIcrosoft resolver disponibilizar para download uma versão preview do Internet Explorer 9. Dentre essas novas features mostradas no evento, o IE9 tambpém terá suporte a SVG e um novo motor de JavaScript chamado Chakra, que promete bater de frente com Opera e Google Chrome.

Performance

No gráfico abaixo vocês podem ver o desempenho do novo motor de renderização de JavaScript:

Suporte a aceleração por Hardware

As novas aplicações que estão sendo desenvolvidas em HTML5 estão exigindo cada vez mais do Hardware, e o Internet Explorer 9 promete ao usuário uma nova experiência em navegação agora com suporte a aceleração por hardware. Um exemplo básico é essa página que anima os logos seguindo o mouse:

Para maiores informações sobre o que foi implementado no Internet Explorer 9 até o atual momento, aconselho você a visitar os seguintes links:

Se quiser obter atualizações em tempo real sobre o assunto, aconselho a me seguir no Twitter que estarei falando constantemente sobre o assunto.

Microsoft acerta no desenvolvimento do Internet Explorer 9

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Firefox 3.5 é o Browser mais utilizado no Brasil

Pedro Rogério — Wed, 10 Feb 2010 12:36:24 +0000

Com base em informações fornecidas pelo site StatCounter, podemos ver que hoje o Browser mais utilizado no Brasil é o Firefox 3.5:

Mas agora, falando de uma forma global, excluindo as versões, infelizmente o IE ainda tem uma vantagem:

Tenho plena certeza de que logo esse cenário irá se inverter. E vocês, o que acham?

Firefox 3.5 é o Browser mais utilizado no Brasil

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Detectar Mobile Browsers em várias linguagens

Walter Vieira — Wed, 09 Dec 2009 10:14:25 +0000

Dando continuidade ao post do Pedro Rogério sobre como Detectar Mobile Browsers com PHP, apresento mais uma opção que vai ajudar muito no desenvolvimento Mobile, o Detectmobilebrowser.com.

Trata-se de uma ferramenta opensource de Mobile Phone Detection, que oferece suporte para as principais linguagens do mercado (PHP,Rails,Javascript,ASP,etc).

É só escolher a linguagem desejada e baixar o arquivo.

Detectar Mobile Browsers em várias linguagens

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Detectar Mobile Browsers com PHP

Pedro Rogério — Tue, 24 Nov 2009 12:12:11 +0000

Com o constante crescimento da internet móvel, criar uma versão mobile do seu site não pode ficar para segundo plano. Devido hoje os browsers instalados nos aparelhos celulares serem cada vez mais semelhantes aos browsers desktop, utilizar do atributo media=”handheld” no CSS pode não ser a melhor solução.

Portanto, para você ter certeza de que sua aplicação será acessada corretamente pelos user-agents é aconselhável utilizar alguma linguagem de programação. Calma, você não precisa ficar desesperado por que não sabe programar, o site Detect Mobile Browsers disponibiliza um código para que você possa fazer isso facilmente. Você vai até o site, gera o código como desejar, depois basta fazer o download do mesmo e aplicá-lo ao seu site.

Exemplos

Detectar e redirecionar todas as requisições mobile para o site google.mobi:

< ?php
    include('mobile_device_detect.php');
    mobile_device_detect(true,true,true,true,true,true,'http://google.mobi/',false);
?>

Detectar e redirecionar todas as requisições não mobile para o site google.com:

< ?php
    include('mobile_device_detect.php');
    mobile_device_detect(true,true,true,true,true,true,false,'http://google.com/');
?>

Detectar e redirecionar: Mobiles para google.mobi e não mobiles para google.com:

< ?php
    include('mobile_device_detect.php');
    mobile_device_detect(true,true,true,true,true,true,'http://google.mobi/','http://google.com/');
?>

Incluir um arquivo para browsers mobile e outro para versões não mobile:

< ?php
    include('mobile_device_detect.php');
    if(mobile_device_detect(true,true,true,true,true,true,false,false)){
      include('mobile.html');
    } else {
      include('nao-mobile.html');
    }
?>

Para maiores informações e documentação, visite o site oficial.

Detectar Mobile Browsers com PHP

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Que venha o Internet Explorer 9

Pedro Rogério — Thu, 19 Nov 2009 12:41:06 +0000

De tanto a Microsoft apanhar de seus concorrentes, parece que ela agora acordou para o mundo e viu que já passou da hora de dar atenção a seu browser. Ontem, através do blog do Internet Explorer, eles divulgaram as primeiras mudanças que serão feitas na futura versão do seu browser:

JavaScript: Um novo motor de JavaScript será utilizado no browser para conseguir bater de frente com Firefox e Google Chrome.
CSS: Finalmente o IE terá suporte a CSS3, especialmente a bordas arredondadas, coisa que os outros browsers já suportam a anos.
Aceleração de Hardware: O IE9 irá utilizar de aceleração Directx para melhorar os gráficos e execução de Ajax. Mais isso possui um custo, consumo de recursos da CPU.
HTML5: Pouco se sabe se essa nova versão irá dar suporte a HTML5 ou não. O que se sabe é que ele dará suporte a API de armazenamento local, mas isso o IE8 já possui suporte.

Mas agora, levando em consideração que a nova versão do Office (Office 2010) terá alguns componentes que irão rodar na web, certamente o IE9 terá suporte a

Como poucas informações foram divulgadas, será que essa nova versão do Browser será compatível com sistemas operacionais antigos como o Windows XP ou irá funcionar somente no Windows 7? Vamos aguardar os próximos anúncions da Microsoft com maiores informações, só espero que as mesmas sejam animadoras.

Que venha o Internet Explorer 9

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

What is a browser?

Pedro Rogério — Wed, 07 Oct 2009 13:28:05 +0000

Você já tentou explicar para a sua mãe o que é um Browser? Usuários leigos de internet não sabem o que são browsers, que existem várias opções disponíveis no mercado, algumas muito boas, outras ruins, deve ser por isso que o Internet Explorer ainda é muito utilizado. Pois para um usuário leigo, ao clicar naquele ícone azul no seu desktop, ele já está na internet, para ele não faz diferença alguma utilizar IE7, IE8, Firefox, o que ele quer mesmo é visitar seu perfil no Orkut e deixar scraps para seus amigos.

Mas não seria interessante mostrar de alguma forma a esse usuário que ele pode ter sua experiência melhorada utilizando um browser que proporcione essas opções? Foi pensando nisso que Jason Toff, Associate Product Marketing Manager do Google, após várias tentativas frustradas de tentar explicar para sua mãe o que é um browser criou um vídeo de 1 minuto que mostra de uma maneira bem simples o que é um browser:

E o trabalho não ficou só por aí, ele também lançou um site chamado WhatBrowser.org que dá mais informações sobre os browsers. Nele você pode ver qual browser está utilizando, visualizar testes de diagnóstico e obter mais informações para explorar ao máximo seu browser.

Aproveite agora e mande esse post para aquele seu amigo que adora navegar utilizando o Internet Explorer 6, quem sabe ele não passa a utilizar o Firefox.

What is a browser?

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Converta o Internet Explorer em Google Chrome

Pedro Rogério — Wed, 23 Sep 2009 13:13:29 +0000

O Google em mais umas de suas peripécias de tentar dominar o mundo desenvolveu um plugin chamado Google Chrome Frame que proporciona ao usuário a experiência de utilizar o Google Chrome dentro do Internet Explorer. Não seria por menos que o Google lançaria uma ferramenta desse tipo, pois a partir do dia 30 de setembro o Google Wave será disponibilizado ao público, com isso os usuários de Internet Explorer também poderão utilizá-lo.

Através de uma meta tag você tem a opção de ativar a renderização do Chrome dentro do IE, fazendo com que o mesmo utilize o motor de renderização WebKit. Mas só a meta tag não basta, o usuário deve ter o plugin do Chrome Frame instalado no PC para que tudo funcione corretamente.

A utilização da Meta tag se resume ao seguinte:

E caso o usuário já tenha o plugin instalado no PC, ao ser encontrada essa meta tag na página automaticamente o browser passa a utilizar o motor de renderização do WebKit. Você pode detectar se o usuário tem o plugin instalado com a utilização do seguinte código de exemplo:

Assim você possui a opção de verificar se o plugin está instalado e dá ao usuário a opção de instalá-lo, ou não.

CFInstall.check()

Através desse método, você tem a opção de checar os seguintes parâmetros:

mode: opcional – Como o usuário verá a solicitação para instalação (Por default inline, uma outra opção é abrir um popup).
URL: opcional.
destination: opcional – A URL ao qual é direcionado quando é detectado que Google Chrome Frame está instalado.
node: opcional – ID do elemento ao qual deve aparecer a mensagem de instalação.
onmissing: opcional – Funcionalidade quando não se detecta Google Chrome.
preventPrompt: opcional Booleano que permite desativar o redirecionamento (Por default é false).
oninstall: opcional – Funcionalidade que será executada quando se mostra a opção de instalação.
preventInstallDetection: opcional – Booleano que previne o redirecionamento quando é detectado que Google Chrome Frame está instalado.
cssText: opcional – Estilos que se aplicam ao iframe em modo inline.
className: opcional – Classe que pode ser aplicada ao iframe em modo inline.

O Google Chrome Frame pode ser aplicado ao Internet Explorer 6, 7 e 8. Que então comece a revolução.

Converta o Internet Explorer em Google Chrome

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

A equação de suporte ao IE6 – Vale a pena ainda dar suporte?

Pedro Rogério — Fri, 18 Sep 2009 14:22:27 +0000

O desenvolvedor Brian Cray criou uma equação para mostrar aos usuários como é caro ainda prestar suporte ao IE6, resolvi mostrá-la aqui pois o cálculo é bem interessante, levando em consideração que os valores em dólares.

A equação se resume da seguinte forma:

receita média por visitante*número de usuários com IE6-(custo hora do desenvolvedor*horas necessárias para corrigir erros no IE6).

Esse cálculo pode ser feito em base mensal, anual ou trimestral.

Exemplo

O site ganha em média $.10 (10 centavos de dólar) por visitante.
O site recebe 100 visitas mensais através do IE6.
O custo com o desenvolvedor é de $20/hora (20 dólares hora).
O desenvolvedor gasta em média 4 horas por mês para corrigir bugs do IE6.

Abaixo você vê como funciona o cálculo:

1 * 10 – (20 * 4) = 10 – 80 = -70

Em outras palavras você estará perdendo 70 dólares mensais prestando suporte ao IE6. Este é apenas um exemplo muito simples, levando em consideração que proporcionar experiências ricas para usuários de IE6 custa muito caro.

A equação de suporte ao IE6 – Vale a pena ainda dar suporte?

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Por que o IE6 não morre nas grandes empresas?

Pedro Rogério — Fri, 21 Aug 2009 13:12:31 +0000

O site IE6 Offenders tem como foco principal mostrar aos usuários o por que das grandes corporações ainda utilizarem o IE6. Os principais motivos de utilização do mesmo são:

Utilizam software proprietário que depende do IE6.
Utilizam hardware antigo.
Não sabem dos problemas do IE6

Mais aí eu me pergunto, até quando eles irão conseguir sustentar isso? Se aqui fora a internet evolui a cada segundo, lá dentro as coisas irão voltar a pré-história, vocês concordam com isso?

Por que o IE6 não morre nas grandes empresas?

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

RockMelt – Será o novo Netscape?

Pedro Rogério — Mon, 17 Aug 2009 11:34:40 +0000

O Netscape, criado por Marc Andreessen, foi um dos primeiros navegadores gráficos criados para a Web, foi lançado em 15 de dezembro de 1997, sendo o mais popular até o ano de 1999, onde após travar uma guerra com a Microsoft, perdeu a concorrência para o Internet Explorer.

Em maio de 1998, já em sua versão 5, seu código fonte foi aberto e passou a ser gerenciado pela Fundação Mozilla, sendo “Mozilla” o nome-código das primeiras versões do Netscape, e passou a tomar o nome de “Mozilla” a partir de 2002, e posteriormente SeaMonkey.

Posteriormente a Netscape foi vendida para a AOL, que assumiu o desenvolvimento do mesmo até a versão 9, e em fevereiro de 2008, foi descontinuado.

A partir do código do Netscape foi desenvolvido o Firefox, browser usado hoje por 5 entre cada 10 pessoas, o resto ainda utiliza Internet Explorer, mal sabem eles.

Projeto RockMelt

Marc Andreessen, o criador do Netscape, disse recentemente estar trabalhando em um novo projeto, o RockMelt, que será um browser mais voltado ao Facebook, além de possuir um encurtador de URL’s interno. O site do browser ainda não nos dá qualquer tipo de informação, contendo somente o logo e um formulário para cadastro de recebimento de novas informações.

Que acompanhou o trabalho de Marc Andreessen e em consequência o Netscape, sabe que ele não entra no jogo para brincadeira, a Microsoft que se cuide.

Mais informações:

The New York Times – Netscape Founder Backs New Browser
RockMelt: Netscape’s Andreessen Backing Stealth Facebook Browser

RockMelt – Será o novo Netscape?

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Web Developer Toolbar Overview

Pedro Rogério — Fri, 14 Aug 2009 12:07:01 +0000

A Web Developer Toolbar, desenvolvida por Chris Pederick, é uma das ferramentas mais úteis ultimamente para auxiliar no desenvolvimento web, atuando em conjunto com o Firebug. Mas para utilizá-la você precisa do Firefox, se você ainda utiliza o Internet Explorer, esqueça, pare de ler esse post.

Após instalar a barra, reinicie o Firefox, você verá que a partir de agora existe uma nova barra abaixo da barra de endereços composta dos seguintes botões: Desativar, Cookies, CSS, Formulários, Imagens, Informações, Outros, Destacar, Redimensionar, Ferramentas, Código-Fonte, Opções.

Desativar

Permite desativar funcionalidades de uma página web, tais como Cache, Java, JavaScript, Redirecionamentos Meta, Bloqueadores de Popup entre outras opções. Dois itens que merecem destaque são o Desativar o envio do endereço (referrers) permitindo navegar de forma privada na web, e Desativar Cache, onde ao efetuar atualizações em uma página web você tem certeza de que sempre estará vendo a última versão da página.

Cookies

Lhe proporciona a opção de manipulação de cookies em sites que o utilizam, uma opção em destaque é a de que você pode adicionar seu próprio cookie a qualquer site.

CSS

O grande destaque dessa opção é a de Editar CSS, onde você pode editar o CSS de qualquer site e ver as atualizações em tempo real, além de opções como desabilitar o CSS externo ou embutido na página (inline).

Formulários

A opção de destaque é a de Visualizar informações dos formulários, com essa opção ativa você terá informações avançadas sobre os formulários em questão na página. Você também pode utilizar a opção Preencher campos do formulário para preencher os campos automaticamente, além de poder converter qualquer campo select em uma página em campo de texto.

Imagens

Você pode usar oções de desabilitar quaisquer imagens do site, relatório de imagens quebradas (urls de imagens não encontradas), além de visualizar informações sobre as imagens, onde você tem acesso a um relatório com todas as imagens utilizadas na página, inclusive as inseridas via CSS.

Informações

Nesse menu você terá informações sobre praticamente todos os elementos da página como: info sobre accesskey, nomes de ids e classes na página, ordem das divs na página, visualização de todo o JavaScript da página, cabeçalhos de resposta do servidor.

Outros

Possui opções interessante para auxiliar no desenvolviemnto como: Linhas guia, semelhantes a do Photoshop, Lente de aumento, Caixa auxiliar, que perimite que você insira uma grade na página. Possui uma opção para Exibição em telas pequenas, que simula seu site em dispositivos móveis.

Destacar

Essa opção é utilizada para destacar os elementos da página. Pode ser útil para você descobrir o por que de uma página não estar sendo exibida corretamente. O grande destaque dessa opção é o de Destacar elementos obsoletos, experimente abrir o Google e ativar essa opção.

Redimensionar

Possui a opção de você criar tamanhos personalizados para a tela do seu browser, bom para poder verificar como seu site se comportaria em diferentes resoluções.

Ferramentas

Proporciona opções desde validação do HTML até Acessibilidade. Opções de inspecionar o DOM, além de um console de erros que lhe mostra todos os erros ocorridos no JavaScript, HTML e CSS.

Código-Fonte

A partir desse menu você pode ver o código fonte da página, e o destaque é para a opção Visualizar código-fonte gerado, onde você vê também o código html que é gerado pelo JavaScript.

Menu Opções

Possui opções de configuração da Web Developer Toolbar.

Botões de Validação

Esses botões lhe mostram possíveis erros em sua página. O primeiro mostra se sua página está em modo Standard Compliance ou Quirks mode, o segundo erros de CSS e o terceiro possíveis erros de JavaScript.

Bonus

Abaixo vocês podem ver dois vídeos tutoriais sobre utilização da Web Developer Toolbar:

Infelizmente explicar aqui cada item da Web Developer Toolbar é impossível, isso daria um livro, mas tentei destacar aqui opções das quais acho interessante.

Web Developer Toolbar Overview

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Firebug e CSS

Pedro Rogério — Tue, 11 Aug 2009 12:29:54 +0000

O Firebug é uma extensão para o Firefox que auxilia no desenvolvimento web na edição do CSS, HTML, DOM, JavaScript, Ele foi desenvolvido por Joe Hewitt, um dos criadores do Firefox e em conjunto com outros plugins, como o YSlow você tem uma completa suíte de desenvolvimento e análise de performance de websites.

Aqueles que utilizam o Firebug a primeira vez com certeza não conseguem largá-lo mais, aliás, hoje em dia não existe mais desenvolvimento web sem o uso do Firebug. Caso você nunca tenho ouvido falar do Firebug, vou deixar aqui um vídeo criado por Kristarella mostrando os primeiros passos com Firebug na edição do CSS:

Via: CSSBlog.es

Firebug e CSS

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Internet Explorer 9 com suporte a HTML5?

Pedro Rogério — Mon, 10 Aug 2009 12:02:02 +0000

Após a Corrida espacial, a corrida do momento é pelo desenvolvimento e implementação do HTML5. Empresas como Apple, Google, Opera e Mozilla já estão fazendo sua parte nessa corrida, contribuindo para a comunidade desenvolvedora, mas onde fica a Microsoft nessa história?

Todos sabem que a Microsoft tem uma filosofia de atraso em relação a implementação de padrões em seus browsers, mas essa filosofia parece estar querendo mudar agora com o HTML5 pois recentemente ela mostrou bastante interesse dando sugestões para o desenvolvimento do HTML5 através de um e-mail enviado por Adrian Bateman, desenvolvedor chefe do browser da Microsoft para uma lista de discussão do W3C. Transcrevo abaixo parte do que ele disse a lista:

Como parte do nosso planejamento para os trabalhos futuros, a equipe de desenvolvimento do Internet Explorer irá rever a epecificação do HTML5, com isso queremos partilhar nossas opiniões e discutir com esse grupo de trabalho.

Já era a tempo, pois o HTML5 não será só mais uma especificação HTML, essa especificação incluirá uma série de novidades em que a Microsoft, se quiser que seu browser sobreviva futuramente nesse mercado que se torna cada vez mais competitivo, terá que correr atrás do prejuízo.

O HTML5 hoje já é uma realidade, sim, você pode utilizá-lo, mas infelzimente para que ele seja suportado no Internet Explorer você deve utilizar de JavaScript para seu funcionamento. Será então que em sua futura versão, a 9, com a sua equipe de desenvolvimento mostrando essa preocupação em colaborar para o desenvolvimento do HTML, vamos ter aí uma Microsoft com um browser que fnalmente poderá ser chamado de browser?

Só o tempo dirá, mas espero que isso não ocorra no próximo século.

Internet Explorer 9 com suporte a HTML5?

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Orkut declara morte ao IE6

Pedro Rogério — Fri, 07 Aug 2009 13:36:33 +0000

Se você ainda possui o IE6 no seu PC, ou roda uma máquina virtual só para poder testar os sites nele igual eu, acesse o Orkut e veja que boa notícia você irá receber.

Dica do Pedro Chaves

Orkut declara morte ao IE6

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?