Semântica – Blog do Lucas Martins
A Semântica e a Acessibilidade: um casal perfeito
A semântica, bem como a acessibilidade, podem ser aplicadas a tudo. Na construção de um prédio, na dissertarção de uma redação e claro, na criação de sistemas e websites.
Semântica, pode ser definido como: a realização de algo utilizando um padrão formal.
Como nesta imagem, você pode perceber a utilização da semântica quando se organiza os veículos de transportes com os tipos de transportes (terrestres, aéreos e aquáticos). Imagine que o "land", "water" e "air" não estivesse nessa representação, ficaria uma bagunça, dificultando o entendimento e a leitura desta imagem.
No desenvolvimento de sites, é um pouco diferente, mas com o mesmo objetivo e conceito.
Nesta imagem ao lado (clique nela para ampliar), tento mostrar bem como a semântica pode ser utilizada na criação de sites com a nova versão do HTML, definindo bem os elementos em seu local correto e definindo tag's corretas para cada informação que será exibida ao cliente. Mas e o cliente saberá que o site está utilizando uma boa semântica na sua estrutura? Não, mas os mecanismos de buscas, leitores de telas e navegadores saberão, e é aí que a acessibilidade entra. Somando a compatibilidade do navegador com a interpretação do leitor de tela, as pessoas com deficiência poderão usufruir do site como deveria e como todo mundo usufrui.
Acessibilidade, além da sua definição clássica que é permitir que pessoas com deficiências ou mobilidade reduzida participem de atividades que incluem o uso de produtos, serviços e informação, também podemos incluir o direito de eliminação de barreiras arquitetônicas, de disponibilidade de comunicação, de acesso físico, de equipamentos e programas adequados, de conteúdo e apresentação da informação em formatos alternativos.
Não é fácil, a princípio, avaliar a importância dessa temática associada à concepção de páginas para a web. Mas os dados da W3C (Consórcio para a WEB) e WAI (Iniciativa para a Acessibilidade na Rede) apontam situações e características diversas que o usuário pode apresentar:
Um código HTML com uma boa formatação e semântica, pode ajudar muito o seu site tornar-se mais acessível.
10 Dicas rápidas para construir web sites
Guia completo e checklist: www.w3.org/WAI/
Imagens e Animações: Use o atributo alt para descrever a função de cada elemento visual.
Imagemaps: Use mapas client-side (o tag map) e texto para as regiões clicáveis.
Multimídia: Inclua legendas e transcrições para o áudio, e descrições para o vídeo.
Híperlinks: Utilize texto que faça sentido fora do contexto. Evite a frase "clique aqui".
Organização da Página: Use cabeçalhos, listas e uma estrutura consistente. Use CSSpara layout e estilo sempre que possível.
Gráficos e Diagramas: Sumarize o conteúdo ou use o atributo longdesc.
Scripts, applets e plug-ins: Para o caso de estarem desabilitados ou de não serem suportados pelo browser, forneça conteúdo alternativo.
Frames: Use o tag noframes e empregue títulos significativos.
Tabelas: Torne compreensível a leitura linha a linha. Resuma.
Valide seu trabalho: Use as ferramentas, checklist e os guias disponíveis em http://www.w3.org/TR/WCAG.
Com a padronização da W3C, os designers e desenvolvedores estão sendo forçados a criar aplicativos mais acessíveis.
Autor Lucas MartinsPublicado em 5 de novembro de 2009 Categorias Acessibilidade, Internet, SemânticaTags Acessibilidade, Internet, SemânticaDeixe um comentário em A Semântica e a Acessibilidade: um casal perfeito
As novas tags que vem no HTML 5
<article>: Define um artigo.
<aside>: Define algum conteúdo relacionado ao artigo.
<audio>: Define um streaming de áudio em um documento HTML
<canvas>: Define a criação de gráficos em uma página web
<command>: Define um botão de comando, como um radiobutton, uma caixa de seleção ou um botão.
<datagrid>: Define uma lista de dados selecionáveis. O datagrid é exibido como uma árvore.
<datalist>: Define uma lista de dados selecionáveis. Utilize esse elemento juntamente com o elemento input, para fazer uma lista suspensa para um valor de entrada.
<datatemplate>: Define um recipiente para o modelo de dados. Deve conter elementos filho que são <rule> para definir um modelo.
<details>: define os detalhes de um elemento, no qual o usuário pode ver, e clicar para ocultar.
<embed>: Utilizado para incorporar conteúdo no HTML, atuando como um plugin.
<eventsource>: Define um destino para eventos enviados por um servidor.
<figure>: Especifica ilustrações, imagens, fotos, associado juntamente com alguma legenda.
<footer>: Define o rodapé de uma seção ou documento. Normalmente, contém o nome do autor, data em que o documento foi escrito e / ou informações de contato.
<header>: Define o cabeçalho de uma seção ou documento.
<mark>: Define texto marcado. Utilize a tag <mark> se você quiser destacar partes do seu texto
<meter>: Define uma medição. Usado apenas para medições com conhecimento de um valor mínimo e um valor máximo.
<nav>: Define uma seção de links de navegação.
<nest>: Define o ponto de incício para criação de elementos em um <datatemplate>, utilizado em conjunto com o elemento <rule>.
<output>: Define a saída de diferentes tipos de dados, por exemplo, o cálculo efetuado por algum script.
<progress>: Define o progresso de uma tarefa de qualquer tipo.
<rule>: Define as regras para atualização de um datatemplate. Usado em conjunto com os elementos <datatemplate> e <nest>.
<section>: Define as seções em um documento. Tal como capítulos, cabeçalhos, rodapés, ou quaisquer outras seções do documento.
<source>: Define recursos para elementos de mídia, como <audio> e <video>.
<time>: Define tempo ou data, ou ambos.
<video>: Define vídeo, como um clipe de filme ou vídeo de outros fluxos.
TAGS PARA CONSTRUIR O LAYOUT NO HTML 5
<nav>: Define o local do menu
<section>: Define uma sessão de conteúdo da página
<article>: Define o conteúdo (artigo, textos, postagens, etc)
<header>: Define o cabeçalho (topo) de algum elemento (body, section, nav, etc)
<footer>: Define o rodapé de algum elemento (body, section, nav, etc)
<aside>: Define o local da barra lateral (como um layout em 3 colunas)
Lembrando que nada é mágico e nem deve ser, tudo precisa e continua necessitando de estilização com CSS.
No próximo artigo, irei mostrar alguns exemplos e formas de utilizar essas novas tags.
Autor Lucas MartinsPublicado em 5 de novembro de 2009 Categorias HTML, Internet, Padrões Web, SemânticaTags HTML, HTML 5, Internet, Padrões Web, Tecnologia, W3C1 comentário em As novas tags que vem no HTML 5
Sobre o HTML 5
No início de 2009, o W3C anunciou a primeira especificação do HTML5.
A versão atual do HTML é a 4.0.1, e a versão final do HTML está prometida para 2012.
Foram feitas grandes alterações que favorecem a semântica, que incluem:
novas API's
Elemento <canvas> para desenhos dinâmicos;
Network status (online/offline);
Utilização de um plugin gratuito de áudio e vídeo via tags;
contentEditable – Editor rico de conteúdo;
Drag and Drop de elementos;
Cross-document e cross-domain messages;
Histórico de navegação em Ajax;
Maior controle de dados sobre formulários;
Armazenamento de dados no cliente;
Web worker threads;
Melhoria na depuração de erros;
Esta evolução da linguagem padrão para web pode eliminar a necessidade de plug-ins para aplicações multimídia em navegadores. Diversos críticos consideram a tecnologia como um forte concorrente ao Flash do Adobe, Silverlight, da Microsoft, e o recente JavaFX, da Sun.
Recentemente, Shantanu Narayen, diretor executivo do Adobe, disse que o Flash não irá perder mercado, porem a versão 5 do HTML já está sendo chamado de "Flash-killer". Estas tecnologias precisarão se adaptar rapidamente para conseguir manter-se no mercado, tão popular quanto hoje.
Na avaliação do co-diretor de ferramentas da Mozilla, Ben Galbraith, as tecnologias viabilizadas pelo HTML 5 como o Canvas para desenhos 2D e o armazenamento de conteúdos no desktop, permitirão que "usemos mais o browser do que nunca".
Na versão 4 do HTML, a atual, o navegador não distingue o que é topo, conteúdo, rodapé e menu, mas com o HTML 5 isso irá mudar, veja:
Estrutura de código com o HTML 4:
<div id="topo">...</div>
<div id="barralateral">...</div>
<div id="rodape">...</div>
Estrutura de código com o HTML 5:
Ou seja, agora o navegador terá um conhecimento real de como o layout está sendo renderizado, o que é o rodapé, o conteúdo, a barra lateral da direita e etc. E claro, isto irá auxiliar muito os mecânismos de busca a filtrar informações úteis ou não. Talvez o que está em "header" não interesse muito, talvez o mais importante será o que está dentro de "article", e por ai vai as possibilidades de mudanças que a nova tecnologia nos dará.
Repare pela imagem representando o layout que os elementos header e footer não são exclusivos da página, mas pode ser usado para representar o topo e o rodapé de qualquer conteúdo (ou article).
Bom, não vamos extender muito o tópico, resumi bem e de forma simples o que é o novo HTML.
Nos próximos artigos sobre o HTML 5 eu vou mostrar detalhadamente sobre as novas TAGs e atributos e quais são suas funcionalidades. Também irei mostrar um exemplo prático de como desenvolver o HTML 5.
Autor Lucas MartinsPublicado em 4 de novembro de 2009 Categorias Design, HTML, Internet, Padrões Web, SemânticaTags HTML, HTML 5, Internet, Padrões Web, Tecnologia, W3C2 comentários em Sobre o HTML 5