Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

Tag Clouds, ou Nuvem de Tags são listas hierarquizadas visualmente, ou seja, uma forma de apresentar os itens de um website. Mas o que são essas tags?

Tags são rótulos ou legendas onde as pessoas podem categorizar conteúdo de uma forma muito simples, utilizando qualquer palavra que faça sentido. O uso de Tags na web foi difundido por sites como Technorati, del.icio.us e Flickr.

Uma nuvem de tags em geral reúne um conjunto de tags utilizadas em um determinado website disposto em ordem alfabética, e o volume de conteúdos que o site apresenta em cada tag é mostrado proporcionalmente pelo tamanho da fonte. Dessa forma, em uma mesma interface é possível localizar uma determinada tag tanto pela ordem alfabética como pela frequência da incidência de conteúdos marcados com a mesma tag no referido site. As tags disponibilizadas na nuvem são links que levam a coleções de itens relacionados às palavras da tag.

Fonte: Wikipédia.

A primeira vista essa frase parece ridícula: “Não use mailto:“. Mas por que? Já parou para pensar que existem usuários iniciantes de internet, que nunca sequer na vida, utilizaram seus clientes de e-mail que vem pré-configurados em seu sistema operacional? Que eles estão acostumados, a aquela rotina de abrir o Browser, acessar a página do seu cliente de e-mail e lêlos todo alí?

Imagine a seguinte situação, uma empresa, em sua página de contato só coloca o mailto: em um link para contato, o usuário, ao clicar, pensa que será levado para um formulário qualquer, mas aí, após alguns segundos, aparece aquela janelinha de configuração de conta no cliente de e-mail, eu particularmente detesto isso, em algumas pessoas pode até causar fastidio!.

Utilize, sempre que possível, um formulário de contato, simples de preferência. Não quer utilizar um formulário? Deixe seu endereço, telefone, alguma forma de contato por sinais de fumaça, mas nunca cause esse descaso com o usuário.

Imagine a situação acima, ano de 2100, os browsers em versões altamente avançadas e nós desenvolvedores ainda testando os sites no Internet Explorer 7. Não duvido disso.

Via: Beast-Blog.com.

Um vídeo que explica de uma forma simples o que é a Web Semântica.

Via: estándares y accesibilidad

Primeiramente, não vou repetir aqui o que já foi dito em milhares de sites por aí, portanto, se quiserem mais informações sobre esse assunto que rolou durante essa semana no mundo dos WebStandards, é bom dar uma olhada nos seguintes links:

• A List Apart: Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8.
• Snook.ca - IE8 to include version targeting.
• Anieto2K - Internet Explorer 8.0 modo super estandar.
• Superfície Reflexiva - IE8 e Compatibilidade.
• intertwingly - Best Standards Support.
• Tripix.net - IE8, estándares y la super-polémica del mes.

Mas como reagiram pessoas como: Anne van Kesteren, Ian Hixie, Dean Edwards ao ouvirem essa informação? Veja a opnião de alguns deles.

E você, leitor assíduo aqui do blog, o que achou dessa nova artimanha da Microsoft?

O código para inserir vídeos do Youtube em sites que respeitam os WebStandards é uma dor de cabeça para desenvolvedores e para bloggers, pois o Youtube proporciona um código para você copiar e colar em nosso blog para reproduzir os vídeos de uma forma rápida e simples, mas o código não é correto como deveria:

<object width="425" height="373">
<param name="movie" value="http://www.youtube.com/v/O0G7iKj6PS0&rel=1&border=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/O0G7iKj6PS0&rel=1&border=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="373"></embed>
</object>

Se você for validar o código, verá os seguintes problemas:

• Se utiliza a tag object corretamente, mas ocorre a falta de alguns parâmetros como data e type.
• As tags param em XHTML devem ser fechadas com a sua mesma tag de abertura.
• O uso da tag não standard embed podem produzir incompatibilidades em browsers que não a utilizam, como, dispositivos móveis e leitores de tela.
• Não se proporciona um método alternativo caso o dispositivo não tenha suporte a Flash.

A solução é bem simples, basta codificar-mos da seguinte maneira:

<object data="http://www.youtube.com/v/O0G7iKj6PS0" type="application/x-shockwave-flash" width="425" height="350">
  <param name="quality" value="high" />
  <param name="movie" value="http://www.youtube.com/v/O0G7iKj6PS0" />
  <img border="0" src="/img/video.png" alt="Vídeo (Objeto multimídia)" />
</object>

O código acima corrige vários conceitos, e além de tudo elemina o uso da tag embed, pois se trata de uma tag privada e totalmente fora dos padrões:

• Se utiliza a tag object corretamente com o link do objeto no atributo data e o tipo MIME no atributo type.
• As tags param agora são “unitárias” e compatíveis com XHTML, além de também serem compatíveis com HTML.
• Acessibilidade: Se utiliza um método alternativo, uma imagem que se mostrará caso o browser não tenha um plug-in do Flash instalado. E no caso de não haver suporte a imagens (leitores de tela, browsers de texto) é mostrado o aributo alt da imagem.

Abaixo, um exemplo de vídeo do youtube inserido corretamente em XHTML:

Referências

• Emezeta Blog - Youtube estándar con (X)HTML válido.

Randfish do site SEOmoz considera que somente 4 fatores explicam 90% da equação para calcular o posicionamento em ferramentas de busca. Os fatores a que ele faz referência, de forma resumida, são os seguintes:

• Uso de palavras chave (Keywords) e conteúdo relevante: Esse ponto é o mais interessante do artigo, pois ele detalha técnicas concretas de como melhorar esse aspecto. Faz também referência a sua escassa confiança sob o conceito “densidade de palavras chave”.
• Links para páginas - Quantidade e Qualidade: Se uma página recebe muitos links de outros sites, quer dizer que ela é muito importante, e se essa linka a outra, ela também deve ser.
• Importância do domínio: É determinado por muitos fatores, mas um, em especial, é o tempo de existência do mesmo.
• Textos dos links - Internos e Externos: Todos os textos dos links devem possuir palavras chave.

Referências

• Tripix.net - El 90% del posicionamiento puede depender de solo 4 factores.

Nessa galeria você pode ver os melhores sites de 2007 baseados em XHTML e CSS e ver o poder do que é capaz ter um pouco de criatividade aliado aos WebStandards. Um site que eu achei interessante foi o do Alex Buga:

Infelizmente meu blog não saiu nessa lista, mas vamos ver se ano que vem ele aparece né, pois agora comprei o livro do Maujor, acho que agora aprendo CSS e desenvolvo um layout interessante aqui para o Blog.

Design by Grid é uma galeria de sites web desenvolvidos utilizando grids.

Grid se trata de uma imagem genérica que serve como guia para o desenvolvimento criada por Cameron Moll.

Grid Calculator é um gerador de layouts que se baseia no tamanho da letra, número de colunas, altura das colunas e a distância entre as mesmas.

Grid Generator é um gerador de imagens quadriculadas para se utilizar como fundo na hora de desenvolver. Uma vez gerada, é só efetuar o download da imagem.

Layout Grid é onde podemos efetuar o download de uma imagem que nos auxilia no desenvolvimento.

Referências

• Carlos Leopoldo.
• Xybernéticos

• 1- Você cobra por hora ou por projeto?
• 2- Quanto você cobra para fazer tal coisa?
• 3- Quanto tempo falta para terminar?
• 4- Por que meu site não funciona em certos browsers?
• 5- Poderia colocar uma introdução para o meu site em Flash?

Com certeza a pergunta de número 5 é a mais polêmica. Alguém mais tem alguma situação interessante para postar aí nos comentários?

Referências

• DuperMag.
• Carlos Leopoldo