rdbandeira.com » dicas e truques

7 dicas para se desenvolver um website atraente

rdbandeira — Mon, 27 Jul 2009 18:00:25 +0000

Existem algumas pequenas coisas que são tão importantes no desenvolvimento de um website além de usabilidade, pois a internet é uma espaço de interação e não uma rua de mão única. Você deseja proporcionar uma experiência ao seu usuário, ajudá-lo a tomar decisões simples, ser agradável aos olhos e não apenas excessivo e chamativo. Além disso, o seu visitantes dirá muito sobre a sua empresa apenas a partir do modo como ela olha, carrega e funciona, antes que eles sequer leia uma única palavra. A importância da criação de um atraente e amigável site simplesmente não pode ser exagerada nem deixada de lado.

Por razões que são quase demasiadamente numerosas para listar – marketing, vendas, psicologia, confiança, percepção profissional, etc – a forma como o seu site é vista pelos seus usuários deve estar primeiramente, todo em sua cabeça. Os seguintes 7 lembretes importantes irão lhe ajudar a ir na direção certa, mas você é o único que conhece seus clientes (ou deveria) para os melhores pontos de personalização.

1 – Foco do usuário

É importante nunca perder o foco. Você precisa pensar como o seu usuário. Seus clientes precisam sempre encontrar o que eles procuram, seja para pagar uma conta, encontrar um telefone ou o endereço da sua empresa com extrema facilidade. Faça sempre que possível que a vida de seu usuário seja facilitada. Quanto mais complicado e demorado for para encontrar a informação desejada, mais eles abandonarão seu website, e consequentemente não voltarão.

2 – Compreensão do usuário

Entenda a realidade de seu website. Ele é comercial? Então faça com que ele seja visto desta forma. Não há a necessidade de confundir a cabeça de seu usuário/cliente. Ajude-o a encontrar de forma fácil e rápida o que ele deseja. Uma boa idéia é disponibilizar ferramentas como sitemaps ou sistemas de busca.

3 – Velocidade de carregamento

Sim, seu site precisa carregar rápido, então velocidade é importante. Pra isso, basta reduzir o tamanho/qualidade das imagens, não exagerar no tamanho do flash, scripts, etc. Analise cuidadosamente as funcionalidades para que cada uma delas tenha seu valor.

4 – Layouts simples, às vezes, são a melhor opção

O Flash é uma ferramenta poderosíssima, quanto a isso não há discussão, principalmente quando é para demonstrar algo que é difícil colocar em palavras. Mas ele tem um problema tão forte quanto o seu poder, o peso de suas animações! As vezes suas animações se tornam tão pesadas que as pessoas perdem até a paciencia para carregá-las, mesmo sabendo que será repleto de efeitos, movimentos e etc.
Além disso, ele acaba sendo uma grande distração, o que pode tirar (e vai!) o foco do usuário. Dependendo da sua aplicação, a utilização de animações deste nível não são indicadas.

5 – Necessidade do usuário

Defina antes de desenvolver o layout todo o tipo de pessoa que você espera que visitará seu website e considere tudo o que eles desejam e procuram. Depois desta análise, tende desenvolver um layout que abranja o maior número de usuários (definidos no início do projeto) possíveis a encontrar os itens mais importantes em seu website.

6 – Compatibilidade entre navegadores

Que o site deve funcionar em todos os navegadores, isso já não é mais nenhuma novidade. Porém muitos se esquecem de testar as aplicações javscript. Algumas, infelizmente, não funcionam corretamente em todos os navegadores, então nunca se esqueça de testá-las exaustivamente.

7 – Sem surpresas

Use o óbvio, comum e padrão em elementos padrões de um website. Navegação não é algo que necessite ser muito criativo, pois ele precisa ser imediatamente compreendido e utilizável. Constância no mundo ‘www’ é, atualmente, uma coisa boa. Ela facilida a vida das pessoas pois ao acessar, o usuário se sente num “território familiar”.

Portanto, mais do que cair em profunda concepção metafórica ou querer mostrar todos os truqes possíveis, você deve concentrar-se em tornar o seu site uma solução para os seus clientes. Tornar a vida deles mais simples e fácil.

Adaptação do artigo: How to create an attractive user friendly

8 dicas de usabilidade para seus layouts

rdbandeira — Sun, 26 Jul 2009 17:18:10 +0000

Usabilidade é um termo usado para definir a facilidade com que as pessoas podem empregar uma ferramenta ou objeto a fim de realizar uma tarefa específica e importante. A usabilidade pode também se referir aos métodos de mensuração da usabilidade e ao estudo dos princípios por trás da eficiência percebida de um objeto. (ver definição completa em: pt.wikipedia.org/wiki/Usabilidade)

O seu website deve possuir um layout simples, de fácil interpretação e acesso à informação. O visitante, quando entra em alguma página, scaneia o site rapidamente a procura da informação que ele deseja (ver artigo sobre CopyWriting), se em pouco tempo ele não encontra, ele irá embora e talvez nunca mais volte. Muitas vezes utilizamos sistemas de busca em nossos sites para que o visitante não fique procurando o que deseja. Caso ele não encontre pelo sistema de busca, ele já entende que aquela página não possui o que ele está procurando. Ele irá sair e provavelmente não voltará novamente. Mas caso encontre, ele permanecerá (pelo menos por alguns instantes a mais) em seu site e é nessa hora que começa a guerra visitante x usabilidade.
Se o seu site tem uma boa interface, uma boa navegação, um conteúdo claro e simples, existe uma chance de você conquistar esse visitante, mesmo que o assunto não seja aquele que estava sendo procurando inicialmente (isso acontece comigo com certa frequencia, por sinal). Interfaces complexas, com títulos de difícil interpretação e assimilação confundem o usuário, fazendo com que ele desista de procurar o que deseja ou que não se interesse pelo assunto e vá procurar outro site que seja mais simples de se encontrar o que ele procura.

Por aí ja deve ter dado pra sentir o drama, né? Usabilidade é um conhecimento que todo designer deve ter. Layouts aplicados com essa preocupação são melhores, mais fáceis, mais rentáveis e muitas vezes (mtas mesmo – mas isso é questão de estilo e pauta pra outro post ) mais bonitos.
Eu fiz uma lista com algumas dicas de como melhorar a usabilidade de seu site ou de seus layouts, veja:

1. Copywriting

Sempre faça uma boa descrição do que se trata o site para que o visitante, na hora que entrar, já saiba o tipo de conteúdo que será encontrado ali para que ele não perca tempo tentando descobrir. Mas lembre-se, Copywriting é uma parte muito importante quando o assunto é usabilidade, por dois motivos: 1) facilidade de encontrar o item desejado; 2) prender o visitante; Um bom copywriting realmente prende o visitante, mesmo que o assunto não seja o procurando inicialmente. Para entender melhor como o copywriting funciona, leia um artigo (traduzido por mim) sobre o tema neste link.

2. Facilidade de navegação

Certifique-se de que seu site possui uma fácil navegação (peça pra algum amigo – de preferencia que não entenda do assunto – que navegue em seu site) e verifique se haverá dificuldade de interpretação dos links, de navegação e etc. Nestes testes, sempre acabamos mudando alguma coisa.

3. Páginas leves

Se o seu visitante tem uma conexao dial-up, por exemplo, ele demorará muito para carregar uma página que possui muitas imagens, animaçõe e etc. Então, otimize o máximo que puder o tamanho de suas páginas. Sites que demoram para serem carregados, mesmo quando se tem uma conexao banda larga, irritam seus visitantes e eles, com certeza, irão embora sem nem ver a sua “obra”. Otimização SEMPRE (que possível, claro)!

4. Evite músicas, vídeos e animaçoes na página inicial

Estes recursos são ótimos e muito úteis, mas quando usados da meneira correta. Imagina o seu usuário ter que carregar uma animação 3D sempre que tiver que carregar seu site? Já imaginou o dilema? E musica? Já pensou que ele pode estar acessando a sua página às 3h da manha de uma quarta-feira e o som não está baixo? Posso listar uma infinidade de problemas que estes recursos ~~(chatos)~~ podem causar a seus usuários e fazer com que eles não voltem, ou pelo menos demorem bastante. Mas se mesmo assim vc não vê outra alternativa e tem que colocar algum destes recursos em seu site, NUNCA se esqueça que: se houver música, o botao OFF deve estar visível a 10mil anos luz de distância; Se houver vídeos, o botão de STOP deve estar visível ou pelo menos seja simpático e não inicie o video automaticamente; Se houver animações, a opção “pular introdução” é uma ótima saída.
Você não vai querer que seus visitantes tenham aversão ao seu site, né? Então atende para esta dica.

5. Usar os standards de design a que os usuários estão habituados

Todas as páginas de Internet têm um conjunto de regras que convém obedecer, como por exemplo: sublinhar links, permitir sempre o retorno à página principal ou ter menus de navegação e muitas outras “regras”. Quando isso não acontece os visitantes ficam confusos, mas claro que isso é muito relativo. Ele pode variar conforme a usabilidade do seu site mas é uma preocupação que deve estar sempre presente durante a criação e desenvolvimento. Nunca se esqueça disso!

6. Escrever o conteudo do site sem erros ortográficos

Um erro ortográfico pode indiciar que não houve muito cuidado na preparação do site. Se tiver muitos erros ortográficos e frases mal redigidas, parecerá que o site é pouco profissional e terá pouca credibilidade. E não é isso que queremos, né? Então tenha sempre um português, no mínimo, bom. Pegue corretores ortográficos (tipo, word) ou um amigo para corrigir seus textos. É uma boa saída para que fugiram das aulas de português.

7. Escrever o texto de forma legivel e com uma dimensão adequada

Para garantir uma boa usabilidade, o texto deve ser escrito com letras ~~não mto~~ grandes e legiveis. Deve também usar cores que permitam uma leitura correta do texto (um bom contraste ajuda muito – mas cuidado com os daltônicos!). E não se esqueça das pessoas com problemas de visão , preocupe-se em construir seu site onde seja possível se alterar o tamanho da fonte pelo browser sem que haja quebras no layout.

8. Restringir acesso à informação

Evite restringir o acesso ao conteúdo com senhas. A maioria deles não fara um cadastro em seu site só para continuar lendo um artigo. Caso isso seja necessário, mostre ao seu usuário que ele terá outros benefícios. E ainda sim, apenas as pessoas realmente interessadas sobre o tema do seu site farão o cadastro.

As dicas encontradas aqui não são apenas para se ter um bom layout mas também para se ter uma boa navegação. Elas são importantes e devem estar presentes desde a criação do layout até o desenvolvimento. Nunca se esqueça que seu site não foi feito apenas para você e sim para os seus visitante. Se preocupar com eles é uma das tarefas de um bom designer.

12 dicas e truques para o Firefox 3!

rdbandeira — Wed, 08 Jul 2009 20:03:50 +0000

O Firefox 3 foi lançado, a fase do deslumbramento pelas novidades já passou a algum tempo mas, entre os entusiastas e fanáticos pelo brownser, o desejo de procurar pelas funções escondidas ou não exploradas no software não acaba nunca! E são esses mesmo que trazem essas dicas (úteis? pra alguns!) pra tornar a navegação mais completa.
Conheça agora algumas funções escondidas e não exploradas (pra alguns isso já nem é mais novidade, mas tenho certeza que pra muitos será!). Entre as dicas compiladas abaixo, é possível fazer com que o navegador abra seu Gmail ao encontrar um link mailto ou encontrar uma brincadeira escondida sobre robôs, entre outros truques.

About:config

Antes de começar, um conselho: uma das maneiras mais fáceis de hackear o Firefox 3 é pelo “about:config”, que permite que o usuário altere muitas configurações e preferências do browser. Para usar o “about:config”, você precisará repetir alguns passos básicos:

Na barra de endereços, digite about:config e aperte Enter;
Uma mensagem que diz “Isto pode anular sua garantia!” aparecerá. Ignore o alerta sem muito sentido (não estamos lidando com um software aberto, afinal?) e clique em Serei cuidadoso, eu prometo!;

Na caixa de filtro, digite o nome da propriedade que quer ajustar. Você verá a função aparecer no grande campo central abaixo. (Caso o nome da mudança seja muito longo, a digitação da sua primeira parte gerará uma lista)
Faça as mudanças como instruído.

Klaatu barada nikto!

Você pode não saber, mas o Firefox tem um mascote – um robô que você encontra como “easter egg” (nome para brincadeiras escondidas) no Firefox 3. Na barra de endereços, digite about:robots e você verá o avatar do robô com sua pele prateada e suas antenas vermelhas.

As frases listadas na brincadeira vêm de livros e filmes da cultura pop que tratam de robôs, como “Blade Runner”, “Eu, robô” e “O guia do mochileiro das galáxias”.
Caso preste atenção ao título da página, verá que se trata de uma frase sem muito sentido em português ou inglês, certo? Mais ou menos. A frase foi usada por Helen Benson no clássico de ficção científica “O dia em que a terra parou”, em ordem para que o robô Gort não destrua a Terra.

Firefox 3 integrado ao Yahoo Mail

Sabe quando você clica em um endereço de e-mail na web e imediatamente seu Outlook abre uma tela criando uma nova mensagem para aquele endereço? Com o Firefox você pode fazer o mesmo com o seu webmail.
O navegador já traz integração nativa ao Yahoo Mail – se você souber procurar. Também funciona com o Gmail, extra-oficialmente. Siga os passos:

Selecionar Ferramentas, depois Opções e clicar no ícone Programas
Clicar em “mailto” e selecionar Usar o Yahoo! Mail
Clicar em OK

Firefox 3 integrado ao Gmail na versão 3.5 já possui como opção

O Gmail não aparece na lista do “mailto”, mas você pode usar um truque para configurá-lo. Siga os passos:

Na barra de endereço, digite about:config e aperte Enter e ignore o alerta de garantia;
Na caixa de filtro, digite gecko.handlerservice
Entre as opções da lista, selecione: gecko.handlerServiceAllowRegisterFromDifferentHost (isso mudará o valor de falso para verdadeiro)
Volte à barra de endereços, copie e cole o código abaixo e aperte Enter: javascript:window.navigator.registerProtocolHandler(“mailto”, “https://mail.google.com/mail/?extsrc=mailto&url=%s”,”GMail”)
Abaixo da barra de endereço aparecerá uma mensagem perguntando se você quer adicionar o Gmail como aplicação para o “mailto”. Clique em Adicionar Programa
Repita o procedimento do item anterior, selecionando Usar Gmail.

Usar o botão de identificação de sites para baixar gráficos e mídia

Uma das funções mais legais do Firefox 3 é o botão de identificação do site, à esquerda do link na página da barra de endereços. Além das informações sobre o site, este botão traz alguns outros truques interessantes:

Clique nele e em seguida opte por Mais Informações (nesta tela você verá uma série de botões na parte superior)
Clique no botão de Mídia da Página de Informações.

Ao fazer isso, será exibida uma lista com todos os gráficos da página. É possível ver uma prévia de cada uma delas e salvá-las individualmente (com o botão Salvar Como) ou em grupo, usando a tecla Ctrl e selecionando Salvar Como. Para baixar todos, aperte Ctrl+A e selecione Salvar Como.
Uma das extensões populares da versão anterior do Firefox era o DownloadThemAll, que permitia baixar todos os gráficos da página. Com o Firefox 3, isso pode ser feito sem add-on.

Acessar detalhes de uma página

Se você está no ramo da criação de sites, há muitas informações úteis que você pode saber sobre uma página – a do seu concorrente, por exemplo – e o Firefox 3 dá acesso a elas. Informações como as metatags usadas, quando a página foi alterada ou o tamanho da página (em kilobytes) são dados úteis que podem ser encontrados na aba de informações na aba Geral.

Diminua o botão Voltar

O botão de Voltar do Firefox 3 parece uma flecha “bombada”. Se isso te incomoda, você pode reduzi-la ao tamanho normal. Veja como:

Clique em um espaço em branco com o botão direito, selecione Personalizar
Clique na caixinha Ícones pequenos

O botão Voltar ficará menor, mas todos os demais também.

Encontre todas as suas senhas

Se você é como a maior parte das pessoas, você tem diversas senhas associadas a sites diferentes. O Firefox lembra suas senhas, portanto você será autenticado automaticamente nos sites. Mas e se você precisar se logar em outro PC? Com o Firefox 3 você pode recuperar suas senhas e usuários.

Selecione Ferramentas e clique em Opções;
Depois clique no ícone de Segurança;
Na seção de Senha, clique em Senhas Memorizadas. Aparecerá uma lista com sites e nomes de usuário lembrados pelo navegador;
Clique em Exibir senhas (uma tela de alerta questionará se você quer mesmo exibi-las);
Clique em Sim e você verá a lista de URLs com nomes de usuário e senhas ao lado.

Mude o número máximo de resultados da Barra de Sensacional

A nova barra de endereços do Firefox – que de tão inovadora ganhou da própria Mozilla o modesto apelido de Barra Sensacional – também pode ser personalizada. Antes, algumas informações sobre ela: nas outras versões do Firefox, conforme você digitava um texto, uma lista de URLs começadas da mesma forma aparecia à medida que a digitação progredia. Por exemplo, se você digitasse um “c”, todos os sites começados em “c” eram listados e daí em diante.
Mas em vez de exigir que o usuário lembre a URL da página que visitou, a Barra Sensacional vasculha o endereço, o título, as tags e o conteúdo das páginas atrás de palavras-chave digitadas pelo usuário. No modo padrão, a barra traz até 12 resultados possíveis, mas você pode alterar isso.

Digite about:config na barra de endereço e clique em Serei cuidadoso, eu prometo!;
Copie e cole o texto a seguir no campo de filtro: browser.urlbar.maxRichResults;
Dê um clique duplo no resultado e digite o número de resultados que você deseja visualizar.

Retirar os favoritos da Barra Sensacional

Se por alguma razão você não quer que os seus favoritos apareçam na Barra Sensacional, há uma forma simples de bani-los. Baixe e instale o add-on Hide Unvisited 3 e somente páginas visitadas recentemente aparecerão.
Lembre-se que se você visitou favoritos recentemente, eles entrarão na lista. Se você preferir fazer o procedimento sem a ajuda de add-ons, siga as instruções:

Digite about:config na barra de endereços;
Copie e cole o texto a seguir: browser.urlbar.matchOnlyTyped;
Clique duas vezes no resultado para mudar o valor de falso para verdadeiro
Limpe seu histórico.

A partir de então, só os sites vistos recentemente aparecerão, os favoritos não.

Matando (mais ou menos) a “barra sensacional”

Se você é o tipo de pessoa retrô, é fácil matar a “barra sensacional”, nova barra de endereços do Firefox, o que fará com que ela pareça e tenha as mesmas funções do antigo Firefox. O add-on oldbar fará com que a nova ferramenta pareça com a do Firefox 2.
A mudança, ale avisar, é apenas estética, já que, nos bastidores, o Firefox 3 continuará aplicando um algoritmo para determinar quais endereços serão reproduzidos, apenas tirando os detalhes.

Force antigas extensões a trabalhar com o Firefox 3

Ao ser instalado, o Firefox 3 checa se antigas extensões foram atualizadas para a nova versão do navegador. Se elas ainda não forem compatíveis, são desabilitadas. Se você gosta de viver perigosamente, pode mudar uma série de configurações para forçar o Firefox a usar as antigas extensões.
AVISO: Estas alterações podem causar problemas de compatibilidade e outras questões! Cuidado!

Vá ao about:config e mude ambos os parâmetros para falso clicando duas vezes sobre eles: extensions.checkCompatibility e extensions.checkUpdateSecurity

Se você não quer mexer no “about:config mas ainda assim que forçar antigas extensões a funcionar no Firefox 3, instale a extensão Nightly Tester Tools.

Altere e nova função Zoom do Firefox 3

O Firefox 3 conta com algumas novas funções de zoom muito interessantes, que ampliam tanto imagens como textos. Mas se isto não é tudo que você quer fazer, ou você não gosta e de alguma função, elas podem ser hackeadas.
Você pode aproximar ou afastar de páginas no Firefox usando os comandos Crtl+ ou Ctrl-, ou selecionando o menu Zoom em View. Quando você dá um zoom em uma página específica, a próximo vez que você voltar ao domínio, o Firefox 3 se lembrará da
sua configuração.
Você pode preferir, no entanto, que o navegador sempre reproduza uma página com zoom normal, independente de como ela foi reproduzida na última vez. Para tanto, mude a função browser.zoom.siteSpecific clicando duas vezes sobre ela dentro do about:config.

DICAS

O Firefox 3 traz novos recursos interessantes na Biblioteca de Favoritos, no uso de tags e nas pastas na lista de favoritos. Confira com acessar:

Biblioteca de favoritos: pode ser acessada via menu Favoritos, clicando em Organize seus Favoritos ou pressionando Ctrl-Shift-B.
Uso de Tags (marcadores): eles facilitam a organização dos favoritos por categorias. Elas podem ser acrescentadas com um
clique duplo na estrela que aparece ao lado do endereço do site, na barra de endereços. Uma vez marcado como uma tag, o site pode ser facilmente localizado pela “barra sensacional” digitando o nome da tag na barra de endereços, todos os sits relacionados serão mostrados
Pastas inteligentes: elas agregam novos sites relacionados ao termo que define a pasta automaticamente. Por exemplo, se você criar uma nova pasta inteligente relacionada ao termo “café”, na próxima vez que você visitar um site que tenha a palavra, o link será automaticamente salvo na pasta Café. Para criar, siga os passos a seguir:
1. Na Biblioteca de Favoritos, faça uma busca por um termo ou por uma combinação de termos;
2. Aperte o botão Salvar e dê um nome à sua pasta inteligente
3. A nova pasta aparecerá no menu Favoritos

Bom galerinha, é isso. Muitas dicas e truques interessantes nessa lista e agradeço ao pessoal dedicado a fazer estar descobertas. Gostaria de poder citar o autor desta lista mas infelizmente não sei pois era uma listagem antiga que estava nos meus arquivos do gdocs. Quem souber quem foram os criadores desta lista, por favor, entre em contato comigo para que eu possa estar dando os devidos créditos e claro, se souber de mais dicas legais para incrementar este post, por favor, envie um comentário ou um email!

10 razões para aprender e usar os Web Standards

rdbandeira — Tue, 07 Jul 2009 20:03:17 +0000

Este artigo foi criado pelo sueco Roger Johansson do 456bereastreet e traduzido pelo Leandro Vieira para o português com prévia autorização e consentimento do autor. E hoje, posto este artigo publicado por ele (Leandro Vieira) com a devida autorização.

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
Tradução (pt-br): Leandro Vieira (artigo publicado)

10 Extensões importantes para designers e desenvolvedores!

rdbandeira — Mon, 29 Jun 2009 18:13:15 +0000

Fiz uma listinha de alguns addons para firefox que todo designer/developer deve ter instalado em seu browser. Todas testadas e altamente aprovadas. São ferramentas que não consigo mais viver sem… heheheh
Segue a listinha, separada por área:

Para designers:

Firebug

Firebug disponibiliza ferramentas de desenvolvimento ao seu alcance enquanto você navega. Você pode editar, depurar e monitora o CSS, HTML, JavaScript em qualquer website.
https://addons.mozilla.org/en-US/firefox/addons/versions/1843

Pixel Perfect

Pixel Perfect é integrado ao Firebug (uma outra extensão inegrada ao Firefox) que permite ao webdeveloper e designers a sobrepor, com facilidade, uma imagem do website (layout) sobre a versão HTML para que seja feita uma comparação minuciosa sobre os detalhes e diferenças entre a versão web e a versão original (imagem).
https://addons.mozilla.org/en-US/firefox/addon/7943

Font Find

Basta destacar um único elemento (por exemplo, um parágrafo ou uma palavra), clicar com o botão direito e selecione “Font Finder”, e será informado qual o CSS Styling utilizada do elemento.
https://addons.mozilla.org/en-US/firefox/addon/4415

MeasureIt

Desenhe a uma régua para obter a largura e a altura, em pixels, de quaisquer elementos em uma página web.
https://addons.mozilla.org/en-US/firefox/addon/539

FireShot

FireShot é uma extensão do Firefox que cria screenshots de páginas web (integralmente ou apenas parte visível). Ao contrário das outras extensões, este plugin fornece um conjunto de ferramentas de edição e anotação, o que permite aos usuários capturar página, modificar e inserir textos, gráficos e anotações.
A captura pode ser:

Salvos em disco (nos formatos PNG, GIF, JPEG ou BMP);
Impressa;
Copiado para a área de transferência;
Enviado por e-mail.

https://addons.mozilla.org/pt-BR/firefox/addon/5648

Para Developers

IETab

Incorpora o Internet Explorer nas abas do Mozilla / Firefox.
https://addons.mozilla.org/en-US/firefox/addons/versions/1419

Web Developer

Adiciona um menu e uma barra de ferramentas com várias ferramentas importantes e úteis para desenvolvedores web.
https://addons.mozilla.org/en-US/firefox/addon/60

Firebug

Firebug disponibiliza ferramentas de desenvolvimento ao seu alcance enquanto você navega. Você pode editar, depurar e monitorar o CSS, HTML, JavaScript em qualquer website.
https://addons.mozilla.org/en-US/firefox/addons/versions/1843

Pixel Perfect

HTML Validator 0.8.5.2

Valida codigos HTML dentro do Firefox. O número de erros em suas páginas HTML é vista na forma de um ícone na barra de status enquanto navega.
https://addons.mozilla.org/en-US/firefox/addon/249

Validaty

Proporciona um botão para validas páginas usando validator.w3.org
https://addons.mozilla.org/en-US/firefox/addon/2609

FireFTP

É de graça, segura plataforma FTP para seu Firefox que proporciona fácil e intuitivo acesso à Servidores FTP.
https://addons.mozilla.org/en-US/firefox/addons/versions/684

Adobe Magazine

rdbandeira — Thu, 24 Apr 2008 18:49:00 +0000

É isso mesmo! Tenho certeza que muitos nunca tinham ouvido falar sobre uma revista online da adobe, certo? Eu mesma fiquei surpresa. Descobri a pouquíssimo tempo e não pude deixar de postar aqui.
A revista está disponível em cinco (5) idiomas: inglês, alemão, italiano, francês e espanhol mas mesmo assim vale a pena estar dando uma ‘folheada’. Lá você encontrará muita coisa interessante como novas tendências (mundo), downloads exclusivos e até mesmo tutoriais sobre os mais váriados programas da Adobe. Na última edição, fev/2008 você encontrará 10 truques para o photoshop.
Para os interessados em fazer o download, acesse: www.adobemagazine.com. Para receber o link para o download da revista em seu email, basta fazer o cadastro no site.
Eu já fiz o meu, e você? Está esperando o que?