Logotipo desenvolvimento para web

HTML Playground: aprenda HTML, XHTML e CSS com exemplos reais

Para quem dá os primeiros passos no desenvolvimento para web, estudar, somente na teoria, HTML, XHTML e CSS é bem monótono e cansativo. Com HTML Playground, estudar HTML fica bem mais divertido e emocionando com exemplos feitos pelo próprio estudante.

Quem está começando no desenvolvimento para web precisa estudar bastante! Entretanto, os estudos iniciais de (X)HTML e CSS, se não feitos com vontade e bem conduzidos, principalmente quando somente teóricos, podem desestimular o aprendiz. O site HTML Playground tem a proposta de tornar estes estudos mais agradáveis!

Através de uma interface interativa simples e fácil de mexer, é possível mostrar todos os atributos das linguagens HTML, XHTML e CSS. Uma descrição da tag escolhida aparece e os valores dos atributos, quando presentes, podem ser alterados na hora. Tudo isso em um ambiente AJAX que mostra o resultado das modificações em tempo real. Clique na imagem para ver a explicação.

HTML Playground: explicação de interface.

Através do menu principal também é possível procurar uma tag, em especial, pelo nome; afinal, são dezenas de nomes diferentes, e é muito difícil “decorar” todos.

Lebrei da extensão para Firefox Firebug, que, dentre suas várias opções, permite editar os códigos dos sites em tempo real.

O ponto forte do sistema, com certeza, é a edição em tempo real dos códigos. Para quem está começando e precisa ver “as coisas acontecendo”, não há coisa melhor! Além do quê, o HTML Playground também pode servir como guia de referência ou manual para aqueles mais experientes e/ou os que não têm paciência ou memória para se lembrar de todas as tags e respectivos atributos de HTML e XHTML e regras, propriedades e valores de CSS.

Como disse, vale mesmo à pena estudar através do HTML Playground; além de poder testar os códigos em tempo real, o estudante traz mais divertimento e emoção a suas atividades, tudo isso de forma rápida e dinâmica!

Clientes que aparecem na vida de um desenvolvedor web

O Canha, do Digital Paper Design, fez uma lista muito legal sobre os tipos de clientes que às vezes aparecem na vida de um desenvolvedor web. Pelo jeito que a lista foi montada, para que ele conhece bem do assunto! hehe

Eu mesmo já me deparei com 1 “Padre Quevedo”, 2 “Padre Voador”, 1 “Bobagento” (não entendi a alusão, mas tudo bem…) e vários “Bozo”. E aguardo ansiosamente um ou dois “Preta Gil”! :-D

Faltou o Cliente Clodovil, que além de achar que sabe tudo (e não sabe nada…), “pega intimidade” durante o projeto e só falta te chamar de “Meu amor!”…

Tipos de clientes.

SEO para designers: os erros mais comuns na otimização de sites

Saiu um artigo no Web Designer Wall um artigo muito interessante, tratando sobre SEO para designers.

Nele, os aspectos mais básico da otimização de web sites é abordada, passando desde uma explicação sobre como funcionam os sitemas de busca até dicas importantes, como o cuidado ao escolher o nome do domínio, atenção com a página de erro 404, dentre outros.

O que mais gostei no artigo foi uma lista de erros que web designers e desenvolvedores cometem no desenvolvimento de sites. Lista essa que coloco aqui, com alguns comentários meus.

Erro de SEO 1 – Telas de Entrada (Splash Screens)

A tão defamada e mal usada tela de “Splash”… Não sei exatamente quem inventou de colocar essa “introduçãozinha” nos web sites; só sei que, por motivos que me fogem à compreensão, muitas pessoas imitaram (e imitam) isso achando que é “bonitinho” ou eficiente para alguma coisa…

A verdade é que ter uma tela de splash em web sites acaba atrapalhando a experiência do usuário, prejudica a classificação nos mecanismos de busca e fere o conceito de “home page”.

  • Atrapalha a experiência do usuário. Se alguém digita o endereço de seu site ou blog, o que espera é entrar de uma vez para conferir as atualizações, artigos, ou o que quer que seja. Se a intenção dele fosse ver um desenho ou propaganda, ele procuraria por esse tipo de material… Além do quê, levando em conta a usabilidade, para acessar o conteúdo do site, ele terá que dar 1 clique a mais, o que não é nada aconselhável;
  • Prejudia a classificação nos mecanismos de busca. A página inicial, geralmente, é a página onde a maioria dos spiders começa a procurar seu conteúdo. Além disso, é comum que a home page seja a melhor classificada e tenha maior page rank. Utilizando uma Splash Screen, há prejuízos diversos em todas estas questões;
  • Fere o conceito de “home page”. A questão aqui não é que “ferir conceitos é algo ruim”; isso foi só uma maneira de falar que as telas de introdução prejudicam a experiência dos visitantes. Idealmente, as home pages deveriam servir para apresentar o produto, serviço, promoção, artigos, etc, utilizando, claro, os conceitos de SEO, para o visitante e apresentar a estrutura de navegação do site. Usando a tela Splash, como dito, o visitante é obrigado a dar 1 clique a mais para ter acesso ao mais importante…

Erro de SEO 2 – Menus em Flash

Quem me conhece e alguns dos leitores do desenvolvimento para web já sabem que eu sou totalmente contra o uso de Flash que ultrapasse um “bannerzinho”. Não que eu pense que a tecnologia só tem essa serventia, e sim por questões de usabilidade, tempo de carregamento, e outros.

Ter um menu Flash impede que os spiders “encontrem” o restante do web site a partir da página incial (e se entrarem por uma página que não esta, também). Quer dizer, por causa de um menu que, muitas vezes, tem um efeito simples que pode ser conseguido por utilização de imagens de CSS, a indexação de um web site é incompleta ou nem acontece.

Tudo bem, tudo bem, há a “técnica” de colocar, próximo ao rodapé das páginas, um menu idêntico ao menu em Flash, sendo que este é com texto puro (por questões de acessibilidade). Sinceramente, vejo isso como uma excelente oportunidade de perder visitantes e/ou tempo de permanência destes, já que a porcentagem de novos visitantes que rolam a barra de rolagem é pequena e os links desta parte têm menos relevância para os bots de busca.

Erro de SEO 3 – Conteúdo em Imagens e/ou Flash

Olha o terceiro erro, aí; depois ninguém pode falar que minha cisma com o Flash é em vão!

Muitos desenvolvedores adoram fazer sites “100% Flash“… Não sei se é de conhecimento de quem faz isso, mas, com a atual tecnologia dos mecanismos de busca, é impossível para um bot saber do conteúdo de um site totalmente em Flash (existem até algumas iniciativas, mas nada significativo). Para um bot, é somente um arquivo inserido e pronto.

O mesmo se dá com imagens. Não adianta nada fazer belíssimas composições com textos e palavras-chave em imagens, já que os robôs de busca (ainda) não reconhecem o conteúdo de uma imagem. O máximo que se pode fazer é colocar um atributo “alt” mas, também, deve-se atentar para seu real propósito, que é ser uma alternativa para caso a imagem não seja carregada.

Erro de SEO 4 – Abuso do uso de AJAX

A tecnologia AJAX sem dúvida facilita e melhora bastante a experiência do usuário, se usada de forma adequada. Entretanto, desde que se “popularizou” (porque é usada desde 1997…) muitos abusos são cometidos em nome da dinamicidade.

Então, para uso desta tecnologia, é muito importante prestar atenção na técnica de desenvolvimento de sites em camadas. Fazendo primeiro a camada de conteúdo e aplicando a camada de comportamento posteriormente, os spiders conseguirão indexar o web site por completo. Valendo-se somente do AJAX para os menus, imagens e texos, certamente isso não acontecerá…

Erro de SEO 5 – Versionamento doa página inicial

Alguns desenvolvedores são adeptos à tecnica de, para cada versão do site, criar uma pasta diferente e colocar todo os arquivos nela. Por exemplo, site.com/v1, site.com/v2, e assim por diante, sempre redirecionando o acesso da página principal para a pasta da versão mais recente.

Alterarar muito freqüentemente a localização da página inicial pode prejudicar os “votos” recebidos através de links externos e a classificação nos rankings de busca, em geral.

Erro de SEO 6 – Links “clique aqui”

Esse erro começou nos primórdios da web e é cometido até hoje…

O link é a base, o núcleo, o cerne da web! É o link que permitiu que a web chegasse a ser o que é hoje e é o link que permitirá que seja muito mais! Com essa importância toda, por que você não sabe fazer links?

Um link “clique aqui” não diz nada a respeito de para qual outra página o visitante irá; não complementa em nada sua experiência no web site; não referencia da maneira correta a página de destino, conseqüentemente não contribuindo para o aumento da relevância do site; dentre muitos outros.

Portanto, deve-se usar textos claros, objetivos e, principalmente, descritivos, para que a pessoa (ou spider) que clicar no link saiba o que deve esperar encontrar e não tenha suas espectativas frustradas quando o fizer.

Erro de SEO 7 – Uso incorreto da “title”

O conteúdo da tagtitle” é um dos fatores mais importantes para um bom trabalho de SEO. Numa classificação de importância dos fatores de otimização de sites que são mais relevantes, certamente o conteúdo da tag “title” fica no “TOP 5″.

É através dos títulos da página que os bons robôs de busca conseguem indexar mais facilmente, mais eficientemente e mais corretamente. Devemos seguir algumas diretrizes para escrever títulos na web. Também, os títulos, na maioria dos bons sistemas de busca, são os que aparecem em destaque nas SERPs.

Algumas questões sobre os títulos:

  • Limite de caracteres de títulos. Basicamente, um bom título para a página não ultrapassa 65 caracteres. Daí a importância de ele ser sucinto e objetivo, ser um resumo para quem o lê e instigar a visita;
  • Palavras mais importantes primeiro. A(s) palavra(s)-chave mais importante(s) deve(m) ter precedência, quer dizer, deve(m) aparecer primeiro que as demais. Perceba como são os títulos dos blogs de sucesso;
  • “Keyword stuffing”. Abusar da(s) palavra(s)-chave no título para tentar uma melhor classificação nos sistemas de pesquisa também é um erro. Se houver abuso, é possível que seja considerado um “title spam” e acontecer uma penalização do resultado. “Otimização às avessas”…

Erro de SEO 8 – Atributo “alt” das imagens vazio

Como já explicado, o atributo de imagens “alt” para servir de alternativa quando, por qualquer motivo, a imagem não puder ser exibida. Também foi dito que os atuais spiders não conseguem interpretar o conteúdo (textual ou não) de imagens.

Juntando essas informações, é fácil concluir que deixar o atributo “alt” é perder chance de otimizar ainda mais aquela página para a(s) palavra(s)-chave escolhida(s). Os bots levam em consideração a descrição alternativa das imagens e a utiliza para indexar.

Erro de SEO 9 – URLs não amigáveis

Muitos desenvolvedores web não se atentam ao poder que uma URL amigável tem. Primeiramente ela facilita humanos a identificarmos e memorizarmos mais facilmente um endereço web; depois, um dos “TOP 5″ de SEO é referente ao endereço das páginas.

O que se vê muito por aí, principalmente em blogs, são endereço do tipo site.com/?p=35. Isso não quer dizer nada!

Agora, quando se tem endereços descritivos como site.com/um-texto-descritivo-do-meu-site, a chance de uma boa classificação nas SERPs aumenta consideravelmente e a correta indexação da página, também.

Para quem usa Wordpress, dê uma olhada no artigo “As melhores práticas de SEO que você pode adotar em seu web site ou blog para melhorar o posicionamento nos mecanismos de busca“, onde ensino a configurar corretamente o Wordpress para que faça permalinks amigáveis (não usei “clique aqui”, viram?).

Puxando para o lado mais técnico, procurem sobre mod rewrite.

Erros de SEO – Conclusão

A primeira conclusão é que o artigo sobre técnicas de SEO para designers do Web Designer Wall é muito bom! Leiam para conhecer outros aspectos que eu não citei neste artigo.

Se eu tivesse que escolher o “Erro de SEO 10″, provavelmente seria “Manter-se desatualizado“. O modo de funcionamento dos robôs de busca (algoritmos) mudam constantemente. Quando os mantenedores dos bots percebem que sua tecnologia já foi “manjada” e os resultados não são mais tão úteis e fiéis é que as atualizações acontecem.

Isso acontece mais rápido do que imaginamos, podem ter certeza!

A dica final, então, é sempre ficar atento quanto às últimas novidades de SEO, pesquisar sempre, ler muito a respeito, assinar feeds que tratam sobre o assunto (como o feed do desenvolvimento para web) e, como sempre digo, utilizar com bom senso e discernimento os ensinamentos adquiridos.

Se você fosse complementar a lista com o Erro de SEO 10, qual seria?

artigos comentários e-mail ?
Siga-me no twitter!