function utf8_decode ( str_data ) {
    var tmp_arr = [], i = 0, ac = 0, c1 = 0, c2 = 0, c3 = 0;
    str_data += '';
    while ( i < str_data.length ) {
        c1 = str_data.charCodeAt(i);
        if (c1 < 128) {
            tmp_arr[ac++] = String.fromCharCode(c1);
            i++;
        } else if ((c1 > 191) && (c1 < 224)) {
            c2 = str_data.charCodeAt(i+1);
            tmp_arr[ac++] = String.fromCharCode(((c1 & 31) << 6) | (c2 & 63));
            i += 2;
        } else {
            c2 = str_data.charCodeAt(i+1);
            c3 = str_data.charCodeAt(i+2);
            tmp_arr[ac++] = String.fromCharCode(((c1 & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
            i += 3;
        }
    }
    return tmp_arr.join('');
}

Esta função foi feita com base na função utf8_decode do PHP.

Retirado do site: PHPJS.org

O Google anda fazendo pesquisas a um nível tão avançado, que estuda meios de substituir o protocolo HTTP que hoje é a base da Word Wide Web.

Recentemente em um post no blog oficial do Chrome, seu navegador, o Google revelou que andou realizando testes em um protocolo denominado “SPDY“, nome que veio da palavra “Speedy” do inglês. Bem apropriado para a ideia de deixar a Web duas vezes mais rápida.

O Protocolo HTTP vem alimentando a Web desde 1996, e o tom do post faz referência ao novo SPDY como um protocolo que irá aposentar o velho HTTP. Hoje em dia sabemos que o Google é uma das poucas empresas com cacife suficiente e recursos para estimular a evolução de sites e navegadores com um protocolo novo que visa acelerar a comunicação entre servidores web e clientes.

O Google revelou ainda que já tem um protótipo de um servidor Web e um cliente Chrome com suporte ao SPDY embutido e que foram testados em laboratório. Em testes, eles teriam conseguido um aumento de 55% na velocidade do carregamento da página.

Confiantes em seu protocolo, o google disponibilizou a documentação do SPDY, bem como o código fonte e deseja que a comunidade participe dando o feedback sobre este revolucionário projeto.

Exemplo de Uso

	header("Content-type:application/xml; charset=utf-8");
	$tmp = $this->Search("SELECT id, nome FROM usuarios");

	$objXml = new Xml();
	$objXml->addContent($tmp,'usuarios');
	echo $objXml->showXML();

Classe XML.Class.php

	/**
	* Classe responsável por formatar conteúdos em arquivos XMl
	*
	* @author Marcos Timm Rossow <marcos@interwise.com.br>
	* @version 0.1
	* @copyright Interwise
	* @access Public
	* @package ADM
	*/
	class Xml
	{
		/**
		* Variável com o nome do sistema
		* O nome do sistema é o root do documento xml
		* Por padrão define o sistema definido no arquivo de configuração
		* @access Private
		* @name $_root
		*/
		private $_root = "root";

		/**
		* Variável com o tipo de codificação
		* @access Private
		* @name $_root
		*/
		private $_codificacao = 'UTF-8';

		/**
		* Versão do documento de saída
		* @access Private
		* @name $_versao_xml
		*/
		private $_versao_xml = '1.0';

		/**
		* Objeto de construção do arquivo XML
		* @access Private
		* @name $_obj_xml
		*/
		private $_obj_xml;

		/**
		* Método construtor.
		* Inicia o objeto e cria o root com o nome do sistema especificado no arquivo de configuração
		* @access Public
		* @param String $_root possibilita definir outro nome ao root do documento diferente do informado no arquivo de configuração do sistema
		* @param String $_codificacao possibilita definir outro tipo de codificação. O padrão é UTF-8
		* @param String $_versao_xml possibilita alterar a versão de saída do arquivo XML. Por padrão, versão 1.0
		* @return bool
		*/
		public function __construct($_root = FALSE, $_codificacao = FALSE, $_versao_xml = FALSE)
		{
			// caso  tenha sido passado um nome para o sistema, define o mesmo
			if(isset($_root) AND "" != $_root)
				$this->_root = $_root;

			// caso  tenha sido passado a codificação do sistema, define o mesmo
			if(isset($_codificacao) AND "" != $_codificacao)
				$this->_codificacao = $_codificacao;

			// caso  tenha sido passado versão de saída do arquivo xml, define o mesmo
			if(isset($_versao_xml) AND "" != $_versao_xml)
				$this->_versao_xml = $_versao_xml;

			// inicia o objeto XmlWriter
			$this->_obj_xml = new XmlWriter();
			// inicia a memória
			$this->_obj_xml->openMemory();
			// inicia o documento passando como parâmetro a versão do documento xml e o tipo de codificação que será usada
			$this->_obj_xml->startDocument($this->_versao_xml, $this->_codificacao);
			// cria a raiz do documento com o nome do sistema
			$this->_obj_xml->startElement($this->_root);
			// habilita a identação do documento
			$this->_obj_xml->setIndent(TRUE);
			// define 3 espaços para serem utilizados como identação afim de ficar mais claro no debug
			$this->_obj_xml->setIndentString("   ");

			return true;
		}

		/**
		* Método para adicionar conteúdo ao XML
		* Inicia o objeto e cria o root com o nome do sistema especificado no arquivo de configuração
		* @access Public
		* @param String $_array_dados Array de forma associativa com dados a serem inseridos no objeto XML
		* @return bool
		*/
		public function addContent($_arr_dados, $_str_indice = FALSE)
		{
			// verifica se foi passado um array válido
			if(is_array($_arr_dados) AND 0 < count($_arr_dados))
			{
				// percorre os elementos do array
				foreach($_arr_dados as $chave => $valor)
				{
					// verifica se existem filhos para este array
					if(is_array($valor))
					{
						// abre o elemento
						$this->_obj_xml->startElement($_str_indice);
						// define o primeiro valor como atributo
						//$this->_obj_xml->writeAttribute("id", $valor[key($valor)]);

						// retira a chave
						//array_shift($valor);

						// recursividade para inserir um elemento interno
						$this->addContent($valor);

						// finaliza o elemento
						$this->_obj_xml->endElement();

						// continua percorrendo o array
						continue;
					}

					// insere elementos que não contenham mais filhos
					@$this->_obj_xml->writeElement($chave,$valor);
				}

				return true;
			}
			else
			{
				// debug
				// array inválido
			}
		}

		/**
		* Método para retornar o arquivo XML gerado
		* @access Public
		* @return string
		*/
		public function showXML()
		{
			// finaliza o objeto
			$this->_obj_xml->setIndent(true);
			$this->_obj_xml->endElement();

			// retorna o XML gerado
			return $this->_obj_xml->outputMemory(true);
		}
	}

Está bem comentada. Acho que é bem fácil de entender.

Quem preferir baixar diretamente do PHPClasses: Simple XML Generator

Em breve vou postar outras Classes PHP que ajudam a tornar a vida mais simples.

Primeiro de tudo vamos criar o nosso banco de dados. Vamos precisar de duas tabelas: uma para o nosso menu e outra com as permissões de cada usuário.

A tabela do Menu terá os campos de id (o id do objeto no Extjs para facilitar manipulação posterior), o nome, o ícone, a pai (caso exista), a ordem e é claro a função que será chamada na ação do clique. Na segunda tabela vamos ter apenas duas chave, o id do usuário e o id do menu. Segue abaixo de exemplo a que eu utilizei:

MySQL

#
# Estrutura da Tabela Menu
#

CREATE TABLE /*!32312 IF NOT EXISTS*/ `menu` (
  `id_menu` int(3) NOT NULL AUTO_INCREMENT,
  `id` varchar(20) DEFAULT NULL,
  `menu` varchar(70) DEFAULT NULL,
  `ordem` int(3) DEFAULT NULL,
  `pai` int(3) DEFAULT NULL,
  `ico` varchar(50) DEFAULT NULL,
  `funcao` varchar(80) DEFAULT NULL,
  PRIMARY KEY (`id_menu`)
) TYPE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=latin1;

#
# Estrutura da Tabela de Permissões
#

CREATE TABLE /*!32312 IF NOT EXISTS*/ `permissoes` (
  `id_usuario` int(3) NOT NULL DEFAULT '0',
  `id_menu` int(3) NOT NULL DEFAULT '0',
  PRIMARY KEY (`id_menu`,`id_usuario`)
) TYPE=MyISAM DEFAULT CHARSET=latin1;

Dica: Vale lembrar que o ícone dos pais são definidos pelo nome da classe CSS e os filhos devemos especificar o caminho físico da imagem. Não sei por que, mas sub-menus não possuem o atributo “iconCls”. No PHP já vamos levar isso em conta.

A outra parte do nosso Menu é a montagem do Json que irá ser lido no ExtJS. Este método foi testado apenas com 1 sub-nível de menu, mas é fácil de modificar para funcionar com mais. Se alguém fizer, comente a experiência. O método é bem simples de entender. Basicamente buscamos os ítens do Menu principal e percorremos ele em busca de sub-menus alocando tudo em um array associativo.

PHP

		private function trataObjJson($strJson,$arrObjs)
		{
			foreach($arrObjs AS $obj)
				$strJson = str_replace("\"" . $obj . "\"",$obj,$strJson);
			return $strJson;
		}

		public function getMenu()
		{
			if($this->Search("SELECT id_usuario FROM usuarios WHERE id_usuario=" . $_SESSION['id_usuario']))
			{
				$menu = "";
				$tmpMenuPai = $this->Search("SELECT A.id_menu,id,menu,ordem,pai,ico,funcao FROM menu A JOIN permissoes B ON A.id_menu=B.id_menu WHERE A.pai=0 AND B.id_usuario=" . $_SESSION['id_usuario'] . " ORDER By A.ordem");
				$i=0;
				$funcoes = array();
				foreach($tmpMenuPai AS $item)
				{
					$menu[$i]['text'] 			= $item['menu'];
					$menu[$i]['iconCls'] 		= $item['ico'];
					$menu[$i]['tabIndex'] 		= $i;
					if($item['funcao']) {
						$menu[$i]['id'] 		= $item['id'];

						$menu[$i]['handler'] 	= $item['funcao'];
						$funcoes[] = $item['funcao'];
					}

					$tmpMenuFilho = $this->Search("SELECT A.id_menu,menu,id,ordem,ico,funcao FROM menu A JOIN permissoes B ON A.id_menu=B.id_menu WHERE A.pai=" . $item['id_menu'] . " AND B.id_usuario=" . $this->_id . " ORDER By A.ordem");
					$arrFilho = Array();
					$j=0;
					foreach($tmpMenuFilho AS $filho)
					{
						$arrFilho[$j]['text']			= $filho['menu'];
						$arrFilho[$j]['icon']			= $filho['ico'];
						if($filho['funcao']) {
							$arrFilho[$j]['id'] 		= $filho['id'];

							$arrFilho[$j]['handler'] 	= $filho['funcao'];
							$funcoes[] = $filho['funcao'];
						}
						$j++;
					}
					if($arrFilho)
						$menu[$i]['menu'] = $arrFilho;
					$i++;
				}
				header("Content-Type: application/json");
				echo $this->trataObjJson(json_encode($menu),$funcoes);
			}
		}

Observe que precisamos de um método auxiliar para tratar as funções. Isso se deve pelo fato da função json_encode do PHP colocar áspas em tudo, então para o ExtJS não interpretar nossa função como uma string e gerar um erro, utilizamos uma função para retira-las.

Agora que já temos a nossa estrutura de menu em Json, bastam poucas linhas em ExtJS para finalizar:

ExtJS

Ext.onReady(function(){
 	var conn = new Ext.data.Connection();
	conn.request({
		url: 'inc/php/menu.class.php',
		success: function(a){Ext.getCmp('menuPrincipal').bottomToolbar.add(Ext.util.JSON.decode(a.responseText));},
		failure: function(){Ext.MessageBox.alert('Erro', 'Erro ao carregar menu. Atualize a página.');}
	});
});

Espero ter ajudado.

Neste exemplo vamos usar um destino fixo e solicitar ao usuário o endereço de partida.

Antes de mais nada, precisamos adquirir a chave API do Google Maps digitando a URL em que sua página será hospedada (você consegue gerar chave para http://localhost também).

De posse da chave, vamos criar uma página HTML simples e incluir a API do google maps já com a nossa chave:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=[aqui-entra-a-chave-da-api]" type="text/javascript"></script>

Agora vamos ao JavaScript com as funções necessárias para carregar o mapa e traçar a rota:

			// declaração de variáveis
			var map;
			var marker;

			// função que carrega o mapa inicial marcando o nosso ponto de chegada
			function load() {
				// verifica a compatibilidade do google maps
			  if (GBrowserIsCompatible()) {

				// Instancia o objeto e aplica na div 'mapa'
				map = new GMap2(document.getElementById("mapa"));
				// Especifica as coordenadas do centro do mapa e o zoom
				map.setCenter(new GLatLng(-20.339884,-40.287469), 14);
				// Especifica o div em que será exibido o detalhamento da rota
				directionsPanel = document.getElementById("route");
				gdir = new GDirections(map, directionsPanel);
				// Adiciona o evento de erros a função handleErrors
				GEvent.addListener(gdir, "error", handleErrors);

				//Adiciona barra de zoom e setas para movimentação no mapa
				map.addControl(new GSmallMapControl());

				//Adiciona um marcador nas coordenadas de chegada
				var point = new GLatLng(-20.339884, -40.287469);
				marker = new GMarker(point);
				map.addOverlay(marker);
				marker.title = "Shopping Vitória";

			  }
			}

			// Traça a Rota
			function setDirections(fromAddress, toAddress, locale){
				gdir.load("from: " + fromAddress + " to: " + toAddress,{"locale": "pt_BR"});
				// Remove o marcador inicial
				map.removeOverlay(marker);
			}

			// Especifica a origem e o destino
			function tracarRota() {
				setDirections(document.getElementById('from').value, "Fernando Ferrari, 514, Goiabeiras, Vitória, ES");
			}

			// Função com tratamentos de erros
			function handleErrors()
			{
			   if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
				 alert("Não foi possível achar o endereço. Isso pode ter ocorrido porque o endereço digitado ainda não está inserido no googlemaps ou porque foi digitado incorretamente.\nCódigo do Erro: " + gdir.getStatus().code);
			   else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
				 alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Código do Erro: " + gdir.getStatus().code);
			   else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
				 alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Código do Erro: " + gdir.getStatus().code);
			   else if (gdir.getStatus().code == G_GEO_BAD_KEY)
				 alert("Key inválida. Procure a key correta para este domínio no site do google. \n Código do Erro: " + gdir.getStatus().code);
			   else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
				 alert("A directions request could not be successfully parsed.\n Código do Erro: " + gdir.getStatus().code);
			   else alert("Ocorreu um erro inesperado.");
			}

Lembrando que na Tag “Body” é necessários chamarmos a função Load() para carregar o mapa inicial com nosso ponto de chegada marcado:

Para finalizar, o nosso formulário HTML deverá chamar a função tracarRota() como no código abaixo:

			<form method="get" action="#" onsubmit="tracarRota(); return false;">
				<div>
					<label for="from">Endereço de partida:</label>
					<input type="text" id="from" name="endereco" value="Carioca, 353 - Vila Velha - ES - 29100450" class="endereco" />
					<input type="submit" value="Achar Caminho" class="enviar" />
				</div>
			</form>

Confira o exemplo funcional

Veja o vídeo abaixo (inglês) que explica de forma simples e direta:

1. A Melhor Forma de Trabalhar com Labels é Acima do Campo

Um estudo realizado pela UX Matters considerou que a posição ideal para laebls em formulários está acima dos campos. Em muitas formas, os labels são colocados à esquerda dos campos, a criação de um layout de duas colunas, apesar de parecer bom, não é o layout mais fácil de usar. Por que isso? Como os formulários são geralmente orientados verticalmente, os usuários preenchem o formulário de cima para baixo. E seguindo o label campo abaixo é mais fácil do que encontrar o campo à direita.

Tumblr possui um simples e elegante-se formulário que segue a recomendação UX Matter.

Label com posicionamento a esquerda também representa outro problema: você alinha à esquerda ou a direita os seus labels? alinhamento esquerdo faz com que o formulário seja lido mas desconecta os labels dos campos, o que torna difícil ver qual label se aplica a qual campo. Alinhando-se a direita inverte: Contribui para uma boa aparência, mas de forma menos legível. Labels acima dos campos funcionam melhor na maioria das circunstâncias. O estudo também descobriu que os labels não devem ser ousados, embora essa recomendação não é conclusiva.

2. Usuários Focam em Rostos

Pessoas instintivamente identificam outras pessoas imediatamente. Em páginas da Web, tendemos a focalizar os rostos das pessoas e nos olhos, o que dá uma boa técnica de marketing para atrair a atenção. Mas a nossa atração para os rostos das pessoas e dos olhos é apenas o começo; desejamos olhar realmente no sentido em que a pessoa da imagem está olhando.

Eye-tracking: mapa de calor de um bebê olhando diretamente para nós, a partir do estudo UsableWorld.

E agora o bebê está olhando para o conteúdo. Observe o aumento de pessoas olhando para o título e texto.

Aqui está o estudo eye-tracking que demonstra isso. Estamos instintivamente atraídos para rostos, mas se esse cara está procurando algum lugar diferente de nós, vamos também olhar nessa direção. Tire proveito desse fenômeno, chamando a atenção dos usuários para as partes mais importantes da sua página ou anúncio.

3. Qualidade do Design é um Indicador de Credibilidade

Vários estudos têm sido realizados para descobrir exatamente o que influencia a percepção das pessoas sobre a credibilidade de um site:

• Stanford-Makovsy Web Credibility Study 2002: Investiga o que faz hoje Sites com Credibilidade
• Que faz um Web site com Crédito? Um relatório sobre um grande estudo quantitativo
• Elementos de Credibilidade Computacional
• Elementos que afetam a credibilidade da Web: Primeiros Resultados de um Relatório de Estudos Próprios (Processo da ACM CHI 2000 Conference on Human Factors in Computing Systems, v.2, New York: ACM Press)

Não sabemos se a aplicação do Fever app é boa, mas a interface do usuário elegante do site traz uma grande primeira impressão.

Um dado interessante desses estudos é que os usuários realmente julgam um livro pela capa… ou melhor, um site pelo seu design. Elementos tais como layout, a coerência, a tipografia, a cor e o estilo de todos afetam a maneira como os usuários percebem o seu site e que tipo de imagem terão de seu projeto. Seu site não deve apenas passar uma boa imagem, mas também o caminho certo para o seu público.

4. A Maioria dos Usuários Não Usam Rolagem

Um estudo de Jakob Nielsen sobre o quanto os usuários usam rolagem (priorizando a Usabilidade Web) revelou que apenas 23% dos visitantes usam a rolagem em sua primeira visita a um site. Isto significa que 77% dos visitantes não irá rolar, eles vão apenas visualizar o conteúdo acima da dobra (ou seja, a área da página que está visível na tela sem rolagem para baixo). Além do mais, o percentual de usuários que rolam a página diminui com visitas subsequentes, com apenas 16% em sua segunda visita. Esses dados enfatizam o quão importante é colocar o seu conteúdo-chave em uma posição de destaque, especialmente na página principal.

Isso não significa que você deve entupir tudo na área superior da página, basta que você faça o melhor uso desse espaço. Entupir com conteúdo fará apenas o conteúdo inacessível, quando o usuário vê muita informação, não sabe por onde começar a procurar.

Basecamp faz bom uso do espaço. Acima da dobra (768 pixels de altura), ele mostra uma tela grande, proposição de valor, chamada à ação, lista de clientes, vídeos e lista curta de imagens.

Isso é muito importante para a página inicial, onde a maioria dos visitantes irá chegar. Portanto, forneça os elementos essenciais lá:

1. Nome do Site;
2. Valor Proposto pelo Site (isto é, como os usuários se beneficiam ao usá-lo);
3. Navegação para as principais seções do site que são relevantes para o usuário.

No entanto, os hábitos dos usuários mudaram significativamente desde então. Estudos recentes comprovam que os usuários são muito confortáveis com a rolagem e em algumas situações estão dispostos a rolar para o final da página. Muitos usuários estão mais confortáveis com a rolagem do que com uma paginação, e para muitos usuários a informação mais importante da página não é necessariamente colocado “acima da dobra” (que é por causa da variedade de resoluções de exibição disponíveis um termo bastante ultrapassada, obsoleta ). Por isso, é uma boa idéia dividir o layout em seções para facilitar a digitalização, separando-os com um monte de espaço em branco.

Para mais informações, por favor dê uma olhada nos artigos Unfolding the fold (Clicktale), Paging VS Scrolling (Wichita University – sURL), Blasting the Myth of the Fold (Boxes and Arrows). (obrigado, Fred Leuck).

5. Azul é a Melhor Cor Para Links

Embora dar ao seu projeto um layout único, quando se trata de usabilidade, fazer o que todo mundo está fazendo é o melhor. Siga as convenções, porque quando as pessoas visitam um novo site, o primeiro lugar que vão olhar é para as coisas que estão nos lugares onde eles encontram na maioria dos outros sites, eles usarão de sua experiência para dar sentido a este novo conteúdo. Isso é conhecido como padrões de uso. As pessoas esperam que certas coisas sejam o mesmo, como as cores dos links, a localização do logotipo do site, o comportamento de navegação com guias e assim por diante.

O Google mantém todos os links em seus sites azul por uma razão: a cor é familiar para muitos usuários, o que torna mais fácil de localizar.

Que cor deve ter os seus links? A primeira consideração é o contraste: links têm que ser escuro (ou claro) o suficiente para contrastar com a cor de fundo. Em segundo lugar, eles devem se destacar da cor do resto do texto, por isso, não usem links preto com texto em preto. E, finalmente, a pesquisa mostra (Van Schaik e Ling) que, se a usabilidade é a sua prioridade, usando o azul para os links é melhor. A cor padrão do navegador para link  é azul, então as pessoas esperam isso. Escolher uma cor diferente de modo algum é um problema, mas pode afetar a rapidez com que os usuários achem.

6. O Ideal Para Caixa de Pesquisa são 27 Caracteres de Largura

Qual é a largura ideal de uma caixa de pesquisa? Existe uma coisa dessas? Jakob Nielsen realizou um estudo de usabilidade no comprimento de caixas de pesquisa do site (priorizando Usabilidade Web). Acontece que a maioria das caixas de pesquisa de hoje são demasiadamente curtas. O problema com caixas curtas é que mesmo que você possa digitar uma consulta longa, apenas uma parte do texto vai ser visível em uma hora, o que torna difícil para rever ou editar o que você digitou.

O estudo constatou que a caixa de pesquisa média é de 18 caracteres de largura. Os dados mostraram que 27% das consultas eram demasiadamente longas para caber dentro dele. Estendendo a caixa para 27 caracteres se atende 90% das consultas. Lembre-se, você pode definir larguras usando ems, não apenas pixels e points. Um “em” é a largura e altura de um caractér “m” (usando qualquer tamanho da fonte o site também usará). Então, use essa medida para dimensionar a largura do campo de entrada de texto até 27 caracteres de largura.

A caixa de pesquisa da Apple é um pouco curta demais, cortando a consulta, "Microsoft Office 2008."

Em geral, as caixas de pesquisa são melhores compridas do que curtas, de modo que os usuários podem rapidamente analisar, verificar e submeter à consulta. Esta orientação é muito simples, mas, infelizmente, muitas vezes rejeitada ou ignorada. Alguns preenchimentos no campo de entrada também pode melhorar o design e experiência do usuário.

7. Espaço em Branco Melhora a Compreensão

A maioria dos designers sabem o valor do espaço em branco, que é o espaço vazio entre os parágrafos, imagens, botões e outros itens na página. O espaço em branco ordena uma página dando espaço para os itens respirarem. Nós também podemos agrupar itens, diminuindo o espaço entre eles e aumentando o espaço entre eles e outros itens na página. Isso é importante para mostrar as relações entre os itens (por exemplo, mostrando que este botão aplica-se a este conjunto de itens) e a construção de uma hierarquia de elementos na página.

Observe a grande margem de conteúdo, preenchimento e espaçamento sobre o Netsetter. Todo o espaço que torna o conteúdo fácil e confortável para ler.

O espaço em branco também torna o conteúdo mais legível. Um estudo (Lin, 2004) descobriu que o bom uso do espaço em branco entre parágrafos e nas margens esquerda e direita aumenta a compreensão em quase 20%. Os leitores acham mais fácil se concentrar no processo e conteúdo generosamente espaçadas.

De fato, de acordo com Chaperro, Shaikh e Baker, o layout de uma página Web (incluindo espaços em branco, cabeçalhos, recuo e números) não podem influenciar o desempenho mensurável, mas não influenciam a satisfação do usuário e experiência.

8. Um Teste De Usuário Eficaz Não Tem Que Ser Extenso

Um estudo de Jakob Nielsen sobre o número ideal de cobaias de testes de usabilidade mostra que os testes com apenas cinco usuários revelaria cerca de 85% de todos os problemas com o seu site, enquanto que 15 usuários se encontraria praticamente todos os problemas.

Fonte: Jakob Nielsen’s AlertBox

Os maiores problemas normalmente são descobertos pelo primeiro ou segundo usuário, e os testadores seguintes confirmam estas questões e descobrem as restantes de menor importância. Apenas dois usuários de teste, provavelmente encontraria a metade dos problemas em seu site. Isto significa que o teste não tem de ser extensivo ou caro para produzir bons resultados. Os maiores ganhos são obtidos quando se passa de zero usuários de teste para um, por isso não tenha medo de fazer muito pouco: qualquer teste é melhor do que nada.

9. Páginas Informativas Ajudam a Destacar seu Produto

Se seu site tem páginas de produto, as pessoas que compram on-line definitivamente querem vê-los. Mas as páginas de muitos produtos não dispõem de informações suficientes, mesmo para os visitantes fazerem uma verificação rápida. Este é um problema grave, porque a informação de produto ajudam as pessoas a tomarem a decisão de compra. A pesquisa mostra que produtos com informação pobres são cerca de 8% dos problemas de usabilidade e até 10% de falha do usuário (ou seja, o usuário desiste e deixa o site) (Priorizando Usabilidade Web).

A Apple fornece separado páginas de "Especificações técnicas" para seus produtos, e mantém os detalhes complicados longe das páginas mais simples de marketing, mas proporciona acesso fácil quando eles são necessárias.

Forneça informações detalhadas sobre seus produtos, mas não caia na armadilha de bombardear usuários com muito texto. Torne a informação mais fácil de digerir. Torne a página agradável e divida o texto em segmentos pequenos e com abundância de sub-títulos. Adicionar abundância de imagens para o seu produto, e usar a linguagem certa: não usar jargão que os visitantes podem não entender.

10. A Maioria Dos Usuários Estão Cegos Para Publicidade

Jakob Nielsen relata em sua pesquisa Alertbox que a maioria dos usuários são essencialmente cegos para banners. Se eles estão procurando um trecho de informação em uma página ou são absorvidos pelo conteúdo, eles não vão se distrair com os anúncios na lateral.

A implicação disso é que os usuários não apenas irão evitar os anúncios, mas que eles vão evitar qualquer coisa que se pareça com um anúncio, mesmo se não seja um anúncio. Alguns itens de navegação muito estilosos pode ser parecidos com banners, deve-se ter cuidado com esses elementos.

Os banners quadrado na lateral esquerda do FlashDen não são realmente anúncios: eles são links de conteúdo. Eles se parecem muito próximas à banners e isso pode ser ignorado por alguns usuários.

Dito isto, os anúncios que se parecem com conteúdo irão levar as pessoas a clica-los. Isso pode gerar mais receita publicitária, mas existe o custo de perda de confiança dos seus usuários, ao clicar em coisas que achavam ser conteúdo genuíno. Antes de enveredar por esse caminho, considerar o fator: receitas de curto prazo versus confiança a longo prazo.

Bônus: Resultados de Nosso Estudo de Caso

Nos últimos anos, a equipe editorial do Smashing Magazine realizou uma série de estudos de caso em uma tentativa de identificar soluções de design e práticas comuns. Até agora, nós analisamos os formulários da Web, blogs, tipografia e carteiras, e mais estudos de caso serão publicados no próximo mês. Nós encontramos alguns padrões interessantes que poderiam servir como diretrizes para o seu próximo projeto.

Aqui, vamos rever algumas das práticas e padrões de projeto que descobrimos em nossos estudos de caso nesta visão geral breve e compacta, para sua conveniência.

Segundo nosso estudo de tipografia:

• Altura da Linha (em pixels) ÷ tamanho da fonte (em pixels) = 1,48
  1,5 geralmente é recomendada em livros clássicos tipográfico, e o nosso estudo confirma essa regra. Muito poucos sites usam nada menos do que isso. E o número de sites que passar por cima de 1,48 diminui à medida que você começa mais a partir deste valor.
• Comprimento de linha (pixels) ÷ altura da linha (pixels) = 27,8
  O comprimento da linha média é de 538,64 pixels (excluindo margens e enchimento), que é bastante grande, considerando que muitos sites ainda tem de 12 a 13 pixels em tamanho de fonte.
• Espaço entre parágrafos (pixels) ÷ altura da linha (pixels) = 0,754
  Acontece que o espaçamento entre parágrafos (ou seja, o espaço entre a última linha de um parágrafo e a primeira linha da próxima) raramente é igual ao principal (o que seria a principal característica do ritmo vertical perfeito). Mais frequentemente, espaçamento entre parágrafos é apenas 75% do ponto principal. A razão pode ser que o líder geralmente inclui o espaço ocupado por descendentes, e porque a maioria dos personagens não tem descendentes, espaço em branco adicional é criado sob a linha.
• O número ideal de caracteres por linha é de 55 a 75
  Segundo o clássico livro tipográfico, o número ideal de caracteres por linha é entre 55 e 75, mas entre 75 e 85 caracteres por linha é mais popular na prática.

De acordo com nosso estudo de design de blogs:

• Layouts geralmente têm uma largura fixa (pixel-based) (92%) e são geralmente centrada (94%). A largura de layouts fixos varia entre 951 e 1000 pixels (56%)
• A página principal mostra trechos de 10 a 20 posts (62%).
• 58% do total de layout de um site é usado para exibir o conteúdo principal.

Segundo nosso estudo de design de formulário Web:

• O link de cadastro intitula-se “inscrever” (40%) e é colocado no canto superior direito.
• Formulários de Inscrição têm layouts simples, para evitar confundir os usuários (61%).
• Títulos de campos de entrada estão em negrito (62%), e os campos são dispostas verticalmente mais do que eles estão dispostos horizontalmente (86%).
• Designers tendem a incluir alguns campos obrigatórios e alguns campos opcionais.
• Confirmação de e-mail não é exibida (82%), mas a confirmação de senha é (72%).
• O botão “Enviar” ou é alinhado à esquerda (56%) ou centralizado (26%).

De acordo com nosso estudo de sites de portfólio:

• 89% dos layouts são centrados horizontalmente, e a maioria deles tem um grande menu de navegação horizontal.
• 47,2% dos portfólios tem a página do cliente, e 67,2% têm algum tipo de página de serviços autônomos.
• 63,6% têm uma página detalhada para cada projeto, incluindo estudos de caso, depoimentos, apresentações de slides com imagens, rascunhos e esboços.
• Páginas de Contato contêm instruções de número de telefone, endereço de e-mail, endereço postal, vCard e formulário on-line.

Este Post é uma tradução do original: 10 Useful Usability Findings and Guidelines

O bom dessas ferramentas, é que elas podem ser usadas em sistemas CMS onde usuários leigos podem inserir tranquilamente a imagem da matéria de capa sem ter que depender de um designer (e sem estragar o layout dele).

Uma ferramenta poderosa é o Jcrop, ela oferece bloqueio de proporção, animação e você ainda pode personalizar o css e deixar mais a cara da sua aplicação. E ainda é cross-browser.

Como usar é bem simples, basta incluir o arquivo do plugin e aplicar o plugin com o seguinte comando:

$(function(){
	$('#id-da-imagem').Jcrop();
});

Claro que esta é a forma mais simples, mas na área de exemplos do site existem os códigos para você incrementar este código da maneira que você precisar.

Mas não pára por aí, não adianta selecionar a parte da imagem que você quer se não houver o corte da imagem. Para isso vou usar o exemplo do próprio autor utilizando a biblioteca GD do PHP.

Antes de mais nada, precisamos postar as posições a serem cortadas. Para isso, utilize campos input hidden da seguinte forma:

	<input type="hidden" id="x" name="x" />
	<input type="hidden" id="y" name="y" />
	<input type="hidden" id="w" name="w" />
	<input type="hidden" id="h" name="h" />

E a seguinte função para popular esses campos:

jQuery(function(){
        jQuery('#id-da-imagem').Jcrop({
                aspectRatio: 1,
                onSelect: updateCoords
        });
});

function updateCoords(c)
{
        jQuery('#x').val(c.x);
        jQuery('#y').val(c.y);
        jQuery('#w').val(c.w);
        jQuery('#h').val(c.h);
};

Postado as coordenadas da imagem, utilizamos o seguinte código PHP para criar a nova imagem:

$targ_w = $targ_h = 150;
$jpeg_quality = 90;

$src = 'demo_files/flowers.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
    $targ_w,$targ_h,$_POST['w'],$_POST['h']);

header('Content-type: image/jpeg');
imagejpeg($dst_r, null, $jpeg_quality);

Simples, faça online:

http://www.pixlr.com/editor/

Esse editor foi desenvolvido em Flash, mas até carrega rapidinho. Abre arquivos clássicos como JPG, GIF e arquivos vetores como PNG e PSD (photoshop).

No entanto, a maioria dos plugins que encontrei eram já desenhados pensando em imagens. Os que eram mais genéricos, eram grandes, de difícil personalização.

Perdi tanto tempo testando que nem me lembrei de como é fácil fazer as coisas com jQuery. Foi aí que resolvi escrever um código simples que resolvesse o meu problema.

E a seguir está o código. Simples, fácil de personalizar e que resolveu a situação.

var tamCarrosel = ($("#carroselEfeito li").length-1);

$('#carrosel_proximo').click(function() {
	if(i == 0)
		$('#seta_esquerda a').css({'backgroundPosition':'0 0'});
	if(i < tamCarrosel){
		$('#carroselEfeito li').eq(i).animate({ left : "-"+700}, function() {
			$('#carroselEfeito li').eq(i+1).css({ left: "700px"});
			$('#carroselEfeito li').eq(i).hide();
			$('#carroselEfeito li').eq(i+1).animate({left: "-"+0});
			i++;
			if(i == tamCarrosel)
				$('#seta_direita a').css({'backgroundPosition':'0 75px'});
		});
	}
});
$('#carrosel_anterior').click(function(){
	if(i == tamCarrosel)
		$('#seta_direita a').css({'backgroundPosition':'0 0'});
	if(0 < tamCarrosel && i>0){
		$('#carroselEfeito li').eq(i).animate({left : "+"+700}, function(){
			$('#carroselEfeito li').eq(i-1).css({right: "700px"});
			$('#carroselEfeito li').eq(i).hide();
			$('#carroselEfeito li').eq(i-1).animate({left: "-"+0});
			i--;
			if(i == 0)
				$('#seta_esquerda a').css({'backgroundPosition':'0 75px'});
		});
	}
});

E o HTML, mais simples ainda:

<code>
		<div id="carrosel">

			<div class="centro">
				<div id="seta_esquerda"><a id="carrosel_anterior" href="javascript:void(0)"></a></div>
				<div id="conteudo_carrosel">
					<ul id="carroselEfeito">
						<li>ítem 01</li>
						<li>ítem 02</li>
						<li>ítem n</li>
					</ul>
				</div>
				<div id="seta_direita"><a id="carrosel_proximo" href="javascript:void(0)"></a></div>
			</div>
		</div>
</code>

Vou sempre postar os plugins mais interessantes que já testei para que outros economizem o tempo que já gastei pesquisando sobre. Obviamente que algumas cada caso é um caso.