O que é DHTML?

Postado por: Pedro Rogério em
  • 13 mai
  • 4
DHTML

A maioria dos desenvolvedores web, na verdade, não sabem, ou têm apenas uma vaga idéia do que significa o termo, portanto, vou tentar explicar da forma mais simples possível o que é DHTML. Quando a versão 4 dos browsers Netscape e Internet Explorer foi lançada ocorreu uma pequena revolução na Internet. Enquanto o suporte a CSS nesses browsers era precário estava nascendo uma nova união de tecnologias que iria revolucionar a forma de desenvolver páginas web. Foi então que no final dos anos 90 e início do ano 2000 nascia o DHTML (Dynamic HTML).

DHTML é a união das tecnologias HTML, Javascript e CSS aliado ao Document Object Model (DOM), para permitir que uma página Web seja modificada dinamicamente na própria máquina cliente, sem necessidade de novos acessos ao servidor web. Quando você efetua mudanças de estilo em elementos HTML e a mudança é registrada imediatamente sem o recarregamento da página, você está vendo um exemplo de DHTML. Você também pode fazer o usuário integarir com a página escondendo e mostrando elementos, mover elementos na página, mudar cores.

Continuar lendo »

Contar e limitar caracteres em textarea

Postado por: Pedro Rogério em
  • 3 abr
  • 17

jQuery Limit plugin é muito útil se você precisa cortar e limitar caracteres de textareas ou campos input. A utilização é muito simples, basta ficar atento a seguinte estrutura html:

Ainda restam <span id="left"></span> caracteres a serem digitados.
<textarea>Lorem ipsum dolor sit amet,</textarea>

Depois basta definir no JavaScript o número máximo de caracteres e qual elemento irá mostrar a contagem de caracteres, no exemplo foi um span com o id “left”:

$('textarea').limit('140','#left');

Se você não deseja mostrar ao usuário o número de caracteres restantes, basta deixar o código dessa forma:

$('textarea').limit('140');

Vejam o exemplo.

Os benefícios de utilizar JavaScript não Obstrutivo

Postado por: Pedro Rogério em
  • 31 mar
  • 8

Se você utiliza JavaScript não obstrutivo em seus projetos você está proporcionando uma maior acessibilidade a seus projetos, ou seja, se os scripts fores desabilitados eles não irão interferir no funcionamento da página.

Utilizar JavaScript não obstrutivo proporciona uma maior interoperabilidade, acessibilidade, facilidade de manutenção e ganho de tempo no desenvolvimento de seus códigos.

Unobtrusify.com

Foi pensando nisso que Phil Hawksworth desenvolveu uma página muito simples para mostrar que ao utilizar técnicas de Progressive enhancement você está garantindo assim total acesso a qualquer dispositivo.

Abaixo vocês podem ver um exemplo de como o site funciona corretamente em qualquer dispositivo. Essa é uma screenshot que tirei no Openwave Simulator:

Openwave Simulator

IE6 Double Margin / Duplicate Characters bug fix usando jQuery

Postado por: Pedro Rogério em
  • 8 jan
  • 14

Meus amigos desenvolvedores com certeza conhecem a fundo os mais famosos bugs do IE6, o da margem dupla e o bug da repetição de caracteres, se você não conhecia esses bugs, aconselho a dar uma lida nesses posts. Mas como conhecimento nunca é demais, acabei encontrando hoje uma simples solução para resolver esses bugs no IE6 utilizando jQuery:

$('*').each(function() {
  if ($(this).css('float') !== 'none') {
    $(this).css('display', 'inline');
  }
});

O resultado desse código é que ele irá procurar todos os elementos na página e aqueles que tenham float diferente de none será adicionado a propriedade css display:inline previnindo seu trabalho para que não ocorra esses bugs.

Via: Snipplr

jQuery Delay Plugin

Postado por: Pedro Rogério em
  • 1 dez
  • 8

jQuery Delay Plugin é um plugin desenvolvido para jQuery criado para que possamos definir um tempo de espera antes da execução de uma função específica:

$(document).ready(function(){

	// Ao clicar no link é disparada a funcao
	$("a").click(function(){

		// Delay de 1 segundo...
		$(this).delay(1000,function(){

			// É mostrada a div com o efeito slideToggle
			$("div").slideToggle('slow');

			// Agora temos um Delay de 3 segundos
			$(this).delay(3000,function(){

				// Mudamos a cor de fundo da Div para azul
				$("div").css("backgroundColor","blue");

			});

		});

	});
});

Vocês podem ver o plugin em ação nesse link.

Páginas:«123»