Leandro Vieira Pinho´s Blog

Just another WordPress weblog

Archive for 'web 2.0'

Como fazer design para a web 2.0

January 4th, 2007. Published under design, web 2.0. 5 Comments.

A web 2.0 tem suas próprias características e muitas delas são marcantes. Se tratando de design, ela trouxe a tona a evidência de diversos conceitos de design que são empregados fielmente em diversos sites a la 2.0.

Para fazer design para a web 2.0, é preciso levar em conta alguns simples, porém muito importantes conceitos de design. Que infelizmente algumas vezes são desprezados; e quando bem aplicados os resultados são maravilhosos.

Abaixo há uma lista com excelentes informações sobre esses conceitos. Leitura extremamente recomendada para os web designers.

  1. Simplicity
  2. Central layout
  3. Fewer columns
  4. Separate top section
  5. Solid areas of screen real-estate
  6. Simple nav
  7. Bold logos
  8. Bigger text
  9. Bold text introductions
  10. Strong colours
  11. Rich surfaces
  12. Gradients
  13. Reflections
  14. Cute icons
  15. Star flashes

Recomendo também a leitura de dois outros excelentes artigos sobre o assunto:

  1. Current style in web design
  2. The visual design of Web 2.0

Gerenciador de tags em campos de formulários

January 2nd, 2007. Published under DOM, javascript, web 2.0. No Comments.

Desenvolvi uma solução em JavaScript que gerencia as tags em um campo de formulário de acordo com as configurações informadas pelo utilizador dessa solução.

Com o advento da web 2.0 tornou-se muito comum categorizar artigos, por exemplo, através de tags (rótulos). Cada aplicativo que utiliza esse tipo de categorização separa as tags através de espaços, outros com vírgulas (minha preferência), entre outros separadores. Alguns limitam a quantidade de tags durante o ato de categorizar, outros não.

A solução abaixo foi desenvolvida com base nessas divergências e por isso permite ser customizada de acordo com a característica da aplicação em que esta solução for utilizada.

/**
 * w3_manager_tags (0.1) - 02/01/2007
 * Leandro Vieira Pinho
 * Localize-me. Blog: [ http://leandro.w3invent.com.br ], E-mail leandro[at]w3invent[dot]com[dot]br
 */
var w3_manager_tags = {
	// Configuração
	objFieldId: ‘id_do_campo’, // ID do campo onde as tags serão digitadas
	strSpliter: ‘,’, // Separador desejado para as tags. Ex. , (vírgula) |  (espaço) | ; (ponto e vírgula)
	intTotalTagsMax: 5, // Total máximo de tags permitido
	boolShowAlert: true, // Exibir ou não um alerta, caso exceda o total de tags
	strMessage: ‘Utilize no máximo 5 (cinco) tags.’, // Mensagem a ser exibida
	start: function() {
		var objField = this.$(this.objFieldId);
		objField.onkeyup = function() {
			w3_manager_tags.manager(this.value);
		};
	},
	manager: function(strTagsParam) {
		var arrTags = strTagsParam.split(this.strSpliter);
		var intTotalTags = arrTags.length;
		if ( intTotalTags > this.intTotalTagsMax ) {
			var strTagsInValue = “”;
			for ( var i = 0; i < this.intTotalTagsMax; i++ ) {
				strTagsInValue = strTagsInValue + arrTags[i] + this.strSpliter;
			}
			this.$(this.objFieldId).value = strTagsInValue.substring(0,(strTagsInValue.length - 1));
			if ( this.boolShowAlert ) {
				alert(this.strMessage);
			}
		}
	},
	$: function(strObjId) {
		return document.getElementById(strObjId);
	}
};

O script está auto-explicativo, bem como os itens a serem configurados. Se tiver alguma dúvida ou sugestão, comente.

Del.icio.us disponibiliza Widget - tagometer

December 20th, 2006. Published under rapidinhas, web 2.0. No Comments.

O Tagometer disponibilizado pelo Del.icio.us exibe as tags e a quantidade de vezes que seu blog/site ou uma determinada página foi salva pelos usuários desse bookmark social.

Ele foi lançado em duas versões, uma indicada para as “sidebars” e outra para as entradas do blog. Confira essa novidade no Tagometer Badge.

Mais informações sobre o assunto nos dois posts listados abaixo:

Você sabe a diferença entre site viral e o boca-a-boca?

December 15th, 2006. Published under opinião, web 2.0. No Comments.

Basicamente a diferença é a seguinte:

Site viral é quando seus amigos (ou os amigos dos usuários) se interagem junto ao site. Já o boca-a-boca é algo interessante e que as pessoas comentam uma com as outras, por exemplo: uma imagem, um vídeo, entre outros.

Saiba mais nos posts seguintes:

Firefox 2.0 e o atributo HTML Accesskey

December 5th, 2006. Published under firefox, html, web 2.0, web standards. 7 Comments.

Alguns sites que eu visito regularmente disponibiliza algumas “hotkeys” através do atributo HTML accesskey, mas, de uns dias pra cá eu notei que tal recurso não estava funcionando mais e ao observar o código fonte das páginas que oferecia tal recurso, o atributo continuava configurado da mesma forma.

Nota: Se você não não conhecia a serventia do atributo HTML accesskey: Leia.

Ao me deparar com um post no blog do Newshutch descobri o por que disso tudo. O Firefox mudou sua maneira de interpretar o accesskey.

Na versão 2.0 do Firefox, ele interpreta o atributo assim:

Alt + Shift + hotkey definida

Em versões anteriores sua interpretação era assim:

Alt + hotkey definida

E a configuração do atributo é feito assim:

... accesskey="z" ...

O porque da modificação foi para evitar conflitos entre as hotkeys do navegador e as definidas na página. Por exemplo, imagine que você tenha definido o seguinte: accesskey=”s” para acessar o campo de busca, mas Alt + S acessa o menu History (no Firefox 2.0 em inglês).

Agora venhamos, o atributo accesskey não é muito utilizado, acredito que agora menos ainda.

Outro detalhe importante que os desenvolvedores precisam saber que agora qualquer accesskey com números, tipo: accesskey=”3″ será ignorado.

Pesquisei em alguns artigos sobre o assunto, se lhe interessar:

Aplicativo web 2.0 para prevê assasinatos

December 5th, 2006. Published under mtzlib, opinião, web 2.0. 1 Comment.

Para início de conversa, eu preciso afirmar: não existe um aplicativo web 2.0 para prevê assassinatos (ou existe e eu o desconheço). Mas, acabei de ler uma matéria no IDG Now que me chamou a atenção.

Na referida notícia, há uma abordagem do fato da cidade de Filadélfia ter um auto índice de criminalidade e que devido a isso, ela (a cidade) estaria elaborando o desenvolvimento de um software para prevê assassinatos. Trabalhando em conjunto com o criminalista Richard Berk da Universidade da Pensilvânia.

O criminalista foi questionado quanto ao critério de avaliação dos possíveis assassinatos, e segundo ele seria “a exposição à violência na juventude”.

Então, para tal criminalista essa tarefa não será tão difícil daqui algum tempo, uma vez que várias pessoas se expõe cada vez mais em sites de relacionamentos. E nesses sites, elas falam (e muito) sobre si mesma, seus gostos, preferências e tendências.

Então, a solução seria desenvolver um algoritmo que analisasse o perfil do suspeito em vários sites de relacionamentos, cruzar com suas participações em comunidades, com os comentários dos amigos referente a sua pessoa e sua ficha na polícia.

Para finalizar, deixe o aplicativo rodando na plataforma que chamamos de web, utilize um framework para ser mais ágil, uma biblioteca de JavaScript, um design e um nome “cool” e claro não se esqueça do selo web 2.0.

Característica comum nos aplicativos web 2.0 me preocupa.

December 4th, 2006. Published under DOM, ajax, javascript, php, web 2.0, web standards. 2 Comments.

Tenho percebido uma característica comum nos aplicativos web 2.0 que me preocupa em muito, se trata da utilização do javascript obstrutivo. Sim, muitos sites a la web 2.0 utilizam o javascript dessa maneira, que pena.

O que me intrigou a observar essa questão, foi a agilidade em que os aplicativos são desenvolvidos, muitos deles não gastam mais de uma semana. E com isso, a acessibilidade em alguns aspectos é desconsiderada.

Ora, em meados a propagação cada dia mais e mais dos padrões da web, por que os desenvolvedores estão utilizando o javascript de forma obstrutiva? Seria a pressa em lançar seus serviços on-line? Seria uma desconsideração para com aqueles que navegam com o javascript desabilitado? Ou seria uma forma para posteriormente (e se acontecer) incrementar uma versão com o HTML puro?

Todos os dias eu penso em um forma de ser produtivo e ágil no desenvolvimento para web, trabalhando com Ajax, javascript não-obstrutivo, DOM e o PHP (linguagem dinâmica com o qual eu trabalho). No meu curso Web Sites com Ajax eu explico e exemplifico a metodologia que utilizo, mas confesso, estou ávido a procura de algo novo.

Qual a sua metodologia de desenvolvimento para se trabalhar com javascript não-obstrutivo?

[update]
Uma boa matéria do parceiro Metzen sobre javascript não-obstrutivo

[/update]