D

Informações.

Manias de autor

Meu nome é Jovino Camargo, de acordo comigo sou um orgonomista e terapeuta corporal reichiano que, no exercício de minha profissão de terapeuta, fui me transformando num arteorguiano, como se diz aqui entre nós, num terapeuta org.
Há mais de vinte anos que vivo a vida viajando entre São Paulo (Brasil) e Santiago (do Chile), o que significa dizer que passo uma grande parte da minha vida na ponte aérea São Paulo Santiago, sendo que costumo ficar aproximadamente dois meses em cada lugar.

Minha primeira profissão, com a qual me sustento, é a Arte Org terapia, o que significa que não exerço a arte de compor páginas web como profissão, mas sim por uma mescla entre necessidade e gosto, e acho importante esclarecer que neste terreno me considero um principiante. Também é importante esclarecer que neste espaço não me posiciono como terapeuta, pois na prática o que estou fazendo aqui é exercendo a atividade de webmaster e de webdesign. Neste tipo de situação, mudo de nome e respondo como Jo Camargo.

Reformulei este sitio no segundo semestre de 2008, motivado pelos novos tempos e pelas modificações na Arte Org. Minha intenção foi construir um sitio acessivel (esclarecimentos) seguindo os padrões CSS (esclarecimentos), porém, para que não sabe este não é um tema fácil e nem simples, muito pelo contrário. Eu acredito que tudo aqui sofre de mais sensibilidade crônica que o pior de meus clientes, onde a regra mais importante é: a ordem dos fatores altera consideravelmente o produto, o que significa que a mesma solução pode servir ou não para o mesmo tipo de situação, para a mesma página ou para uma página diferente. Isto num mesmo navegador, pois em navegadores diferentes é um Deus nos acuda.

Portanto, o primeiro que me ocorre dizer aqui é meus agradecimentos ao Maurício Samy Silva pelo seu sitio (o qual eu tive que visitar mais de mil vezes para tentar corrigir a infinidade de erros que foram aparecendo conforme os navegadores e os sistemas e programas de validação) ( A tudo isto, o Internet Explorer e de deixar qualquer um louco de pedra). Agradeço também a uma infinidade de outros tantos, em português, inglês e espanhol que, com a ajuda do goolgle, fui encontrando pelo mesmo motivo.

Caso alguém por aí conheça algum grupo de Web Design(es) amante das cores, que queiram seus sites acessíveis sim, mas que não concordem com este mundo de branco com letras pretas comumente denominado como sendo a revolução da Web Standards (de volta a época do html 2.0) (escarecimentos: por favor, veja quem nem tudo que é Web Standard cabe no mesmo saco e que eu também quero uma Web universal e acessível a todos), com páginas que vão dando aquele sono infernal, onde a única distração é se desconectar (é claro que as letras pretas num fundo branco permitem uma melhor concentração, porém é só aumentar a quantidade de texto ou de páginas que o efeito é exatamente o contrário).

Pois então, caso alguém conheça Web Design(es) que não concorde com a aberração dos contrastes (quando o contrastante chega ao ponto de doer a vista, o cérebro e a alma), que não estejam dispostos a acabar com os meios tons ou tons complementares somente porque uma parte da população não consegue dintinguir os tons vermelhos e os verdes, que acreditem que é possível fazer páginas web acessíveis e bonitas e que agradem a vista e as pessoas, e, principalmente que acreditem que nesta questão de acessibilidade estão se esquecendo das dificuldades perceptivas das pessoas comuns, que respeitem e busquem soluções para as necessidades e dificuldades gerais e individuais, mas que principalmente acreditem e defendam o direito do autor ansiar e tentar construir páginas que promovam um suspiro ou exclamação de algo bonito ou feio, enfim, que não estejam dispostos a matar ou sacrificar a condição artística e criativa (sabendo que não existe uma fórmula mágica que agrade a todos) por favor, façam-me saber, pois estou realmente interessado (a tudo isto, o Zen-Garden, apesar das críticas de alguns puristas à sua acessiblidade, foi realmente uma inspiração).

Sumário:

Meu objetivo nesta página é colocar num mesmo lugar tanto as descrições textuais (que costumam ficar separadas e escondidos, escritas em html puro e sem nenhuma graça) como as informações a respeito da estrutura usada na composição das páginas deste sitio, de forma que este material também seja acessivel para nós os pseudos capacitados. Do inglês, dos poucos termos que mantive (além de web e link, em português linque ou ligação) foi o conceito de (d) d.link que significa descrição alternativa (alt) para um determinado evento (imagem, mídia) visual ou auditivo. O que significa que todos os d-links das páginas principais deste sitio foram direcionados para esta página.

D-link do menu nav4

Sobre a composição e estrutura geral do site e das páginas.

Obs: Para as definições e maiores explanações vejam o sitio do Moujor.

Meu ponto de partida para a composição das páginas deste sitio foi um "template" (que tem o mesmo layout em todas as páginas) de Joe Botha (de 2001) estruturado com tabelas, que decidi retirar e usar somente CSS. Aí começou a epopéia ou primeira parte das tantas outras que vieram a seguir.

Mantive o estilo semi template, com uma página principal e as demais com modificações de conteúdo e de desenho (para contextualizar e não dar a impressão de estar numa só pagina).

Dividi a página por planos e regiões.

Primeiro um plano de fundo verde escuro. Logo, sobre ele uma imagem fixa que ocupa 90% (24 por 16 cm) da página que resultou numa imagem com bordes laterais (estilo da imagem de fundo).

Sobre esta imagem um quadro, coluna ou plano central branco que se move verticalmente e ocupa 80% da pagina (20 cm de comprimento fixo e altura flexível acompanhando o crescimento ou a diminuição do conteúdo) (estilo da coluna central).

Este quadro, coluna ou plano central foi chamado de container e foi dividido em regiões:

(1) A primeira região, um espaço superior, em cima do quadro branco, aparentemente vazio (pois nele está o menu de navegação 1).

(2) A segunda região foi chamada de cabeçalho e se encontra no início do quadro branco com o logo-imagem da comunidade da Arte Org (estilo do logo-imagem).

A seguir o quadro foi dividido em duas regiões ou colunas.

(3) A terceira região ficou no lado esquerdo com o menu principal.

(4) A quarta região, denominada de região dos títulos, ficou no lado direito com os títulos, imagens, frases contextuais, autorias e sumário, elementos relativos a cada página.

Abaixo, o quadro volta a ser de uma só coluna, nela uma sub região, a do sumário que faz parte da região dos títulos.

(5) A seguir mais uma região, a do conteúdo, que se estende até o rodapé, com textos, frases e figuras, dividida por quadros horizontais e verticais, conforme o caso.

(6) Logo a região do rodapé, com outro menu que comtem os linques "rel" e repete parte do menu principal.

(7) E abaixo do rodapé e do quadro, outra região: a do final da página.

Estas regiões estão marcadas com comentários na pagina html.

Quanto a composição html css, o primeiro a levar em consideração é que a página html eu procurei manter como sendo HTML 4.01 de transição e o CSS como sendo CSS1.

Tentei manter as soluções dentro do âmbito CSS1 e usar a menor quantidade de comentários condicionais e de Hacks possível. Coisa bastante difícil pois as soluções para os problemas de compatibilidade encontradas pela web costumam mesclar tudo e saltando de uma situação para outra como se tudo fosse a mesma coisa. Muita gente fala que uma boa semântica e um código limpo é a melhor solução, e que cada navegador calcula CSS de forma diferente sendo o Internet Explorer o pior dos casos, porém eu não consegui descobrir um tutorial que examinasse esta situação com diversos exemplos mostrando como resolver estas questões, ou como calcular CSS com esta tal boa semântica com codificação limpa que possibilitaria evitar os tais comentários condicionais e hacks.

Enquanto isto, como parte da política de manter as coisas separadas para melhor identificar os erros, dividi também minhas páginas de código CSS colocando os elementos CSS2 como elementos agregados ou importados.

De maneira geral a estrutura minhas páginas CSS ficou como segue:

01		resetting do eric 
folhas-base1 /CSS1/		@import		 folhas-base2 /CSS2/
02		Declarações CSS gerais
folhas-geral1 /CSS1/		@import		folhas-geral2 /CSS2/
03		Declarações CSS para as divisões ou box 
folhas-container1 /CSS1/	 @import		folhas-container2 /CSS2/
04		 Declarações CSS para os menus, listas e links 
folhas.menu1 /CSS1/ 

Tanto nos CSS encarregado das divisões (dos container ou box) como no encarregado dos menus e linques, mantive a ordem das páginas, isto é, as declarações acompanham o desenvolvimento das páginas de cima para baixo com comentários separando cada região. Não limpei e nem combinei as declarações CSS porque quero cada coisa declarada em seu devido lugar.

Idealmente cada página deveria poder ser renderizada sem CSS (veja o exemplo1 desta página sem CSS, somente com html) e deveria também ser renderizada somente com CSS1 (veja o exemplo2 desta página somente com CSS1).

Ocorre que para implementar a navegação paralela por teclado usei e abusei das listas e das divisões flutuantes e elas costumam desestabilizar o layout e como ainda não consegui corrigir isto somente com CSS1 tive que usar e abusar do posicionamento CSS2.

Além disso, muito provavelmente, a composição deste sitio vai ser tachada de divisão maníaca, por usar muitas divisões (box) quando deveria usar um só, e que a solução seria melhorar a semântica nas declarações dos seletores, porém, como ainda não sei como arrumar isto sem passar o centro da questão para CSS2, as páginas vão ficar assim mesmo, repletas de divisões.

Sobre o estilo ou motivo usado na composição do sitio da Arte Org

O tema ou motivo escolhido para a composição do sitio da comunidade da Arte Org do Brasil foi às folhas do outono o que também demandou certo tempo de pesquisa pela web em busca de "inspiração".

 

A imagem do plano de fundo.

A imagem de fundo representando o outono é uma foto composição inspirada numa foto presente no sitio flogbrasil. Quando digo foto composição estou dizendo que a foto foi composta mesmo.

Ela pode ser encontrada como plano de fundo em todas as páginas principais do sitio da Arte Org e pode ser visualmente apreciada subindo a página.

Trata-se de uma praça ou jardim (particular) dividido em dois lados, um gramado e o outro com chão de terra, com uma fileira de árvores no meio que graciosamente preenchem o chão e o gramado com folhas do outono. No fundo, da imagem a característica de praça se mostra de forma mais clara, sendo seguido por uma mescla entre muro e bosque que fecham o plano do horizonte da imagem.

A imagem está limitada nos lados da página por duas colunas (verde escura) e por sua vez ela é limite ou borde para um quadro central branco chamado de container ou plano da frente que se move verticalmente.

 

Quadro ou marco central.

O quadro, marco ou coluna central é branco e ocupa 80% da página, sendo que está limitado por bordes avermelhados com o tom de peroba vermelha. Nele, em cada canto interno tem um suporte vermelho escuro com o tom do pau Brasil. Enquanto os bordes do quadro separam a região central da página da imagem de fundo, eles mantêm o tom outonal da página sendo que o fundo branco do quadro dá liberdade e contraste para os elementos internos. Aqui, pode ser visualmente apreciado olhando para os lados e subindo descendo a página.

 

O cabeçalho com o logo-imagem da comunidade da Arte Org.

Na parte superior do quadro branco ou coluna central está o logo-imagem da comunidade da Arte Org estabelecendo certa relação entre a coluna branca, o marco e o motivo outonal.

O logo-imagem é uma imagem do tipo gif de 15 por 1.22 cm, com fundo branco que se mescla com o restante do quadro, com folhas coloridas pelos lados e no centro uma placa com um fundo do tipo peroba envelhecida, nela está escrito Comunidade da Arte Org com letras marrons escuras.

Nesta página ele pode ser visualmente apreciado descendo a página de modo a focar a parte superior do marco branco.

 

O menu principal

Localizado a esquerda, logo abaixo do logo-imagem da comunidade da Arte Org. Ocupa um espaço de 3,5 por 6 cm. Seu fundo imita um papiro e se encontra como pendurado ou apoiado pela parte superior por um fixador, que imita uma pequena caixa retangular com 4 folhas  incrustadas na madeira ao estilo porta jóias ou caixas de pinho. Neste suporte está incerido a barra ou menu de navegação 2.

O menu principal está dividido em quatro partes, cada uma com um ponto de chegada. Como um todo está organizado como uma lista vertical, porém a primeira parte com a barra de navegação 2, a terceira parte com o link D.link e a quarta parte com o menu letras são organizados com listas horizontais.

 

A primeira parte do menu principal é o menu nav 2 que já foi referido anteriormente.

A segunda parte é o menu principal propriamente dito com sete gifs orientados verticalmente, com seus linques direcionados para as páginas principais do sitio. Eles são imagens com fundo transparentes com frases com letras verdes direcionados para: Início (página home), livros (página publicações), artigos (páginas de artigos web), glossários (página do glossário), contatos (página de contatos, informações e linques), agenda (pagina de programações, cursos e eventos) e blog (blog da Arte Org).

A terceira parte deste menu é o D-link com dois gifs (imagens com fundos transparentes) que é o linque para esta página.

A quarta o menu letras com 4 gifs (imagens com fundo transparente) com a função (script) de aumentar ou diminuir o tamanho das letras.


Navegação e acessibilidade.

Há muito tempo venho namoriscando o assunto CSS (esclarecimentos) e acessibilidade (esclarecimentos), mas a questão somente ficou relevante quando eu já estava tentando fazer deste sitio um lugar acessivel. Foi quando descobri o sitio do Marco Antonio de Queiroz (MAQ) que por sinal é um Web Design cego. Simplesmente porque consegui compreender algumas coisas como a arte de navegar sem usar o mouse ou usando somente o teclado do seu ponto de vista. Descobri também que até então eu somente estava tentando achar um geito de enganar os sistemas de validação. Depois disto tres questões ficaram mais importantes, as quais decidi enfrentar em primeiro lugar: As descrições textuais alternativas, a navegação interna de cada página e o tamanho das letras. O restante vou deixar para outra etapa quando estiver disponto a enfrentar os programas de validar e consiga compreender as alternativas envolvidas.

 

Descrições textuais alternativas.

Resumindo a história eu acho que o problema aqui é que estamos perdidos entre as opniões dos expertos e estes não entram em acordo sobre como tratar, explicar e exmplificar os detalhes, sendo que os detalhes é o que realmente importa, pois é com eles que cada um pode lidar e compreender o que está envolvido. As tais diretrizes de acessibilidade no fundo são normativas que ficaram circulando como normativas e não desceram para a prática como varias alternativas para uma situação o que permitiria que cada um escolha como lidar com esta ou aquela particularidade.

Por exemplo em relação as descrições textuais, o que importa não é o que diz W3C (World Wide Web Consortium) através do WCAG (Web Contents Accessibility Guidelines) ou o que dizem os expecialistas esparramados pelo mundo, mas sim o que eu como autor acho que no meu site (que não seja texto pois este vai aparecer de qualquer jeito) é relevante o suficiente para que mereça uma descrição textual.

Por exemplo, eu acho que a imagem que usei como plano de fundo é importante para o contexto das páginas do sitio, apesar do plano de fundo não ser considerado como uma imagem, eu acho importante que ele tenha uma descrição alternativa, afinal demorei alguns dias em sua composição. Cabe a mim encontrar uma forma para que sua descrição apareça em algum lugar.

Outra coisa é se a pessoa capacitada ou descapacitada queira prestar atenção nisto ou não.

O que modifica completamente o conceito do que é decorativo ou não, caso contrario estamos reduzindo a camposição visual de uma página a pura informação textual existente na página e chamando isto de acessibilidade. De uma forma ou outra, por um lado aquilo que já não foi dito com palavras não é relevante, e portanto não precisa que o descapacitado tome conhecimento disto. Por outro lado aquilo que não pode ser dito por palavras pode ser cortado como superfluo, não faz parte da Web Standard. Neste caso eu não entendo porque gastamos tanto esforço e recursos com a apresentação visual se não estamos fazendo nada para que uma parte disto que costuma ser chamado de estilo, motivo ou contexto apareça de alguma outra forma que não seja somente a visual.

Ocorre que de acordo com o aprendido com Marco Antonio os leitores de tela identificam que existe uma imagem ali e não sabem decidir por si mesmo a importancia que ela tem e se não existe informação sobre isto eles vão ficar perdendo tempo para descobrir do que se trata.

Caso eu não queira que eles prestem atenção num certo evento, coloco na tag img o atributo alt vazio, assim (alt=" ") com um espaço entre as aspas. Agora, se eu quero que eles fiquem perdendo tempo tentando investigar do que se trata coloco na tag img o atributo alt nulo, assim (alt="") sem espaço entre as aspas.

Agora, se a imagem é de menor importancia ou cumpre uma função estrutural como é o caso das imagens dos linques nos menus que servem para manter o layout fixo, eu coloco sua função no atributo da tag img (como por exempo alt="Página Principal"), ou no caso de um logotipo que eu não quero entrar em pormenores (como por exempo alt="Arte Org").

Agora, se eu acho a imagem importante eu coloco uma pequena descrição textual no atributo alt (como por exemplo alt="imagem de uma sala de terapia org") e, com os atributos "longdesc" e "d.link" indico onde se encontra a descrição textual. Pois assim dou a opção da pessoa saber mais sobre a imagem de acordo com seu interesse.

Ocorre que a maioria dos sistemas de validar só aceitam a ultima opção e não vão ficar satisfeitos com as opções anteriores. Se eu declaro o atributo alt eles querem também a declaração do atributo "longdesc" e do "d.link" e alguns só aceitam isto em páginas html separadas e com o mesmo nome da imagem. Apesar de que o "longdesc" é muito pouco usado e o "d.link" é uma guerra com o desenho da página, pois ninguém gosta deste tal (D) pegado nas imágens.

A solução apresentado por Marco Antonio para os eventos de relativa importância é simples e elegante:

<img src="arquivodeimagem.jpg" longdesc="descricao.htm" alt="Logo da Empresa"><br> <a href="descricao.htm"><img src="img_transparente.jpg" alt="D"></a>

Note o espaço vazio <br> entre a imagem e o linque (este atributo neste lugar muda a localização da imagem transparente em relação a imagem foco). A imagem colocada no lugar de (D) é transparente e o (D) entra como atributo alt da imagem transparente. Note também que neste caso o atributo título é secundário e tem valor visual.

Isto significa uma imagem transparente no lugar da letra (D) que não aparece na renderização da página; que somente deve ser notada pelos leitores de tela e pela navegação por teclado.

Porém esta é uma solução elegante que não é recomendada pelos puristas que continuam teimando que a tal letra (D) deve estar a vista sendo que ela não tem uma funcionalidade visual pois é uma alternativa para a situação visual. Exatamente isto, é uma navegação não visual, paralela e a parte, sua funcionalidade esta relacionada com a descrição auditiva e com o teclado e não com os olhos, com a visão e com o mouse, portanto cabe ao autor decidir como e onde colocar este tal link, o importante é que e ele exista quando necessário.

 

Uma navegação paralela do ponto de vista do teclado.

Suponha que normalmente os leitores de tela leiam os textos de maneira decorrida, mas que vão parando em cada link, imagem ou demais ocorrência que apareçam no meio do caminho.

Este é um recorrido ponto por ponto como uma varredura de cima para baixo, da esquerda para direita. Da para imaginar quantas vezes a pessoa aperta a tecla seguir adiante ou enter para dar uma olhada auditiva numa pagina?

Note que não está a opção de saltar partes ou ir para outras parte como fazem os nossos olhos. Mesmo que  houvesse, numa página desconhecida é como ir para não sei onde e saltar não sei o que.

Isto é, para o usuário que não conhece a página é um salto no escuro, porém para o autor da página não é um salto no escuro. Ele simplesmente precisa oferecer e esclarecer as alternativas e o usuário decide no que se deter ou o que saltar. Não se esqueçam que na situação visual o olho faz isto automaticamente e o mause aciona a ação. Enquanto ligar, desligar, mudar de páginas ou seguir os linques para outras páginas são alternativas ou caminhos, e que aqui estamos considerando uma mesma pagina fora do contexto visual e do mouse.

É evidente que as pessoas descapacitadas acabam arrumando alternativas para lidar com a situação, mas isso não significa que não possamos melhorar a navegação paralela em cada página.

Quando colocamos esta situação de forma espacial, uma das soluções é criar um ponto de referência de onde a pessoa possa se mover para qualquer lugar ou região da página e retornar ao ponto de início. E que isto é feito com âncoras e linques.

O que significa que cada região importante da pagina pode ganhar um ou mais linques compondo um pequeno menu de navegação geral e um ou mais menus de navegação locais.

Estou chamando este tipo de navegação de paralela e digo que ela não tem nada a ver nem com os olhos e nem com o mouse. Que ela pode aparecer visualmente e pode ser clicada com o mouse mas não necessariamente.

Penso que cada menu regional precisa no mínimo de quatro pontos. Com um ponto ou âncora de chegada, um ponto de retorno ao ponto de referência inicial ou geral e uma opção de saltar a região onde se encontra para a próxima região. Para completar uma outra opção de pequeno pulo que permita que a pessoa continue percorrendo a região em questão ponto por ponto. E ai está um menu de navegação paralelo e interno com um ponto de chegada, um pulo e seguir adiante, um ponto de retorno e um salto para a próxima região. Caso os linques estejam inseridos em imagens transparentes ou não, ocultos ou mesclados no desenho da página como é o meu caso, é preciso considerar mais um elemento, o d.link, ou descrição textual.

Um menu ou barra de navegação central ou inicial e um ou mais menus de navegação regional, dependendo do autor e da página.

A diferença entre a barra de navegação geral e as regionais é que a barra de início precisa de outras opções além destas quatros, direcionadas a cada um dos menu de navegação regional, e que por lógica ela deve estar localizada no início da pagina. Portanto do início da pagina para o menu principal, para a região dos titulos e sumário, para a região do conteúdo e para a região do rodapé. Como se trata de uma navegação por teclado, que não precisa estar visível, cabe ao autor decidir o que se manifesta de forma visual e o que não.

Neste sitio eu decidi mesclar os menu de navegação interno com o desenho das páginas e focar cada ponto para que a também possa ser acompanhado visualmente onde a navegação do teclado se encontra. Nesta pagina as divisões com os menus de navegação estão a mostra para revelar sua localização.

Em qualquer um dos menus, se você clica no primeiro ponto, na âncora focal, você fixa a navegação neste ponto, o que te permite seguir adiante com a tecla tabulação ou maiuscula tabulação para retornar e enter para ativar e executar a ação proposta por cada linque.

Agora vamos aos problemas. Numa situação normal os linques inserido nos textos são separados pelo próprio texto. Quando dois linques estão juntos e motivo suficiente para os sistemas de validação alegarem. Quando um ou mais links estão interligados, um em seguida do outro, o melhor a fazer é marcá-los como lista não ordenada, que a própria lista promove a separação entre um linque e outro. As outras soluções como sinais ou imagens separadoras, transparentes ou não, não são recomendadas (WCAG).

Acontece que as listas não são fáceis de compatibilizar, nem de configurar, pelo contrário, são extremadamente sensíveis, inclusive são sensíveis ao próprio html, como por exemplo a ordem como são descritas, o que significa que se mudamos o texto html de lugar (como por exemplo o lugar onde a frase é cortada para mudar de linha, coisa que não deveria promover alterações na renderização) pode modificar todo o layout, criando espaços onde não existia, desmontando a ordem horizontal ou vertical das listas, ou fazendo com que eles já não caibam onde antes cabiam. E aqui não tem jeito, pois o remédio é muita paciência, sistematização, teste e respaldo, mais do que comentários condicionais e hacks.

Outra coisa que tive que considerar e se devia colocar teclas de atalho ou não para a navegação paralela. O W3C (junto com alguns sistemas de validação) recomenda que sim, já o WCAG Samurai recomenda não. Eu optei por não simplesmente porque não é necessário (o importante aqui é o deslocamento de um lugar para outro da página (que neste caso é feito com âncoras e linques) e não com qual tecla isto deve ser feito pois cada um pode fazer isto com a forma de seu navegador. Cada navegador lida com o teclado de forma diferente e a indução de teclas de atalhos pode complicar mais do que ajudar. E só visitar algumas paginas com teclas definidas com vários navegadores para ver a encrenca. Além disso, se o usuário for cliente do Banco do Brasil com seu maldito plug-in esquece, pois seu teclado vai travar mai cedo ou mais tarde.

 

O tamanho das letras.

E evidente que o usuário tem o direito de decidir o tamanho das letras que ele quer que seu navegador apresente, e a maioria dos navegadores modernos já oferecem esta alternativa. Principalmente quando tem um monte de gente por aí com mania de escrever em minúsculo. Porém, dai o transformar todas as unidades CSS em relativas, já é um exagero tendencioso que coloca de fora a possibilidade de usar figuras fixas (entre eles os templates) como parte da composição. Neste sentido a WCAG Samurai ganhou mais um ponto postulando que a questão da unidade é irrelevante. Por via das dúvidas, como eu usei unidades absolutas a vontade na composição CSS deste sitio, mantive as letras com unidades relativas e coloquei um script acessível (que também pode ser manipulado pelo teclado) nas paginas que aumentam e diminuem o tamanho das letras, que se encontra no final do menu principal. Até onde eu testei, pelo menos isto funciona como manda o figurino.

Como o bom sentido não costuma funcionar amplamente em todos os casos, o grupo WCAG Samurai riscou os gifs animados, os frames e os meios tons da face do planeta terra. Contraditoriamente é só visitar as páginas deste povo para ver o branco sem fim tomando conta de tudo e a criatividade escapando pelas letras aberrantes com algumas imagens aqui e ali com tanto contraste que não combina nem com o branco. Enquanto isto, eu estou aqui esperando qual sistema eles vão inventar para validar as páginas ao mesmo tempo que estou apoiando (secretamente) o cutucão que eles vão dar na W3C. Enquanto isto cresce a minha certeza que eu vou ter que continuar descobrindo por mim mesmo a minha forma de navegar por estes assuntos.


Os menus ou barras de navegação paralela

Barra de navegação 1

Nas demais páginas a barra de navegação 1 está oculta por transparência, nesta pagina se encontra visível. Tem um tamanho de 3 por 0,5 cm e se encontra na parte superior da pàgina (caso você queira visitá-la: nav-1).

Está composta por 7 gifs transparentes ordenados por uma lista horizontal, sendo que cada um é um linque para uma região da página.

O primeiro é o ponto focal ancorado, o início da página, chamado de retorno.

O segundo é o pula menu (Skipover), salta todo o menu para o próximo ponto de continuidade (neste caso para o menu nav 2, localizado no início do menu principal).

O terceiro está direcionado para o menu principal (direcionado para as páginas principais do sitio).

O quarto está direcionado para a região dos títulos (com frases contextuais, logo-imagens das páginas, autorias e sumários).

O quinto para a região do conteúdo (elementos relevantes relacionados ao tema central de cada página).

O sexto para a região do rodapé (com os linques "rel" - proxima página e página anterior) mais a repetição linear do menu principal.

O sétimo é o D.link nav1 direcionado para este local desta página.

 

Barra de navegação 2

A barra de navegação 2 foi inserida como parte da composição da página, no suporte superior do menu principal que imita uma pequena caixa de pinho com 4 folhas como incrustadas na madeira. É a primeira parte do menu principal (caso você queira visitá-la: nav-2).

Tem um tamanho de 2,5 por 0,5 cm e está composta por 4 gifs de tamanhos diferentes, sendo cada um uma das folhas incrustadas. Está ordenada por uma lista horizontal, sendo que cada um é um linque de navegação.

O primeiro um foco ancorado, o ponto de chegada.

O segundo um pula menu, salta este menu para o próximo ponto de continuidade (neste caso para o início da segunda parte do menu principal, ou menu principal propriamente dito com seus linques para as demais páginas principais do sitio).

O terceiro é o retorno, volta ao início da página (para o menu nav1).

O quarto é um salto (Skipover), salta todo a segunda parte do menu principal para o próximo ponto de continuidade (neste caso para o menu D.link informações gerais, terceira parte do menu principal que está direcionado para esta página).

Logo abaixo um gif transparente com o d.link do menu nav 2 direcionado para esta descrição textual informativa.

O próximo ponto é menu letras (quarta parte do menu principal) composto por quatro gifs de fundo transparente. Também tem um pulo que salta o menu de navegação das letras e leva para o próximo ponto, neste caso o menu nav 3 na região dos títulos.

 

Barra de navegação 3

A barra de navegação 3 foi inserida na composição da página, na ultima fileira de folhas logo abaixo do logo-imagem da comunidade da Arte Org, como 4 folhas soltas pelo chão. Está localizada no início da região dos títulos (caso você queira visitá-la: nav-3).

Tem um tamanho de 2,8 por 0,5 cm e está composta por 4 gifs de tamanhos diferentes, sendo cada um uma das folhas. Está ordenada por uma lista horizontal, sendo que cada um é um linque de navegação.

O primeiro um foco ancorado, o ponto de chegada.

O segundo um pula menu, salta este menu para o próximo ponto de continuidade (neste caso para o início dos títulos).

O terceiro é o retorno, volta ao início da página (para o menu nav1).

O quarto é um salto (Skipover), salta todo a região dos títulos para próximo ponto de continuidade (neste caso para o menu de navegação 4 no início da região do conteúdo).

Ao seu lado direito um gif transparente com o D.link nav3 direcionado para este local desta página.

 

Barra de navegação 4

Nas demais páginas a barra de navegação 4 está oculta por transparência, nesta pagina se encontra visível, logo abaixo da região do sumário, marcando o início da região do conteúdo (caso você queira visitá-la: nav-4).

Tem um tamanho de 3 por 0,5 cm e está composta por 4 gifs transparentes de tamanhos iguais. Está ordenada por uma lista horizontal, sendo que cada um é um linque de navegação.

O primeiro um foco ancorado, o ponto de chegada.

O segundo um pula menu, salta este menu para o próximo ponto de continuidade (neste caso para o início do conteúdo).

O terceiro é o retorno, volta ao início da página (para o menu nav1).

O quarto é um salto (Skipover), salta todo a região do conteúdo para próximo ponto de continuidade (neste caso para o menu de navegação 5 no início da região do rodapé).

Ao seu lado direito um gif transparente com o D.link nav-4 direcionado para este lugar desta página.

 

Barra de navegação 5

Nesta e nas demais páginas a barra de navegação 5 está a vista e pode ser encontrada no final do marco do quadro branco, marcando o início da região do rodapé (caso você queira visitá-la: nav-4).

Este menu não usa figuras e está ordenado com listas horizontais. Está dividido em duas partes, a primeira com os linques "rel" com a próxima página e a página anterior. A segunda com uma repetição em linha da segunda parte do menu principal, que estabelece conexão com as demais páginas principais do sitio.



Página Inicial.

Foto-imagem de uma sala de terapia org

Imagem de impacto de 7 por 11 cm que mostra um cliente anônimo fazendo o exercício da barra do desequilíbrio numa sala de terapia da Arte Org. Tem uma tonalidade sépia e uma iluminação que aumenta a importância das sombras e coloca a sala e a figura humana (que aparece como uma silhuetas) num mesmo plano, ao mesmo tempo em que revela de forma sutil e elegante a atividade da pessoa (fazendo um exercício com um bastão nas mãos sobre uma barra de madeira).

 

Página livros. Publicações da Arte Org

Logo-imagem da página publicações

Logo-imagem publicações. Imagem jpg na região dos títulos com 13,5 por 2,5 cm. Um caminho subindo as montanhas com um pincel que vai pintando o caminho pela esquerda e um livro que retorna correndo pelo caminho pela direita.

Logo abaixo mais dois gifs, com um livro correndo pelo caminho.

 

 

Página artigos. Artigos web

Logo-imagem da página artigos

Logo-imagem artigos. Imagem jpg na região dos títulos com 13,5 por 2,5 cm. Um céu caregado, vermelho escuro, certamente do entardecer. Com folhas revoando pelo céu que mais se parecem com sombras de pássaros.

Logo abaixo mais dois gifs, com um ramalhete de folhas do outono.

 

Foto-imagem da página artigos

Quando o sol nasce no leste. Imagem jpg na região do conteudo com 17.3 por 9.7 cm. Um nascer do sol protegido pelas montanhas que ainda mantém as silhuetas noturnas acompanhado pelas araucárias com a letra da música o cío da terra de Milton Nascimento reforçando o motivo "trabalho constante e sistemático".

Debulhar o trigo ...recolher cada baga do trigo. Forjar no trigo o milagre do pão, e se fartar de pão. Decepar a cana ... recolher a garapa da cana. Roubar da cana a dosçura do mel, se lambuzar de mel. Preparar a terra ... conhecer o desejo da terra, cio da terra propícia estação, e fecundar o chão.

 

Página glossários.

Logo-imagem da página glossários.

Logo-imagem glossários. Imagem jpg na regão dos títulos com 13,5 por 2,5 cm. Uma revoada de borboletas difusas imitando nuvens num céu azul, azul, reforçando o motivo buscador de contextos, caçador de conceitos.

 

Página Contatos.

Logo-imagem da página contatos.

Logo-imagem contatos. Imagem jpg na região dos títulos com 13,5 por 2,5 cm. Imitando uma cinta de tecido sobre um fundo violeta, com tons vermelhos, violetas e amarelos, com um desenho difuso no centro imitando uma espiral, que revela levemente a presença da letra C de contacto.

 

Logotipo da página contatos.

Logotipo contatos. Imagem jpg na região dos títulos com 1,8 por 1,3 cm. Com um fundo violeta, sobre ele um C em alto-relevo e sobre ele a palavra contatos em amarelo.

 

Logotipo da Arte Org do Brasil.

Logotipo da Arte Org do Brasil. Imagem jpg na região do conteúdo com 1,8 por 1,3 cm. Com um fundo violeta noturno, com uma árvore no canto esquerdo e nela uma coruja piscando, que tem por trás, pelo lado direito um feixe de luz que reflete no céu o símbolo do funcionalismo orgonômico.

 

Logotipo do Instituto Wilhelm Reich do Chile.

Logotipo do Instituto Wilhelm Reich do Chile. Imagem jpg na região do conteúdo com 1,8 por 1,3 cm. Com um fundo preto, com uma bandeira branca revoando no centro, e nela o símbolo do funcionalismo orgonômico. Em baixo, pelo lado direito a palavra Chile em vermelho.

 

Logotipo dos terapeutas org.

Logotipo dos terapeutas org. Imagem jpg na região do conteúdo com 2,6 por 1,3 cm. Com um fundo azul, sobre ele a forma orgonome em altorelevo, e, sobre ela a frase terapeutas org em branco.

 

Página Agenda.

Logo-imagem da página agenda.

Logo-imagem agenda. Imagem jpg na região dos títulos com 14 por 2,6 cm. Um fundo azul escuro, sobre ele uma figura com azul céu degrade com a frase Arte Org e, ao longe, uma fileira de montanhas brancas de gelo.

No lado esquerdo um gif animado com um boneco branco brincando no gelo. Caso você não queira o gif animado, clique na imagem e vice-versa

Do lado direito do gif, outro gif transparente com o linque d.link direcionado para este lugar desta página.


© 2008 Arte Org

JoCamargo produções informações e acessibilidade
Saudações