TidBits
Apr 2

Boas notícias aos programadores front-end

Programador de interface, programador front end, programador html, programador javascript e jQuery, etc etc… enfim… a profissão é tão nova que não existe um nome pra ela … mas se trata do cara que recebe o PSD e faz um site, através de (x)html, css, javascript, flash, xml e o que mais precisar.

Aos poucos, a profissão vem se tornando excencial (só aqui na AgênciaClick somos em uns 15 mais ou menos). E com a popularização dos padrões web, mundo a fora já é uma profissão reconhecida, em Londres, os “front end developers” ganham em média 4 mil libras mensais, e alguns profissionais mais “seniors” chegam a receber salários de 8 mil libras por mês.

Porém no Brasil, agora que o mercado está sub-dividindo os setores no desenvolvimento web, o que é bom pois cada um se especializa naquilo que gosta mais de fazer. Não dá pra ninguém ser senior em .Net e html / css ao mesmo tempo. E vejo que começam a surgir os primeiros passos pra essa nova ramificação, a prova disso é que foi lançado em Recife um curso de Pós Graduação para programadores de interface, o curso chamado de Front-End Engineering & Design – Desenvolvimento de Sistemas Avançados.

Veja a descrição da entidade sobre o que é um programador front end:

“O Front-End Engineer & Designer é um profissional altamente especializado com foco em interfaces de sistemas para internet, dispositivos móveis entre outros. No desenvolvimento das suas atividades o Front-end entende as necessidades de designers, programadores e usuários.”

O curso vai ser ministrado no Núcleo de Pós Graduação Marista, tem duração de 400 horas aulas e custa 7 mil reais ( um valor normal pra uma pós graduação ).

A segunda notícia é que a Deitel lançou um livro aparentemente interessante, Ajax, Rich Internet Applications e desenvolvimento Web para programadores , entre os temas discutidos estão os padrões XHTML, CSS e JavaScript; lições sobre o desenvolvimento avançado do lado do cliente.

Por último, e não menos interessante, a última notícia boa é que o Firefox 3 é o browser mais utilizado na Europa, ultrapassando o IE7 (que teve uma queda com o lançamento do IE8, o que também é uma boa notícia). Agradeço e torço muito pro Firefox ir crescendo cada vez mais. Afinal, o que seríamos de nós sem o nosso firebug, html validator, web developer toolbar, entre outras extensões?

[]s

bookmark bookmark bookmark bookmark bookmark bookmark bookmark

Postado por Danilo em Carreira, Tecnologia | 5 Respostas »
Mar 27

Coleção de métodos para o plugin validate do jQuery.

Na verdade não é bem uma coleção com dezenas de métodos, a intenção do post é simplesmente mostrar que é possível e fácil criar métodos para o plugin.

Para quem não sabe o que é o validate, recomendo saber do que se trata, você pode ganhar muito tempo no desenvolvimento utilizando o plugin, principalmente para desenvolver interface de back end, com diversas validações. Tem um post do Alexandre Magno antigo, porém muito bom, explicando o que é o plugin, o que faz, como utilizá-lo e um exemplo bem simples de um formulário validado pelo plugin.

Quando se faz o download do validate, ele vêm com uma coleção de médotos, mas alguns que nós precisamos, como verificação de data ( formato dd/mm/aaaa ) e verificação de cpf, não tem.

Alguns métodos que serão postados aqui não fui eu quem fez, queria dar os créditos a quem fez, porém não sei quem foi. Mas… vamos ao ponto, veja como é facil adicionar novos métodos.

Verificação de CPF

O código abaixo adiciona um Método que chamamos de “verificaCPF” :

jQuery.validator.addMethod("verificaCPF", function(value, element) {
	value = value.replace('.','');
	value = value.replace('.','');
	cpf = value.replace('-','');
	while(cpf.length < 11) cpf = "0"+ cpf;
	var expReg = /^0+$|^1+$|^2+$|^3+$|^4+$|^5+$|^6+$|^7+$|^8+$|^9+$/;
	var a = [];
	var b = new Number;
	var c = 11;
	for (i=0; i<11; i++){
		a[i] = cpf.charAt(i);
		if (i < 9) b += (a[i] * --c);
	}
	if ((x = b % 11) < 2) { a[9] = 0 } else { a[9] = 11-x }
	b = 0;
	c = 11;
	for (y=0; y<10; y++) b += (a[y] * c--);
	if ((x = b % 11) < 2) { a[10] = 0; } else { a[10] = 11-x; }
	if ((cpf.charAt(9) != a[9]) || (cpf.charAt(10) != a[10]) || cpf.match(expReg)) return false;
	return true;
}, "Informe um CPF válido."); // Mensagem padrão

E agora na hora de validar seu formulário, você já pode utilizar o método adicionado:

$("form#cadastro").validate({
	rules: {
		'CampoCPF': {
			required: true,
			verificaCPF: true
		}
	},
	messages: {
		CampoCPF: {
			required: "Digite seu cpf"
			verificaCPF: "CPF inválido"
		}
	},
});

Verificação de Data (formato dd/mm/aaaa)

Agora o método se chama dateBR e a mensagem padrão (caso não seja colocada outra na hora de usar o validate, será “Informe uma data válida”.

jQuery.validator.addMethod("dateBR", function(value, element) {
	 //contando chars
	if(value.length!=10) return false;
	// verificando data
	var data 		= value;
	var dia 		= data.substr(0,2);
	var barra1		= data.substr(2,1);
	var mes 		= data.substr(3,2);
	var barra2		= data.substr(5,1);
	var ano 		= data.substr(6,4);
	if(data.length!=10||barra1!="/"||barra2!="/"||isNaN(dia)||isNaN(mes)||isNaN(ano)||dia>31||mes>12)return false;
	if((mes==4||mes==6||mes==9||mes==11)&amp;&amp;dia==31)return false;
	if(mes==2 &amp;&amp; (dia>29||(dia==29&amp;&amp;ano%4!=0)))return false;
	if(ano < 1900)return false;
	return true;
}, "Informe uma data válida");  // Mensagem padrão

Verificação de Data e Hora (formato dd/mm/aaaa hh:mm) 

jQuery.validator.addMethod("dateTimeBR", function(value, element) {
	 //contando chars
	if(value.length!=16) return false;
	 // dividindo data e hora
	if(value.substr(10,1)!=' ') return false; // verificando se há espaço
	var arrOpcoes = value.split(' ');
	if(arrOpcoes.length!=2) return false; // verificando a divisão de data e hora
	// verificando data
	var data 		= arrOpcoes[0];
	var dia 		= data.substr(0,2);
	var barra1		= data.substr(2,1);
	var mes 		= data.substr(3,2);
	var barra2		= data.substr(5,1);
	var ano 		= data.substr(6,4);
	if(data.length!=10||barra1!="/"||barra2!="/"||isNaN(dia)||isNaN(mes)||isNaN(ano)||dia>31||mes>12)return false;
	if ((mes==4||mes==6||mes==9||mes==11)&amp;&amp;dia==31)return false;
	if (mes==2 &amp;&amp; (dia>29||(dia==29&amp;&amp;ano%4!=0)))return false;
	// verificando hora
	var horario 	= arrOpcoes[1];
	var	hora 		= horario.substr(0,2);
	var doispontos 	= horario.substr(2,1);
	var minuto 		= horario.substr(3,2);
	if(horario.length!=5||isNaN(hora)||isNaN(minuto)||hora>23||minuto>59||doispontos!=":")return false;
	return true;
}, "Informe uma data e uma hora válida");

Se alguém tiver (ou fizer) o método de CNPJ (ou algum outro legal que não tem aqui) me manda por e-mail ou posta aqui nos comentários.

[]s

bookmark bookmark bookmark bookmark bookmark bookmark bookmark

Postado por Danilo em Javascript | 17 Respostas »
Mar 23

Truncar texto em javascript – Abreviar sem cortar palavras

Ví um post do Igor Escobar mostrando uma função de truncar palavras em php. Aí eu lembrei que um dia precisei fazer isso em javascript e resolvi postar tal função.

A função tem dois parâmetros, o texto e o limite de caracteres, e retorna sempre o texto com “…” no final. Veja a função:

function truncar(texto,limite){
	if(texto.length>limite){
		limite--;
		last = texto.substr(limite-1,1);
		while(last!=' ' && limite > 0){
			limite--;
			last = texto.substr(limite-1,1);
		}
		last = texto.substr(limite-2,1);
		if(last == ',' || last == ';'  || last == ':'){
			 texto = texto.substr(0,limite-2) + '...';
		} else if(last == '.' || last == '?' || last == '!'){
			 texto = texto.substr(0,limite-1);
		} else {
			 texto = texto.substr(0,limite-1) + '...';
		}
	}
	return texto;
}

Agora vamos fazer uns testes:

var mensagem = "O técnico do Corinthians até elogiou a atuação de Rodrigo Martins Cintra.";

alert(truncar(mensagem,70));
/* Retorno = O técnico do Corinthians até elogiou a atuação de Rodrigo Martins... */

alert(truncar(mensagem,60));
/* Retorno = O técnico do Corinthians até elogiou a atuação de Rodrigo... */

alert(truncar(mensagem,50));
/* Retorno = O técnico do Corinthians até elogiou a atuação... */

alert(truncar(mensagem,40));
/* Retorno = O técnico do Corinthians até elogiou a... */

alert(truncar(mensagem,30));
/* Retorno = O técnico do Corinthians até... */

alert(truncar(mensagem,20));
/* Retorno = O técnico do... */

alert(truncar(mensagem,80));
/* Retorno = O técnico do Corinthians até elogiou a atuação de Rodrigo Martins Cintra. */

bookmark bookmark bookmark bookmark bookmark bookmark bookmark

Postado por Danilo em Javascript | 5 Respostas »
Mar 13

11º Encontro Locaweb de Profissionais da Internet

A empresa de hospedagem Locaweb, anualmente organiza um evento com pra reunir os profissionais da internet e falar sobre as novas tendências do mercado.

11º encontro locaweb de profissionais de internet

Nesse ano, o evento ocorrerá em 6 cidades :

14.Abril.2009 – Belo Horizonte – MG
06.Maio.2009 – Salvador – BA
14.Maio.2009 – Curitiba – PR
21.Maio.2009 – Porto Alegre – RS
09.Junho.2009 – Rio de Janeiro – RJ
17.Junho.2009 – São Paulo – SP

A programação conta com :

Tendências de Mercado
Gilberto Mautner, Presidente da Locaweb

Agilidade e qualidade de projetos
Fabio Akita, Evangelista em Rails no Brasil

O Google além das buscas
Executivos do Google

A internet além da web
Executivos da Microsoft

O novo marketing para a sociedade digital
Marcelo Tripoli

Estratégias em sites de busca: SEO & SEM
Martha Gabriel

A inscrição custa 50 reais e pode ser revertido em produtos da locaweb, o que é bem legal pra quem já é cliente.

Eu devo ir no evento de são Paulo.

Notas:

A Locaweb vai fazer um barcamp de Ruby On Rails vem investindo e incentivando no uso da linguagem / plataforma.

Reecentemente anunciou que todos os seus planos de hospedagem agora tem espaço e transferência ilimitados.

[]s

bookmark bookmark bookmark bookmark bookmark bookmark bookmark

Postado por Danilo em Eventos | 3 Respostas »
Mar 9

Incompatibilidades entre versões do jQuery 1.2.6 e 1.3.2

O site / blog Learning jQuery publicou um post “faça um upgrade dos seus scripts para jQuery 1.3 em 3 passos”, achei interessante, vou traduzir parte do post aqui.

Os seletores [@attribute]

A principal diferença, o que mais está dando problema de incompatibilidade nessa troca de versão é a sintaxe do selector [@attribute] que desde a versão 1.1.4 (agosto de 2007) entrou em desuso, mas até a 1.2.6 ele ainda funcionava, dessa vez tiraram fora mesmo, mas muitos sites e muito plugins ainda utilizavam os seletores assim. veja mais tidbits E pra alterar, corrigir o problema, é bem simples, basta remover o @

Exemplo:

jQuery anterior a 1.1.4

$('a[@rel="excluir"]
$('input[@name^="telefone"]

Versão atual do jQuery

$('a[rel="excluir"]
$('input[name^="telefone"]

:visible em visibility e display

Nessa nova versão :visible trabalha de acordo com a propriedade display do css e não mais com visibility

Exemplo 1:

Considere a div abaixo:

<div id="exemplo" style="display:none">
 Tidbits
</div>

Na Versão 1.2.6 obtemos true com .is(‘:visible’) pois ele considerava somento a propriedade visitibility do css, já na versão 1.3.2. obtemos false

Versão 1.2.6
$(‘#exemplo’).is(‘:visible’) = true

Versão 1.3.2
$(‘#exemplo’).is(‘:visible’) = false

Exemplo 2:

Considere a div abaixo:

<div id="exemplo2" style="visibility:hidden">
 Tidbits
</div>

Na Versão 1.2.6 obtemos false com .is(‘:visible’) pois ele considerava somento a propriedade visitibility do css, já na versão 1.3.2. obtemos true

Versão 1.2.6
$(‘#exemplo’).is(‘:visible’) = false

Versão 1.3.2
$(‘#exemplo’).is(‘:visible’) = true

A terceira mudança é na hora de escrever um seletor customizado, agora não é necessário retornar uma string, como era feito até então.

Quem quiser ler a matéria original, veja no Learning jQuery .

[]s

bookmark bookmark bookmark bookmark bookmark bookmark bookmark

Postado por Danilo em Javascript | 3 Respostas »
Mar 4

Market Share Fevereiro de 2009 РFirefox 3 supera participa̤̣o de mercado do IE6

A Net Aplications disponibiliza mensalmente relatórios com estatísticas (ou curiosidades) para todos nós, desenvolvedores ou até mesmo clientes.

Os relatórios são muitos, sempre em participação, sendo assim. Qual a participação de cada navegador, de cada sistema operacional, cada buscador, resoluções de tela, etc.

Nesse mês o grande destaque foi que o Firefox 3 superou, em participação de mercado o IE6.

Confira os gráficos referente a fevereiro de 2009:

Navegadores

market share fevereiro 2009 - navegadores

De janeiro pra cá, pouco mudou, mas o que mudou foi o mesmo de sempre, IE cai, Firefox e Safari sobe, e o chrome prova que foi um boom mesmo e cai novamente.

Compare com janeiro de 2009.

Navegadores por versão

Market Share Fevereiro de 2009 - Navegadores por versão

De janeiro pra cá, o IE7 se manteve estável, mas a grande mudança foi a superação do Firefox 3 em relação ao IE6, uma ótima notícia para nós, desenvolvedores.

Compare com janeiro de 2009.

Sistemas Operacionais

Market Share Fevereiro de 2009 - Sistemas Operacionais

De janeiro pra cá, contrariando os últimos meses de época de fim de ano e natal, em fevereiro a participação de mercado do windows sobe enquanto Mac cai.

Compare com janeiro de 2009.

Buscadores

Market Share Fevereiro de 2009 - Buscadores

De janeiro pra cá, nenhuma mudança grande, Google subiu um pouco assim como MSN e o Live Search.

Compare com janeiro de 2009.

Resoluções de Tela

Market Share Fevereiro de 2009 - Resoluções de tela

De janeiro pra cá, as resoluções que mais cresceram foram as do monitores wide: 1680×1050 e 1440×900.

Compare com janeiro de 2009.

Todos os dados são referentes ao último mês (Fevereiro de 2009). Veja os Market Shares antigo para comparar as diferenças com o último mês.

bookmark bookmark bookmark bookmark bookmark bookmark bookmark

Postado por Danilo em Market Share, Navegadores, Pesquisas, Tendências | 3 Respostas »