Blog Contagia Internet - Desenvolvimento de web sites e sistemas de gestão web

Novo blog para artigos técnicos

admin — Thu, 23 Apr 2009 12:49:47 +0000

Agora os artigos técnicos sobre desenvolvimento web estarão em meu blog pessoal. www.juliobitencourt.com

O blog da Contagia tratará de assuntos mais gerais do mercado de web, tendências e divulgação de projetos.

Espero os desenvolvedores e entusiastas de tecnologia lá no novo blog!

Flash no iPhone?

admin — Mon, 02 Feb 2009 12:20:54 +0000

Salve! Salve! Galera.

Nos últimos meses, mais especificamente Dez/08 e Jan/09 estou pesquisando muito sobre as opções de smartphones disponíveis no Brasil. Já estava quase optando pelo iPhone mas esta notícia que acabo de ver no plantão info me fará adiar minha decisão.

A Adobe e a Apple se unirão para inserir suporte ao flash no iPhone. Ao menos foi isso que Shantanu Narayern, CEO da Adobe disse em entrevista ao canal de TV Bloomberg.

Um dos problemas alegados pela Apple para a inclusão do flash no iPhone seria a perca do controle sobre os aplicativos que são executados no aparelho.

Resta saber se o flash virá como atualização de firmware ou como aplicativo pago na App Store, ou se esta declaração do CEO da Adobe não passa de um balão de ensaio!

Eliminação do IE6- do mercado‏

admin — Wed, 07 Jan 2009 14:30:30 +0000

Salve galera! O iMasters iniciou uma campanha de conscietização para que usuários com navegadores antigos atualizem para versões mais novas, seguras, rápidas e com maior suporte aos padrões web.

Será que vale a pena aderir? O código que o iMasters disponibiliza cria uma barra sutil no topo da página com informações aos usuários.

Confiram:

http://imasters.uol.com.br/crossbrowser/

Tab automático com jQuery

admin — Sat, 22 Nov 2008 20:23:46 +0000

Salve! Salve! pessoal. Mais um post com uma dica bacana de jQuery!

Esta técnica é útil para acelerar o processo de digitação de campos com valor fixo em formulários. Telefone por exemplo.

Neste mini tutorial eu mostro como os seletores jQuery são poderosos e práticos.

O XHTML

Pra começar o XHTML da página do formulário. É um código bem simples. Mas quem não estiver familiarizado com XHTML é só deixar comentado que respondo!

Basicamente este código monta uma página com 3 campos de texto para o DDD, o prefixo e o número do telefone.

 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-BR">
 
	<head>
 
		<title>Tab automático com jQuery</title>
 
		<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
		<script type="text/javascript">
                  [...código javascript comentado abaixo...]
		</script>
 
	</head>
	<body>
		<form method="post" action="autotab.htm">
			<fieldset>
				<label for="ddd">DDD</label>
				<input type="text" class="autotab" name="ddd" id="ddd" maxlength="2" size="2" tabindex="1" />
				<label for="prefixo">Prefixo</label>
				<input type="text" class="autotab" name="prefixo" id="prefixo" maxlength="4" size="4" tabindex="2" />
				<label for="numero">Número</label>
				<input type="text" class="autotab" name="numero" id="numero" maxlength="4" size="4" tabindex="3" />
			</fieldset>
		</form>
	</body>
 
</html>

Agora o código javascript

$(document).ready(function() {
	$(".autotab").keyup( function (event) {
		if ((event.which >= 48 && event.which <= 57) || (event.which >= 96 && event.which <= 105)) {
			if ($(this).val().length == $(this).attr('maxlength')) {
				var tabindex = $(this).attr('tabindex');
				tabindex++;
				$('input[tabindex=' + tabindex + ']').focus();
			}
		}
	});
});

Na linha 1 do javascript, criamos a função que executa o script apenas após o carregamento completo do DOM.

Na linha 2 criamos uma função que será executada no eventro keyup, ou seja, sempre que se pressionar (e soltar) uma tecla. Aí está um dos “pulos do gato” da jQuery, os seletores!
Usando $(’.autotab’) selecionamos todos elementos que tiverem a classe autotab atribuída. Esta classe foi atribuída aos elementos input type=”text”

Na linha 3 verificamos se foi pressionada uma tecla numérica 0 a 9.

Na linha 4 verificamos se a quantidade de caracteres digitados - $(this).val().length - no campo é igual ao atributo maxlength - $(this).attr(’maxlength’) - do elemento.

Nas linhas de 5 a 7, caso satisfaça a condição, muda o foco para o próximo elemento na sequencia de tabindex usando o seletor [attribute=value] - $(’input[tabindex=' + tabindex + ']‘).focus();

Este post não foi muito didático, mas o lema da jQuery é esse mesmo, Write Less, Do More, ou, Escreva menos e faça mais :), portanto, quaisquer dúvidas responderei (ou tentarei responder) através dos comentários.

Clique aqui para ver o exemplo em funcionamento!

É isso aí pessoal! Exemplo simples mas que pode ser muito útil em nossos projetos!

Ao som de O Rappa - Monstro invisível, Forte Abraço! Até o próximo post!

Introdução ao jQuery

admin — Fri, 21 Nov 2008 20:06:20 +0000

Bom pessoal. Esse é meu primeiro post aqui no blog da Contagia. Aliás já vou começar com um problema.

Apesar de trabalhar com Internet já a bastente tempo, nunca bloguei! Não conheço nada de WP Mas prometo que irei me esforçar para deixar este espaço melhorzinho.

Pra começar então, vou falar de jQuery. O super-ultra-mega-master-plus framework javascript que tem feito o maior sucesso entre desenvolvedores client-side. E de tanto sucesso que faz acho que você já deveria saber o que é!

Baboseiras a parte, como o “Dinossauro das CSS” Maurício Samy explica muito bem neste artigo, a jQuery é uma biblioteca que simplifica (e muito) a vida de programadores Javascript.

Tudo muito legal, tudo muito bonito. Mas o que essa jQuery faz?

A jQuery simplifica a sintaxe Javascript e aumenta muito sua produtividade, transformando por exemplo:

document.getElementsByTagName(”p”)

$(’p')

ou ainda,

document.getElementById(’id_do_elemento’)

$(’#id_do_elemento’)

Não compre agora!!! A jQuery também percorre e manipula o DOM e CSS, trabalha com Eventos, cria efeitos de animação e tem um incrível suporte a Ajax.

Eu falei em comprar? nada disso! A jQuery é grátis, basta fazer o download e começar a se divertir trabalhar.

Num vou esticar muito o papo. Aqui neste blog irei sempre postar algumas dicas e situações do cotidiano.

Seguem links úteis:

Documentação oficial
Comunidade jQuery Brasil

Ao som de Live - Operation Spirit, Forte Abraço, até o próximo post!