Pra entender o Ubiquity, vamos ver, antes de tudo, qual é o conceito no qual ele se baseia!

Mashups

Mashup, relacionado ao desenvolvimento para web, é um site ou aplicação web que utiliza e manipula o conteúdo de várias fontes em um único local! Basicamente, um agregador de vários serviços da web!

Se você quiser mais informações sobre Mashups, pode acessar o link da Wikipedia! Acredito que ele vai tirar a maioria das suas duvidas!

- Mashup (web application hybrid) [Wikipedia]

Mozilla Ubiquity

O Ubiquity é um addon da Mozilla que facilita o acesso à vários serviços da web (olha os mashups ai!), utilizando interface de linguagem natural para “chamar” os serviços, através da interface do Ubiquity.

Funciona mais ou menos assim!

Você aciona a tecla de atalho do Ubiquity, digita o serviço que deseja utiliza, por exemplo “Google”, e ele já vai saber que você quer fazer uma busca no Google! Logo em seguida o que deseja procurar no google! Ficaria assim, “Google Mozilla”, com isso, ele buscara no google por mozilla, e apresentar o conteúdo na mesma tela que você digitou o que queria busca, o resultado (no caso, os 4 primeiros link encontrados) que o google retornou sobre o assunto!

Serviços como o GMail, Google Maps, Google Translator, Wikipedia, Twitter (sim, você consegue twittar através dele), e tantos outros podem ser acessados facilmente/diretamente pelo linha de “comandos” do Ubiquity.

Se você ainda esta com duvida sobre como ele funciona, assista o video do Aza Raskin, (desenvolvedore do core do Ubiquity) e veja como tudo acontece:

Ubiquity for Firefox from Aza Raskin on Vimeo.

Se você gostou da ferramenta e quer saber mais sobre ela, segue o link dela no Mozilla Labs:

- Mozilla Ubiquity [Mozilla Labs]
- Mozilla Ubiquity – More Information [Wiki Mozilla]

Desenvolvendo um comando para o Ubiquity

Basicamente, o Ubiquity é escrito utilizando Python e Javascript, então, não é coisa de outro mundo!

Já os comandos que são as coisas que dão sentido ao Ubiquity, são feitas utilizando Javascript! Sim, só isso!

O mais legal é que, você mesmo pode criar um comando seu! Basta escrever no seu Firefox, na barra de URL (ou barra de endereços, como preferir)

about:ubiquity

Fazendo isso, o Firefox abrirá a tela de gerenciamento do Ubiquity, onde você vai encontrar a opção “Hack Ubiquity”, e é ela que você vai poder brincar com os comandos que irá criar, antes de intalar diretamente no seu Firefox.

Para começar a criar um comando do Ubiquity, há um how to no wiki da Mozilla, com informações claras de como você deve começar!

- Ubiquity Author Tutorial [Wiki Mozilla]

Comandos criados pela Comunidade Ubiquity

Depois de aprender a fazer um comando, você pode coloca-lo em uma lista onde há vários outros comandos criados pelos desenvolvedores da comunidade.

- Commands in The Wild [Wiki Mozilla]

Se você quiser dar uma olhada no código de um comando já pronto, pode acessar os que estão no meu github

- ubiquity-commands [Clauber Github]

Mais informações

Atualmente, o Ubiquity não tem mais suporte oficial da Mozilla, por tanto, ele é desenvolvido pelos membros da comunidade! Apesar de tudo, a Mozilla não cortou/acabou com o projeto, tanto que o addon ainda esta disponível para download no AMO (http://addons.mozilla.org) e toda a documentação esta nos servidores da Mozilla, mas por uma questão de direcionamento, eles optaram por deixar a comunidade no comando do Addon.

Para instalar esse addon incrível no seu Firefox, você deve baixar o nosso XPI (pacote de instalação de addons) de desenvolvimento, que pode ser encontrado no link abaixo:

- https://bitbucket.org/satyr/ubiquity/downloads/tip.xpi [satyr Bitbucket]

Se você tiver alguma sugestão ou reclamação para fazer sobre o Ubiquity, pode usar o Get Satisfaction para isso:

- Get Satisfaction – Mozilla Ubiquity

Agora se você encontrar algum bug ou quiser ajudar na correção de algum bug já existente, pode fazer isso acessando o link do Bugzilla:

- Bugzilla – Mozilla Ubiquity [Bugzilla]

Bom divertimento!

Para quem quiser baixar o Mozilla Firefox 3.1 BETA3 basta acessar o link abaixo – aproveite e baixe a versão em Português do Brasil :
http://www.mozilla.com/en-US/firefox/all-beta.html

Lembrando que o Mozilla Firefox 3.1 BETA 3 é apenas para testes ainda.

• opacity and rgba() – A possibilidade de aplicar opacidade nos objetos com RGBA;
• border-image – Com CSS3 será possí­vel colocar multiplas bordas com imagem, facilitando a aplicação de bordas arredondadas em objetos, por exemplo;
• Columns – Dividir o texto de um objeto em colunas, sem ter que colocar cada parte do texto em um objeto e depois utilizar a propriedade “float”, por exemplo;
• text-shadow – Essa propriedade vai ajudar muito a diminuir a quantidade de imagens colocadas como titulos, por exemplo, já que hoje, quando precisamos desse efeito, recortamos o texto como uma imagem e aplicamos no HTML/CSS uma técnica chamada de Image-Replacement, para ter um efeito como o do text-shadow;
• box-shadow – Mais uma propriedade que ira facilitar muito o desenvolvimento de interface web, pois hoje, temos que colocar uma imagem de fundo no objeto para obter esse, e isso causa um problema, se não for bem implementado, pode não deixar a box flexivel o bastante, mas com a propriedade box-shadow, esse problema será quase nulo, e também diminue o problema de performance, já que se essa imagem for colocada via CSS(o que é o normal de se fazer) gera uma requisilção HTTP a mais no site;
• border-radius – Borda arredondada em objetos sem pre é um problema na hora de desenvolver o site, mas com essa propriedade CSS3, essa tarefa também ficara mais fácil;
• word-wrap: break-word – Essa opção é interessante, pois mantem a semantica do (x)HTML, sem precisar de um </br> (elemento de quebra de linha), por exemplo;
• transform – uma das opções da propriedade “transform” será a opção “rotate”, que rotaciona um objeto;

Essas são só algumas das novidades que estarão disponiveis na implementação de CSS3 nos browser novos.

Mas, como toda nova tecnologia baseada nos browser tem uma propagação muito demorada, como porgo exemplo, a demora na adoção de um browser mais novo, isso lembrando da utilização do IE6 por muitas pessoas ainda. Acredito que muitos dos desenvolvedores web ainda vão demorar para utilizar essas novas implementações, já que, uma das preocupações quando se fala de desenvolvimento web, é de que todos que acessam a página, independente de qual browser esteja usando, deve ter acesso normal.

Por tanto, aproveito para lembrar que há uma campanha para conscientizar os usuários de IE6 a fazerem a atualização do seu browser, não importando qual sejá ele, Mozilla Firefox, Opera, Safari, Google Chrome ou Internet Explorer 7/8.

Para quem quiser participar da campanha nacional “Atualize seu Browser”, basta acessar o link abaixo:
http://imasters.uol.com.br/crossbrowser/pt-br/

Para quem quiser ler mais sobre o Pós FISL, basta acessar o link abaixo para ter acesso a todos os videos do workshop, e para as fotos das palestras.

http://wiki.mozilla.org/FISL:2008:posfisl

E para quem quiser ver o video da minha palestra, pode verificar no video abaixo:

Firefox – A Developer\’s Best Friend ( portuguese ) – Mozilla Workshop -> FISL 9

Update: Abaixo, os slides da palestra

Primeiro, o significado de boas práticas vem do inglês “best practices”, que denomina os melhores métodos para se realizar uma tarefa, ou seja, o meio que tem mais chance de levar até o resultado esperado sem muitos problemas.

Muitas profissões tem criado as suas “Boas práticas” relacionadas a área, para otimizar processos ou encaminhar melhor os novos profissionais que estão chegando.

Na área de computação não é muito diferente. Temos várias “boas práticas”, para a grande maioria das tarefas de informática que ajudam e muito no dia-a-dia.

O Desenvolvimento Web também tem as suas “boas práticas”, que ajudam na hora de desenvolver um site, e é sobre algumas delas que eu vou falar.

Doctype – DTD(Document Type Definition)

Essa boa pratica é o começo de tudo, ou seja, é a primeira coisa que o user agent do seu browser procura para saber qual é o tipo de Linguagem de marcação(que por muitos é conhecido também como HTML ) que ele terá que interpretar(parsing) no momento em que a página for solicitada.

Quando ele é informado na página, o browser saberá qual tipo de marcação deverá interpretar, e assim a página será carregada muito mais facilmente.

Para saber mais sobre Doctype, visite os links abaixo:

• Revolução Etc – Artigo sobre Doctypes
• Tableless – Doctypes e Browsers Modes

Quirks Mode e Strict Mode

Dentro do doctype, nós temos como informar para os Browsers dois tipos de renderização de CSS. O modo “antigo”( ou Quirks Mode ) e o modo “estrito” ( ou Strict Mode ).

O Quirks mode, é considerado o modo “antigo”, pois é a implementação que na época dos Browser Internet Explorer 4/5 e Netscape 4 (onde ambos não faziam parte da W3C, e assim, não seguiam os padrões, apesar de na época, o Internet Explorer interpretar muito melhor o CSS do que o Nestcape) permitia que os browsers passassem a interpretar os padrões(Strict Mode), que estavam começando a ganhar espaço, ou o modo “antigo”(dai o Quirks mode).

Para saber mais sobre Quirks Modes, visite os links abaixo:

• Revolução ETC – O que é Quirks Mode?
• Quirks Mode – Quirks Mode and Strict Mode(inglês)

Por tanto, verifique sempre, qual será o destino final do seu site, ou da sua aplicação web, para saber qual modo utilizar. Mas nunca se esqueça de utilizar os Doctypes e os Modos de renderização certos para a sua aplicação.

Mais alguns site para uma boa leitura:

• 24 ways – Transitional vs. Strict Markup(inglês)
• Mozilla Developer Center – Mozilla’s DOCTYPE sniffing(inglês)

Technorati Tags: dtd, doctype, best practices, boas práticas, quirks mode, strict mode, user agent, parsing, development, desenvolvimento

Visitem:
http://twitter.com/clauber_halic

Technorati Tags: twitter, clauber, blog, open, social

Hoje é muito comum ver sites sendo desenvolvidos sem nenhum planejamento, pois ele precisa ser desenvolvido rapidamente e precisa estar no ar logo(entre outras coisas que os gerentes e clientes falam).

Muitas vezes, isso causa vários retrabalhos de código, seja em client-side(CSS, HTML, Javascript …) ou server-side(PHP, ASP.NET, JSP …), pois não ouve um planejamento de como fazer, ou do que o site realmente deveria ter.

Se pensarmos em um site como um projeto de automóvel, por exemplo, vamos ver que não adianta saber que o todo carro possue motor, rodas, freios, etc. Precisamos saber qual será o tamanho do carro, a disposição do motor, como será a disposição do painel(onde estão o radio, porta luvas, etc).

É nesse ponto que entra os desenhos do projeto para o automóvel. Nada sei da cabeça do projetista e vai direto para a linha de montagem.

Antes mesmo do carro conceito(como é chamado o protótipo), é feito um estudo para verificar a usabilidade dos controles do carro, como será o espaço interno, se a aerodinâmica ir prejudicar a estabilidade, entre outros fatores, que podem influenciar no sucesso ou no fracasso do produto.

A criação de um site, também segue(ou pelo menos deveria seguir) esse conceito, mas infelizmente, muitas empresas ainda não gastam um tempo do projeto para essa tarefa, e muitas vezes, pagam por não ter planejado e projetado uma interface(ou até mesmo os controles do site) mais intuitivos e dinâmica.

Para diminuir esse impacto de projeto, e até mesmo, de tempo e dinheiro gasto no desenvolvimento, o Wireframe é um excelente passo.

Basicamente, o Wireframe consiste em um “esboço” de como será o layout do site, dizendo onde os elementos serão posicionados , e descrevendo quais elementos serão utilizados(isso dependendo é claro, qual o nivel de detalhamento que o seu Wireframe terá), de acordo com o que, muito provavelmente, será o layout final.

Há também a possibilidade de uma pratica e rápida mudança antes do layout definitivo, evitando que muitos imprevistos aconteçam no decorrer do desenvolvimento, e ajudando ainda na analise de usabilidade de interface do site.

Alguns links interessantes sobre Wireframe estão listados abaixo:
http://usabilidoido.com.br/quanto_mais_simples_o_wireframe_melhor.html
http://webinsider.uol.com.br/index.php/2003/12/09/wireframe-documento-cada-vez-mais-importante/

Você deve esta se perguntando agora se há alguma ferramenta para “desenhar” os Wireframes?!?!

Bem, eu procurei várias ferramentas para isso, mas a que mais me agradou, e que mais me deu produtividade, foi o Inkscape.

Além de ser open source e multi-plataforma(Windows, Linux e MacOS), o inkscape tem uma interface muito fácil de usar.

Mas você pode testar outras ferramentas como o GIMP, PhotoShop, Flash(sim, já vi pessoas usando o Flash para desenhar wireframes), ou alguma ferramenta que você tenha mais habilidade para desenhar.

Grande abraço, e comentem

Technorati Tags: wireframe, usabilidade, acessibilidade, web, desenvolvimento, firefox, open souce, inkscape

Para quem não sabe o que é “Tuning” (ou Modding, tendo em vista o foco a informática), basta acessar o link abaixo.
- Tuning(ou Modding)

Então, vamos ou ponto.

Essa história de Modding no Firefox, já é um pouco antiga, tendo em vista que, há opção de acessar as configurações mais “obscuras” do browser através do about:config.

E como, através disso, é possível alterar várias opções, como por exemplo, número de requisições do browser para o servidor, cache do browser, etc, muitas pessoas acabaram verificando que, há como deixar o Firefox mais rápido, mas algumas não perceberam o outro lado da moeda.

Se você quiser dar uma olhada nessas alterações, sinta-se a vontade para acessar o link abaixo, e fazer as alterações, MAS, eu recomendaria que você continua-se lendo esse post até o fim, e decidi-se por si só, se vale a pena ou não dar um “Modding” no seu Firefox.

Link para o artigo sobre “Tuning(ou Modding)” no Firefox:
http://forums.mozillazine.org/viewtopic.php?t=53650

Bem, se você continuou lendo, é por que quer saber se deve mesmo “Tunar” o Firefox ou não.

Pois bem, como o Asa Dotzler(que é uma autoridade sobre produtos da Mozilla) disse em um post em um fórum:

“Sim, existem possibilidades de fazer o Firefox viajar mais rápido …”

E como ele mesmo diz também:

“A desvantagem e razão pela qual não esteja habilitada essas opções de “Tuning” na configuração padrão do Firefox, é que dessa maneira pode ocorrer de em alguns casos, não funcionar corretamente, pois alguns sites não suportam os tipos de opções que você esta solicitando a ele.”

Ou seja, se você fizer essas alterações no Firefox e depois o browser começar a ficar estranho, não culpe o browser, pois ele só esta fazendo o que você pediu. Mas o culpado nessa história(se é que pode ser chamado assim) é o site que você esta acessando(que pode não suportar tantas conexões simultâneas), sua conexão de internet(que pode não ser rápida o suficiente), entre outros fatores.

Por tanto, pense bem antes de dar um “Modding” no Firefox, pois isso pode se tornar um tormento para você.

Para quem quiser ler mais sobre o “Modding” no Firefox, acesse os links abaixo:
http://www.guiadohardware.net/comunidade/aumentar-desmpenho/199938/#post1523728
http://www.guiadohardware.net/comunidade/dicas-firefox/186310/
http://japs.etc.br/2007/02/dicas-para-turbinar-seu-firefox/

Abraços e “Modding com parcimônia”

Technorati Tags: firefox, tuning, modding, about:config, mozilla

Aproveitando o assunto, estava pensando(e lembrando) como foi a evolução dos celular, que de tijolos imensos, hoje são “coisinhas” muito pequenas, e que tem várias funcionalidade legais como, envio de mensagens, câmera fotográfica, rádio, e por fim, mas não menos importante, faz ligações telefônicas

Falando em aparelhos mais recente, acredito que o iPhone foi o “divisor de aguas” para o segmento de mobile. E logo depois vem a plataforma para celulares liderada pelo Google, chamada Android, que também tem chamado a atenção de muita gente, inclusive a minha

Então, seguindo a sugestão de meme do Tiago, vamos lá.

Se eu tivesse um celular mágico eu iria querer poder interagir com ele da mesma maneira que fazem no filme “Minority Report“, ai a interface do iPhone ficaria ultrapassada

Convido então, Bruna Griebeler, Wagner Bigal para continuarem o meme.

[ ] ‘s

Technorati Tags: blogices, iphone, celular, mobile, meme, acessibilidade, android, google

A noticia da Molly, foi a de que o IE8 passou no teste Acid2(é um teste de compatibilidade com os padrões, feito para os browser, e desenvolvimendo pela Web Standards Project).

O objetivo do teste é que o navegador testado exiba exatamente um rosto amarelo junto das palavras “Hello World”.

Mas o que mais me chamou a atenção sobre isso, foi que a “mídia especializada” deu mais atenção a uma coisa que deveria ser obrigatório em todos os browser, independente de empresa ou qualquer outra coisa, e se esqueceu de citar que outros browser já estão assim a algum tempo.

Sobre o Acid2 e os Browser que já estão compatíveis

E para a minha alegria, testando a versão Beta 2 do Firefox 3 .0, fiquei com um “sorriso” estampado no rosto, ou melhor na tela. O novo Firefox, também passou no teste Acid2(isso desde sua versão 3.0a2pre).

Agora, realmente estou vendo uma luz no fim do túnel para o desenvolvimento web, não que hoje esteja ruim, pelo contrario, o que podemos fazer com os browser é muito mais do que muitos pensavam antes, mas que é um trabalho um tanto quanto árduo, isso é(pensando no excesso de bugs de renderização de alguns browsers).

Com isso, vejo que agora a suposta “guerra dos browser” vai realmente recomeçar, pois se todos interpretarem os códigos do jeito recomendado, passaremos a utilizar o browser pelo que ele nos oferece de recursos e não por melhor interpretação de código.

Mas infelizmente(ou até felizmente, quem sabe), os usuário que não tem conhecimento nessa área(e também não devem ter, pois acredito que o aplicativo deva funcionar bem, sem deixar o usuário de “cabeça quente”) podem não sentir nenhuma diferença com isso, e nem mesmo saber o que realmente o browser deve fazer por eles, e ai sim, escolher o que mais atende as suas necessidade.

Enfim, “Live or die, make your choice”, e que venham os browsers novos

Technorati Tags: firefox, mozilla, browser, acid2, web standards, padrões web

Mas se você escutar o podcast do Rene de Paula, você vai perceber, o que realmente importa, é o que o “apresentador” tem a oferecer. Sim, muito conteúdo, e com muita qualidade de informação.

Pra quem não ouviu ainda, ouça. Os podcasts(e video casts) do Rene, são repletos de uma coisa que eu gosto de chamar de “filosofia construtiva”, ou seja, não é apenas filosofia, pelo mero prazer de pensar, mas sim pelo prazer de realmente fazer uma discussão construtiva e realista.

Sei que alguns vão dizer, “poxa, mas ele trabalha pra MS”. Sim, trabalha. Como já trabalhou para o Yahoo, SBT, Sony, e por ai vai. Mas acredito que realmente foi contratado pelo “evangelista” que ele é.

Pra quem quiser dar uma olhada, os links estão abaixo:
Video Cast – Rene de Paula
PodCast – Rene de Paula