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

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

Via: estándares y accesibilidad

Via: Deakialli DocuMental - Eso era la Web semántica.

Com certeza, muita gente nem sequer já utilizou essas tags, eu, particularmente, também nunca as utilizei, e também sabia muito pouco sobre sua verdadeira utilidade, mas basta um pouco de pesquisa que você acaba encontrando o que precisa. Agora vamos ver o significado de cada uma:

<kbd>

Com essa tag você pode indicar ao usuário que ele deve utilizar alguma tecla de seu teclado para realizar determinada função:

<p>Você deve utilizar a tecla <kbd>ESC</kbd> para encerrar o aplicativo</p>

Também recomendo seu uso para indicar ao usuário o uso de accesskey na página.

<var>

Serve para indicar uma variável de alguma linguagem de programação. Possui um estilo por padrão, no qual transforma a tipografia em monospace:

<p>No código JavaScript, a variável <var>validarCampo</var> é utilizada para...</p>

<dfn>

Introduz um termo, uma definição a seu texto:

<p>Eu quando digo <dfn>braço curto</dfn>, estou me referindo a um programador preguiçoso.</p>

Foi atualizado recentemente o validador HTML do W3C, que agora se encontra em sua versão 0.8.0, mas não se esqueça do primordial: “Validação não é nada sem semântica”.

Provavelmente você nunca deve ter usado o elemento <q> do HTML, eu particularmente também não tinha conhecimento de sua importância, que serve para marcar o texto com citações, outros preferem usar entidades de caracteres para citar o texto, mas isso com certeza fere a semântica. Usar o <q> ao invés das entidades de caracteres nos permite também que você aplique estilos CSS, como alterações da cor, tamanho, etc.

Exemplo:

<q>Nunca devemos esquecer que arte não é uma forma de propaganda, é uma forma de verdade</q>, disse John Kennedy.

Que seria renderizado dessa forma: “Nunca devemos esquecer que arte não é uma forma de propaganda, é uma forma de verdade”, disse John Kennedy.

Muitas vezes quando estamos fazendo um site, acabamos ficando preocupados somente com os títulos e os textos, é onde acabamos esquecendo da semântica, por exemplo, quando queremos indicar um código em nosso site, devemos usar a tag <code>, mas muita gente acaba esquecendo disso.

Abaixo você pode ver uma lista de tags semânticos:

• cite: Destina-se a marcar textos que citem ou façam referências a outras fontes
• code: Destinado a marcar trechos código
• dfn: Destina-se a marcar um termo cuja definição foi dada no documento
• em: Destinado a marcar texto com ênfase
• kbd: Destina-se a marcar texto que define uma ação do usuário no teclado
• samp: Destinado a marcar textos que são mostrados como exemplo de saída de um software
• strong: Destinado a marcar textos em negrito
• sub: Destinado a deixar o texto subescrito
• sup: Destinado a deixar o texto superescrito
• var: Destina-se a indicar que trata-se do nome de uma variável ou de um argumento de um programa

<update> Depois do comentário do Marcos Danilo, vou deixar aqui um exemplo de como usar a tag dfn, ela indica basicamente a definição de uma palavra, em geral apresenta o texto em itálico: CERN: Centre d’Éstudes et Recherches Nucleaires </update>

Acho que nunca levantei uma discussão aqui nesse blog, então essa será a primeira. XHTML é mais semântico que HTML? Vou deixar aqui a minha opnião:

Os buscadores entendem perfeitamente o HTML, e mesmo assim eles não deixam de indexar as páginas, logicamente que eles gostam mais de <h1>, <strong> e as tags similares, e esses são elementos que já existiam no HTML.

XHTML é HTML, não há atributos novos nem elementos novos, tudo segue exatamente igual. Vejas as diferenças entre XHTML e HTML no site do W3C.

XHTML não separa melhor o conteúdo da estrutura. Para aqueles que tem terror da tag font, vale lembrar que esse elemento não é permitido seguindo o dtd do HTML 4.01 Strict, quem dirá então o DTD do XHTML 1 Transitional. O DTD do XHTML 1 Transitional é o mesmo do HTML 4 Transitional só que reformulado para funcionar como XML, e o mesmo acontece com as DTD do HTML 4 Strict e XHTML 1 Strict.

E você, qual é a sua opnião sobre esse assunto, deixe aqui o seu Feedback!!!

Semântica, em um modo geral, se refere ao significado das palavras, mas na Web, quando falamos em semântica, estamos nos referindo ao significado das etiquetas com que estamos marcando o nosso código, ou seja, XHTML é uma linguagem de marcação estrutural, cada elemento tem uma relação e um significado dentro do nosso documento.

Mas voltando as listas, em XHTML 1.0 (e 1.1), existem 3 tipos de listas:desordenadas, ordenadas e de definição, além disso, existem outras etiquetas que servem para indicar o uso dessas listas:

Etiqueta <li>

É uma etiqueta comum em listas desordenadas e ordenadas, e não pode ser usada em listas de definição, sua função é marcar um elemento de uma lista (por isso a definição: list item). Veja um exemplo:

<li>ASW</li>
<li>Acerbis</li>
<li>Smith</li>
<li>Wirtz</li>
<li>One</li>

Como podem ver, nosso exemplo não está completo, é agora que definimos se nossa lista é ordenada ou desordenada

Listas Desordenadas

As listas desordenadas (unordered lists) são aquelas que a ordem de seus elementos não é relevante, por exemplo, se não existe nenhum critério pré-determinado, pode ser usado uma lista desordenada no exemplo anterior, que se referem a marcas de produtos de motocross. A etiqueta a se usar é <ul>. Exemplo:

<ul>
  <li>ASW</li>
  <li>Acerbis</li>
  <li>Smith</li>
  <li>Wirtz</li>
  <li>One</li>
</ul>

Listas Ordenadas

As listas ordenadas (ordened lists) são aquelas onde há importância na ordem dos elementos, são aquelas listas que classicamente aparecem numeradas, mas mediante CSS é possível controlar a apresentação desses elementos para que ao invés de números apareçam números romanos, letras gregas, etc.

O critério para decidir se uma lista é ordenada ou desordenada depende em última instância de quem está escrevendo o código, por exemplo, na lista anterior, eu só listei algumas marcas referentes a Motocross. Mas vamos tomar agora como exemplo uma lista onde a ordem dos elementos tem importância:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ol>

O resultado você pode ver nesse exemplo.

Listas de definição

As listas de definição tem uma estrutura distinta das listas ordenadas e desordenadas, pois neste caso fazemos o uso de 3 etiquetas: <dl>, <dt> e <dd>, onde temos a lista de definição (definition list), termo a definir (definition term) e a descrição da definição (definition description) respectivamente. Para uma melhor compeensão, veja abaixo um exemplo:

<dl>
 <dt>http://parlenda.blogspot.com</dt>
   <dd>Conteúdo variado sobre tecnologia, segurança, redes e sistemas operacionais</dd>
 <dt>http://blog.joaovagner.com.br</dt>
   <dd>Design, tecnologia da informação, programação e linux</dd>
<dt>http://www.brunoalves.eti.br</dt>
   <dd>Tecnologia em geral, com foco em Linux, Software Livre, Blogs, Wordpress e servidores</dd>
</dl>

Um exemplo em funcionamento você pode ver a seguir.

Você precisa entregar aquele trabalho para o cliente urgente, o prazo está estourando, e o cliente é muito chato, e você, de forma alguma encontra uma solução para o seu problema, seja nos buscadores, ou seus rascunhos, eu aconselho você a participar de listas de discussão, a melhor forma de adquirir conhecimento. Eu particularmente aprendi muita coisa com elas, vou deixar aqui algumas listas que particularmente considero ótimas:

WebStandards-br

Grupo de discussão em português sobre os recomendações do W3C para a construção de websites: metodologia ‘tableless’, validação de código, XHTML, CSS, XML, XSLT, navegadores e dispositivos, semântica, acessibilidade, SEO, portabilidade.

ArqHP

Lista de discussão em torno de produção de home pages, abordando HTML, XHTML, XML, tableless, CSS, semântica, validação de documentos, separação de informação da formatação, DOM e demais tecnologias recomendadas pelo W3C.

CSS-D

Lista internacional de discussão sobre CSS

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?