MINISTRIO DA EDUCAO SECRETARIA DE EDUCAO PROFISSIONAL E TECNOLGICA CENTRO FEDERAL DE EDUCAO TECNOLGICA DE BENTO GONALVES

DESENVOLVENDO SITES ACESSVEIS

- Manual do Desenvolvedor -

SIEP NCLEO CEFET-BG

Dezembro de 2007.

NDICE
SOBRE OS AUTORES CAPTULO 1 WEB PARA TODOS CAPTULO 2 WEB SEMNTICA AS TRS CAMADAS DE UM DOCUMENTO WEB MODERNO W3C ESCREVENDO CDIGO SEMNTICO CAPTULO 3 XHTML CAPTULO 4 INTRODUO AO CSS CAPTULO 5 APLICANDO CSS SELETORES CAPTULO 6 TABLELESS CAPTULO 7 AJAX ACESSVEL CAPTULO 8 SWFOBJECT CAPTULO 9 ACESSIBILIDADE NO FLASH ACESSIBILIZANDO O DOCUMENTO REFERNCIAS BIBLIOGRFICAS 3 4 4 16 16 19 20 20 23 23 31 31 54 54 54 56 56 58 58 61 61 66 66 66 73

SOBRE OS AUTORES
ANDRA POLETTO SONZA
Graduada em Cincia da Computao, pela Universidade de Caxias do Sul RS; Especialista em Psicopedagogia Institucional pela Universidade do Sul de Santa Catarina SC; Mestre em Educao, Doutoranda em Informtica na Educao; Educadora Especializada do Centro Federal de Educao Tecnolgica de Bento Gonalves RS, desenvolvendo atividades de coordenao do Ncleo de Atendimento s Pessoas com Necessidades Especiais (NAPNE), Ncleo da Ong RedEspecial Brasil, Infocentro Acessvel e Ncleo do SIEP (Sistema de Informao da Educao Profissional e Tecnolgica), alm de atuar em cursos de Informtica para deficientes visuais.

ANDR GUSTAVO ESPEIORIN

Desenvolvedor Freelancer multiplataforma, Graduando em Cincia da Computao, atua na rea de desenvolvimento web desde maro de 2006, onde seus destaques esto na anlise de sistemas, programao PHP OO e Java, alm de desenvolvimento XHTML/CSS, autodidata em linguagens de programao, acessibilidade e padres.

CARLOS ALBERTO TRISTACCI

Coordenador de Projetos Web da Infowebdesign certificado como Adobe Certified Professional Flash Developer. Graduando em Administrao com nfase em Marketing, trabalha na rea de internet desde 2003, na qual se destaca pelos conhecimentos nas tecnologias Flash e Flex e na linguagem ActionScript. Ministra aulas de webdesign desde 2004, articulista do portal imasters.com.br e participa de projetos do MEC, no desenvolvimento de sites e sistemas acessveis, seguindo as recomendaes da W3C.

CAPTULO 1 Web para Todos

Devido a limitaes sensoriais, cognitivas ou fsicas, algumas pessoas so impossibilitadas de acessar os recursos de hardware ou software que o mundo digital oferece (Hogetop e Santarosa, 2002). Para compens-las, existem prteses chamadas de Tecnologia Assistiva (TA) ou Ajudas Tcnicas (AT), dependendo da influncia norte-americana ou europia, respectivamente. Seu conceito refere-se ao conjunto de artefatos disponibilizados s pessoas com necessidades especiais (PNES), que contribuem para proporcionar-lhes uma vida mais independente, com mais qualidade e possibilidades de incluso social (Bersch e Tonolli, 2006). Mas apesar das inmeras vantagens que tais ferramentas fazem emergir, novos obstculos so impostos s pessoas que possuem alguma limitao, dificultando e, at mesmo, impossibilitando acesso aos ambientes virtuais. O que ocorre que usurios que possuem limitaes, ao interagirem em sites, portais e demais ambientes virtuais, muitas vezes tm dificuldades de acesso, navegao ou no compreendem as informaes veiculadas. Nossa contribuio nesse artigo refere-se aos conceitos de qualidade de uso de sistemas, norteados pelas diretrizes do W3C (World Wide Web Consortiun) e sugestes para a construo de ambientes acessveis, com uma boa usabilidade e comunicabilidade, especialmente para usurios deficientes visuais. O tributo desses ltimos foi e tem sido fundamental para a modelagem de sistemas que realmente permitem o acesso, a navegao e comunicam de forma eficaz seu contedo. Assim, o CEFET Bento Gonalves, por ser o Ncleo de Acessibilidade do Sistema de Informaes da Educao Profissional e Tecnolgica vem trazendo esses conceitos para seu trabalho de testes e auxlio na acessibilizao dos sites e portais do domnio MEC.

1) TECNOLOGIAS ASSSITIVAS
Como j mencionado, algumas pessoas precisam utilizar auxlios para ter acesso ao computador e, consequentemente, web. Esses dispositivos/programas so tambm referenciados como Agentes de Usurio nas diretrizes do W3C. O Agente de usurio refere-se ao hardware ou software utilizado para acesso ao contedo web. Inclui navegadores grficos, navegadores de texto, navegadores de voz, celulares, leitores de multimdia, suplementos para navegadores, alm de leitores de tela e programas de reconhecimento de voz. Dentre as TAs para usurios com limitaes visuais destacamos o Dosvox , interface que se comunica com o usurio, em portugus, por meio de sntese de voz e os leitores de tela. Esses ltimos so programas que interagem com o Sistema Operacional, reproduzindo, de forma sonora, os eventos ocorridos no computador. Virtual Vision, Jaws e Orca so trs leitores de tela, com sntese em portugus, bem aceitos no Brasil. J o Terminal ou Linha Braille um equipamento eletrnico que possui uma linha rgua de clulas Braille, cujos pinos se movem para cima e para baixo e representam uma linha de texto da tela do computador. Pode ser utilizado inclusive por usurios surdocegos.

Pessoas com limitaes motoras tambm podem fazer uso de tecnologias assitivas, como os teclados adaptados, de acordo com suas especificidades. Alguns exemplos de teclados diferenciados so: ampliado, reduzido, de conceitos, para uma das mos, ergonmico, dentre outros. Esses usurios podem tambm utilizar a colmia, que uma placa de plstico ou acrlico com um orifcio correspondente a cada tecla, que fixada sobre o teclado (Damasceno e Filho, 2002). Outros exemplos so pulseiras de pesos, apontadores de cabea e mouses e acionadores diversos. Dentre esses destacamos o mouse de ocular (Projeto Mouse Ocular, 2005), o mouse de sopro (Jouse, 2006), o mouse de nariz ou HeadDev (Ajudas.Com, 2006) e o acionador de pedal (Ausilionline.it, 2006). Usurios com limitaes motoras tambm podem fazer uso de simuladores de teclado, que so programas que simulam um teclado na tela do computador. Pessoas com tetraplegia ou limitaes motoras severas podem utilizar o Motrix. O sistema permite que o usurio fornea comandos de voz para a maior parte das funes do computador. (Projeto Motrix, 2002). Aps apresentarmos alguns agentes de usurio utilizados por pessoas com limitaes visuais ou motoras - informaes importantes para justificarmos a necessidade de uma web verdadeiramente acessvel - passamos a referenciar a semntica na web alm de conceitos de qualidade de uso de sistemas.

2) PADRES DE DESENVOLVIMENTO WEB E WEB SEMNTICA

Quando tratamos de definio e arquitetura para implementao de interfaces web, sabemos que atualmente diferentes formatos de arquivos podem ser disponibilizados na rede; mas tudo comeou com o HTML. Conforme Silva (2007), o embrio dessa linguagem de marcao surgiu para servir a uma comunidade bastante restrita, a comunidade de cientistas. Com a introduo gradativa de novas tags, atributos e aplicaes especficas, essa linguagem tornou-se padro mundial de apresentao de contedo na web. E "a velha linguagem de marcao passou a exercer uma dupla funo: estruturar o contedo atravs da marcao e apresent-lo, ou seja, dar a aparncia final" (SILVA, 2007). S que essa dupla funo comeou a causar problemas: os documentos publicados na Internet, cada vez mais sofisticados e extensos, estavam fugindo do controle de seus criadores (ibidem). Essa problemtica ocorre porque o HTML no foi concebido para usos to amplos quanto aquele que as tecnologias atuais requerem, sendo limitado no que tange aplicao de forma ao documento. Para solucionar esse problema os desenvolvedores web passaram a utilizar tcnicas no comuns de uso dos comandos HTML, como: tabelas com bordas transparentes para dispor os elementos na pgina, uso de comandos que no eram padro no HTML para efeitos de formatao, dentre outros. Acontece que "essas 'trapaas' causaram problemas nas pginas na hora de sua visualizao em distintas plataformas" (CRIARWEB, 2008). Alm disso, essa mistura entre contedo e apresentao tornou-se uma grande dor de cabea aos desenvolvedores (SILVA, 2007). S para dar um exemplo: se tivessem que alterar a cor de todos os ttulos de um site com 180 pginas teria que faz-lo em cada uma das linhas que apresentasse esses ttulos. O tempo gasto para essa alterao, que parece to simples, acabava sendo bastante grande. A soluo encontrada foi dissociar linguagem de marcao da estilizao. Surgiram assim as chamadas Folhas de Estilo.

As Folhas de Estilo em Cascata (Cascading Style Sheets) ou CSS referem-se ao conjunto de declaraes que especificam a apresentao do documento. Trata-se de uma linguagem de estilo utilizada para definir a apresentao de documentos escritos em uma linguagem de marcao, como HTML ou XML. Seu principal benefcio prover a separao entre o formato e o contedo de um documento. Trata-se de um arquivo, independente do arquivo HTML, no qual so declaradas todas as propriedades e valores de estilizao para os elementos do HTML (SILVA, 2007). O efeito cascata das folhas de estilo refere-se ao estabelecimento de uma prioridade para aplicao de uma regra de estilo a determinado elemento ou grupo de elementos (SILVA, 2007). Tangarife e Montalvo (2006) referem que a utilizao do HTML juntamente com folhas de estilo para publicao de contedo na web, conforme recomendaes do W3C podem ampliar o acesso informao. Assim, "codificao correta e uso adequado das marcaes HTML so condies necessrias ao desenvolvimento de tecnologias web-acessveis, bem como a separao entre estrutura e apresentao" (TANGARIFE e MONT'ALVO, 2006). O exposto pelos autores refere-se aos web Standards ou padres de desenvolvimento web. Um site projetado de acordo com esses padres deve estar em conformidade com as normas HTML, XML, XHTML, CSS, etc e com o cdigo de programao vlido, acessvel, semanticamente correto e amigvel. Esses autores destacam alguns pontos primordiais, quando do desenvolvimento de sistemas web, quais sejam: a codificao correta e uso adequado das marcaes XHTML (tags); a utilizao de Tableless, ou seja, metodologia que no utiliza tabelas para a construo de layout; a separao entre layout e contedo, levando em considerao a semntica do cdigo (X) HTML. Nesse contexto, separa-se a informao da formatao - a informao da interface apresentada em (X) HTML e a sua formatao apresentada por meio de CSS (folhas de estilo). Segundo Pereira (2006), escrever algo semanticamente correto, nada mais do que utilizar-se desses smbolos, ou tags, considerando o significado real pelo qual foram criados, ou seja, utilizar a tag certa no lugar certo. "E utilizar as tags no sentido correto igual a 'cdigo semntico', que por sua vez justifica o termo 'web Standards'. Seguir os 'web Standards' respeitar a semntica" (PEREIRA, 2006).

3) ACESSIBILIDADE WEB
De acordo com Cifuentes (2000), Caplan (2002) e Dias (2003), entende-se por acessibilidade rede a possibilidade de qualquer indivduo, utilizando qualquer tipo de tecnologia de navegao (navegadores grficos, textuais, especiais para cegos ou para sistemas de computao mvel), poder visitar qualquer site e obter um total e completo entendimento da informao contida nele, alm de ter total e completa habilidade de interao. Se formos pensar nas vantagens relacionadas acessibilidade, podemos destacar: - Quantidade de usurios com alguma limitao: De acordo com a OMS (Organizao Mundial de Sade), 10% da populao mundial possui alguma deficincia. Em pases subdesenvolvidos como o Brasil, esse percentual pode chegar a 14,5%. Assim, o Brasil, que possui uma populao aproximada de 180 milhes de brasileiros, teria cerca de 25,9 milhes de PNES.

- Referindo-nos ao mundo dos negcios, podemos dizer que consumidores deficientes (assim como qualquer outro) so inclinados a realiz-los onde so bem-vindos. Alm disso, designs acessveis so mais fceis de serem utilizados por qualquer usurio, independente de possuir ou no alguma limitao. - Um portal web acessvel indexado de forma mais rpida e precisa pelos mecanismos de busca. Isso faz com que os usurios o localizem com maior rapidez e facilidade. Triacca (2007) refere que quanto melhor a colocao do site, mais visitas ele ter. Segundo ele, o Google determina os sites que aparecero melhor posicionados no resultado de nossas pesquisas, visitando semanalmente nosso site, e, quanto mais atualizados ele estiver, melhor classificao na busca ele ter. S que o Google precisa conseguir ler o site. E para isso ele precisa de contedo, muito contedo e a melhor forma de conseguir isso por meio do uso de pouco cdigo na marcao, "e para isso existem os Web Standards [...] que separam estruturao de estilizao" (TRIACCA, 2007). Assim, quanto mais acessvel for o site, melhor cotado ele ser pelo Google e, conseqentemente, mais visitas ter. - Adotar recomendaes de acessibilidade faz com que o portal seja acessado tanto pelas tecnologias mais modernas, como a computao mvel, por exemplo, como pelas mais antigas, atingindo assim um maior contingente de visitantes. - Razes pessoais tambm devem ser levadas em considerao quando do desenvolvimento dos projetos. Com conhecimentos adquiridos relativos acessibilidade, o projetista passa a ter maior experincia com as linguagens hipertextuais, tornando-se, assim, um profissional mais ajustado s demandas da Sociedade da Informao. - Cumprimento de medidas legais: A Lei 10.048/2000 d prioridade de atendimento s pessoas que especifica (BRASIL, 2000[1]), no caso s pessoas com necessidades especiais. J a Lei 10.098/2000, estabelece normas gerais e critrios bsicos para a promoo da acessibilidade s pessoas com deficincia ou mobilidade reduzida (BRASIL, 2000[2]). Tambm, o Decreto 5.296/2004, que regulamenta as leis anteriores, versa, pela primeira vez no Brasil, especificamente sobre acessibilidade na Internet. Em seu captulo VI, no artigo, 47 torna obrigatria a acessibilidade dos portais e stios da administrao eletrnica para usurios deficientes visuais, estipulando um prazo de doze meses. O mesmo artigo prorroga esse prazo por mais um ano, no caso de portais e sites muito complexos. Assim, o prazo, j prorrogado, expirou em dezembro de 2006. 3.1) Diretrizes para o desenvolvimento de pginas acessveis O W3C publicou, em maio de 1999, as Diretrizes para Acessibilidade do Contedo Web 1.0 (Web Content Accessibility Guidelines - WCAG 1.0), sendo, at hoje, a principal referncia em termos de acessibilidade web no mundo. De acordo com UTAD/GUIA (1999), o documento pretende explicar como tornar o contedo web acessvel a pessoas com deficincias. As diretrizes so: Diretriz 1 - Fornecer alternativas equivalentes ao contedo sonoro e visual; Diretriz 2 - No recorrer apenas cor; Diretriz 3 Utilizar corretamente anotaes e folhas de estilo; Diretriz 4 - Indicar claramente qual o idioma utilizado; Diretriz 5 - Criar tabelas passveis de transformao harmoniosa; Diretriz 6 - Assegurar que as pginas dotadas de novas tecnologias sejam transformadas harmoniosamente; Diretriz 7 - Assegurar o controle do

usurio sobre as alteraes temporais do contedo; Diretriz 8 - Assegurar a acessibilidade direta de interfaces de usurio integradas; Diretriz 9 - Pautar a concepo pela independncia em face de dispositivos; Diretriz 10 - Utilizar solues de transio; Diretriz 11 - Utilizar as tecnologias e as diretrizes do W3C; Diretriz 12 - Fornecer contexto e orientaes; Diretriz 13 - Fornecer mecanismos de navegao claros; Diretriz 14 - Assegurar a clareza e a simplicidade dos documentos. Em maio de 2007, foi lanado, no site da W3C, um esboo da WCAG 2.0 - (W3C, 2007), segunda verso das Diretrizes de Acessibilidade. Essa verso est baseada em quatro princpios: 1)Princpio da percepo: o contedo deve ser perceptvel ao usurio; 2) Princpio da operao: os elementos de interface do usurio devem ser operveis; 3) Princpio da compreenso: o contedo e controles devem ser compreensveis ao usurio; 4) Princpio da robustez o contedo deve ser robusto suficiente para trabalhar com tecnologias atuais e futuras: maximizar a compatibilidade com agentes de usurios atuais e futuros, incluindo tecnologias assistivas. Como podemos perceber, tais diretrizes/princpios so um tanto subjetivos, o que dificulta seu entendimento. Alguns autores como Soares (2007), Gomes (2007), dentre outros, questionam sua eficcia. Gomes (2007) refere que as diretrizes da WCAG 2.0 ainda esto em fase de reviso e que as regras e recomendaes disponibilizadas no so fceis de compreender porque esto escritas em uma forma demasiado genrica. Segundo o autor, a verso 2.0 das diretrizes buscou torn-las tecnicamente neutras para que fossem aplicadas a diversos tipos de elementos, inclusive queles que possam aparecer no futuro; s que isso dificulta bastante a prpria percepo das recomendaes. Por essas razes muitos autores desistiram da WCAG 2.0 e formaram o grupo WCAG Samurai. A idia do WCAG Samurai foi de criar uma Errata para o WCAG 1.0, de modo que seja possvel utilizar essa verso do documento (1.0), mas adaptada tecnologia atual (GOMES, 2007). Em junho de 2007 foi lanada a primeira verso da Errata, apesar de no ser a verso final (WCAG Samurai, 2007). De acordo com Gomes (2007), as principais alteraes efetuadas no WCAG 1.0 foram: eliminao de termos como evite usar e substituio por uma linguagem mais incisiva como: no use ou obrigatrio ter; eliminao das regras de Prioridade 3, por serem praticamente inexequveis; passa a ser obrigatrio o respeito s recomendaes das Prioridades 1 e 2. Isso significa que obrigatrio ter cdigo vlido em todos os casos; no foram adicionadas novas regras para deficincias cognitivas. Tanto o WCAG 1.0 como o WCAG 2.0 possuem falhas atinentes a esse ponto e o WCAG Samurai no certifica que, mesmo seguindo todas as regras, o website seja acessvel para pessoas com este tipo de deficincia, como o caso da dislexia; o uso de tabelas e frames para layout completamente banido, no entanto podem ser utilizados ainda os iframes ; fim do noscript . Todos os scripts e applets mais conhecidos como AJAX e Flash , na maioria dos casos, devem ser diretamente acessveis ao invs de utilizar a tcnica do noscript; tudo o que estiver disponvel em formato PDF deve tambm estar disponvel em HTML; todos os vdeos com som devem ter legendas ou audio descrio (dependendo dos contedos). Em nvel de Brasil, na Cartilha Tcnica do Manual de Acessibilidade do Governo Eletrnico (eMAG, 2005), constam oito diretrizes tcnicas de acessibilidade, baseadas na WCAG 1.0, mas adaptadas nossa realidade: Diretriz 1: fornecer alternativas equivalentes para contedo grfico e sonoro; Diretriz 2: assegurar-se de que o site seja legvel e compreensvel mesmo sem o uso de

formataes; Diretriz 3: dar preferncia s tecnologias de marcao e formatao; Diretriz 4: assegurar que toda a informao seja interpretada corretamente, com clareza e simplicidade; Diretriz 5: assegurar que as tecnologias utilizadas funcionem de maneira acessvel independente de programas, verses e futuras mudanas; Diretriz 6: assegurar sempre o controle do usurio sobre a navegao do site; Diretriz 7: identificar claramente quais os mecanismos de navegao; Diretriz 8: em casos no contemplados pelas diretrizes anteriores, utilizar sempre recursos reconhecidos por instituies com propriedade no assunto, como tecnologias acessveis. 3.2) Validaes de Ambientes Virtuais De acordo com eMAG (2005), as diretrizes de acessibilidade, por si s, no garantem a acessibilidade, tratam-se apenas de pontos orientadores para que os requisitos de acessibilidade sejam cumpridos. Assim, aps atentar para os quesitos de acessibilidade, o desenvolvedor de pginas web dever realizar a validao das mesmas. Ela obtida por meio de testes, utilizando mecanismos automticos e manuais e deve estar presente desde as fases iniciais de seu desenvolvimento. Validao Automtica: o desenvolvedor da pgina pode verificar se esta cumpre com as diretrizes de acessibilidade por meio de um validador on line, que um servio em linha, um software que detecta o cdigo HTML de uma pgina web e analisa seu contedo, normalmente baseado na iniciativa de acessibilidade do W3C (SOARES, 2005[1]). O validador ajuda a comprovar se a interface foi desenvolvida utilizando os padres web de acessibilidade. Em caso negativo, aponta onde est o problema. Os mtodos automticos so geralmente rpidos, mas no so capazes de identificar todos os aspectos da acessibilidade. Esses programas verificadores esto disponveis na Internet. So alguns exemplos de verificadores automticos: WebXACT (antigo BOBBY) - (ingls); Cyntia - (ingls); Lift - (ingls); W3C (ingls); Valet - (ingls); Ocawa - (ingls); TAW - (espanhol); Da SILVA - (portugus); eXaminator (portugus); Hera - (portugus). Caso a pgina esteja acessvel, o programa avaliador conceder um selo de acessibilidade denotando o nvel de conformidade alcanado. De acordo com Soares (2005[1]) e (2005[2]), apesar de teis, os validadores automticos no so perfeitos e muito menos inteligentes. Uma validao automtica pode avaliar apenas algumas das regras, e no todas. Os selos de acessibilidade fornecidos por esses programas no so garantia de acessibilidade; e da mesma forma, um site que no possui selo pode ser acessvel. O autor continua referindo que, apesar da utilidade desses softwares, eles no podem substituir uma boa avaliao manual. Validao Manual: outra etapa de avaliao de acessibilidade de um site, recomendada pelo W3C (W3C, 2005) a avaliao manual. Esta necessria, pois nem todos os problemas de acessibilidade de um site so detectados mecanicamente por meio dos verificadores automticos. A existncia de um bom contraste entre o fundo e o primeiro plano, por exemplo, s pode ser verificada por um ser humano (EVALDT, 2005). Alm disso, conforme destaca Dias (2003), a avaliao humana pode ajudar a garantir a clareza da linguagem e a facilidade de navegao.

10

Alm de permitirmos o acesso aos usurios com alguma limitao, torna-se importante tambm garantir uma boa navegabilidade e clareza das informaes veiculadas; por isso trazemos dois novos conceitos: usabilidade e comunicabilidade aplicadas acessibilidade. 3.3) Usabilidade aplicada na Acessibilidade Um conceito que comea a ser utilizado na atualidade o da Usabilidade aplicada Acessibilidade. Tal prtica amplia o entendimento de acessibilidade virtual ao mencionar a importncia no apenas de se aplicar as recomendaes do W3C, mas tambm de se tornar os ambientes fceis de usar para todos, ou seja: "aplicar usabilidade nos sites para torn-los verdadeiramente acessveis" (SPELTA in SOARES, 2005[2]). Ao trazer o termo Usabilidade na Acessibilidade, Amstel (2006) refere: o princpio bsico da web acesso por qualquer tipo de pessoa, em qualquer lugar, mas so poucos os websites que seguem esse princpio. Ora por incompetncia tcnica, ora por desinteresse comercial, a maioria dos criadores de websites ignora boas prticas que viabilizam o acesso informao (acessibilidade) e seu uso (usabilidade) por pessoas com necessidades especiais (AMSTEL, 2006). O mesmo autor tambm destaca que "acessibilidade e usabilidade so condies bsicas para a incluso social digital" (AMSTEL, 2006). Soares (2005[2]) endossa o exposto acima ao mencionar: No basta ter uma pgina web acessvel, importante que ela tambm seja fcil de usar e entender. A diferena entre teoria e prtica grande quando o assunto desenvolvimento de sites acessveis. De um lado do rio encontra-se uma pgina web com todas as regras de acessibilidade aplicadas exatamente como nas cartilhas, guias e recomendaes do W3C, e do outro lado, uma pgina verdadeiramente acessvel (ibidem). Queiroz (2006[1]) complementa referindo que no basta incluirmos na codificao de uma pgina etiquetas ou atributos do modo a torn-la acessvel; preciso imergir na lgica da navegao dessa pgina via teclado, para que sua utilizao fique fcil e confortvel. Dessa forma, segundo ele, o conceito de acessibilidade une-se ao de usabilidade. O autor destaca que ao confeccionarmos pginas amigveis, via teclado, e permitirmos o uso de teclas de atalho, obteremos uma boa usabilidade e atingiremos um timo percentual de acessibilidade, no apenas para pessoas cegas, como para aquelas com alguns tipos de limitaes fsicas, alm de propiciar uma navegao mais rpida, fcil e eficiente a todos. Segundo esse autor preciso ter sempre em mente que existem usurios que navegam apenas por meio do teclado, como o caso de pessoas com limitao motora ou visual. Quando isso ocorre, o deslocamento do foco nos links e objetos da pgina, por padro, se realizam de cima para baixo e da esquerda para a direita, e os comandos so lidos sequencialmente pelo navegador e softwares de leitura.

3.4) Comunicabilidade aplicada na Acessibilidade

11

Uma funcionalidade imprescindvel para que um ambiente respeite os padres de acessibilidade refere-se utilizao de equivalentes textuais para todo o contedo no textual. Assim, imagens de figuras, fotografias, botes, animaes, linhas horizontais separadoras, mapas, filmes, sons... devem ser acompanhados de uma descrio textual; s que essa descrio deve ser equivalente, ou seja, deve transmitir "as mesmas informaes que os elementos disponibilizados" (QUEIROZ, 2006[2]), pois ser por meio dela que o usurio que no enxerga ter o entendimento de seu contedo. O equivalente textual tem a funo de traduzir em texto, em linguagem clara e simples, a imagem ou som, especialmente se os mesmos possurem uma funcionalidade. Quando procedemos dessa forma, estamos realmente comunicando ao usurio, com limitao visual, o contedo daquela imagem ou ao usurio com limitao auditiva, o contedo daquele som. A inteno, quando se refere que o contedo no textual seja disponibilizado tambm em forma textual, no caso de usurios com limitaes visuais, "se deve necessidade que um leitor de telas tem para transmitir as informaes, uma vez que no consegue ler nada alm de textos" (QUEIROZ, 2006[2]). Em caso de imagens decorativas, a equivalncia textual deve existir nula. Isso evita que uma pessoa cega tenha que ouvir informaes desnecessrias, causando o problema conhecido como verborragia (QUEIROZ, 2007). Quando uma pequena descrio no suficiente para a compreenso de todo o contedo constante na imagem, preciso utilizar outro recurso. Queiroz (2006[2]) traz um exemplo de uma imagem que apresenta a populao de cada capital brasileira um mapa de imagem. Nesse caso, a imagem dever ter um equivalente textual (descrio), com um pequeno texto do tipo: Populao das capitais brasileiras. Como complemento, preciso agregar uma pgina em HTML com todas as capitais e suas respectivas populaes, que poder ser acessada por meio da prpria imagem ou por tcnicas no perceptveis aos usurios que estejam navegando com o mouse, como um link com uma imagem transparente, por exemplo. Dessa forma, o mapa de imagem pode ser visualizado normalmente por usurios que enxergam, sem agregar informaes desnecessrias aos mesmos e tambm estar acessvel aos usurios que utilizam leitores de tela. Assim, quando tratamos do processo de comunicao desenvolvedor X usurio final, para que haja clareza no contedo veiculado, precisamos ter bem presentes o contedo que desejamos comunicar e, no caso de usurios cegos, o que ser sonorizado pelos leitores de tela. Queiroz (2006[2]) destaca tambm que se o logotipo de uma empresa tiver apenas a funo de anunci-la, sua descrio deve ser apenas algo como Logotipo da <nome da empresa>, sem a necessidade da descrio visual do logotipo. E ainda, se esse logotipo for tambm um link que remete, por exemplo, para a pgina principal, nas pginas internas em que o mesmo aparece, ele deve estar descrito como: Voltar para a Pgina Principal ou outra descrio que traduza sua real funo. Ainda relativo utilizao de linguagem clara e simples para as descries dos links, Queiroz (2006[2]) refere que pessoas cegas, normalmente, utilizam duas formas de navegao (leitura no interior dos sites): a leitura corrida de todo o texto que se encontra na pgina ou a leitura sinttica, que a que percorre apenas os links e campos de formulrio. Essa ltima utilizada quando os usurios desejam obter um resumo do contedo total do site. Esse procedimento realizado, a partir do incio da pgina, utilizando a tecla Tab. A pgina percorrida link a link ou por campos de formulrio, pulando-se os textos, imagens e tudo o que no for link ou campo de formulrio. Assim o deficiente visual vai escutando,

12

por meio do leitor de telas, ou tateando, por meio do monitor Braille, os textos contidos nos links. O que ocorre que so muito utilizadas para nomear links expresses do tipo: Saiba Mais, Clique Aqui, Leia Mais... Quando um deficiente visual encontra uma expresso desse tipo no link, no pode continuar sua navegao por links, "pois tal texto no completo e suficiente para ele ter conhecimento sobre o que ele deve saber mais, ou mesmo por que ele deve clicar naquele link" (QUEIROZ, 2006[2]). A pessoa com limitao visual deve interromper a leitura rpida (por links), posicionar seu leitor de telas algumas linhas antes e proceder a uma nova leitura, s que detalhada. Assim, uma linguagem clara significa, nesses casos, "o texto do link ter uma continuidade", que explicita o texto anterior (ibidem), como, por exemplo: Leia Mais Notcias. Funcionalidades que agregam objetos programveis, como scripts e applets, so outros tipos de elementos no textuais. So escritos em linguagens diferentes ao HTML, objetivando criar na interface um comportamento dinmico ou interativo, como Java ou Flash. Esses elementos possuem uma dificuldade para serem disponibilizados em um formato acessvel (QUEIROZ, 2006[2]). Diante disso, se no for possvel evit-los, preciso que haja uma descrio equivalente tambm nesses casos. Alm da clareza na descrio equivalente de elementos no textuais e links, preciso assegurar que a interface, como um todo, apresente uma linguagem simples e clara a todos os perfis de usurio, permitindo assim o rpido entendimento do contedo da pgina. Para que isso ocorra, Queiroz (2006[2]) sugere: que seja realizada uma criteriosa reviso do texto; que sejam utilizados ttulos pertinentes, que se divida o texto em pargrafos afins, utilizando cabealhos que definam o contedo a seguir; que se forem utilizadas palavras desconhecidas, especficas de determinada matria, seja criado um glossrio de fcil acesso, para que a linguagem do texto seja compreendida pelo maior nmero de pessoas possvel; que abreviaturas sejam evitadas ou que sejam utilizadas marcaes que faam o leitor de telas ler por extenso tais abreviaturas; que seja utilizado um corretor ortogrfico e que seja verificada a pontuao, pois os leitores de tela reproduzem exatamente o contedo do texto escrito. O autor tambm refere que a importncia da pontuao toma dimenses ainda maiores quando so utilizados sintetizadores de voz, pois os mesmos identificam a pontuao por meio de pausas, silncios na voz, por vezes quase imperceptveis. Assim, um ponto tem um tempo de silncio, a vrgula tem um tempo menor que o ponto e tempos mais fracionados ainda so usados para o ponto e vrgula e a vrgula. E "a exclamao e a interrogao tm sonoridades semelhantes ao que representam, tanto quanto a reticncias" (QUEIROZ, 2006[2]).

4) PONTOS IMPRESCINDVEIS PARA AMBIENTES COM QUALIDADE DE USO

Tomando como base o referencial terico atinente acessibilidade web, as interaes at hoje realizadas com usurios deficientes visuais (SONZA, 2007), (SONZA, 2008) e o trabalho do Ncleo do SIEP no CEFET BG, passamos a mencionar os itens que consideramos imprescindveis para que uma interface atenda acessibilidade, usabilidade, comunicabilidade. Aps a interface ser implementada de acordo com os padres de desenvolvimento web, utilizando cada comando com seu real propsito e separando layout de contedo, fundamental atentar para:

13

Acessibilidade: Etiquetagem: para que a pgina possa ser lida pelos leitores de tela, preciso fornecer alternativas ao contedo visual. Diante da multiplicidade e constante expanso de recursos e possibilidades que o mundo web hoje nos oferece, explicitaramos e complementaramos essa necessidade da seguinte forma: utilizar uma descrio clara e significativa, condizente com o contedo que agrega, para imagens, mapas de imagens, links, botes, caixas de listagem, frames e qualquer elemento no textual da interface Quando falamos de etiquetagem no podemos esquecer das animaes em Flash recurso amplamente utilizado atualmente, seja em sites, portais ou ambientes de aprendizagem. Quando da existncia desses eventos preciso inserir uma descrio inclusive nos botes e controles internos, objetivando sua devida leitura com os agentes de usurio Caso haja a necessidade de disponibilizao de arquivos, como aqueles em PDF, preciso inserir outros formatos, como TXT e/ou DOC com todo o contedo no textual devidamente descrito/adaptado. Isso permite o acesso com navegadores textuais, alm do entendimento completo de todos os elementos que compem o arquivo. Uso adequado das folhas de estilo: por uso adequado de folhas de estilo referenciamos: separar completamente apresentao (estilo visual) e contedo de uma interface evitando assim a chamada Poluio Sonora (leitura de itens desnecessrios ao usurio de leitor de telas), tornando-a mais leve e permitindo sua interao tambm com agentes de usurio cuja leitura possvel apenas aquela propiciada por interfaces programadas em (X) HTML. Como destaca Silva (2007) alm de a interface no apresentar erros tanto no arquivo HTML como no(s) CSS, preciso que todos os elementos de estilizao sejam programados nos arquivos de folhas de estilo, deixando para o arquivo HTML a tarefa exclusiva de marcar e estruturar o contedo do documento. Navegao por teclado: a interface deve prever a navegao independente de dispositivos. No caso dos deficientes visuais, o uso do teclado imprescindvel, por isso necessrio permitir a navegao via teclado em todos os elementos da pgina, inclusive nas caixas combinadas, caixas de contexto, caixas de listagem e aqueles programados em JavaScript e Flash. Usabilidade: Cores, Redimensionamento e Contraste: alm de no recorrer apenas cor para veicular informaes e utilizar um bom contraste entre fundo e primeiro plano, preciso oferecer na interface opes de alterao de contraste e de redimensionamento dos elementos que a compem, visto que existem usurios com baixa viso e outros com cromodeficincias que podero necessitar de outras combinaes de cores e/ou sentiro maior conforto com os elementos da interface ampliados. Atalhos: fornecer atalhos por teclado do tipo: Ir para Menu, Ir para Contedo, Ir para a Pgina Principal, Voltar para a Pgina Anterior, alm de ncoras para locais especficos da interface. Contexto, orientao e auxlio para a navegao: fornecer contexto e orientaes, inclusive um feedback, ou seja, localizao do usurio na interface. Alm de dividir a interface por blocos mais fceis de gerir, preciso tambm propiciar a orientao na interface por esses blocos ou partes onde cada um esteja devidamente identificado, alm da indicao de incio e fim de cada bloco. Para o usurio

14

de leitor de telas, a leitura realizada de forma seqencial, sob a forma de links, textos, caixas, botes. Assim, muitas vezes, eles no diferenciam as informaes/ferramentas contidas nos menus daquelas que so apenas links. Para o usurio normo-visual, o menu fica claramente identificvel devido ao destaque que dado ao mesmo e ao seu posicionamento, geralmente no lado esquerdo e/ou na parte superior da tela. A insero dessa informao agiliza e facilita a navegao, sendo um quesito importante para a usabilidade da interface. Tambm fundamental, alm de fornecer informaes sobre a organizao geral de um ambiente, como aquelas encontradas nos Mapas de Site, inserir Dicas de Navegao na interface, com os principais comandos para navegao na mesma, inclusive em conjunto com Tecnologias Assistivas. Comunicabilidade: Qualidade da etiquetagem de todos os elementos no textuais: para que o ambiente realmente comunique o que deseja, preciso que haja, no s a etiquetagem dos elementos no textuais, pura e simplesmente; mas uma etiquetagem de qualidade, que realmente transmita a informao aos usurios. Assim necessrio que seja significativa - que realmente descreva, de forma clara, precisa, objetiva e sem erros ortogrficos o contedo que agrega. Qualidade e clareza de todo o contedo: Assegurar a clareza e simplicidade em toda a interface garantir uma comunicao eficaz entre usurio e desenvolvedor. Como sinnimo de clareza e simplicidade destacamos: uso de uma linguagem simples e objetiva em toda a interface, inclusive no contedo textual, tomando o cuidado de prover uma escrita sem erros ortogrficos e com pontuao correta. Sendo assim, para um correto entendimento do contedo veiculado pontuao e ortografia corretas so fatores relevantes. preciso tambm especificar, por extenso, cada abreviatura quando de sua primeira ocorrncia visto que os usurios que acessam a interface podero no saber o significado de tais abreviaturas. Destino dos links: identificar claramente o destino de cada link, ou seja, que ele realmente descreva o item ao qual remete, pois por meio dessa descrio que o usurio de leitor de telas decidir pelo seu acesso ou no.

CONSIDERAES FINAIS
Atualmente alguns auxlios podem ser utilizados para validar a acessibilidade de uma interface. Um exemplo disso so os validadores automticos. Esses robs fornecem o selo de acessibilidade para os ambientes que respeitam as diretrizes, seja do W3C ou do e-Gov. Apesar de terem seu mrito, esses programas normalmente validam apenas a primeira pgina da interface, sendo que, se desejarmos validar as demais, teremos que realizar a validao pgina por pgina. Outra fragilidade do validador refere-se descrio dos elementos no textuais. Os validadores aceitam qualquer descrio, at mesmo caracteres em branco, verificando apenas se h uma descrio e no sua qualidade. E essa fragilidade no se resume a etiquetagem dos elementos no textuais, mas a toda a interface. Por serem automticos, os validadores no realizam uma validao semntica. Por mais modernos que sejam, nunca iro substituir uma validao manual.

15

Quando tratamos de web semntica, do uso do comando certo no lugar certo, de separao completa entre layout e contedo, de utilizao do conceito de tableless, de descrio clara e objetiva de links e de elementos no textuais, de seqncia lgica de disposio dos elementos em uma interface todos esses princpios se encontram na WCAG e nos padres de desenvolvimento web e so essas diretrizes que buscam ser verificadas pelos validadores automticos, que comparam o cdigo com cada uma das 14 diretrizes (WCAG 1.0 UTAD/GUIA, 1999) e seus respectivos subitens. O que acontece que os mesmos no verificam a semntica do cdigo, no verificam a lgica de programao embutida nas interfaces, no verificam a qualidade de descrio de links e elementos no textuais e, por isso, um rtulo selo de acessibilidade ou mesmo selo da validao do cdigo HTML ou CSS, apesar de importante, no garante uma web semntica e acessvel. Nossos estudos reafirmaram a convico de que diversos aspectos da acessibilidade, usabilidade e comunicabilidade s podero ser validados por usurios reais, ratificando a importncia da validao manual ao fortemente executada no ncleo do SIEP do CEFET BG. Utilizao de cdigos HTML e CSS vlidos, com cada comando sendo utilizado para seu real propsito e separao completa entre layout e contedo so a base para interfaces com qualidade de uso. Sobre esses pilares slidos, preciso atentar para todos os quesitos de acessibilidade, usabilidade e comunicabilidade j mencionados no aporte quatro desse artigo. Cabe destacar, entretanto, que, alm de envidar esforos no sentido de apresentar um ambiente que v de encontro aos preceitos de qualidade de uso de sistemas, sem cercear o acesso, navegao e comunicao a nenhum perfil de usurio, preciso garantir a qualidade de sua interface. Cientes de que a interveno e sensibilidade humanas so imprescindveis em todas as etapas da implementao e manuteno do mesmo, torna-se necessrio que a pessoa responsvel pela manuteno/atualizao da interface tenha bem presentes essas consideraes, para no incorrermos no erro de concebermos uma interface com essas qualidades e, na ocorrncia das primeiras atualizaes, j deixe de lado alguns aspectos. Apesar desse movimento de info-incluso, temos a convico de que estamos apenas iniciando uma longa caminhada; caminhada esta, felizmente, sem volta. Esperamos que, para um futuro bastante prximo, informatas, projetistas web, educadores e os prprios alunos com e sem necessidades especiais, imbudos em um esprito mais solidrio, mais justo e tico trabalhem juntos, em prol de um acesso igualitrio e autnomo a todos. Estamos certos de que se tivermos a oportunidade de utilizar ambientes digitais que realmente sejam acessveis pluralidade de usurios, daremos passos decisivos na senda da to sonhada incluso virtual. E esse trabalho, que se constituiu um grande e necessrio desafio, no pra por aqui...

16

CAPTULO 2 WEB SEMNTICA

Semntica a parte da gramtica que estuda o sentido e a aplicao das palavras em um contexto. ... Explicao descomplicada sobre web semntica ... Colocar origem Muitas vezes, desenvolvedores que esto acostumados a desenvolver sites utilizando tabelas estaro inclinados a criar marcao com vrias tags <div>, claramente espelhando-se em layouts estruturados com tabelas. Esta prtica chamada de divite, mas deve ser evitada. Similarmente, devemos ser cautelosos sobre a diviso de elementos nicos com tags <div>. Isto frequentemente realizado para propsitos de estilizao, mas usualmente isto destri com a marcao semntica, alm de ser totalmente desnecessrio. A tag <div> usada para criar divises na pgina, mas ao mesmo tempo utilizada para criar grupos de contedo. Por exemplo, por que fazer isto: <div id="menu"> <ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> </div> Quando podemos estruturar a pgina usando menos cdigo: <ul id="menu"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>

17

A este uso desnecessrio da tag <div> damos o nome de divite. O mesmo problema pode ocorrer comumente com desenvolvedores web ao utilizar o atributo class, ao que chamaremos de classite. O atributo class existe para que possamos utilizar a mesma esitilizao para vrios elementos em comum, mas como a divite, muitos desenvolvedores utilizam o atributo class no lugar da tag apropriada, como no exemplo: <p class="address"> John Smith<br /> 1234 Rolling Rock Rd. <br /> Albany, NY, 12345<br /> </p> O correto usar o elemento (X)HTML address, veja abaixo: <address> John Smith<br /> 1234 Rolling Rock Rd. <br /> Albany, NY, 12345<br /> </address> Desenvolvedore tem tambm a tendncia de usar o atributo class em diversos elementos que se repetem ao invs de simplificar aplicando a class para o elemento pai, veja o seguinte cdigo: <ul> <li class="cheese-type">Cheddar</li> <li class="cheese-type">Mozzarella</li> <li class="cheese-type">Parmesan</li> <li class="cheese-type">Swiss</li> </ul> Aqui uma maneira muito mais simplificada:

18

<ul class="cheese-types"> <li>Cheddar</li> <li>Mozzarella</li> <li>Parmesan</li> <li>Swiss</li> </ul> Mas, quando temos o cuidado no uso das tag <div>, <p>, <span> e o atributo class, iremos utilizar elementos (X) HTML mais apropriados, eliminando a confuso do documento e possibilitando um cdigo mais semntico, fcil de dar manuteno, leve e rpido de ser carregado pelo browser e enfim acessvel. O grande paradigma do desenvolvimento de sites e sistemas acessveis est no uso correto de cada tag para o seu respectivo contedo, como por exemplo, ao pegarmos uma citao e seu autor, como segue abaixo, de que forma devemos implementar a demarcao? Somente aquele que administra suas idias de forma livre dono de suas idias, e somente aquele que dono de suas idias no escravizado por elas. - Lin Yutang Que tal desta forma: <p>Somente aquele que administra suas idias de forma livre dono de suas idias, e somente aquele que dono de suas idias no escravizado por elas.</p> <p>- Lin Yutang</p> Para muitos, isto ser muito familiar, mais est forma no correta, sendo que temos tags apropriadas como elementos semnticos: <blockquote>Somente aquele que administra suas idias de forma livre dono de suas idias, e somente aquele que dono de suas idias no escravizado por elas.</blockquote> <cite>- Lin Yutang</cite>

19

AS TRS CAMADAS DE UM DOCUMENTO WEB MODERNO

Modernos e bem-estruturadios documentos web tem trs camadas distintas de dados (Figura 1).

Figura 1: Camadas de um documento Web Moderno A primeira camada da estrutura, que o documento de texto marcado em HTML ou XHTML. Este contm o contedo de seu documento, juntamente com a informao semntica indicando o que cada bit texto (ttulos [h1, h2, h3, h4, h5, h6], pargrafos [p], listas [ul, ol, dl] e etc) A segunda camada a camada de apresentao, o qual ir determinar como seu documento ser apresentado para o usurio, determinando os elementos de layout e tipografia, cores, decorao de imagens, e apresentaao para a famlia de leitores de tela mais usados. Geralmente, a camada de apresentao de um documento web escrito usando CSS. Alm destas duas camanda, temos tambm como referncia para a layer de comportamento do documento. No iremos discutir esta camada em profundidade, mas deveramos entender ao que se refere usando scripts (usualmente JavaScript para manipulao do Modelo de Objeto de Documento, ou DOM) para atualizar, adicionar, ou remover itens de um documento baseado em comportamentos do usurios Para simplificar o uso destas trs camadas em conjunto, considete uma pgina de contato bsica do sitie de uma empreas. O formulrio produzido em (X)HTML. Este texto ento estilizado numa apresentao esttica para tela usando CSS. Depois de preencher o formulrio e clicar no

20

boto de enviar, o JavaScript ir validar os campos e verificar os campos obrigatrios e se estiver preenchido corretamente os dados do formulrio so enviados, caso contrrio surgir uma mensagem de aviso.

W3C
O W3C um consrcio internacional totalmente dedicado produo de padres para desenvolvimento na web. Todos estes padres so construidos com participao das instituies membros, mais uma equipe de tempo integral e especialistas convidados. Desde 1994, j publicou mais de 90 padres, chamados W3C Recommendations (http://www.w3.org/TR). Tem por objetivo desenvolver e disseminar a cultura de adoo de padres como vetor de desenvolvimento pleno da web a longo prazo, garantindo competitividade, interoperalidade e acessibilidade, a expanso e a durabilidade das aplicaes em longo prazo, pois as ferramentas tambm evoluem com base nesses padres, browsers e leitores de tela. Para cumprir o seu objetivo, a W3C trabalha constantemente com empresas e desenvolvedores para difundir principalmente a cultura e as vantagens de adotar os padres web. Jeffrey Zeldman (http://www.zeldman.com), um dos mais famosos desenvolvdores web do mundo, afirma que desenvolver sem considerar padres no pensar na evoluo futura da tecnologia, que acontece toda sobre padres internacionais. A acessibilidade uma das principais diretrizes da W3C, onde no Brasil de certa forma apoiada pelo decreto-lei 5296/2004, do Governo Federal, que estabelece normas gerais e critrios bsicos para a promoo da acessibilidade, utilizando-se, assim, de padres da W3C. Porm, o Goveno no participa ainda da elaborao desses padres, mas o fato de recoomendar padres W3C relevante como reconhecimento da importncia das atividades do consrcio mundialmente. Por outro lado, as recomendaes podem ser seguidas por quaiquer pessoas ou instituies, independentemente da orientao governamental. Essa uma das grandes vantagens das nossas aes: a evoluo dos padres no esta condicionada a adeso do Governo. Mas o peso institucional deles faz uma diferena significativa na consolidao do uso de padres.

Escrevendo cdigo semntico

Voc pode encontrar uma documentao bastante abrangente das tags do HTML, em especial aquelas usadas pelo XHTML, no endereo: http://www.w3schools.com/xhtml/xhtml_reference.asp Abaixo as principais tags utilizadas no deseenvolvimento web.

21

Blocos de texto
div "Divises", sees em seu contedo. p Pargrafos span Sees em seu contedo. A diferena para o div que o span usado para marcar trechos de seu texto. Por exemplo: aqui vai uma <span>palavra</span> especial.

Listas
ul, ol e li Listas, numeradas ou no. dl, dd, dt Listas de definio (para escrever um glossrio, por exemplo)

Significado especial
h1, h2, h3, h4, h5 e h6 Ttulos. Quanto menor o nmero, maior a importncia. abbr Abreviatura acronym Acrnimo address Informaes sobre o autor ou dono da pgina, como email de contato e endereo fsico. blockquote Uma citao longa (um bloco) q

22

Uma citao curta (para usar na mesma linha) cite Autor da citao em Texto enfatizado. A renderizao padro itlico. strong Texto "forte". A renderizao padro negrito. del Texto excludo. (No entendeu? Pense no sistema de controle de revies do Word, se voc j usou...) ins Texto inserido.

Cdigo de computador e etc.

pre Texto pr-formatado code Cdigo de computador kbd "Entrada de teclado"

23

CAPTULO 3 XHTML
O W3C criou o XHTML. XHTML uma forma de escrever HTML de modo que ele tambm seja um documento XML vlido. Com o objetivo de adotar maior organizao e legibilidade do cdigo HTML, utilizando-se das regras de escrita do XML no HTML: Toda tag que for aberta deve ser fechada; Todas as tags devem ser escritos em minsculo; Todos os atributos devem conter um valor, entre outros. Veja:

Figura 2: XHTML e sua relao com XML e HTML Voc vai notar no mapa que XML uma linguagem usada para definir outras linguagens. Simplificando podemos dizer que XML uma linguagem que serve para criar outras linguagens. Linguagens como XSLT, SVG, XUL e RSS so todas XML. XHTML tambm XML e ao mesmo tempo HTML. Assim, um browser l XHTML como um arquivo HTML normal e um interpretador de XML pode l-lo como XML. XHTML um subconjunto de XML usado para escrever HTML. Na prtica trata-se de escrever o HTML com uma sintaxe ligeiramente diferente, de modo que ele tambm seja um arquivo XML vlido.

Escrevendo XHTML vlido DOCTYPE

O Doctype (Document Type Definition, vulgo DTD) a primeira coisa que se deve escrever em um arquivo XHTML. Ele vai na PRIMEIRA LINHA do seu documento, e serve para informar ao browser que tipo de documento ser visualizado. Existem quatro tipos: Strict: Este tipo usado quando voc fez um cdigo 100% XHTML, sem erros. Deve ser escrito assim:

24

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML 1.1: Assim como o Strict utilizamos o XHTML 1.1, no desenvolvimento e implantao de todos os padres web, que discutimos at este momento. Deve ser escrito desta forma <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1t//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Transitional: Este o modo mais usado, durante a transio entre o HTML e o XHTML Sua sintaxe : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Frameset: usado quando voc est utilizando FRAMES em seu site (Atualmente os Frames so depreciados, pois prejudicam a acessibilidade). Escreve-se assim: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Feche TODAS as tags

Para se fazer um XHTML vlido, devemos fechar TODAS as tags: No devemos esquecer de fechar as tags que estamos carecas de conhecer: <p></p>, <b></b>, etc... E tambm no podemos esquecer de fechar as tags "solitrias". Assim, ao invs de <br>, escrevemos: <br/>

Use letras minsculas

Quem nunca viu um cdigo fonte de um documento HTML escrito assim:

25

<A HREF="http://tags.com.letras.minsculas/" TARGET="_BLANK"> </A>Um documento XHTML deve ter TODAS as tags e seus respectivos atributos escritos com letra minscula: <a href="http://tags.com.letras.minsculas/"> </a>

No esquea das "ASPAS"

Esta regra bem simples. Nas tags XHTML, todos os valores dos atributos devem estar entre "ASPAS".

Atributo NAME
O antigo atributo NAME foi substitudo pelo atributo ID. Se seus usurios, clientes, etc., utilizam ainda antigos browsers, voc pode sem problema nenhum utilizar as duas formas juntas durante o perodo de migrao: <img src="imagem.gif" id="imagem" name="imagem" />

Atributos sem valor

No devemos esquecer tambm os atributos que escrevemos sem valor. Por exemplo: ERRADO: <option selected> <input checked> <input readonly> CERTO: <option selected="selected"> <input checked="checked"> <input readonly="readonly"> E assim por diante...

Siga as regras
Existem algumas outras regras para se escrever XHTML. As principais tratam sobre onde os elementos podem ou no aparecer. Por exemplo, voc no pode ter um elemento <ul> dentro de um p. No vamos estudar agora todas essas regras, no vale a pena. Voc pode aprender as que lhe so

26

necessrias ao tentar validar o seu cdigo. Para ter certeza que escreveu dentro dos padres web seu XHTML, sempre submeta seu arquivo ao validador do W3C. O contedo apresentado a seguir foi traduzido e adaptado de W3Schools (2007). O quadro abaixo apresenta as TAGs HTML, sua funo e os navegadores nos quais cada uma delas suportada. Tag <!--...--> <!DOCTYPE> Descrio Define um comentrio Define o documento tipo do Suportado

<a>

Define uma ncora

Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Netscape 6.0 +, Mozilla 1.0 +, Opera 6.0 +, Safari 1.0 + Internet Explorer 4.0 +, Netscape 6.0 +, Mozilla 1.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 2.0 +, Mozilla 1.0 +, Safari 1.0 +, Opera 7.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 +

<abbr>

Define uma abreviao

<acronym>

Define um acrnimo

<address>

Define um elemento de endereo Depreciado. Define um applet Define uma rea dentro de um mapa de imagem Depreciado. Define texto em negrito Define uma URL base para todos os links numa pgina Depreciado. Define uma fonte base Define a direo da exibio do texto Define tamanho texto como grande Define longa uma do

<applet>

<area>

<b>

Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 +

<base>

<basefont>

Internet Explorer 2.0 +, Netscape 1.0 +, Safari 1.0 + Internet Explorer 5.0 +, Netscape 6.0 +, Mozilla 1.0 +, Opera 7.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +,

<bdo>

<big>

<blockquote>

citao

<body>

Define o corpo documento

do

<br>

Insere uma quebra de

27

linha forada <button> Define um boto

Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 4.0 +, Netscape 6.0 +, Mozilla 1.0 +, Opera 5.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 4.0 +, Netscape 6.0 +, Mozilla 1.0 +, Opera 7.0 +, Safari 1.0 + Internet Explorer 4.0 +, Netscape 6.0 +, Mozilla 1.0 +, Opera 7.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 4.0 +, Netscape 6.0 +, Mozilla 1.0 +, Opera 7.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 6.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 2.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 6.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 4.0 +, Netscape 6.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 2.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 2.0 +,

<caption>

Define o ttulo de uma tabela Depreciado. Define texto centralizado Define uma citao

<center>

<cite>

<code>

Define texto de cdigo de computador Define atributos para colunas de tabela Define grupos colunas de tabela de

<col>

<colgroup>

<dd>

Define uma descrio de definies Define texto deletado (usado junto com ins) Depreciado. Define uma lista de diretrio Define uma seo em um documento Define termo de lista de definio Define uma lista de definio Define um termo de lista de definio Define enfatizado Define fieldset um texto

<del>

<dir>

<div>

<dfn>

<dl>

<dt>

<em>

<fieldset>

campo

<font>

Depreciado. Estilizao do texto Define um formulrio

<form>

<frame>

Define uma subjanela (um quadro) Define um conjunto de

<frameset>

28

quadros <h1> to <h6> Define cabealho 1 a 6

Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 4.0 +, Netscape 4.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 3.0 +, Netscape 3.0 +, Mozilla 1.0 +, Opera 5.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 4.0 +, Netscape 6.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 4.0 +, Netscape 4.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 4.0 +, Netscape 6.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 4.0 +, Netscape 6.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 3.0 +, Netscape 4.0 +, Mozilla 1.0 +, Safari 1.0 + Internet Explorer 4.0 +, Netscape 6.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 2.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 3.0 +, Netscape 2.0 +,

<head>

Cabealho documento Define uma horizontal

do

<hr>

barra

<html>

Define um documento html Define texto itlico

<i>

<iframe>

Define uma subjanela inline Define uma imagem

<img>

<input>

Define um campo de entrada Define texto inserido (usado junto com del) Define um campo receptor de uma linha Define teclado texto de

<ins>

<isindex>

<kbd>

<label>

Define um rtulo de um campo de entrada Define um ttulo em um fieldset Define um item de lista

<legend>

<li>

<link>

Define uma fonte de referncia Define um mapa de imagem Depreciado. Uma lista de menu Define informao meta-

<map>

<menu>

<meta>

<noframes>

Define uma seo sem quadros (frames) Define uma seo sem

<noscript>

29

scripts <object> Define um embutido Define uma ordenada objeto

Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 3.0 +, Netscape 4.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 6.0 +, Netscape 6.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 +

<ol>

lista

<optgroup>

Define um grupo de opes Define numa uma opo

<option>

lista drop-down <p> Define um pargrafo Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 4.0 +, Netscape 6.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 3.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 3.0 +, Netscape 2.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 2.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 3.0 +, Netscape 3.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 3.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 2.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 2.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 +

<param>

Define um parmetro para um objeto Define preformatado Define curta uma texto

<pre>

<q>

citao

<s>

Depreciado. texto riscado

Define

<samp>

Define exemplo de cdigo de computador Define um script

<script>

<select>

Define um menu tipo drop-down Define o tamanho do texto como pequeno Define uma seo em um documento Depreciado. texto riscado Define enfatizado Define

<small>

<span>

<strike>

<strong>

texto

<style>

Define uma determinao de estilo Define texto subscrito

<sub>

<sup>

Define superescrito

texto

30

<table>

Define uma tabela

Internet Explorer 2.0 +,Netscape 1.1 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 4.0 +, Netscape 6.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.1 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 4.0 +, Netscape 6.0 +, Mozilla 1.0 +, Opera 5.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.1 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 3.0 +, Netscape 6.0 +, Mozilla 1.0 +, Opera 5.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 5.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.1 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 +, Netscape 1.0 +, Mozilla 1.0 +, Opera 4.0 +, Safari 1.0 + Internet Explorer 2.0 - 6.0, Netscape 1.07.0, Opera 4-7

<tbody>

Define o corpo de uma tabela Define uma clula de uma tabela Define uma rea de texto Define o rodap de uma tabela Define o cabealho de uma tabela Define o cabealho de uma tabela Define o ttulo documento do

<td>

<textarea>

<tfoot>

<th>

<thead>

<title>

<tr>

Define uma linha de uma tabela Define teletype texto

<tt>

<u>

Depreciado. Define texto sublinhado Define uma desordenada lista

<ul>

<var>

Define uma varivel

<xmp>

Depreciado. Define texto preformatado

31

CAPTULO 4 Introduo ao CSS

CSS (Cascading Style Sheet) uma linguagem simples proposta pelo W3C para formatar as tags do HTML. As tags foram feitas para mostrar ao browser que tal parte do documento era, por exemplo, um pargrafo, um ttulo, etc. CSS serve para dar formatao s tags deste arquivo HTML, separando assim a formatao da informao. Ento podemos concluir que CSS serve para criarmos o "visual" do site, ou seja, o layout: fontes, boxes, imagens, backgrounds, etc. H trs formas de se inserir CSS em um arquivo HTML:

CSS inline
Voc pode inserir cdigo CSS diretamente em uma tag do HTML, atravs do atributo style, desta forma: <p style="color:red;"> ... contedo ... </p>. (Isto tornaria o texto desse pargrafo vermelho.) Usar CSS assim prejudica muito a separao entre formatao e contedo, e no muito diferente de usar formatao HTML.

Inseridas no HTML
Voc pode colocar seu cdigo CSS na seo head de seu arquivo, dentro de uma tag style, assim: <style type="text/css"> <!-p{ color: red; } --> </style> (Este cdigo deixaria todos os pargrafos do documento vermelhos.)

32

CSS externo
O mtodo mais usado. Voc armazena seu cdigo CSS em um arquivo separado do HTML. Proporciona a melhor separao entre formatao e contedo, alm da flexibilidade de se ter um nico arquivo CSS servindo o site inteiro. Existem diversas tcnicas para desenvolver arquivos CSS em conjunto com arquivos HTML, muitas das quais podemos encontrar em livros e revistas, escritos por especialistas da rea como Jeffrey Zeldman, que mencionamos anteriormente. Zeldman, menciona em seu livro Desenvolvendo Sites Compatveis, que devemos utilizar 3 tipos de arquivos CSS principais, possibilitando a compatibilidade entre os diversos browsers existentes, antigos ou modernos ou mesmos para outros dispositivos como PDA`s e celulares. A idia baseia-se na utilizao de um arquivo basico.css, o qual conter apenas o cdigo CSS para formatao bsica do site, a fim de, deix-lo legvel em qualquer agente de usurio, com um cdigo semelhante a este: body { font-family : Arial, Helvetica, sans-serif; font-size : 14px; color : #000; background-color : #FFF; } Este cdigo tem como objetivo dar contraste ao contedo em relao ao fundo e ter uma famlia e tamanho maior que o padro de fonte para facilitar a leitura. Este arquivo deve ser linkado com o arquivo (X)HTML, utilizando-se a tag <link> dentro da seo head, pois tanto os navegadores modernos como os antigos interpretam esta tag. <link rel="stylesheet" type="text/css" href="basico.css" media=screen> O atributo rel relativo identifica que o link relativo a uma folha de estilo CSS. O atributo type tipo identifica o tipo de contedo do arquivo: texto CSS. O atributo href hiperlink de referncia identifica a localizao relativa ao documento (X)HTML do arquivo CSS.

33

O atributo media mdia identifica o objetivo deste arquivo, neste caso, o objetivo a formatao do arquivo para apresentao na tela. Outra media bastante utilizada a print, quando o arquivo tem como objetivo formatar / estilizar um arquivo para impresso. O arquivo mais importante que ser desenvolvido o principal.css, o qual conter toda a formatao padro do site e sua estruturao, com foco apenas nos navegadores modernos, por isso utilizamos uma forma de ligao entre arquivo CSS e (X)HTML, interpretada apenas por estes navegadores: <style type=text/css media=screen> <!-@import url(principal.css); --> </style> Pode observar que utilizamos a tag <style> com os mesmos atributos encontrados na tag <link> e importante ressaltar que essa tag como foi implementada a pouco tempo interpreatada apenas pelos navegadores modernos. Todo o contedo escrito dentro da tag <style> interpretada como CSS e devido a isso o comentrio HTML utilizado dentro da mesma no surtir efeito algum, sendo que o comentrio CSS : /* Comentrio CSS */ A utilizao por tanto do comentrio HTML para que o cdigo CSS escrito dentro da tag <style> seja comentado caso o usurio acessar a pgina por um navegador antigo e evitar que o texto desconhecido seja apresentado na tela. Baseado em experincias profissionais coordenando equipes de desenvolvimento, onde vrios profissionais realizam a manuteno do cdigo CSS, recomendo que a subdiviso do arquivo principal.css. Trabalhando com o objetivo de realizar e estruturar os elementos em comum a todas as pginas do site e/ou ao sistema web e desenvolvendo arquivos menores com cdigo especifico, formatando e estruturando as perticularidades de cada documento individualmente, linkando desta forma: <style type=text/css media=screen> <!-@import url(principal.css); @import url(empresa.css); -->

34

</style> Desta forma a administrao do cdigo facilitada e diminui a possibilidade de cdigo redundante ou mesmo desnecessrio que aumenta o tamanho do arquivo e o tempo necessrio para o carregamento e renderizao da pgina. O terceiro tipo de arquivo que devemos utilizar quando ocorrem incompatibilidades entre o Internet Explorer e os demais navegadores: <!--[if IE 6]> <link rel="stylesheet" media="screen" href=" hacks_ie6.css" /> <![endif]--> Provavelmente ao ler este cdigo achar estranho perceber que est comentado, e neste momento que ir perceber que mesmo na imperfeio existem possibilidades. Hack nome dado ao cdigo CSS ou (X) HTML que aproveita-se de algum erro / despadronizao / particulariedade de um navegador para corrigir sua incompatibilidade do cdigo em relao com outros navegadores. A Microsoft ao desenvolver a Internet Explorer criou esta forma condicional para seu cdigo, que utilizamos para aplicar cdigo CSS apenas para ele ou para alguma verso especfica. Pois, existem diferenas de interpretao entre a Internet Explorer e o Firefox, como entre o Firefox e o Opera, entre a Internet Explorer 6.0 e 7.0 e assim por diante. Recomendo que no utilize esta opo, caso realmente perceba a necesssidade use-a, mas antes revise todo o seu cdigo CSS, pois na maioria dos casos, o HACK I.E. utilizado por mau formulao do arquivo principal.css.

Sintaxe
seletor { propriedade: valor; } O seletor o elemento do HTML que receber a formatao. A propriedade o atributo deste elemento que voc deseja manipular. Cada atributo tem uma lista de valores possveis. body { background-color: black; }

35

Acima definimos que o atributo BACKGROUND-COLOR do seletor BODY receber o valor BLACK. Ou seja, o corpo do documento ter cor de fundo preta.

Agrupando seletores
Para definir atributos iguais para vrios elementos, possvel agrupar vrios seletores, separando-os por vrgula: p, h1, div { background-color: blue; } Neste caso, todos os pargrafos, ttulos de nvel 1 (h1) e divs tero cor de fundo azul.

Definindo valores
Se o valor tiver uma palavra composta, voc dever coloc-la entre aspas simples: p{ font-family: 'Lucida Sans'; } Existem algumas propriedades que podem agrupar valores de outras em uma s declarao. Veja o cdigo abaixo: div { margin-top: 10px; margin-right: 20px; margin-bottom: 5px; margin-left: 35px; } A propriedade "margin" pode agrupar os valores das propriedades "margin-top", "marginright", "margin-bottom" e "margin-left", obedecendo seguinte sintaxe: div { margin: top right bottom left; }

36

Assim, o cdigo se torna menor e mais limpo, fcil de ser entendido. O exemplo acima ficaria: div { margin: 10px 20px 5px 35px; }

Criando estilos usando "Class" e "Id"

Os atributos Class e Id so usados para "entiquetar" elementos especficos do documento HTML. Assim, esses elementos podem receber uma formatao individual, personalizada.

Usando o atributo Class

O atributo Class pode ser usado para definir diferentes estilos para um mesmo tipo de elemento (tag) HTML. Vamos supor que voc tenha em sua pgina, dois tipos de pargrafos: um com o texto alinhado direita e o outro com o texto alinhado ao centro. Voc pode criar as seguintes classes no CSS: p.direita { text-align:right; } p.centro { text-align:center; } No HTML, voc atribui estas classes da seguinte forma: <p class="direita"> Acessibilidade </p> <p class="centro"> Acessibilidade </p> Se no seletor CSS, voc tirasse a tag P da frente do atributo Class, deixando apenas:

37

.centro { text-align:center; } Voc poderia atribuir esta classe para qualquer elemento HTML (no s pargrafos), usando o atributo: class="centro". Podemos atribuir vrias classes a um mesmo elemento. A ltima classe no css ser a que prevalecer. Exemplo: <p class="direira centro">Acessibilidade</p> Logo acima, atribumos duas classes para o pargrafo. Se as duas classes tiverem definindo a cor da letra, prevalecer a cor da ltima classe escrita no CSS.

Usando o atributo Id
O atributo Id um pouco diferente do atributo Class. Voc pode atribuir a mesma classe a vrios elementos, mas o Id um identificador nico na estrutura do documento. Ou seja: voc no pode ter dois elementos com o mesmo Id. Exemplo: p#direita { text-align:center; } O documento dever ter somente UM elemento P com o Id DIREITA. E para atribuir o Id no HTML: <p id="direita">Acessibilidade</p> Antigamente, no to antigamente assim, talvez, quase que com certeza, se quisesse formatar o texto de um pargrafo alinhado ao centro com a fonte Verdana e um tamanho mdio, acredito que desenvolveria algo parecido com isso: <center> <p> <font face=Verdana size="2"> E aqui dentro ia o texto. </font>

38

</p> </center> Isso tudo dentro do arquivo HTML, deixando o cdigo complicado, sujo e, conseqentemente, maior. Sem falar naqueles problemas tpicos do chefe mudando de idia sobre o tamanho ou a cor da fonte, fazendo voc perder um tempo precioso procurando as tags para mudar um simples valor. Com CSS temos total controle sobre a formatao do texto: alinhamento, cor, famlia de fonte, altura de linha, espaamento das letras, etc... Voc pode definir todas estas propriedades numa mesma declarao. Por exemplo: p {font: italic bold 10px Verdana;}

PROPRIEDADES CSS
Acompanhe a tabela a seguir para saber como aplicar cadas propriedade CSS, no seu desenvolvimento. FONTES: Propriedade font-family Descrio Famlia de Fontes a ser utilizada no texto, em ordem de propriedade. Valores Aceitos Nomes das famlias de fontes ou seus nomes genricos, separados por vrgula. Os nomes genricos reconhecidos so: serif, sans-serif, cursive, fantasy e monospace. font-style Estilo de fonte normal ou itlico (inclinado) font-variant Texto normal ou todas em maisculas * normal: tal como digitado * small-caps: Converte todo o texto normal, italic, oblique p.italico { font-style: italic; } h1, h2 { font-variant: small-caps} Exemplos body{ font-family: Gergia, Times New Roman, Times, serif;}

39

para maisculas. Obs: No navegador Netscape, as letras maisculas no texto original so destacadas em relao as demais font-weight Corresponde ao peso ou espessura da fonte Bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900 font-size Tamanho da fonte * Valor em unidades de medida (pt, px, pc, %) * Valores constantes (xx-small, x-small, small, mdium, large, x-large, xx-large ul { font-size: 200% } Font Sintaxe simplificada (atalho) para a especificao da fonte, em que so omitidos os nomes das propriedades e usados somente seu valores, separados por espaos. Os mesmos valores aceitos pelas propriedades: fontstyle, font-variant, font-weight, font-size, line-height, fontfamily Li { font: italic smallcaps bold 16pt Verdana; color:#FF6633; } p big { font-size: xlarge } p small { font-size: 10pt } p em { font-weight: bolder }

TEXTO Propriedade text-align Descrio Alinhamento horizontal de texto right (direita) Valores Aceitos left (esquerda) Exemplos p cite { text-align: center }

40

em bloco

center (centralizado) justify (justificado)

text-decoration

Efeitos especiais (adornos) no texto

none (nenhum), underline (sublinhado), overline (linha acima do texto), line-throught (texto riscado), blink (piscante). Use mais de um valor separando-os com espao.

p.sublinhado { text-decoration: underline; } .cancelado { textdecoration: underline line-throught; }

text-indent

Endentao da primeira linha de um texto em bloco.

Valores definidos em unidades de medida (px, pt, mm, % etc.). Podem ser usados valores negativos.

div.recuado{ textindent: 2cm; }

letter-spacing

Distncia entre as letras do texto

* normal. * valor definido em unidades de medida (px, pt, mm, % etc.). So aceitos valores negativos.

h2 small { letterspacing: 1.2ex }

word-spacing

Distncia entra as palavras do texto

* normal * valor definido em unidades de medida (px, pt, mm, %, etc.).

code { word-spacing: 150%; }

text-transform

Tratamento das letras maisculas e minsculas

* none: padro * capitalize: primeira letra de cada palavra em maiscula. * uppercase: todas maisculas * lowercase: todas

div.titulo { texttransform: capitalize }

41

minsculas white-space Tratamento dos espaos em branco no texto * normal: mais de um espao tratado com um s. * pre: mais de um espao produz um espao maior. * nowrap: mltiplos espaos so considerados como parte da palavra e no so quebrados. line-height Altura da linha do texto Valores definidos em unidades de medidas (px, pt, mm, % etc). vertical-align Alinhamento vertical da linha de texto. baseline, sub, super, top, text-top, middle, bottom, text-bottom, %; li { vertical-align: bottom } p { line-height:220%; } code { white-space: pre }

42

EFEITOS VISUAIS E POSICIONAMENTO Propriedade Width Height Descrio Referem-se, respectivamente, largura e altura de um elemento em bloco. Position Determina se um elemente ter sua posio controlada pelas propriedades left (esquerda), right (direita), top (superior), bottom (inferior) * relative: a posio controlada pelas propriedades left, right, top e bottom, ainda dentro do fluxo do documento. * absolute: posio fixa, em uma nova camada que no segue o fluxo do documento. * fixed: posio fixa na janela, em uma nova camada que no obedece, inclusive, a rolagem. No funciona no IE. Left right top bottom Define os limites esquerdo, direito, superior e inferior dos elementos posicionados (propriedades position com o valor relative, absolute * um valor definido em uma das unidades de medida (px, pt, mm, % etc.). } top: 1cm; left: 20px; * auto: determinado pelo navegador. position:relative; .logotipo { } * static: no controlado, seguindo o fluxo normal do documento. position: absolute; top: 50px; left: 80px; div.fixo { Valores Aceitos Valores definidos em unidades de medida (px, pt, mm, % etc.). p { height: 200px; } Exemplos div.coluna1 { width:75%;}

43

ou fixed). Overflow Trata o texto que excede a rea delimitada para um elemento posicionado com dimenses fixas. * auto: deixa o controle a cargo do navegador, que normalmente insere barras de rolagem no elemento. * hidden: instrui o navegador a preserver o tamanho especificado para o elemento. O tratamento ao texto excedente depender da propriedade clip, analisada a seguir. Clip Define a apresentao do texto excedente em um elemento com a propriedade overflow setada para auto, hidden ou scroll. Display Controla a forma de exibio de um elemento * um retngulo definido por topo, direita, base e esquerda * block: cria um elemento em bloco. O navegador incluir uma quebra de linha antes e depois. * inline: Valor padro, Cria um elemento em linha no fluxo normal do documento. * list-item: refere-se a um item da lista. Consulte as propriedades de } display: none; img.oculto { } display: block * auto: o navegador controla o texto excedente. position: absolute; clip: rect(50px, 15px, 70px, 35px); } div.bloxoFixo { } bottom:380px; overflow:scroll; position:absolute; left:50px; right:120px; top:300px; div.fixoRolavel {

span.novoBloco {

44

listas. * none: o elemento no exibido na tela, e nenhum espao reservado para ele. Visibility Visibilidade de um elemento na pgina * visible: elemento visvel (padro) visibility: hidden; * hidden: o elemento no aparece na pgina, porm seu espao no contedo reservado. Float Determina como o texto fluir ou flutuar em volta de um elemento em bloco. * left: o elemento ficar esquerda do fluxo de texto, ou seja, o texto fluir sua direita. * right: o elemento ficar a direita do fluxo do texto. Clear Define a forma como um elemento se comportar em relao a outro elemento adjacente com a propriedade float setada para left ou right * left: no aceita que outro elemento flutue ao seu lado esquerdo. *right: no aceita que outro elemento flutue ao seu lado direito. * both: bloqueia ambos os lados do elemento contra elementos flutuantes. div.logo { clear: both } * none: sem efeito img { clear:right; } } } img.btVoltar { float:right; float:left; * none: sem efeito div.foto{ } img.invisivel{

45

z-index

Especifica o eixo Z de um elemento posicionado, exibindo-o em uma camada independente, acima ou abaixo dos demais elementos da pgina.

* auto: determinado pela ordem do elemento no cdigo fonte. * um valor inteiro, que indica a posio do elemento nas camadas da pgina.

img.popup{ position:absolute; left: 50px; top: 200px; z-index:2; }

MARGENS E BORDAS Propriedade padding-top padding-rigth padding-bottom paddin-left Descrio Especificam valores independentes de padding superior, direito, inferior e esquerdo de um elemento. Padding o espao entro o contedo de um elemento e os limites de sua caixa delimitadora. Padding Atalho para as quatro propriedades de padding: * Um valor: aplicado para as quatro propriedades. * Dois valore: o primeiro aplicado para top e bottom, e o segundo aplicado para right e left. * Trs valores: o primeiro valor } Definidos em unidades de medida (px, pt, mm, % etc.). padding: 1cm 20px 0.5cm 10px; blockquote{ Valores Aceitos Definidos em unidades de medida (px, pt, mm, % etc.). } padding-right: 5px; Exemplos .colunaDireita{

46

aplicado para top, o segundo para right e left, o terceiro para bottom. * Quatro valores: aplicados respectivamente para top, right, bottom e left. margin-top margin-right margin-bottom margin-left Especificam valores independentes para as quatro margens de um elemento. A margem o espao entro o limite da caixa delimitadora e sua borda. Margin Atalho para as quatro propriedades de margin: * Um valor: aplicado para as quatro propriedades. * Dois valore: o primeiro aplicado para top e bottom, e o segundo aplicado para right e left. * Trs valores: o primeiro valor aplicado para top, o segundo para right e left, o terceiro para bottom. * Quatro valores: aplicados respectivamente para } Definidos em unidades de medida (px, pt, mm, % etc.). margin: 1cm 10px 0.5cm 10px; blockquote { Definidos em unidades de medida (px, pt, mm, % etc.). } margin-right: 5px; .marginDireita {

47

top, right, bottom e left. border-top-style border-ritght-style border-bottom-style border-left-style Define o estilo de apresentao das bordas superior, direita, inferior e esquerda de um elemento * hidden: idem a none * dotted: pontilhada * dashed: linhas curtas * solid: linha slida border-left-style: * double: duas linhas slidas } * groove: entalhe * ridge: outro tipo de entalhe, simulando 3D * inset: moldura interna * outset: moldura externa boder-style Atalho para as quatro propriedades de estilo das bordas: * Um valor: aplicado para as quatro propriedades. * Dois valore: o primeiro aplicado para top e bottom, e o segundo aplicado para right e left. * Trs valores: o primeiro valor Os mesmos valores aceitos pelas propriedades de bordas supracitadas } border-style: inset; div.quadro{ outset; border-bottomstyle: groove; border-top-style: solid; border-right-style: double; * none: sem bordas div.quadro {

48

aplicado para top, o segundo para right e left, o terceiro para bottom. * Quatro valores: aplicados respectivamente para top, right, bottom e left. border-top-width border-right-width border-bottom-width border-left-width Define a espessura das bordas de um elemento. Para que as bordas sejam exibidas, um dos estilos acima deve ser setado. * mdium: mdia * tick: grossa * Tambm so aceitos valores em unidades de medidas (px, pt, mm, % etc.) border-bottomwidth:5px; border-leftwidth:10px; } border-width Atalho para as quatro propriedades de bordas: * Um valor: aplicado para as quatro propriedades. * Dois valore: o primeiro aplicado para top e bottom, e o segundo aplicado para right e left. * Trs valores: o primeiro valor Os mesmos valores aceitos pelas propriedades de espessura das bordas. border-style:ridge; border-width: 5px 1px; } .destaque{ border-right-width: thin; border-style: solid; border-topwidth:5px; * thin: fina .destaque{

49

aplicado para top, o segundo para right e left, o terceiro para bottom. * Quatro valores: aplicados respectivamente para top, right, bottom e left. border-top-color border-right-color border-bottom-color border-left-color Define as cores das bordas superior, direita, inferior e esquerda de um elemento. Especificao de cor (constante, hexadecimal ou rgb) border-style: dotted; border-top-color: #000099; border-right-color: #0066CC; border-bottomcolor: #00CCCC; border-left-color: #000099; } border-color Atalho para as quatro propriedades de cor de borda: * Um valor: aplicado para as quatro propriedades. * Dois valore: o primeiro aplicado para top e bottom, e o segundo aplicado para right e left. * Trs valores: o } border-style: solid; border-width: 5px; Especificao de cor (constante, hexadecimal ou rgb) border-color: marron; .quadroAzul { .quadroFantasia {

50

primeiro valor aplicado para top, o segundo para right e left, o terceiro para bottom. * Quatro valores: aplicados respectivamente para top, right, bottom e left. border-top border-right border-bottom border-left Atalho para especificar, de uma s vez, as propriedades de estilo, largura e cor, para cada uma das quatro bordas de um elemento. Border Atalho para especificar, de uma s vez as propriedades de estilo, largura e cor para todas as bordas de um elemento. Os mesmos valores aceitos pelas respectivas propriedades de estilo, largura e cor. border: dotted 3px #FF3300; } Os mesmos valores aceitos pelas respectivas propriedades de estilo, largura e cor. border-top: dotted 3px rgb(255, 160, 0); border-bottom: double 5px; } .quadroFantasia { .quadroFantasia {

COR E BACKGROUND Propriedade Color Descrio Cor do texto do elemento * Notao Hexadecimal * Valores RGB background-color Cor do fundo de um elemento * Notao * Nome da cor body {backgroundcolor: red} Valores Aceitos * Nome da cor Exemplos body {color: navy}

51

Hexadecimal * Valores RGB background-image Imagem de fundo de um elemento. Por padro, a imagem repetida em ladrilho, de modo a preencher toda a rea. background-repeat Define se a imagem de fundo de um elemento deve ser repetida como ladrilho * repeat (padro): a imagem repetida em ladrilho, ocupando toda a rea do elemento. * repeat-x: repete a imagem em uma linha. * repeat-y: repete a imagem em uma coluna Backgroundattachment Define se a imagem de fundo deve rolar ou no com a pgina * scroll (padro): a imagem rola com a pgina. * fixed: a imagem permanece fixa quando a pgina rolada. backgroundattachment: fixed; } body { background-imagem: url(esferas.gif); background-position: background-imagem: url(esferas.gif); body { backround-repeat: no-repeat; } * no-repeat: a imagem no repetida background-imagem: url(logo.gif); body { URL do arquivo de imagem, informada em um descritor url background-imagem: url(logo.gif); } body {

background-position

Posio da imagem de fundo do elemento

Valor definido em unidades de medida (px, pt, mm, % etc.), ou pelas constantes top (topo), center

52

(centro), bottom (base), left (esquerda), right (direita). Use dois valores para especificar a posio horizontal e vertical. Background Atalho para especificar, de uma s vez, todas as propriedades de imagem de fundo de um elemento. background-color, background-image, background-position , backgroundrepeat, separadas por um espao Os mesmos valores aceitos pelas propriedades backgroundattachment,

top center; }

body { background: url(esferas2.gif) repeat-y fixed right; }

LISTAS Propriedade list-style-type Descrio Define o formato do marcador a ser exibido nos itens da lista Valores Aceitos Para listas no ordenadas (ul): square (retngulo), circle (crculo vazado) ou o valor padro disc (crculo preenchido). Para listas ordenadas (ol): decimal (1, 2, 3...), decimalleading-zero (01, 02, ...)(Somente Netscape), lowerroman (i, ii, iii, iv...), upper-roman (I, II, III, IV....), lowerlist-style-type: square; } ul{ Exemplos

53

alpha (a, b, c, d...), upper-alpha (A, B, C, D...) list-style-image Define uma imagem a ser usada como marcador nos itens de uma lista * url do arquivo de imagem, informado em um descritor url () } list-style-position Define se os marcadores de uma lista ficam dentro ou fora dos limites da caixa delimitadora do elemento. list-style Atalho que permite especificar, de uma s vez, as propriedades de formato do marcador, posio e imagem de itens de uma lista. Os mesmos valores aceitos pelas propriedades: liststyle-type, list-styleposition e list-styleimage list-style: upperroman inside; } * outside: fora list-style-position: inside; } * inside: dentro ol{ list-style-image: url (seta.gif); * none: nenhum ol{

ol{

54

CAPTULO 5 Aplicando CSS

Seletores
Seletores Complexos
Podemos criar alguns tipos de seletores teis para o desenvolvimento. Seletores Agrupados Seleteroes agrupados so usados quando queremos definir um mesmo estilo a vrios elementos diferentes do documento HTML. Os seletores so separados por vrgulas. Veja abaixo: div, p, span, h1 {width:200px;} No cdigo acima, definimos que os elementos div, p, span e h1 tero a largura de 200 pixels. Seletores Encadeados Usamos seletores encadeados quando ns queremos que algum elemento que esteja dentro de uma tag especfica tenha um estilo personalizado. Neste caso, os seletores so separados apenas por espaos. Vamos entender mais com o exemplo abaixo: div p a {color:blue;} Assim, definimos que todos os links ("a") que esto dentro de algum pargrafo ("p"), que esto dentro de algum "div" tero a cor "blue" (azul).

Especificidade
No decorrer do nosso desenvolvemos entedemos o segnificado do nome da linguagem CSS (Cascading Style Sheet Folha de Estilo em Cascata), que especifica que o CSS interpretado da esquerda para direita e de cima para baixo, sendo que o ltimo seletor declarado vai sobrescrever este mesmo seletor em suas propriedades semelhantes, que possam ter sido declarados anteriormente. Como por exemplo: p{ color : blue; font-size : 1em; }

55

p{ color : red; } Neste exemplo, os pargrafos iro ter o tamanho de fonte de 1em, mas a cor ser sobreescrita ficando com a cor vermelha e no azul. Em alguns casos isto pode no ocorrer, isto quando falamos de especificidade, que ser especfico no tratamento do cdigo CSS, e a melhor maneira de dominar isto pontuando os nossos possveis seletores, atrabs de sua relevncia quanto a especificidade. Confira a pontuao: SELETOR TAG CLASS ID PONTUAO 1 10 100

Ao determinamos um seletor, devemos levar em considerao alm da ordem da escrita sua pontuao, que determina a especificidade. Por exemplo: div#noticias p{ color : black; } Este seletor possui duas tags e um ID, se utilizarmos a tabela de pontuao de especificidade podemos pontu-lo com 102 pontos. div p{ color : red; } Este outro seletor com apenas duas tags ir somar apenas 2 pontos. Neste caso devido a especificidade, mesmo o segundo seletor ter sido declarado por litmo, a cor dos pargrafos da div com id noticias ser preta, conforme declarao do primeiro seletor.

56

CAPTULO 6
TABLELESS
Tableless uma metodologia de trabalho que se baseia em semntica e onde tabelas so usadas apenas para dasdos tabulares e no mais para estruturar a pgina. Hoje, os Padres Web (Web Standards) esto bem mais maduros e j se pode utiliz-los com bem menos dificuldades do que anteriormente.

Benefcios
Reduo de custos Ao contrrio do mtodo tradicional, que quase sempre linear, utilizando Web Standards a equipe de negcio, design e programao podem atuar simultnea e independentemente. Isso acelera bastante a produo e torna a manuteno de um projeto web muito simples. Alm da economia de tempo, h reduo de custos na compra de licenas de software. Desenvolvimento mais gil Significativa parte do tempo no processo de desenvolvimento da maioria dos websites desperdiada em retrabalho de design para que o HTML fique com aparncia profissional. O desenvolvimento Web Standards corta o retrabalho praticamente a zero. Tecnologia acessvel Um designer treinado em Web Standards no depende de um programador para saber o que pode ou no ser implementado em um projeto web; e vice-versa. Facilidade para criar verses de layout Uma vez que contedo, programao e design esto em camadas separadas, incomparavelmente mais rpido desenvolver verses de layout para uma mesma tela. Paz entre designers e programadores Com a separao entre contedo e layout promovida pelos Web Standards, designers e programadores podem trabalhar simultaneamente e de maneira independente. Perfeita integrao com .NET, Java, PHP, ASP etc.; Web Standards & Tableless tm total integrao com as principais tecnologias de mercado. Pequenas mudanas precisam ser feitas em uma ou outra plataforma. Lembrando sempre, que cada caso um caso.

57

Por exemplo: se voc tem um grande portal, provavelmente a maior vantagem que voc vai obter, ser a economia de banda. Controle sobre o projeto Com a metodologia Web Standards, evita-se que apenas um membro da equipe tenha domnio exclusivo sobre o desenvolvimento, assegurando que qualquer desenvolvedor poder dar continuidade ou realizar futuras manutenes. Melhor visibilidade no Google Optar pelos Web Standards significa valer-se da estrutura semntica simples e coerente do HTML, fator primordial para ter um melhor posicionamento nas ferramentas de busca. Velocidade do website O cdigo HTML se torna muito mais compacto ao se separar contedo, design e programao, conforme os Web Standards. Alm disso, a tecnologia Tableless permite que o navegador interprete as informaes de layout (em um arquivo CSS) de 30% a 70% mais rapidamente. Acessibilidade O uso de Web Standards facilita muito a aplicao de normas de acessibilidade. Isso garante o acesso ao website, no importando que combinao de navegador e plataforma o usurio possua. Cabe agora aos desenvolvedores atualizarem seus conhecimentos e revolucionar a Internet. Como ns dizemos: primeiro, a internet mudou a vida das pessoas; agora, so as pessoas que vo mudar a internet.

58

CAPTULO 7 Ajax Acessvel

Atualmente, muitas entidades esto envolvidas com a criao de padres e metodologias para desenvolvimento de aplicaes acessveis. Um dos aspectos mais crticos o Ajax (Asyncronous JavaScript and XML). Muitos grupos de desenvolvimento espalhados por a hoje trabalham afim de criar esses padres, entre muitas esto a WAI (Web Accessibility Initiative's), WAT-C (Web Accessibility Tools Consortium) entre outras. Mas para podermos ter uma idia de como deixar uma aplicao com Ajax mais acessvel, devemos nos interar sobre o comportamento de alguns leitores de tela. Comportamento dos Leitores de Tela Basicamente um leitor de tela consiste em um software que que faz uma varredura da pgina, coloca seu contedo no seu buffer virtual, feito isso ele libera o contedo que foi gravado em seu buffer para o usurio. Sem esse buffer, o leitor de tela seria limitado a acessar somente parte dos elementos de um site, como ncoras e elementos da interface, ficando praticamente impossibilitado de fornecer ao usurio condies de interagir com os demais elementos e seus ns descendentes no contedo, tais como listas, imagens, tabelas entre outros. Como informar ao leitor de tela que ocorreu uma mudana no contedo Se o contedo for alterado via Script, de algum modo isso deve ser informado ao leitor de telas. Como no h ainda um mecanismo que detecte essa umdana no contedo, um usurio de leitor de tela nunca ficar sabendo da mudana, ou ainda, ser informado, mas precisar ler todo o documento pra descobrir o que foi alterado. A ltima linha de leitura aquela que contm o elemento ativado pelo usurio para produzir o novo contedo, dessa maneira, o usurio no ter a mnima idia de como localizar a mudana de contedo. Uma maneira para resolver isso utilizando o mtodo focus, que padro ECMAScript, que pode ser utilizado para colocar o foco no local da pgina onde o contedo foi alterado, porm, para que isso funcione, o elemento alvo deve ser habilitado a receber o foco. No HTML e XHTML habilitados a receberem foco so: a, area, button, input, object, select e textarea. Em XHTML 2 todos os elementos podem receber foco, mas nas atuais especificaes para HTML 4.01 e XHTML 1.x somente elementos ncora e elementos de interface podem receber foco. Para tentar contornar isso, a WAI-PF[1], props a Dynamic Accessible Web Content Roadmap[2], onde sugerido que se use -1 para o tabindex, em elementos que no podem receber foco, e formalizou tal proposta em States and Adaptable Properties Module[3]. A necessidade de que todos elementos possam receber foco foi reconhecida pela Web Applications 1.0[4]. O atributo tabindex aceita valores entre 0 e 32767. Um valor positivo determina a ordem em que um elemento deve ser acessado quando a navegao se d pelo teclado. Um valor igual a 0 siginifica que esse elemento deve ser acessado de acordo com sua ordem dentro do arquivo HTML. Atribuir os elementos

59

o valor 0 para o tabindex em um elemento que no seja ncora ou que no seja da interface, significa que ele est sendo habilitado a receber foco, e atribuir o valor -1 para o mesmo, significa habilita-lo a receber foco via ECMAScript, contudo, isso pode causar certa confuso para usurios que navegam por meio do teclado, pois ao atribuir -1 para o tabindex desse elemento, ele estar habilitado para receber foco via ECMAScript, mas no ser colocado na ordem de tabulao dos elementos do site. Estruturando contedo para aplicaes AJAX Existem vrias maneiras de estruturar contedos para que uma aplicao Ajax funcione corretamente em um leitor de tela. A mais simples e talvez a melhor seja a de se fazer com que as partes da aplicao que exigem ativao pelo usurio, estejam em elementos para formulrios. Esta soluo permite informar ao usurio sobre mudanas, focando na parte do documento que foi alterada. Isto requer que o usurio desabilite/habilite o mode buffer virtual, mas isso exatamente que o uaurio espera quando interage com formulrios. Se a parte alterada do documento est no formulrio, ento surge um problema; the changed part of the content is in the form itself, then this presents a problem; although the user can get at the text, they won't be able to interact with the content as they would if they were in virtual buffer mode. Tomemos como exemplo para ilustrar esta situao uma tabela de dados incorporada em um formulrio (uma estruturao destas poderia ser melhorada, mas vamos considerar para efeito de exemplo que seja uma soluo plausvel). Se um dado em uma clula da tabela for atualizado em resposta ao evento onreadystatechange o foco pode ser dado clula e o leitor anunciar a atualizao. O problema que a tabela contento o texto atualizado no ser mais reconhecida como uma tabela e o usurio ser incapaz de localizar os headers da tabela e navegar o restante da tabela. Para reverter esta situao o usurio ter que voltar ao modo buffer virtual. Como os leitores de tela sempre anunciam o atributo title, este poderia ser usado para os controles de formulrio que possam receber foco (inclusive elementos que no sejam de interface com um especfico valor para o atributo tabindex) e que no estejam associados a um label. A seguir um exemplo de como atualizar o conteudo de uma clula de tabela em resposta ao evento onreadystatechange. var objCurrent = document.getElementById('update'); var objReplacement = document.createElement('td');

// Set the title attribute to prompt the user to change mode // This should use simpler language than used here, as the user // isn't likely to understand the concept of a virtual buffer objReplacement.setAttribute('title', 'Switch to virtual buffer'); // When the element loses focus, remove the attribute for other

60

// user agents objReplacement.onblur = function(){this.removeAttribute('title');};

// Set a negative tabindex attribute value so the element // can receive focus objReplacement.tabIndex = -1;

objReplacement.setAttribute('id', 'update'); objReplacement.appendChild(document.createTextNode(strResult));

// Replace the existing node with the new node objCurrent.parentNode.replaceChild(objReplacement, objCurrent); // Set focus to the element objReplacement.focus(); Se a interao com a aplicao no for por formulrio, o mais importante avisar ao usurio para que ele desabilite o modo buffer virtual (tal como ele faria para interagir com um formulrio). Isto no to simples como parece, pois ser necessrio usar instrues muito claras ao usurio do leitor de tela que na sua maioria desconhece os detalhes tcnicos do software que esto utilizando da mesma forma que usurios de navegadores visuais no necessariamente conhecem como redimensionar os textos no navegador. Uma soluo simplista a de disponibilizar uma pgina de ajuda, facilmente localizvel na aplicao, explicando buffer virtual e contendo uma tabela mostrando os atalhos para habilit-lo e desabilit-lo nos leitores de tela mais populares. A tabela a seguir mostra os atalhos de teclado para habilitar e desabilitar o buffer virtual dos leitores de tela que ns usamos para testes. Links: [1] - http://www.w3.org/WAI/PF/ [2] - http://www.w3.org/WAI/PF/roadmap/ [3] - http://www.w3.org/WAI/PF/roadmap/DHTMLRoadmap040506.html#focus [4] - http://whatwg.org/specs/web-apps/current-work/#tabindex0

61

CAPTULO 8 SWFObject
SWFObject um pequeno Script para a insero de contedo Macromedia/Adobe Flash em pginas web. Ele detecta o plugin do Flash para a maioria das arquiteturas e plataformas, foi projetado para facilitar a insero de mdias em flash. amigvel com mecanismos de busca, uma vez que, mostra um contedo alternativo quando a mdia no puder ser carregada. Pode ser usado tranquilamente com HTML e XHTML 1.1 (desde que seja text/html e no application/xhtml + xml). Como Utilizar o Script? Utilizar o script para inserir qualquer contedo Flash no site muito fcil. Primeiro precisamos do cdigo fonte do Swfobject[1], depois devemos inclu-lo em nosso cdigo HTML. Abaixo segue exemplo com explicao de cada detalhe do processo. Assim inserimos o script no site <script type=text/javascript src=swfobject.js></script> Elemento que receber o contedo flash, j como texto alternativo, no caso do usurio possuir o flash player instalado, ele no ver esse contedo, porm ser facilmente indexado por qualquer mecanismo de busca. <div id=conteudoFlash>Esse texto ser substitudo por contedo Flash</div> E aps isso, podemos criar um novo objeto da classe swfobject e fazer com que ele coloque o flash onde quisermos, conforme exemplo abaixo: <script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", #336699"); so.write("flashcontent"); </script> Cria um novo SWFObject passando os parmetros obrigatrios: swf: o caminho e o nome do seu arquivo swf. id: o ID do seu objeto ou da tag embed. A tag embed tambm usar esse valor no seu atributo nome para os arquivos que utilizam o swliveconnect. width: a largura (em pixels) do seu filme Flash. height: a altura (em pixels) do seu filme Flash.

62

version: a verso necessria para rodar o seu contedo em Flash. Pode ser uma string no formato maiorVerso.menorVerso.reviso. Por exemplo: 6.0.65. Ou voc pode apenas exigir a maior verso, como por exemplo 6. background-color: o valor em hexa da cor de fundo do seu filme Flash. Parmetros opcionais:

useExpressInstall: se voc deseja atualizar o plug-in dos usurios usando o recurso ExpressInstall, use true para esse valor. quality: a qualidade com a qual voc deseja que seu filme seja executado. O valor padro high. xiRedirectUrl: se voc deseja redirecionar os usurios que completarem uma atualizao via ExpressInstall, especifique a URL aqui. redirectUrl: se voc deseja redirecionar os usurios que no tm a verso correta do plug-in, use esse parmetro. detectKey: o nome da varivel de URL que o script do SWFObject procurar para contornar a deteco. O padro detectflash. Por exemplo: para contornar a deteco do Flash e simplesmente escrever o filme Flash na pgina, voc pode adicionar ?detectflash=false na URL do seu documento que contm o filme Flash.

so.write("flashcontent");

Diz ao script do SWFObject para escrever o contedo em Flash na pgina (se a verso correta do plug-in estiver instalada no sistema do usurio), substituindo o contedo dentro do elemento HTML especificado. [1] - http://blog.deconcept.com/swfobject/swfobject_source.js Adicionando Parmetros para o Flash O exemplo supracitado se ateve somente ao bsico na insero de um arquivo swf dentro de uma pgina HTML. Porm como todos sabem, existem parmetros adicionais que podemos adicionar aos arquivos Flash. Abaixo segue um exemplo com alguns parmetros adicionas, mas pode ser obtida no site da Adobe a lista completa de parmetros[2]. <script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699"); so.addParam("quality", "low"); so.addParam("wmode", "transparent"); so.addParam("salign", "t"); so.write("flashcontent"); </script>

[2] - http://www.adobe.com/go/tn_12701 Passar Valores para o Flash utilizando FlashVars

63

A utlizao de FlashVars a maneira mais comum e fcil de passarmos valores como parmetros para o arquivo swf dentro de um site HTML, os valores so passados uma vez, quando o arquivo carregado. O modo normal de inserir esse contedo passar um parmetro chamado FlashVars, e seu valor um lista de pares nome=valor, como exemplo abaixo: variavel1=valor1&variavel2=valor2&variavel3=valor3... O SWFObject torna isso mais prtico e objetivo, permitindo que voc adicione tantas variveis quanto necessrias, de uma maneira similar aquele usada para incluir parmetros adicionais ao arquivo. Abaixo temos um exemplo da utilizao: <script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699"); so.addVariable("variavel1", "valor1"); so.addVariable("variavel2", "valor2"); so.addVariable("variavel3", "valor3"); so.write("flashcontent"); </script>

Desse modo, ao ser carregado, imediatamente seu arquivo contar com todos esses valores disponveis na linha de tempo _root. Outro recurso interessante do SWFObject a funo que permite extrair variveis diretamente da URL do site, se tivssemos a seguinte URL: http://www.example.com/page.html?variavel1=valor1&variavel2=valor2 Utilizando a funo getQueryParamValue(), voc pode facilmente pegar esses valores da URL e pass-los para o seu arquivo swf. Abaixo exemplo para a supracitada URL: <script type="text/javascript"> var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699"); so.addVariable("variavel1", getQueryParamValue("variavel1")); so.addVariable("variavel2", getQueryParamValue("variavel2")); so.write("flashcontent"); </script>

EXPRESS INSTALL Um recurso muito interessante do SWFObject seu completo suporte ao Recurso Adobe Flash Player Express Install. Junto com o script do SWFObject existe um arquivo ActionScript que funciona com o SWFObject, para dar inicio ao processo de atualizao do Plugin do Flash. Para utilizar tal recurso, primeiro voc deve incluir o arquivo expressinstall.as no seu .fla e no, inicio do arquivo, fazer uma pequena checagem para ver se o plugin do usurio precisa ser atualizado:

64

#include "expressinstall.as" var ExpressInstall = new ExpressInstall(); // se o usuario precisa ser atualizado, mostra o botao iniciar atualizacao if (ExpressInstall.needsUpdate) { // isto eh opcional, vc pode tambem iniciar a atualizacao automaticamente, // chamando ExpressInstall.init() aqui, ao inves das seguintes linhas // anexa a msg personalizada de atualizacao, centralizada var upgradeMsg = attachMovie("upgradeMsg_src", "upgradeMsg", 1); upgradeMsg._x = Stage.width / 2; upgradeMsg._y = Stage.height / 2; // anexa as acoes de botao q iniciarao o atualizador ExpresInstall upgradeMsg.upgradeBtn.onRelease = function() { // este metodo eh o q dah inicio a atualizacao ExpressInstall.init(); } // se o expressinstall foi invocado, para a linha do tempo stop(); }

importante ressaltar que no se deve colocar nenhum contedo no primeiro quadro ou no que acontecer a checagem do expressinstall. DOWNLOAD No blog do autor[3] possvel baixar o contedo completo, incluindo o cdigo fonte do JavaScript, arquivos .fla, arquivos .swf, expressinstaller.as e exemplos da implementao do SWFObject em diferentes circunstncias. [3] - http://blog.deconcept.com/swfobject/swfobject1-4.zip UM EXEMPLO DE COMO APLICAR Entre as tags <head></head> colocar os seguintes cdigos, linkando para dois arquivos JavaScript, o primeiro para um arquivo novo onde iremos escrever uma funo: <script type="text/javascript" src="js/flash.js"> </script> <script type="text/javascript" src="js/swfobject.js"> </script> O arquivo swfobject, sempre o mesmo para todos os projetos. (APENAS COPIAR E COLAR).

65

O arquivo flash.js, vai conter os cdigos que substituiro o id declaro em HTML pelo flash, neste arquivo declaramos tambm a altura e a largura do flash. Exemplo de um arquivo flash.js: // JavaScript Document function flash(arquivo,id,largura,altura){ if(!document.getElementById(id)) return; var so=new SWFObject(arquivo,id,largura,altura,8,"#FFFFFF"); // 8 indica a verso do flash; // #FFFFFF indica que a cor do fundo padro branco; so.addParam("wmode", "transparent"); so.write(id); } window.onload = function(){ flash("flash/nome_flash.swf","nome_id",largura,altura); flash("flash/banner1.swf","banner_atualizacoes",213,80); flash("flash/banner2.swf","banner_aprenda",213,80); flash("flash/video.swf","video_flash",230,188); }

66

CAPTULO 9 Acessibilidade no Flash

O Flash j foi um alvo de muitas crticas, incluindo do famoso Jakob Nielsen, pai da usabilidade, sobre suas deficincias ao gerar contedos acessveis. Bom a Macromedia, atualmente Adobe, contratou o prprio Jakob Nielsen, autor das maiores crticas, como consultor para melhorar o programa. O resultado foi o surgimento de um painel novo, alm de novas caractersticas em outros painis. Vamos ver como utilizar estes painis da forma correta, aplicando ao documento, menus e campos de texto. Para este manual bsico, estarei utilizando a verso CS3 do Flash, mas as mesmas ferramentas e painis so encontradas nas verses MX 2004 e 8.

Acessibilizando o documento
Janela Document Properties

Figura 3: Layout da Janela Document Properties Para abrir esta janela, v at o menu Modify > Document. Para cada arquivo em Flash que for desenvolver importante que defina duas informaes sobre o mesmo:

67

Title Este campo serve para determinar um ttulo para o arquivo, uma informao breve, sobre o documento, como por exemplo: Catlogo de Produtos. Description Neste campo faa uma breve descrio sobre o contedo do arquivo e seu propsito. Como por exemplo: Conhea nossas linhas de produtos. Com o documento descrito podemos comear a desenvolver nosso projeto, sabendo que j informar ao usurio que documento est acessando e qual o seu propsito. Painel Acessibility Com este painel podemos gerar contedo acessvel, fornecendo equivalentes textuais aos elementos utilizados no Flash.

Figura 4: Layout da janela Painel Acessibility do Flash (apresenta os trs itens ativados) Para abrir este painel, v at o menu Window > Other Panels > Acessibility. Acessibilizando Textos Por padro, o Flash permite o acesso a todos os elementos textuais para os leitores de tela. No sendo necessrio fazer nenhuma modificao. Mas importante observar que as opes do painel Accessibility mudam de acordo com o tipo de Campo Texto que for utilizado. Static Text (Texto Esttico) Se escrever qualquer texto utilizando o campo Static Text, vai encontrar no painel Accessibility apenas a mensagem: Current selection cannot have accessibility applied to it, ou seja: A seleo atual no tem acessibilidade aplicada a ela, o que nos informa que no h opes a serem configuradas para ela, veja a Figura 5. Mas importante deixar ativa a opo selectable, que possibilita a seleo do texto, isto permite que usurio selecione o texto e facilita a acessibilidade para alguns leitores de tela.

68

Figura 5: Static Text (Texto Esttico) no possui configuraes no painel Accessibility

Figura 6: Detalhamento da opo selectable

Dynamic Text (Texto Dinmico) Os campos de texto do tipo Dynamic Text, quando com a opo Make object Accessible, ou seja, Torne o objeto acessvel, estiver ativada, permitir ao leitor de tela ler exatamente o contedo escrito no mesmo. Mas se achar necessrio poder contar com mais duas configuraes: Description (Descrio) Utilize esta opo para definir uma pequena descrio do campo, o qual deve ser feito apenas se o campo necessitar de maiores explicaes, o que na maioria das vezes no necessrio. Tab index (Ordem da Tabulao) Utilizado para definir a ordem que o objeto ser selecionado quando o usurio navegar utilizando as teclas TAB e SHIFT+TAB.

69

Figura 7: Opes de acessibilidade para Dynamic Text

Input Text (Texto de Entrada) No campo de texto do tipo Input Text, configuramos o painel Accessibility da mesma forma que fariamos na linguagem (X) HTML, onde indicado definir um Name um rtulo para o campo de texto, para que o usurio saiba o que est preenchendo, e quando for necessrio coloque uma descrio no campo Description, como por exemplo: Campo obrigatrio. Alm destas duas opes ainda temos os campos: Shortcut que serve para definir um atalho, um acesso rpido ao campo, o que feito definindo uma letra ou nmero, como por exemplo: A. O atalho para o usurio ser a tela ALT juntamente com a letra ou nmero definido, no nosso exemplo o atalho ALT + A. Tab index No caso de formulrios muito importante definir a ordem da tabulao para que o usurio tenha uma ordem lgica definida ao preencher os campos. Caso contrrio ele ficar preso ordem de criao dos campos.

70

Figura 8: Opes de acessibilidade para Input Text (Texto de Entrada)

Acessibilizando Buttons e Movie Clips O termo etiquetar bem conhecido por quem desenvolve contedo acessvel, que significa identificar textualmente um elemento, o que feito no HTML com imagens atravs do atributo alt e no Flash feito atravs do painel Accessibility. Tanto os Buttons como os MovieClips tem que ser etiquetados, pois mesmo contendo campos de texto inseridos no seu corpo, um elemento fechado e pode acarretar em no ser acessado pelo leitor de tela. Para demonstrar como etiquetar um menu de navegao, criei no Flash dois elementos utilizados para este fim, um Button, com a funo de voltar e um MovieClip com a funo de avanar. A utilizao do Symbol Button para botes mais simples, sem uma animao mais elaborada, enquanto o Symbol Movie Clip, deve ser utilizado para botes animados e com aspectos visuais mais elaborados. Acessibilizando um Button O Button tem as mesmas opes que foram vistas nos campos de texto, ento basta configura-lo da mesma forma, mas importante salientar a importncia de determinar o rtulo do boto no campo Name do painel Accessibility, para este boto do exemplo o Name seria Voltar e nos casos que forem necessrios determine a descrio no campo Description, aqui poderamos utilizar: Clique para voltar para o slide anterior.

71

Para botes com a funo de navegao de slides, como Voltar e Avanar importante definir corretamente o Tab index e um Shortcut, como exemplificado na imagem abaixo:

Figura 9: Opes para acessibilizar o Button

Para botes animados desenvolvidos com Movie Clips, tem apenas uma diferena no painel Accessibility para os botes definidos pelo Symbol Button, a opo Make child objects accessible ou seja, Tornar os objetos filhos ( ou internos ) acessveis. Acessibilizando um Movie Clip Neste caso como o Movie Clip pode desde ter a simples funcionalidade de um boto at ter a funo de recipiente de partes ou de toda uma animao, a opo Make child objects accessible, permite que os elementos internos do MovieClip possam ser lidos pelo leitor de tela, os quais devem tambm estar com as suas opes de acessibilidade definidas.

72

Figura 10: Opes para acessibilizar Movie Clip

73

REFERNCIAS BIBLIOGRFICAS
SONZA, Andra Poletto. Ambientes Virtuais Acessveis sob a perspectiva de usurios com limitao visual. Tese (Doutorado) Universidade Federal do Rio Grande do Sul, Programa de PsGraduao em Informtica na Educao, Porto Alegre, 2008. SONZA, Andra Poletto. Acessibilidade de Deficientes Visuais aos Ambientes Digitais Virtuais. Dissertao (Mestrado). Universidade Federal do Rio Grande do Sul, Programa de Ps-Graduao em Educao, Porto Alegre, 2004. 197f. W3C, 2007. Disponvel em <http://www.w3.org/TR/xhtml1> Acesso em nov 2007. W3SCHOOLS, 2007. Disponvel em <http://www.s3schools.com> Acesso em set 2007. DECONCEPT, 2008. Disponvel em <http://blog.deconcept.com/swfobject> Acesso em mar 2008. SOUWEB, 2008. Disponvel em <http://www.souweb.info> Acesso em mar 2008. BLOGDOXORNA, 2008. Disponvel em <http://www.blogdoxorna.com> Acesso em mar 2008. JUICYSTUDIO, 2008. Disponvel em <http://juicystudio.com/article/making-ajax-workwith-screen-readers.php> Acesso em mar 2008. WIKIPEDIA, 2007[1]. Tableless. Disponvel em <http://pt.wikipedia.org/wiki/Tableless> Acesso em nov 2007. WIKIPEDIA, 2007[2]. Web Semntica. Disponvel em

<http://pt.wikipedia.org/wiki/Web_sem%C3%A2ntica> Acesso em out 2007. ZELDMMAN, Jeffrey. Projetando Web Sites Compatveis. Editora Campus. Rio de Janeiro: Elsevier, 2003. CAMPOS, Leandro. HTML Rpido e Prtico. Editora Terra. Goinia : Terra, 2004