Monthly Archives: November 2006

Rec6 está atento a blogosfera brasileira

Posted on by

O Rec6 está ligado na blogosfera brasileira e não é por menos, acredito que 100% dos usuários dele são blogueiros, então, faz um grande sentido observar as opiniões desses caras que utilizam o serviço no dia-a-dia.

Dentre as diversas sugestões e críticas construtivas que foram feitas a equipe acatou os comentários e estão a todo vapor para aplicá-los no serviço.

Dentre os novos recursos, cito o o widget que exibe os votos do seu artigo diretamente no seu blog. Com esse recurso será possível incentivar os leitores a votarem nos artigos, e ao mesmo apresentar o Rec6 à aqueles que ainda não o conhecem.

Se você utiliza o WordPress assim como eu poderá utilizar o seguinte código para exibir o widget em seu blog:

Para quem utiliza o Blogger deverá utilizá-lo assim:

Posted in Uncategorized | Tagged

10 razões para aprender e usar os web standards

Posted on by

Este artigo foi criado pelo sueco Roger Johansson do 456bereastreet e traduzido por mim para o português com prévia autorização e consentimento do autor.

Se você é um web developer ou designer e novato nos conceitos dos web standards e está indeciso de onde gastar o seu tempo para aprender tudo a respeito, aqui estão algumas das mais importantes razões para que isso seja feito.

Para os profissionais web que já trabalham com os web standards, esta lista será conveniente quando você precisar de bons argumentos sobre o assunto. Sinta-se a vontade para adicionar qualquer benefício que você pensa a respeito.

1 – Apresente-se com um aspecto profissional

Outros web developers e empregadores estarão atentos ao seu trabalho e saberão que você é um profissional que gosta de estar atento às mudanças tecnológicas e mantém seu conhecimento e habilidades sempre atualizadas. Isto lhe dará o aspecto de um verdadeiro profissional web.

2 – Apresente bem os seus clientes

Utilize os web standards em conjunto com as melhoras práticas de acessibilidade e dê aos seus clientes a chance de falar a respeito sobre o quanto eles se preocupam com todas as pessoas. E como eles acham importante que todo mundo possa utilizar os seus serviços e encontrar informações a respeito de seus produtos. Assim, evitaremos passar má impressões causadas pela desconsideração dos visitantes portadores de necessidades especiais, usuários de MAC e de dispositivos móveis.

3 – Maximize o número de clientes potenciais

Você não saberá qual dispositivo seus visitantes usarão para acessar o seu site. Você pode
pensar que sabe. Mas a não ser que você esteja desenvolvendo uma Intranet para uma companhia que tenha uma política sobre qual navegador deverá ser utilizado.

A única coisa que você razoavelmente terá certeza é que os clientes estarão utilizando alguma coisa que compreende HTML. Utilizando os web standards corretamente você terá certeza que você fez sua parte em desenvolver o seu site compatível com o maior número possível de dispositivos.

4 – Carregamento rápido e redução do consumo de banda

Uma marcação bem estruturada que separa a estrutura e o conteúdo da apresentação é geralmente muito mais compacto que um site com tabelas, spacer.gif e “tag soup”. Os documentos serão menores e mais rápido para baixar. Goste disto ou não, há várias pessoas ainda que utilizam conexão discada para acessar a internet.

Se o seu site tem um plano de hospedagem com tráfego de banda limitado, documentos menores reduzirão custos – mesmo que o tráfego aumente.

5 – Atenda os requisitos de acessibilidade

Utilizar os web standards não garante que todos os aspectos do seu site será acessível para as pessoas portadoras de necessidades especiais, mas isto é um bom começo. Tenha certeza que seus documentos estão validados, bem estruturados, semânticos e você estará no caminho certo para ter um site acessível.

6 – Melhore sua posição nos sites de busca

Conteúdo bem escrito, compreensível, bem estruturado e com uma marcação semântica é uma comida saborosa para os robots de sites de busca e você aumentará sua posição nos mesmos. Isso, com certeza, conduzirá para um acréscimo no tráfego, o que é o desejado por todo dono de site.

7 – Mantenha sua marcação fácil de manter

Ao atualizar o seu site, você prefere trabalhar arduamente sobre muitos kilobytes de intermináveis tabelas aninhadas e spacers.gif ou navegar sobre uma marcação simples, clara e bem estrutura?

Removendo, inserindo ou editando conteúdo sem apresentação é muito mais fácil e eficiente do que ter a certeza que toda a apresentação contida no documento estará correta. Utilizando as CSS para controlar o layout torna esse processo mais fácil para fazer alterações de layouts.

8 – Conteúdo resistente ao futuro

Não há ninguém que possa garantir com 100% de certeza que os documento criados e guardados digitalmente hoje serão legíveis daqui a cem anos. Ou quinze anos. Mas se você separar o conteúdo da apresentação e usar os web standards corretamente, você terá feito o melhor que pode para assegurar que seu conteúdo será legível mesmo ainda quando você se for.

9 – Boa razão para os negócios

Por que um dono de site diria não para mais visitantes? Para um site mais rápido? Otimizado para motores de busca? Com bom potencial publicitário? Isso não faz sentido.

10 – Isto é o jeito certo de fazer as coisas

O caminho dos web standards é a forma que deveríamos ter seguido quando começamos a desenvolver para a web. E agora que podemos, por que não fazer as coisas corretamente e ter uma excelente razão para sentimos bem com conosco mesmo?

Artigo original: Ten reasons to learn and use web standards

Camada de comportamento – visão geral

Posted on by

A camada de comportamento é utilizada para acessar/modificar/criar/excluir os elementos de uma página web. Isto significa que a camada de comportamento tem em “mãos” todas as tags, atributos e conteúdos de uma página e com isso ela poderá manipulá-los como você desejar.

Como expliquei em um artigo anterior a camada de conteúdo é que a responsável em anexar a ela a camada de comportamento. Uma vez que a camada de conteúdo trabalha sem a camada de comportamento e não vice e versa.

Para você comprovar que o JavaScript pode acessar todo o conteúdo de uma página web, faça o seguinte:

Na barra de endereço (Address Bar) do seu navagador (browser) digite o seguinte:

javascript:alert(document.body.innerHTML);

Será exibido um Alert Box com todo o conteúdo da página, isto é, se dentro da tag body tiver algum conteúdo, é claro.

Isto é muito útil quando inserimos novos elementos em uma página ou quando o removemos ou o alteramos. Uma vez que a exibição do código fonte de uma página mostra-nos apenas o conteúdo que foi carregado quando acessamos a página e não o conteúdo modificado como ele está em seu estágio atual.

Então, exibir o código fonte – neste caso da tag body, apenas – da forma como apresentei acima é a solução. Mas, você concordará comigo no seguinte ponto: ver o conteúdo de uma página dentro de um Alert Box é totalmente desagradável e limitado.

Então, a melhor solução – que conheço até o momento – é a utilização da extensão Web Developer – somente para o Firefox – uma vez que com ela nós temos o seguinte recurso: View Generated Source localizado dentra da opção View Source.

Essa opção, View Generated Source, mostra o código fonte de uma página em seu estado atual, ou seja, se alguns dos elementos da página foi modificado/excluído pelo JavaScript você verá tal modificação. Algo que não acontece quando utilizamos a simples opção: View Source ou Exibir código fonte.

Até o próximo post sobre camadas de desenvolvimento web.

Entrevista com a maior referência sobre as CSS no Brasil

Posted on by

Se você não sabe quem é a maior referência sobre as CSS no Brasil, conheça-a.

Acabei de ler uma entrevista do iEvolution Fóruns com Maujor – referência sobre as CSS no Brasil. Nessa entrevista, Maujor fala sobre os padrões da web, a nova “guerra entre os browsers” – Firefox e Internet Explorer – qual o melhor caminho para iniciar nesse mundo dos padrões e muito mais. Recomendo a leitura.

Interessante também foi saber a origem de seu pseudônimo: Maujor. Algo que sempre tive a curiosidade.

Leia entrevista com Mauricio Maujor

w3FormValidation 2.0 está disponível

Posted on by

O w3FormValidation 2.0 está a sua disposição. Acrescentei novos recursos a este sistema de validação e dedicarei este post para falar sobre eles. Vamos lá.

[UPDATE]o w3FormValidation trabalha com a Mtzlib 0.2.6 ou superior.[/UPDATE]

Primeiramente. Se você não sabe do que se trata o w3FormValidation vou lhe dizer: é uma forma simples, rápida, simples e não-obstrutiva para validação de formulários web.

Esta segunda versão mantém o mesmo engine de validação da primeira, o que significa dizer que a forma para informar as regras de validação dos campos é a mesma. Vide exemplo:

var camposVal = [];
camposVal.push('tipo-de-validação,id-do-campo,mensagem');
...

Agora você poderá customizar o título do box da mensagem, informando o texto desejado através de um parâmetro ao chamar o w3FormValidation. Observe:

var valida = new w3FormValidation(camposVal,'Texto que será utilizado no título');

Se o título não for informado, será utilizado o título padrão: Observações!

Outra customização é a possibilidade de dizer ao w3FormValidation qual será a distância entre o box da mensagem e o topo do viewport do browser. Por padrão a distância é zero, e você pode informar essa distância da seguinte maneira:

var valida = new w3FormValidation(camposVal,'Texto que será utilizado no título',100);

Ou seja, o box da mensagem terá 100px de distância entre o topo do viewport.

O w3FormValidation 2.0 utiliza um overlay sobre o body, deixando os demais elementos na página de forma translúcida e um foco exclusivo e total ao box da mensagem. Mas se você não quiser utilizar este recurso, você poderá desativá-lo assim:

var valida = new w3FormValidation(camposVal,'Texto que será utilizado no título',100,false);

Ou seja, informando false como valor para o quarto parâmetro.

Na versão 1.0 do w3FormValidation o box da mensagem sempre era exibido no topo do página, o que tornava a exibição chata e desconfortável caso o formulário estivesse no rodapé da página, por exemplo. Nesta segunda versão, é verificado a localização do usuário na página no momento em que ele envia o formulário, dessa forma é possível exibir o formulário exatamente no local em que o usuário e o formulário se encontram na página.

Outro recurso adicionado foi a possibilidade do box da mensagem acompanhar a rolagem da página feita pelo usuário. Mas se você não quiser utilizar este recurso, você também pode desativá-lo, da seguinte forma:

var valida = new w3FormValidation(camposVal,'Texto que será utilizado no título',100,false,false);

Como você percebeu, é só informar no quinto parâmetro o valor false que tal recurso não será utilizado.

Outro detalhe é importante, é que esta versão retira do campo a classe w3FieldError caso ele tenha passado no validação desejada. Nesta versão também foi incluído o w3FadingOpacity.

Os tipos de validação reconhecidos e suportados pelo w3FormValidation ainda são os mesmos. Novos tipos estão anotados e já estou planejamento o desenvolvimento, mas julguei estas modificações mais emergenciais e necessárias para este add-on.

Conto com seu comentário, sugestão e crítica para melhorar cada vez mais este sistema de validação.

Overlay para o body com JavaScript com a Mtzlib

Posted on by

Expliquei no post anterior – Overlay para o body com JavaScript – como criar um overlay para o body com JavaScript. Neste post, falarei sobre o mesmo assunto, ou melhor, explicarei a mesma coisa.

Mas agora, iremos reproduzir o mesmo efeito, mas utilizando a Mtzlib. Assim, você poderá comparar a função bodyOverlay que criamos anteriormente com esta agora. Observe:

function bodyOverlay() {
	var sizesPage = getPageSize();
	$append($new("div","id=bodyOverlay",''));
	$('bodyOverlay').style.height = arrayPageSize[1] + 'px';
}

Veja como a Mtzlib facilitou nossa vida e tornou todo o processo mais fácil.

Veremos agora, como adicionar o add-on w3FadingOpacity. Observe mais uma vez:

function bodyOverlay() {
	var sizesPage = getPageSize();
	$append($new("div","id=bodyOverlay",''));
	$('bodyOverlay').style.height = arrayPageSize[1] + 'px';
	var fadeOverlay = new w3FadingOpacity('bodyOverlay',0,80,0);
	fadeOverlay.start();
}

Para remover o overlay criado, você pode utilizar a seguinte função:

function removerOverlay() {
if ( $('bodyOverlay') ) {
$remove($('bodyOverlay'));
}
}

Um detalhe. Já que está utilizando o w3FadingOpacity você deverá fazer uma simples alteração nas CSS, observe:

opacity: 0;
filter:alpha(opacity=0);

Se você não leu o post anterior: Overlay para o body com JavaScript leia-o para você compreender este melhor. Uma vez que este tem a simples intenção de demonstrar como é mais simples trabalhar com JavaScript e DOM utilizando a Mtzlib.

[UPDATE] Veja um exemplo deste efeito [/UPDATE]

Overlay para o body com JavaScript

Posted on by

Veremos como é simples criar um overlay para o body com JavaScript, se você não sabe do que se trata, posso lhe explicar. Sabe aquele feito utilizado pelo Lightbox JS em que o body é revestido por completo, deixando-o translúcido? Então, veremos como produzir este efeito.

Bom, inicialmente, precisaremos da seguinte função:

function getPageSize(){
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) {	// all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}

Para quem não a conheça, vou explicá-la. Esta função criada pelo Peter-Paul Koch retorna um array com quatro significantes informações na seguinte ordem: largura da página, altura da página, largura do viewport e altura do viewport.

Bom, com essas informações conseguiremos perfeitamente nosso objetivo - overlay para o body - e iremos fazê-lo com esta simples função:

function bodyOverlay() {
	var objBody = document.getElementsByTagName('body').item(0);
	var sizesPage = getPageSize();
	var bodyOverlay = document.createElement("div");
	bodyOverlay.setAttribute('id','bodyOverlay');
	bodyOverlay.style.height = arrayPageSize[1] + 'px'; // fundo com o tamanho total da página.
	if (!document.getElementById('bodyOverlay')) {
		objBody.insertBefore(bodyOverlay, objBody.firstChild);
	}
}

Ou seja, "pegamos" a tag body, criamos uma tag div definindo dois atributos para ela - id="bodyOverlay" e style="height:tamanho-total-da-pagina" - e finalmente inserimos a tag div no body. Resultando no seguinte código:

<div style="height: 1179px;" id="w3BodyEncobridor"></div>

Para remover o overlay criado, você pode utilizar a seguinte função:

function removerOverlay() {
	var bodyOverlay = document.getElementById('bodyOverlay');
	if (bodyOverlay) {
		bodyOverlay.parentNode.removeChild(bodyOverlay);
	}
}

E para finalizar utilizamos estas declarações CSS:

#bodyOverlay {
	background-color: #000;
	opacity: 0.8;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	filter:alpha(opacity=80); /* colando em um arquivo separado para o IE. */
}

Façam os testes, e retorne com um feedback. Se tiver alguma dúvida não hesite em perguntar.

[UPDATE] Veja um exemplo deste efeito [/UPDATE]