2008 October | TidBits

Oct 31

CSS background-image em uma imagem

Imagine uma imagem grande, que demora pra ser carregada.
E se colocar um loading na imagem?
É bem simples:


<img src="imagemPesada.jpg" alt="alt da imagem" id="imagemPrincipal"/>

E no css :


img#imagemPrincipal{
	background: url('loading.gif') no-repeatcenter center;
}

Um outro exemplo do que se pode fazer com isso, é colocar níveis de profundidade, veja o exemplo abaixo:

Esse não foi feito por mim, eu achei na internet mas infelizmente não sei quem fez para dar os créditos, se alguém souber, avise-me.

Oct 31

O que esperar do futuro?

Aconteceu ontem (dia 30/10) aqui em SP o multirão do lixo eletrônico. Particularmente, não sei quanto material foi coletado, mas até bem próximo da data do evento, a expectativa girava em torno de 20 toneladas de eletônicos desprezados que deveriam ser recolhidos.

Isso nos faz pensar que a tecnologia causa mudanças irreversíveis na nossa sociedade, algumas das quais podemos prever hoje em dia, e outras que viram que estão longe do nosso alcance. Aproveitando esse ensejo, o post de hoje é pra mostrar o vídeo de uma cidade do futuro, na qual a grande maioria das interações humanas acontecem com o intermédio da tecnologia.

Cooltown é uma cidade fictícia da HP, mas as tecnologias apresentadas estão muito mais para realidade do que para a ficção. Isso nos assusta, de certa forma, pois a mudança não atinge somente as ferramentas do nosso cotidiano, mas também a nós mesmos, nossas necessidades e relações sociais e culturais.

(E levanta um pouco a velha história de perdemos também nossa privacidade, e consequentemente sempre vigiados pelo Grande Irmão).

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.

« Pr�ximo12 3 4 5 Anterior »

TidBits

CSS background-image em uma imagem

O que esperar do futuro?

Plugin de jQuery para Twitter

SideSight, novidades da Microsoft na interface touch

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

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

RSS

Tags

Categorias

Quem?