Creative Markup

Mozilla Labs Jetpack

Antentem foi lanÁado no Mozilla Labs, o Jetpack, um projeto experimental que est· sendo muito repercutido no mundo dos desenvolvedores, pois deve revolucionar a maneira de desenvolver extens?es para o Firefox.

Os complementos do Firefox e sua comunidade È um dos principais fatores que faz com que grandes navegadores como Safari n?o tenham tantos usu·rios ativos quando ele. E o Google Chrome, para n?o ficar para tr·z, j· prometeu que tratar· de desenvolver seu suporte para Add-ons. O Jetpack È visto com uma defesa neste sentido, pois o jeito convencional de desenvolver complementos, apesar de utilizar tecnologias familiares como HTML, CSS e JS, ainda È muito complexo.

Hoje, com 8.000 desenvolvedores, mais de 12.000 complementos j· desenvolvidos e mais de um bilh?o de add-ons instalados, o Firefox deseja aumentar substancialmente esses n?meros, oferecendo um jeito mais simples, acessÌvel e poderoso no desenvolvimento de novas funcionalidades. Isso È muito importante para continuar com seus crescimento sem peder seus usu·rios e facilitar a vida de muitos desenvolvedores.

O Jetpack, resumidamente È uma API que permite desenvolver add-ons utilizando HTML, CSS e JavaScript. Como j· disse, o jeito convencional de desenvolvermos extens?es È atravÈs de HMTL, CSS e JS, mas È muito mais que isso, È necess·rio, obrigatoriamente, utilizar v·rios arquivos de configuraÁ?es, como: XML, Manifest, RDF. E o Jetpack veio para mudar isso.

Hoje, o Jetpack È apenas um complemento. Ent?o, os complementos feitos encima do Jetpack s?o add-ons feito com a utilizaÁ?o de outro add-on, entenderam? Estranho n?o? Mas esperamos que nas prÛximas vers?es do Firefox, caso v· para frente (tem que ir) ele j· possa vir nativo, como aconteceu com outros projetos, alÈm de ter mais recursos, pois ainda È muito limitado.

Quer conhecer algumas caracterÌsticas desse projeto que est· dando o que falar:

• Ele tem suporte ao jQuery. Maneiro nÈ? Apesar do John Resig ser um Evangelista do Mozilla Corporation, acredito que n?o tem influÍncia nessa suporte. jQuery est· incorporado nesse projeto pela sua magnitude, beleza, facilidade e tudo mais que poder definir um projeto surpreendente. AlguÈm duvida disso?

• VocÍ pode utilizar o poder do melhor plugin (add-on, extens?o, complemento, whatever) de desenvolvimento e depuraÁ?o, o Firebug. Isso mesmo, console, log e tudo o que tem direito para vocÍ utilizar no seu projeto!

• VocÍ pode adicionar novos complementos sem a necessidade de reiniciar seu navegador. Isso È muito bacana.

• Digite about:jetpack no seu navegador e ver· a pagina especifica do Jetpack no seu profile. Nele vocÍ ver·: complementos instalados, exemplos (pode alterar e ver o resultado na hora), uso de memÛria e outros.

• ConheÁe o Bespin? Aquele outro projeto do Mozilla Labs que traz para a Web a possibilidade de editar cÛdigos? VocÍ pode utiliz·-lo para desenvolver seus complementos.

• Ao instalar um complemento atravÈs do Jetpack e marcar a opÁ?o de atualizar automaticamente, toda vez que o cÛdigo do complemento for atualizado, seu Firefox ser· notificado e atualizado automaticamente, diferente dos meios atuais.

• Para adicionar o link para instalaÁ?o de algum extens?o, basta utilizar o elemento link com o atributo jetpack, como mostrado abaixo:

  <link rel="jetpack" href="nome-da-extensao.js" name="Nome da extens?o" ></link>

  Ao navegar em alguma pagina que possui tal link, aparecer· uma barra de navegaÁ?o perguntando ser deseja instalar a extens?o.

E isso È apenas na primeira vers?o, que ainda est· muito simples.

Querem ver um pouco de cÛdigo? Prestem atenÁ?o na beleza e simplicidade. Para quem conhece jQuery n?o precisa de nenhum explicaÁ?o. Para ver mais, ai vai um tutorial oficial.

jetpack.statusBar.append({
    html: "Boom<em>!</em>",
        width: 45,
        onReady: function(widget){
            $(widget).click(function(){
                jetpack.notifications.show( "Booming!" );
                $(jetpack.tabs.focused.contentDocument)
                    .find("body")
                    .css({backgroundColor:"red"})
                    .animate({opacity:.5});
        });
    }
});

Abaixo vai um screencast do Aza Raskin demonstrando o funcionamento do Jetpack, mais informaÁ?es sobre o projeto e os seus objetivos.

Para instalar o Jetpack no seu Firefox, basta ir na sua pagina no Add-ons do Firefox

Ah, tem uma galera que j· est· brincando com tudo isso e disponibilizando o resultado. Da uma olhada aqui.

Hoje o Jetpack suporta apenas para a barra de status, abas, content-scrips, animaÁ?es, API externa do Twitter e algumas outras coisas. Vale lembra que o projeto ainda È beta, e como j· disse, muito limitado. N?o h· nada certo da sua continuidade. Para o projeto da certo, tambÈm È necess·rio que ajudem o projeto participando do seu design ou desenvolvimento ou teste, como pode ser visto no post de lanÁamento do projeto.

Para finalizar, sÛ gostaria de dar um VIVA ao Firefox, que atravÈs dele surgiu o Firebug e o Web Developer Toolbar para nossa felicidade. Sem eles ñ e muitos outros ñ n?o sei o que seriamos, isso como desenvolvedores!

Espero poder mostra algo, em breve, feito com tudo isso que falei!

Tags: add-ons, firefox, labs

Comentários:2

O plugin para Firefox do Migre.me utiliza utiliza sua prÛpria API

Com o plugin do migre.me instalado, vocÍ pode facilmente compactar suas URLs, como mostra a imagem abaixo

TambÈm È possÌvel salvar suas URLs compactadas

Se gostou, adicione o plugin ao seu Firefox

[update]Agora o plugin est· postado no site da Firefox, como experimental, pois ainda precisa passar por teste, mas tambÈm precisam de reviews, caso vocÍ gostou do plugin, nos ajude divulgando.[/update]

Esse plugin foi desenvolvido em cima de um outro plugin, com o mesmo conceito, o TinyURL Creator, mas nossa intenÁ?o n?o È deixar o plugin igual, nossa expectativa È que o migre.me possa liberar mais funcionalidade na sua API, para que assim, possamos melhorar o plugin.

Caso queira saber mais sobre o que È o migre.me, basta entrar na pagina de sobre no site do migre.me.

Esperamos que gostem!

Tags: add-ons, firefox, migre.me

Comentários:11

Tags: dicas, JavaScript, jquery, performance

Comentários:5

A intenÁ?o desse post n?o È mostrar na pr·tica o que È o CSS Sprite, mas falar um pouco sobre sua utilizaÁ?o. Caso queiram saber como funciona, listarei, ao decorrer do post, alguns artigos que possam ajudar.

Uma tÈcnica que tem sido comentada ultimamente no mundo do Web Standards È o CSS Sprite. Consiste basicamente em agrupar imagens de estilo, posicion·-las via background-position, diminuindo o n?mero de requisiÁ?es no servidor. N?o deu para entender, nÈ? Calma, tentarei explicar melhor.

Vamos a definiÁ?o do termo Sprite (gr·fico) na wikipidia):

Em computaÁ?o gr·fica, um sprite (do latim spiritus, significando ìduendeî, ìfadaî) È um objeto gr·fico bi ou tridimensional que se move numa tela sem deixar traÁos de sua passagem (como se fosse um ìespÌritoî).

A tÈcnica foi originada nos jogos 2d, onde, para otimizar os gr·ficos e n?o sobrecarregar o processador, no tempo em que o hardware era muito limitado, colocavam-se todos os movimentos de um personagem na mesma imagem. ? exatamente a mesma idÈia que È proposta pelo CSS Sprite.

A tÈcnica n?o È muito nova, em 2004 foi publicado um post no A List Apart, que explica um pouco da tÈcnica, dando alguns exemplos. Eu e muitos outros n?o tÌnhamos conhecimento do nome, mas j· usavamos um pouco sem saber disto, algo como mini CSS Sprites.

O uso mais comum era em menus que tinham aÁ?es ao passar do mouse (hover), evitando de ter um delay de carregamento da imagem. Acab·vamos botando as imagens da aÁ?es hover na mesma imagem do estado normal. Isso foi muito usado e continua a ser. Para entender o que estou falando, vejam esse tutorial postado pelo CSS no Lanche.

Mas CSS Sprite È muito mais que isso, È agrupar um maior n?mero imagens para que o tempo de carregamento possa diminuir, n?o so do menu, mas em varias partes do site. Sites como Google (veja a primeira imagem do post), YouTube, Yahoo, Aol e muitos outros utilizam essa tÈcnica.

Pense comigo, ao invÈs de chamarmos o servidor 20 vezes, chamaremos apenas 1 vez para requisitar a imagem. Isso pode n?o fazer diferenÁa se pensarmos em poucos usu·rios acessando o site, mas pense em milh?es de acessos, faz uma grande diferenÁa.

Mas porque devo me preocupar?

Caso n?o tenha em m?os um site com milh?es de acesso di·rios e n?o tem que se preocupar com servidores caindo pelo n?mero de acessos, preocupe-se em tornar a experiencia do seu usu·rio mais agrad·vel, tornando o carregamento do site um pouco mais r·pido.

? lÛgico que n?o È a ?nica maneiras de melhorar o carregamento do seu site, mas È uma das, que ajuda muito.

E como posso trabalhar com CSS Sprites com facilidade usando o Photoshop?

Com Photoshop, vocÍ consegue facilmente pegar o eixo de X e Y na imagem para jogar no seu background-position, como se pode ver na imagem acima.

O idÈal È que salve as imagens com espaÁamentos iguais, para que se possar ter uma manutenÁ?o mais facilitada.

A propriedade background-position aceita os seguintes valores n?o-numerais para o eixo X: left, right e center, e para o eixo Y: top, bottom e center. Com isso, tente montar suas imagens para que possa utilizar esses valores com mais facilidade, como por exemplo no caso de aÁ?es de itens de menu:

div.menu li a.home{
     background:url("example.png") no-repeat left top;
}
div.menu li a.home:hover{
     background-position:left bottom;
}

Generators on-line

Caso vocÍ n?o queira monstar suas imagens, tem quem faÁa isso para vocÍ. J· existe alguns geradores de CSS Sprites, que pode ser utilizados em seus projetos, como por exemplo:
o Project Fondue CSS Sprite Generator e o CSS Sprites Generator

Conclus?o

CSS Sprite È uma tÈcnica que deve ser usada para salvar seus usu·rios e seu dinheiro. Mas outro benefÌcio, alÈm de diminuir o n?mero de requisiÁ?es no servidor, e que o arquivo com as imagens agrupadas frequentemente tem o tamanho menor do que se as imagens fossem separadas, mesmo com espaÁos entre elas, podendo assim, matar dois coelhos numa cajadada sÛ.

Para melhorar a usabilidade e acessibilidade, CSS Sprites È melhor usado para agrupar Ìcones e imagens de efeitos.

Lista de referencias

• CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance
• CSS Sprites: Image Slicingís Kiss of Death
• Tutorial: Como utilizar CSS Sprites

Tags: CSS, dicas, performance

Comentários:2