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.

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.

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:

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery.FCKEditor.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$.fck.config = {path: '_scripts/fckeditor/'};
		$('textarea#fckExemplo').fck({height:220, width:455});
	});
</script>

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.

<textarea name="fckExemplo" id="fckExemplo">
	Teste de <strong>conteúdo</strong>
</textarea>

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:

 $('textarea#fckExemplo').fck({
	height:220,
	width:455,
	toolbar:'TextoSimples'
});

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.

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. ;)

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é? ;)

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.

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; }

Em evento online realizado hoje pelo pessoal do MXStudio, as mudanças foram apresentadas e indicam melhorias. Os principais novos recursos são:

- Live View: O Live View é um browser dentro do Dreamweaver. A idéia é que as modificações feitas no código (em layout ou interação), possam ser visualizadas no próprio arquivo, sem precisar ficar abrindo o browser para teste. Parece promissor, desde que funcione com mais fidelidade que o tal modo “Visual” do Dreamweaver atual.

- Code Hint para frameworks e Ajax: Esse recurso é uma novidade importante. No post anterior, o Danilo comentou sobre o crescimento do Jquery e das bibliotecas de interação em Javascript, que vêm ganhando mercado. Que bom que a Adobe está prestando atenção nisso, e ajudou os desenvolvedores na tarefa. Segundo o site oficial da Adobe, vai ser possível “incorporar estruturas JavaScript populares, incluindo jQuery, Prototype e Spry”.

- Related files: Mais um recurso que promete ser bem interessante. Vai ser familiar para quem costuma utilizar o “Inspect” do Firebug. Ao clicar em um elemento no modo de visualização do Dreamweaver, os arquivos que determinam aquele elemento são imediatamente relacionados, tornando bem mais fácil encontrar e editar o código.

Alguns outros recursos foram adicionados também, mas como eles são excessivamente WYSIWYG não procurei saber em detalhes. Só para constar, são recursos como o Photoshop Smart Objects (uma espécie de integração entre o arquivo .PSD e o Dreamweaver, fazendo com que alterações feitas em um, sejam simultaneamente aplicadas no outro) e o Adobe InContext Edit (cria áreas com “permissão” de edição pra usuários finais – socorro!).

De modo geral, parece que vai agregar funcionalidades interessantes ao Dreamweaver. Particularmente, acho um software bacana, desde que usado como um editor de código, e não como uma ferramenta essencial para o desenvolvimento. Já vi muita porcaria feita, zilhões de ids de css chamados de style1, style2, style3 e htmls com tabelas geradas automaticamente pelo Dreamweaver.

Mas nesse caso, o problema são os usuários do produto, que ao invés de tratá-lo como ferramenta, utilizam como matéria-prima para desenvolvimento. Se você gosta do Dreamweaver, as novas funcionalidades do CS4 vão ser de grande valia. ;)

Para quem quiser saber mais assista à palestra online de apresentação do Pacote CS4 feita pelo Danilo Santana.