TidBits

O PageRank é basicamente o índice de relevância que o google dá para o conteúdo do seu site, e umas 3 ou 4 vezes por ano o Google atualiza esse índice. E exatamente no dia da mentira, o google resolveu atualizar o PageRank, quando lí a notícia achei que fosse “primeiro de abril”, mas atualizou mesmo, e o TidBits subiu novamente um degrau na escala, agora temos o PageRank 4.

Para saber mais, veja um post antigo, da Belinha, explicando como funciona o pagerank.

Para medir seu pagerank, você pode usar o Popuri.us, um serviço que checa o grau de popularidade do seu (ou qualquer outro) site / blog trazendo dados de PageRank, Backlinks, del.icio.us, Alexa e Technorati.

No último dia do ano de 2008 o google atualizou o pagerank, seu sistema que mede a relevância de um site para posicioná-lo em sua busca, o tidbits subiu de novo, agora para 3.

Para medir seu pagerank, você pode usar o Popuri.us, um serviço que checa o grau de popularidade do seu (ou qualquer outro) site / blog trazendo dados de PageRank, Backlinks, del.icio.us, Alexa e Technorati.

Para saber mais, veja um post antigo, da Belinha, explicando como funciona o pagerank.

E feliz 2009 pra todos.

O FCKEditor é um editor WYSIWYG (What You See Is What You Get) muito completo, e bem simples de ser implementado.

Como funciona?
Você escreve uma textarea comum e chama o FCK que esconde a textarea e coloca um editor web. E toda vez que o texto é alterado, ele coloca o texto formatado (com tags html) dentro do textarea. Sendo assim, um técnica pura de javascript, funciona em qualquer navegador e qualquer linguagem de programação: php, asp, .net, java, etc.

Com o plugin jQuery FCKEditor Plugin v1.3 fica mais fácil ainda pra quem já trabalha com jQuery. Além disso o FCK Editor para jQuery consegue trabalhar com o jQuery Validate e com o jQuery Form Plugin.

Tutorial de como implementar o editor web.

Baixe os arquivos jQuery, o FCK Editor e o Plugin dele pra jQuery .

Adicione o código dentro da tag da sua página:

[sourcecode language="html"]



[/sourcecode]

Sendo que o path, é o caminho da pasta de onde vc deixou a pasta do fck editor.

Depois é só escrever o textarea no seu html.

[sourcecode language="html"]
<br /> Teste de <strong>conteúdo</strong><br />
[/sourcecode]

Sendo que, o que vier dentro do textarea, será interpretado dentro do editor.

Como personalizar a barra de ferramentas

Se você seguiu o tutorial, viu que por padrão, o FCK tem centenas de botões (tem mais botões que o word, sem exagero), então, é necessário configurar a criar uma barra de ferramentas personalizada.

Para fazer isso, entre na pasta do fckeditor e abra o arquivo fckconfig.js
Na linha 101 e 118, existem duas toolbars, siga a mesma estrutura e crie a sua com os botões que desejar, coloque um nome pra ela, como “TextoSimples” por exemplo.
Depois disso, para invocá-la, você adiciona um parâmetro na hora de chamar o fck:

[sourcecode language="html"]
$(’textarea#fckExemplo’).fck({
height:220,
width:455,
toolbar:’TextoSimples’
});
[/sourcecode]

Vejam o exemplo, como ficou:

Um detalhe bem importante: por questões de segurança o FCK não funciona se você quiser rodar em um ambiente local. É necessário que esteja num servidor (pode ser um apache / iis / tomcat na sua máquina) só para acessar por http://

Visitem a página do plugin e o site do FCK Editor para obter mais informações.

Há uns posts atrás, quando o Danilo fez aqui no blog o resumo do Google Search Masters, ele falou sobre o Google Custom Engine, que é uma ferramenta que permite adicionar a busca do Google, de maneira bastante customizável ao seu site, podendo restringir a busca ao seu conteúdo, a sites relacionados ao seu tema de interesse ou mesmo a toda a web.

O Sikbox faz mais ou menos isso, só que com um diferencial: ele utiliza como base um recurso de Jquery e a API de busca do Yahoo! para oferecer uma busca onde os resultados aparecem estilo “autocomplete” abaixo da barrinha de busca. Para implementar isso no seu blog ou site, você não vai precisar digitar uma linha de código.

Só é necessário entrar em sikbox.com, colocar o endereço de seu site/blog, e apertar “Get the code”. Depois é só customizar o CSS (que pode ser um dos oferecidos pelo site, ou o CSS próprio), e definir quantos resultados para busca.

Aí é só copiar a linha de código gerada, e colar onde você quiser no código do seu site. Bem simples, funcional, e rápido de instalar.

O Yahoo! lançou na semana passada o smush it! uma ferramenta para auxiliar desenvolvedores a reduzir o peso das imagens, e assim otimizar o carregamento de seus sites, tornando-os mais leves. Não parece nada demais para programadores de interface que sabem (e precisam lidar com) o Photoshop, já que nele o comando “Save for the web” ou o querido CRTL + ALT + SHIFT + S, ajuda a escolher a versão mais reduzida da imagem.

Mas a vantagem do smush it!, é que segundo seus desenvolvedores, apesar de já exisitirem vários editores que otimizam o tamanho do arquivo da imagem, ainda ficam uma tonelada de dados extras (e inúteis) no arquivo. Por exemplo, informação sobre a data de edição ou criação do arquivo, o nome do editor utilizado, etc. - que são os dados que o smush it! vai remover.

Nessa aplicação web, as imagens, enviadas através de uma url ou por upload, são otimizadas e disponibilizadas para o download novamente. Uma grande sacada é que se pode enviar várias imagens de uma vez, e depois baixá-las com um arquivo único zipado.

Quando a foto é otimizada, aparecem os percentuais de redução. Nos testes que fiz, variaram de 2% a 48% de acordo com a imagem. Mesmo para os valores mais baixos, parece compensar passar as imagens pelo Smuthit, considerando que pra sites grandes, diminuir qualquer 2% do peso de cada imagem, já é um grande otimizador de performance. É legal comentar que em todos os testes que fiz, não houve perda da qualidade da imagem.

O smush it! também tem uma extensão de Firefox, que cria um ícone na barra de status do navegador. Quando se está em um site, basta clicar com sobre o ícone, e ele irá abrir o smush it em uma nova aba, carregando todas as imagens da página, sendo “smushadas” e com o link para o download do .zip. Mais fácil que isso não tem né?

As muitas opções de navegadores aos usuários, se tornam grandes problemas para desenvolvedores de front end, pois precisam lidar com interpretações diferentes de cada browsers, alguns deles que mal seguem os padrões W3C.

Para isso, um site bem feito exige certa validação do css e html em vários desses navegadores, o que torna o trabalho exaustivo. Existem atualmente algumas ferramentas para auxiliar nesse trabalho. Neste post estou trazendo algumas dessa ferramentas:

Serviços Online
1. Browser Shots
Esse site tira uma screenshot de seu site em todos navegadores. O screenshot pode não ser a opção mais atraente, mas é a única (se desconsiderarmos a possibilidade de você instalar todos os browsers e sistemas operacionais possíveis… rs).

2. Markup Validate Service by W3C
Verifica se o código está semanticamente correto, e indica algums erros que costumam ser problemáticos em alguns browsers.

Softwares
1. IE Tester
O IE Tester é uma emulador de IE, que permite abertura de abas de várias versões do IE, desde o 5.5 até o 8. Já que os usuários não abandonam… os desenvolvedores que se ferrem!

2. DebugBar
Da mesma empresa que desenvolveu o IE Tester, a DebugBar é uma espécie de Firebug com Webdeveloper (essas últimas, extensões para Firefox praticamente obrigatórias para programadores de front end - se você não conhece, corra no Google agora!).

Recursos de Desenvolvimento
1. IE.js do Dean Edwards
O Danilo já postou sobre esse js, que minimiza os problemas do IE. Mais informações, volte ao post “Como eliminar as diferenças de CSS do IE6 e IE5x com o IE7.js”.

2. CSS Global Resets
O resets.css é um recurso para minimizar através do css as diferenças entre browsers, equilibrando todas as propriedades antes de começar a criar o CSS. Para aplicá-lo é bem simples: basta incluir o código abaixo em seu css.

[sourcecode lang="css"]
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:101.1%; font-weight:normal; }
q:before,q:after { content:”; }
abbr,acronym { border:0; }
[/sourcecode]