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

Algum tempo atrás, estava conversando com o Bird (Colaborador do Mozilla Brasil e do Fórum do Mozilla Brasil no Guia do Hardware), sobre o fato de “tunar” o Firefox ou não, e então resolvi escrever algumas palavras sobre, se vale a pena ou não “tunar” o Firefox.

Para quem não sabe o que é “Tuning” (ou Modding, tendo em vista o foco a informática), basta acessar o link abaixo.
- Tuning(ou Modding)

Então, vamos ou ponto.

Essa história de Modding no Firefox, já é um pouco antiga, tendo em vista que, há opção de acessar as configurações mais “obscuras” do browser através do about:config.

E como, através disso, é possível alterar várias opções, como por exemplo, número de requisições do browser para o servidor, cache do browser, etc, muitas pessoas acabaram verificando que, há como deixar o Firefox mais rápido, mas algumas não perceberam o outro lado da moeda.

Se você quiser dar uma olhada nessas alterações, sinta-se a vontade para acessar o link abaixo, e fazer as alterações, MAS, eu recomendaria que você continua-se lendo esse post até o fim, e decidi-se por si só, se vale a pena ou não dar um “Modding” no seu Firefox.

Link para o artigo sobre “Tuning(ou Modding)” no Firefox:
http://forums.mozillazine.org/viewtopic.php?t=53650

Bem, se você continuou lendo, é por que quer saber se deve mesmo “Tunar” o Firefox ou não.

Pois bem, como o Asa Dotzler(que é uma autoridade sobre produtos da Mozilla) disse em um post em um fórum:

“Sim, existem possibilidades de fazer o Firefox viajar mais rápido …”

E como ele mesmo diz também:

“A desvantagem e razão pela qual não esteja habilitada essas opções de “Tuning” na configuração padrão do Firefox, é que dessa maneira pode ocorrer de em alguns casos, não funcionar corretamente, pois alguns sites não suportam os tipos de opções que você esta solicitando a ele.”

Ou seja, se você fizer essas alterações no Firefox e depois o browser começar a ficar estranho, não culpe o browser, pois ele só esta fazendo o que você pediu. Mas o culpado nessa história(se é que pode ser chamado assim) é o site que você esta acessando(que pode não suportar tantas conexões simultâneas), sua conexão de internet(que pode não ser rápida o suficiente), entre outros fatores.

Por tanto, pense bem antes de dar um “Modding” no Firefox, pois isso pode se tornar um tormento para você.

Para quem quiser ler mais sobre o “Modding” no Firefox, acesse os links abaixo:
http://www.guiadohardware.net/comunidade/aumentar-desmpenho/199938/#post1523728
http://www.guiadohardware.net/comunidade/dicas-firefox/186310/
http://japs.etc.br/2007/02/dicas-para-turbinar-seu-firefox/

Abraços e “Modding com parcimônia”

Technorati Tags: firefox, tuning, modding, about:config, mozilla

Sabe quando você esta quebrando a cabeça para resolver um problema, seja ele no trabalho ou em casa, e derrepente, a solução para o seu problema aparece para te deixar extremamente satisfeito.

Pois bem, essa será uma seção onde eu mostrarei alguns problemas que acabo enfrentando no dia a dia, seja por desconhecimento, ou por mera desatenção mesmo.

Neste primeiro post, eu vou falar sobre um problema que tive relacionado a tag DIV, e  uma imagem em uma DIV, e como uma propriedade de CSS salvou um layout tableless no qual eu estava trabalhando.

Problema:

No layout da página, haviam alguns divs que seriam utilizados para mostrar noticias com imagens e conteúdo escrito também, mas o conteúdo e as imagens dentro dele seriam dinâmicos, por tanto, o tamanho poderia variar, e pra piorar, algumas vezes o conteúdo escrito seria menor do que a imagem, e por conseguência, a imagem acabava saindo dos limites do DIV.

Solução:

Procurando em alguns fóruns, acabei achando a solução pro meu problema no fórum do iMasters.
A propriedade table do elemento display foi quem salvou o dia. Ela fez com que o elemento, no meu caso o DIV, se comportasse como uma tabela, e por conseguência a imagem, mesmo sendo maior que o DIV, ficaria toda dentro do elemento, e assim não estourando mais.

Para quem quiser ler alguma coisa sobre o elemento display e as suas propriedades, basta acessar os links abaixo:

The ‘display’ property: http://www.w3.org/TR/2003/WD-CSS21-20030915/visuren.html#display-prop
CSS display Property: http://www.w3schools.com/css/pr_class_display.asp

Obs.: O IE não possue a propriedade table no display, mas há uma propriedade que faz a mesma coisa, que é a “inline-block”. Por tanto, se você quiser manter o site funcionando pelo menos no Firefox e no IE, você devera fazer um hack no seu CSS.

Se você esta lendo este post e testou essa propriedade em outros browsers, por favor comente aqui :).