Clauber Stipkovic Halic - CSH

Conversando sobre Boas Práticas(na área de programação) com um amigo essa semana, achei interessante falar um pouco sobre isso aqui no blog.

Primeiro, o significado de boas práticas vem do inglês “best practices”, que denomina os melhores métodos para se realizar uma tarefa, ou seja, o meio que tem mais chance de levar até o resultado esperado sem muitos problemas.

Muitas profissões tem criado as suas “Boas práticas” relacionadas a área, para otimizar processos ou encaminhar melhor os novos profissionais que estão chegando.

Na área de computação não é muito diferente. Temos várias “boas práticas”, para a grande maioria das tarefas de informática que ajudam e muito no dia-a-dia.

O Desenvolvimento Web também tem as suas “boas práticas”, que ajudam na hora de desenvolver um site, e é sobre algumas delas que eu vou falar.

Doctype - DTD(Document Type Definition)

Essa boa pratica é o começo de tudo, ou seja, é a primeira coisa que o user agent do seu browser procura para saber qual é o tipo de Linguagem de marcação(que por muitos é conhecido também como HTML :-)) que ele terá que interpretar(parsing) no momento em que a página for solicitada.

Quando ele é informado na página, o browser saberá qual tipo de marcação deverá interpretar, e assim a página será carregada muito mais facilmente.

Para saber mais sobre Doctype, visite os links abaixo:

• Revolução Etc - Artigo sobre Doctypes
• Tableless - Doctypes e Browsers Modes

Quirks Mode e Strict Mode

Dentro do doctype, nós temos como informar para os Browsers dois tipos de renderização de CSS. O modo “antigo”( ou Quirks Mode ) e o modo “estrito” ( ou Strict Mode ).

O Quirks mode, é considerado o modo “antigo”, pois é a implementação que na época dos Browser Internet Explorer 4/5 e Netscape 4 (onde ambos não faziam parte da W3C, e assim, não seguiam os padrões, apesar de na época, o Internet Explorer interpretar muito melhor o CSS do que o Nestcape) permitia que os browsers passassem a interpretar os padrões(Strict Mode), que estavam começando a ganhar espaço, ou o modo “antigo”(dai o Quirks mode).

Para saber mais sobre Quirks Modes, visite os links abaixo:

• Revolução ETC - O que é Quirks Mode?
• Quirks Mode - Quirks Mode and Strict Mode(inglês)

Por tanto, verifique sempre, qual será o destino final do seu site, ou da sua aplicação web, para saber qual modo utilizar. Mas nunca se esqueça de utilizar os Doctypes e os Modos de renderização certos para a sua aplicação.

Mais alguns site para uma boa leitura:

• 24 ways - Transitional vs. Strict Markup(inglês)
• Mozilla Developer Center - Mozilla’s DOCTYPE sniffing(inglês)

Technorati Tags: dtd, doctype, best practices, boas práticas, quirks mode, strict mode, user agent, parsing, development, desenvolvimento

Depois de ler alguns artigos sobre Wireframe, e ver que realmente isso é importante no processo de criação de sites. Resolvi criar um post sobre isso.

Hoje é muito comum ver sites sendo desenvolvidos sem nenhum planejamento, pois ele precisa ser desenvolvido rapidamente e precisa estar no ar logo(entre outras coisas que os gerentes e clientes falam).

Muitas vezes, isso causa vários retrabalhos de código, seja em client-side(CSS, HTML, Javascript …) ou server-side(PHP, ASP.NET, JSP …), pois não ouve um planejamento de como fazer, ou do que o site realmente deveria ter.

Se pensarmos em um site como um projeto de automóvel, por exemplo, vamos ver que não adianta saber que o todo carro possue motor, rodas, freios, etc. Precisamos saber qual será o tamanho do carro, a disposição do motor, como será a disposição do painel(onde estão o radio, porta luvas, etc).

É nesse ponto que entra os desenhos do projeto para o automóvel. Nada sei da cabeça do projetista e vai direto para a linha de montagem.

Antes mesmo do carro conceito(como é chamado o protótipo), é feito um estudo para verificar a usabilidade dos controles do carro, como será o espaço interno, se a aerodinâmica ir prejudicar a estabilidade, entre outros fatores, que podem influenciar no sucesso ou no fracasso do produto.

A criação de um site, também segue(ou pelo menos deveria seguir) esse conceito, mas infelizmente, muitas empresas ainda não gastam um tempo do projeto para essa tarefa, e muitas vezes, pagam por não ter planejado e projetado uma interface(ou até mesmo os controles do site) mais intuitivos e dinâmica.

Para diminuir esse impacto de projeto, e até mesmo, de tempo e dinheiro gasto no desenvolvimento, o Wireframe é um excelente passo.

Basicamente, o Wireframe consiste em um “esboço” de como será o layout do site, dizendo onde os elementos serão posicionados , e descrevendo quais elementos serão utilizados(isso dependendo é claro, qual o nivel de detalhamento que o seu Wireframe terá), de acordo com o que, muito provavelmente, será o layout final.

Há também a possibilidade de uma pratica e rápida mudança antes do layout definitivo, evitando que muitos imprevistos aconteçam no decorrer do desenvolvimento, e ajudando ainda na analise de usabilidade de interface do site.

Alguns links interessantes sobre Wireframe estão listados abaixo:
http://usabilidoido.com.br/quanto_mais_simples_o_wireframe_melhor.html
http://webinsider.uol.com.br/index.php/2003/12/09/wireframe-documento-cada-vez-mais-importante/

Você deve esta se perguntando agora se há alguma ferramenta para “desenhar” os Wireframes?!?!

Bem, eu procurei várias ferramentas para isso, mas a que mais me agradou, e que mais me deu produtividade, foi o Inkscape.

Além de ser open source e multi-plataforma(Windows, Linux e MacOS), o inkscape tem uma interface muito fácil de usar.

Mas você pode testar outras ferramentas como o GIMP, PhotoShop, Flash(sim, já vi pessoas usando o Flash para desenhar wireframes), ou alguma ferramenta que você tenha mais habilidade para desenhar.

Grande abraço, e comentem
Technorati Tags: wireframe, usabilidade, acessibilidade, web, desenvolvimento, firefox, open souce, inkscape