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

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.

Quando dizem que a Microsoft não está nem aí para os padrões, muita gente não acredita, mas é só ver pra crer, experimente acessar a página do Office em espanhol com outro browser a não ser o IE para vocês verem o estrago!

• 1- Buscador interno amigável e eficaz.
• 2- Mapa do site.
• 3- Links internos com URI absoluta.
• 4- Conteúdo significativo no início da página.
• 5- Desenvolver com as últimas tecnologias.
• 6- Validar o HTML, XHTML e o CSS.
• 7- Comprovar que não existem links quebrados.
• 8- Uso limitado de tabelas.
• 9- Uso limitado de Flash.
• 10- Arquivos externos para folhas de estilo e javascript.
• 11- Incorporar sempre atributos de identificação (alt, title).
• 12- Incluir informação de contato.
• 13- Uso moderado de imagens. Sempre justificadas e com valor não superior a 12KB

Muitas vezes quando precisamos desenvolver alguma apresentação, o primeiro programa que nos vem a cabeça com certeza é Power Point, e na maioria das vezes acabamos criando apresentações com uma interface pobre, sem imagens, mas hoje em dia existem várias opções, que dentre elas posso citar o HTML SLIDY, desenvolvido por Dave Ragget, que se encontra hospedado nos servidores da W3C, com isso temos a certeza de absoluta adequação aos padrões web e a acessibilidade.

Para utilizá-lo basta baixar o script e seguir as instruções para formatar o código adequadamente.

O futuro da Web se constroe em meio a páginas ricas em conteúdo que obedecem universalmente a padrões, bem diferente da Web que viamos antigamente, aquela em que a informação era toda desorganizada e difícil de entender, mas o que a Web Semântica tem haver com isso?

A Web Semântica foi um projeto criado por Tim Berners-Lee, nada mais nada menos que o criador do HTML e da World Wide Web, onde o objetivo desse projeto é melhorar a Web através de padrões e ferramentas que tornem seu conteúdo claro e de fácil manutenção.

As páginas construídas dentro da Web Semântica passam a poder ser lidas tanto por humanos ou por máquinas, e também tanto podem ser apresentadas graficamente, como podem ser lidas por leitores de tela, e também por dispositivos móveis, como celulares.

Por exemplo, se as máquinas fossem capazes de entenderem as páginas, ficaria bem mais fácil desenvolver programas que conforme as nossas solicitações, poderiam marcar hora com o médico, encontrar e fazer reservas em hotéis de nossa preferência. Esses programas seriam os user-agentes.

As linguagens hoje que se adequam a esses padrões são as versões mais recentes do HTML, todas as versões do XHTML, as CSS e também o XML. Na web Semêntica, toda a formatação deve estar separada do código HTML, por isso existem elementos claros que definem cabeçalhos, parágrafos e listas. Usadas dessa forma, as estruturas das páginas ficam fáceis de se compreender.

Por exemplo, peguemos o elemento “h1″, ele representa um cabeçalho importante em uma página, por isso o browser o apresenta maior e com texto carregado. O elemento “p” representa um parágrafo, por isso o browser o renderiza como um bloco.

Caso você queira aplicar formatação a página, você deve usar as CSS, por que dessa forma você não irá interferir nos significados dos elementos HTML. Basicamente, esse projeto visa fazer com que a informação seja guardada em arquivos HTML ou XHTML e a formatação fique guardada em um arquivo CSS.

E você, o que acha disso? Já começou a desenvolver dentro dos padrões?

O que são os Webstandards e por que eles são importantes? Como eles devem ser usados? Logo abaixo você vai encontrar um apanhado resumido sobre tudo isso.

O que são e pra que servem?

Os Webstandards são padrões estabelecidos pela W3C e outros grupos e tem como objetivo assegurar que todas as páginas desenvolvidas dentro dos padrões funcionem corretamente em todos os browsers. Os padrões Web também determinam que você deve usar o HTML com a real finalidade com que ele foi criado, linguagem de marcação de hipertexto. Mas e agora, o que acontece com a formatação do meu site? Ela vai ser feita toda através de CSS. Desenvolvendo um site assim você pode ter certeza de que ele está seguindo os padrões internacionais de qualidade. Vamos citar um exemplo: hoje em dia uma empresa que não tem um ISO 9001, pode perder muitos negócios por que ninguém vai confiar nela, na Web acontece a mesma coisa, uma agência que não segue os padrões corre muito mais o risco de não conquistar clientes do que aquela que segue a risca os padrões.

Você ainda não me convenceu a aderir aos padrões, e agora?

Além de todas essas vantagens citadas acima, existem muitas outras, separando a formatação do código HTML, você reduz o tempo de produção, seu site torna-se mais fácil de atualizar, torna-se mais leve, consequentemente economizando banda, um exemplo claro disso é so site da ESPN. Estruturando o HTML de forma correta, usando cada tag realmente para que ela foi criada, a indexação em mecanismos de busca é bem mais realizada do que um site fora dos padrões.

No quesito acessibilidade, aderindo aos padrões, você já está dando um grande passo, por que você não precisa criar versões específicas do seu site para diferentes portadores de deficiência, seu site é melhor vizualizado em PDA’s, leitores de tela, celulares.

E agora? Você vai aderir aos padrões?