TidBits

Isso pode ser bem útil e economizar muito tempo. Imagine a situação: o designer resolve fazer um site com uma fonte que ele achou no google. Resultado? programadores front end se ferram. Até hoje existia uma única solução cross browser pra renderizar a fonte, usando flash. Mas existe um projeto chamado typeface.js, open source e cross-browser para importar as fontes via javascript! Além disso a página continua acessível, inclusive para buscadores.

O projeto está em desenvolvimento mas ja é possível utilizá-lo.

Como funciona?

É só invocar o typeface e o script da fonte. Existe um arquivo javascript para cada fonte, caso você tenha uma fonte que não exista no arquivo deles, você pode subir ela e converter a fonte num arquivo javascript. Esse arquivo gera uma imagem pra cada palavra, subistituindo o texto original pela fonte desejada.

Veja detalhadamente como fazer:

Dentro da sua tag head, inclua os arquivos:

<script type="text/javascript" src="_scripts/typeface-0.10.js"></script>
<script type="text/javascript" src="_scripts/helvetiker_regular.typeface.js"></script>

Escreva o html e adicione a classe typeface-js nos elementos onde for atribuir alguma fonte que não seja de sistema.

<div class="titulo typeface-js">
	Exemplo de texto com helvetiker
</div>
<p class="texto typeface-js">
	Lorem ipsum dolor sit amet,
	consectetuer adipiscing elit.
	Nunc urna justo, dapibus nec,
	porttitor a, rutrum id, velit.
	Nulla et nulla. Nulla vitae pede.
	Morbi tincidunt massa eu lacus.
</p>

Depois é só atribuir a fonte no seu css, do mesmo jeito como se fosse arial:

div.titulo {
	font-family: Helvetiker;
	font-size: 30px;
}
p.texto {
	font: 20px  Helvetiker;
	color:#444;
}

Veja o script em ação no exemplo abaixo:

Você pode fazer download desse exemplo, com todos os arquivos e também pode ver outros exemplos no site do typeface.

Vale a pena dar uma olhada se você tiver um projeto que tenha fontes não sistêmicas a kilo, ou então títulos dinâmicos onde não dá pra fazer image replacement.

Essa semana eu descobri esse site, o TesteUsabilidade. A iniciativa é interessante, você publica seu site e recebe feedback dos usuários do site, que opinam sobre a execução de tarefas, o visual, a disposição dos itens, etc.

Gostei da idéia, e da proposta, porque é uma maneira de receber opiniões, opinar e dessa forma, melhorar também seu próprio senso crítico. No entanto, tenho várias ressalvas. O nome, por exemplo, me pareceu uma escolha um pouco infeliz, pois o modelo do site não é exatamente um “teste de usabilidade”.

Testes de usabilidade são atividades moderadas, que analisam vários eventos das execuções da tarefas e feitos com usuários cuidadosamente selecionados, enquanto o modelo do site é apenas uma avaliação da percepção dos usuários aleatórios em relação ao seu site. Além disso, quem faz a comunidade são usuários avançados, o que com toda certeza prejudica a avaliação mais completa da usabilidade.

Ainda assim, é válido por ser um espaço aberto à críticas e opiniões que visam melhorar a vida dos usuários nos sites. ;)

Boa semana a 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:

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

A mesma faculdade que formou o Sergei Bin e o Larry Page do Google, e onde o Steve Jobs começou a estudar (mas não terminou), está oferecendo cursos gratuitos online. Muita gente sabe da notícia (que não é lá muito nova), e não é a toa que a média de acessos de brasileiros no site é altíssima.

Existem três áreas básicas: Introduction to Computer Science, Artificial Intelligence e Linear Systems and Optimization. O material está totalmente em inglês, mas para quem programa, o inglês técnico do curso é de fácil compreensão. Para quem se interessar, acesse o link do site.

Falando em Stanford, e no Steve Jobs, tem um discurso clássico que ele fez pra uma turma de formandos em 2005. Recomendo muitíssimo para quem ainda não viu:
Discurso do Steve Jobs – Legendado (Parte 1)
Discurso do Steve Jobs – Legendado (Parte 2)

PS: Esse post tem um estilo meio “retwitt”, mas a boa informação pode ser repetida, se ela é mesmo útil ;)