Cuiabá 71

O 1º Workshop de Arquitetura de Informação, Acessibilidade e Usabilidade (W.a².i.u) foi organizado pelo Alexandre Formagio da Agência Infinito Digital em conjunto com a Impacta para divulgar o curso de pós-graduação em Arquitetura de Informação.

As Palestras

Usabilidade

Amyris Fernandez

Como sempre, a palestra da especialista em usabilidade, jogabilidade, marketeira e professora Amyres Fernandez foi ótima trazendo novidades de um futuro não distante do mundo de Design da Interação.

Fred Usabilidoido

Realmente o Fred é doido em suas palestras e acaba interagindo muito com o público, apesar que ainda esperava mais, pareceu mais um apanhado rápido de informações sobre Design de Interação mais alguns ví­deos.

Acessibilidade

MAQ

A primeira palestra foi a do MAQ que é deficiente visual e falou como começou a trabalhar na área de informática e depois entrando no mundo da acessibilidade.

Horácio Soares

O Horácio detalhou mais sobre as oportunidades de se fazer não só um site acessí­vel, mas qualquer interface digital.

Lêda Soares

Também uma das integrantes da AcessoDigital.net mostrou na prática como um cego interage com a internet (no caso foi um ppt, a net não funcionou)usando o software leitor de telas JAWS da Microsoft, lembrando que ela teve que reduzir 3 vezes a velocidade do som, o que para ela é normal, para o público conseguir entender e depois mostrou o ví­deo que a Acesso criou sobre Acessibilidade.

Bruno Torres

Pra mim foi uma palestra um pouco básica para o ótimo profissional que é o Bruno, achei um pouco de substimou os participantes, ele deveria ter dado foco em acessibilidade para web e não em padrões para web.

Arquitetura de Informação

Palestra ministrada pela Carol Leslie e a mineira Lu Cattoni (foto) foi uma abordagem da definição de AI que não conseguimos definir no EBAI (rs) mas elas trouxeram algumas definições bem bacanas, claro que eu e até elas são questionaveis. Falaram também da importancia, processos e mitos da AI em projetos Web.

EBAI vs. WAIU

Não podemos nem comparar os dois eventos, para mim um é complemento do outro, o EBAI era voltado para profissionais com conhecimentos mais sólidos em Arquitetura de Informação e o WAIU foi mais para quem está começando na
área.

Figurinhas Repetidas

Como em todos os eventos, encontrei figuras como Luciana Ribeiro da TV1.com, Tiago Ayer e Karen Fornari da Simples Consultoria, que desta vez manteve o mesmo visual =).

Mais do mesmo

O mesmo site que fez o Quiz do HTML, resolveu fazer um outro, só que agora o de CSS.

Como funciona

Você digita todas as propriedades CSS que você lembra em uma caixa de texto, não é necessário pressionar ENTER. Se a mesma estiver correta, ela é exibida abaixo. e acima mostra quantos elementos faltam. Quando terminar, exibe quais elementos você não acertou.
Números

São 122 propriedades no total para você acertar.

São apenas 7 minutos para fazer o Quiz.

http://www.justsayhi.com/bb/css_quiz - Faça o teste aqui.

dica do Michel

Para que seu código XHTML possa ser validado e interpretado corretamente, siga as seguintes regras:

Fechar todas as tags

Para escrever código XHTML válido, devemos fechar TODAS as tags. As tag que normalmente exigem fechamento como <p></p>, <td></td>. E as tags que no HTML não exigiam fechamento como <br>, <hr>, <img>.
Incorreto:
<br>
<img src=”image.jpg” alt=”foto x”>
Correto:
<br />
<img src=”image.jpg” alt=”foto x” />

Utilizar letras minúsculas para tags e atributos

Um documento XHTML deve ter TODAS as tags e seus respectivos atributos escritos com letra minúscula.

Incorreto:
<A href=”index.html” CLASS=internal>

Correto:
<a href=”index.html” class=”internal”>

Colocar entre aspas valores dos atributos

Todos os valores dos atributos XHTM devem estar entre aspas.

Incorreto:
<table width=100%>

Correto:
<table width=”100%”>

Não permitir atributos sem valores

Todos os atributos devem ter valor definido

Incorreto:
<dl compact>
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>

Correto:
<dl compact=”compact”>
<input checked=”checked” />
<input readonly=”readonly” />
<input disabled=”disabled” />
<option selected=”selected” />
<frame noresize=”noresize” />

Atributo ID substitui o atributo NAME

O HTML 4.01 define um atributo NAME para elementos como a, applet, frame, iframe, img, e map. No XHTML, o atributo NAME foi descontinuado, sendo substituído pelo atributo ID. Para manter a compatibilidade com browsers mais antigos, aconselha-se utilizar os dois atributos.

Incorreto:
<img src=”figura.gif” name=”figura1″ />
Correto:
<img src=”figura.gif” id=”figura1″ />
<img src=”figura.gif” id=”figura1″ name=”figura1″ />

Não utilizar tags e atributos HTML descontinuados

Algumas tags e atributos que são permitidos no HTML 4.01 Transitional e no XHTML 1.0 Transitional não são permitidos no XHTML 1.0 Strict (e no HTML 4.01 Strict). Alguns exemplos são: tags <font>, <center>; atributos alink, align, width, height (para alguns elementos), e background.

Incorreto:
<b>destaque</b>
Correto:
<strong>destaque</strong>

Declarar o DOCTYPE do documento

Você deve informar um DTD na primeira linha do seu documento XHTML.
O DTD ou Doctype (Document Type Definition) tem como função informar ao browser que tipo de documento será visualizado.
A estrutura de um documento XHTML é:

<!DOCTYPE …>
<html>
<head>
<title>… </title>
</head>
<body> … </body>
</html>

Existem 3 tipos de Doctype:

Strict
Este tipo é utilizado quando o código do documento é 100% XHTML. O XHTM 1.0 Strict não permite marcação de apresentação como a tag <font> ou o atributo bgcolor <table bgcolor=”#006633″>. Por isso força a separação entre estrutura (XHTML) e apresentação (CSS). É tido entre os desenvolvedores como Doctype “radical” pois não permite nenhuma desconformidade com o padrão XHTML.
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Transitional
Este é o tipo mais utilizado. Ele permite a utilização de tags e atributos de formatação, tornando o documento compatível com browsers que não suportam CSS.
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Frameset
Este tipo é indicado quando você está utilizando FRAMES em seu site.
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

Benefícios

O XHTML nada mais é do que uma forma de escrever um documento HTML de modo que ele também seja um documento XML válido. Ou seja, seu documento HTML ganha a coerência e flexibilidade de um documento XML, podendo ser facilmente lido por ferramentas automáticas e convertido em outros formatos de arquivos. Com XHTML torna-se muito fácil oferecer os dados do seu site através de WAP ou de um RSS por exemplo. Torna-se fácil também transformar o resultado de uma consulta à banco de dados ou um documento XML numa página Web.

Flexibilidade

Entenda como flexibilidade a capacidade de se apresentar o conteúdo de um website em diferentes estilos, combinações de cores e até mesmo, plataformas diferentes do navegador Web instalado no seu computador pessoal.

A divisão entre conteúdo e forma proporcionada pela utilização dos conceitos do Web Standards nos permite exibir o conteúdo de uma página Web em PC’s, Palmtops, PDA’s e celulares com uma simples mudança na referência do arquivo CSS utilizado para a formatação.

É impossível utilizar o HTML 4.01 para construir websites modernos, estruturados e compatível com padrões Web (Web Standards). Para fazer a transição para uma marcação limpa, semântica, e estar mais bem preparado para uma possível transição para o XML e outras futuras linguagens de marcação, é recomendado utilizar o XHTML 1.0 para criação de novos websites.

O XHTML 1.0 é a reformulação do HTML 4.1 nos padrões do XML 1.0, e foi desenvolvido para substituir o HTML. Passou a ser uma recomendação do W3C a partir de 26 de Janeiro de 2000.

Obs.:

O XHTML é 100% compatível com o HTML 4.1 (o oposto não é verdadeiro).
Todos os navegadores recém lançados são compatíveis com o XHTML 1.0.

O HTML é uma linguagem de marcação utilizada para criar e formatar páginas ou documentos Web. Com o tempo passou a ser utilizado para descrever a estrutura dos documentos. O HTML permite criar documentos com componentes como cabeçalhos (h1,h2,….), parágrafos (p), quebras de linha (br), tabelas (table, tr, td, th), listas (li, ul, ol), imagens (img) e links (a). Uma tecnologia complementar foi criada, o Cascading Style Sheets (CSS), responsável pela apresentação (formatação visual) dos documentos.

Novas especificações HTML não serão mais definidas. HTML 4.01 é o último padrão HTML, e agora substituído pelo XHTML 1.0. Desenvolver em XHTML não é substancialmente diferente de desenvolver em HTML, mas oferece diversos benefícios, principalmente para aplicações mais complexas. O XHTML 1.0 é uma definição de HTML em conformidade com as regras do XML. Isso quer dizer que utilizando XHTM você tem a vantagem de poder utilizar plenamente o HTML, e o poder de manipular informações com XML.

Para web designers e desenvolvedores, os Web Standards implicam em utilização de standards/padrões principalmente no escopo estrutural e de apresentação.

Embora existam padrões que se apliquem a todos os aspectos da Internet, como ECMAScript (JavaScript), DOM, XML, RDF, User Agents (navegadores) e guias de acessibilidade, quando se fala em Web Standards, estamos se referindo principalmente as linguagens estruturais e de apresentação que compõe um documento web: o HTML (Hypertext Mark-up Language), o XHTML (Extensible Hypertext Markup Language) e o CSS (Cascading Style Sheets).

Adotar os Web Standards exige uma mudança de atitude:

Website Tradicional

O desenvolvimento de um Website tradicional é uma extensão da mídia impressa. Características comuns incluem:

• Layouts baseados em tabelas.
• Camada de apresentação junto com a camada de conteúdo.
• Códigos inválidos, inacessíveis e semanticamente incorretos.

Website “Web Standards”

Implementar os Web Standards significa aceitar a web como uma ampla ferramenta acessível por um grande número de usuários e uma variedade de aparelhos. Características comuns incluem:

• Layout baseado em containers (DIVs - Tableless).
• Uso de Cascading Style Sheets (CSS) para separação entre conteúdo e apresentação.
• Marcação semanticamente correta.
• Código válido e acessível (por humanos e máquinas).

• Curva de aprendizado acentuada.
• Problemas com incompatibilidade entre browsers.
• Alguns tipos de layouts podem ser obtidos de forma muito mais fácil utilizando-se tabelas ao invés de CSS.

• Redução dos custos de desenvolvimento (simplificar código, separação entre apresentação e conteúdo).
• Redução dos custos de manutenção (menos código, código modular). O conteúdo pode ser facilmente re-estilizado sem alteração de código.
• Redução dos custos de hosting (utilização de banda - redução do tamanho e tráfego de arquivos).
• Facilidade em manter a consistência visual entre os documentos do mesmo site.
• Ampliação da audiência. Proporcionar web sites acessíveis a uma gama maior de pessoas e um número maior de devices/aparelhos/ferramentas para Internet. Suporte a usuários de equipamentos wireless e PDA sem necessidade de despender tempo e dinheiro no desenvolvimento de diferentes versões da aplicação/website.
• Melhor experiência do usuário. Sites mais funcionais. Carregamento mais rápido do conteúdo e menores problemas com incompatibilidades com navegadores.
• Melhor posicionamento em ferramentas de buscas.
• Garantir a viabilidade ao longo do tempo de qualquer documento web, à medida que os navegadores evoluem, e novos produtos surgem no mercado.
• Aumento na percepção de qualidade do trabalho produzido. Confere vantagem competitiva em relação aos desenvolvedores e empresas que não adotaram ainda desenvolvimento baseado nos Web Standards.
• Acessibilidade. Estar em conformidade com as leis e diretrizes (sites de instituições públicas) possibilitando o acesso a pessoas portadoras de necessidades especiais através de browser especiais.

O W3C (World Wide Web Consortium), juntamente com outros grupos e organismos reguladores, estabeleceu tecnologias para criação e interpretação de conteúdo para a Web. Estas tecnologias, a que chamamos Web Standards, têm como objetivo principal fazer com que o conteúdo desenvolvido dentro destes padrões possa ser visualizado independente do equipamento (computador, PDA, celular), do tipo do navegador (IE, Mozilla, Opera, Netscape, etc) e da forma (banda de conexão) com que o usuário estiver acessando a Internet. É um conceito de acessibilidade estendido.

Os standards ou padrões atuais são:

Linguagens Estruturais

• Extensible Hypertext Markup Language (XHTML) 1.0
• XHTML 1.1
• Extensible Markup Language (XML) 1.0

Linguagens de Apresentação

• Cascading Style Sheets (CSS) Level 1
• CSS Level 2
• CSS Level 3

Modelo de Objeto

• Document Object Model (DOM) Level 1 (Core)
• DOM Level 2

Linguagens de Script

• ECMAScript 262 (a versão padrão do JavaScript)

Linguagens de Apresentação Adicionais (Marcação)

• Mathematical Markup Language (MathML) 1.01
• MathML 2.0
• Scalable Vector Graphics (SVG) 1.0