TidBits

Oct 29

Plugin de jQuery para Twitter

Ví no pinceladasdaweb (ótimo blog) que um programador chamado Damien du Toit escreveu recentemente um Plugin do jQuery para o twitter, que obtem os últimos tweets de um usuário e eu traduzi para português (os horários dos tweets).

Vejam o exemplo:

Para usar é facil:

Invoque o jQuery, o plugin e o css ( que você pode alterar facilmente para deixar personalizado ).


<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery.twitter.js"></script>
<link rel="stylesheet" href="jquery.twitter.css" type="text/css" />

Escreva uma div onde vai ficar os tweets


<div id="twitter"></div>

E enfim, chame o método do plugin:


$(document).ready(function() {
	$("#twitter").getTwitter({
		userName: "maktuiu",
		numTweets: 5,
		loaderText: "Carregando tweets...",
		slideIn: true,
		showHeading: true,
		headingText: "Últimos Tweets de maktuiu",
		showProfileLink: true
	});
});

Note que é possível configurar quantos tweets vai aparecer, a mensagem de “carregando”, o título, etc.

Aqui está disponível para download um exemplo demo do plugin e o script (já com os horários dos tweets traduzidos).

Oct 28

SideSight, novidades da Microsoft na interface touch

A Microsoft anunciou essa semana durante o simpósio de User Interface Software and Technology a nova tecnologia em desenvolvimento: o SideSight. Apesar de ter tudo a ver com as interfaces touchscreens, o conceito tem uma diferença bastante básica entre as tecnologias multitouchs do Iphone (que é um sensor de calor ao toque) e da HTC (que utiliza sensor de pressão).

Demonstração do uso do SideSight

A SideSight não é exatamente touch, pois baseia-se em sensor de movimento, ou seja, não é necessário contato entre o usuário e o gadget. A idéia é diminuir a necessidade de precisão do toque, que vai ficando cada vez mais difícil à medida em que se diminui o tamanho dos aparelhos.

Tecnologia do SideSight
Se a tecnologia for bem desenvolvida, não só o problema do tamanho dos aparelhos móveis terá sido superado, como vários outros problemas que as atuais tecnologias touchscreen apresentam, como a acessibilidade (que foi completamente ignorada no Iphone). Como o usuário não precisa apontar nada na tela, e sim realizar o movimento, o uso é possível para pessoas cegas, baixa visão ou mesmo com dificuldades motoras. Nos touchs atuais, no caso do Iphone, o sensor de calor faz necessário o uso de luvas especiais em países de inverno rigoroso, enquanto o multitouch da HTC, precisa ser configurado por cada usuário individualmente, para ter calibrada a pressão exata do dedo.

O sensor utiliza infra-vermelhos que têm alcance de 10 centímetros, e permitem utilização completa da área do ecrã, já que os comandos são feitos através de movimentos do usuário. Mais uma promessa de interação com o usuário, e mais um dos desafios que teremos como profissionais de interface.

Oct 27

Typeface.js para usar fontes que não são de sistema com javascript

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.

Oct 27

Testeusabilidade.com.br, um site para quem quer escutar usuários

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.

testeusabilidade.com.br - Site de testes de usabilidade

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.

Oct 23

Editor web WYSIWYG simples - Plugin de FCKEditor pra jQuery

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.

Oct 23

Cursos gratuitos à distância

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

« Pr�ximo 1 2 3 4 5 678 9 10 11 12 13...16 17 Anterior »