Curso de Joomla em várias modalidades só aqui no Joomla Brasília

Espero que você tenha lido e lembre-se que Para um daltônico, navegar em websites coloridos da Internet pode ser uma experiência não muito agradável. Alguns textos podem estar ilegíveis, ou mesmo a leitura dos gráficos pode ser impossibilitada devido o esquema de cores utilizado. Os tipos de daltonismos são Protanopia e protanomalia (deficiências com vermelho), Deuteranopia e deuteranomalia (Deficiencia com a cor verde), Tritanopia (deficiencia com a cor azul) e Rod monocromia ou acromia (sem cores) **MINORIA.

Em nossos projetos devemos nos certificar de que a cores não sejam apenas o seu método de transmissão para informações importantes. Fonte: Brasilmedia Aproveite e faça um teste, observe a imagem e responda: consegue ver a letra O? Pessoas com percepção normal observam a letra O, pessoas com deficiência na percepção das cores vermelho e verde, observam a letra Q, pessoas com ausência de percepção de cores não conseguem fazer a leitura das letras.

Nosso objetivo é continuar a customização do template ja purity para que o mesmo seja aplicado no JoomlaBrasília e nesta aula iremos abordar a criação do template voltado a pessoas portadoras de daltonismo. Espero que você tenha lido e iremos agora aprender a utilizar uma das melhores extensões do navegador Firefox, o Firebug, com o Joomla. Para baixar o firebug, basta clicar aqui.

Após terminar o download e instalação você precisa reiniciar o firefox. O que farei a partir de agora é mostrar como usar o firebug com o Joomla! Não vou entrar no mérito de configurações do firebug ou mostrar que usando outros programas você consegue salvar o que edita, enfim, serei prático e direto como sempre. Lembro que a versão deste artigo, em vídeo-aula, está disponível aos alunos do curso de joomla nas modalidades presencial, vídeo-curso e in company.

1) Iniciando o firebug - Abra o site joomla e no firefox vá em Ferramentas -> Firebug -> Abrir Firebug. O firebug será aberto no final da página.

2) Utilizando o firebug - Clique no ícone ao lado do "inseto" para iniciar a inspeção do código do template.

(*) - Perceba que ao mover o mouse sobre o template, automaticamente o firebug marca cada div do template com um retângulo azul e muda a apresentação no lado direito de acordo com a sua movimentação, entenda o significado:

(*) - o NR 1 apresenta as divs do seu template graficamente no seu navegador;

(*) - o NR 2 apresenta a div selecionada e sua estrutura de navegação. Clieque no + e você poderá verificar de quem esta div está herdando os estilos, se ela descende de outra ou não, enfim, todas as informações relativas a div em questão; e

(*) - O NR 3 apresenta a localização do seletor dentro da folha de estilo, inclusive com o número da linha em que ela se encontra.

3) Aptana - Nesta série estamos utilizando o APTANA, que é uma excelente IDE baseada no eclipse e que conta com um plugin php. O Aptana também é distriuído junto com o DVD do curso, dentro do kitwebdesign, mas se você quiser baixá-lo basta clicar aqui

No Aptana, iremos abrir o template acessível para começarmos a editar a folha de estilo voltada aos daltônicos. Lembre-se que até agora o que fiz foi criar uma cópia identica do template.css e nomear como daltonismo.css e contraste.css.

Ao clicar na imagem que troca o estilo para o daltonismo percebo que houve uma mudança relacionada ao fundo do cabeçalho, porém, a barra azul continua aparecendo e ela deve ser alterada, uma vez que pode ser um problema para nossos amigos daltônicos. Que tal mudá-la para uma tonalidade cinza? Penso que uma cor hexadecimal com o valor #cccccc resolva o problema. E você? Concorda?

Vamos abrir nosso site e analisar o estilo no firebug para identificarmos a div responsavel pela barra azul.

(*) - O NR 1 mostra a barra deve ser editada;

(*) - O NR 2 mostra o nome da div (ja-mainnavwrap) que deverá ser editada; e

(*) - O NR 3 mostra a folha de estilo e a linha em que o seletor se encontra.

Perceba que o nome da div é ja-mainnavwrap e ela está na folha de estilos chamada style.css na linha 55. Esta folha de estilos está em styles/header/blue. Vamos clicar sobre o nome da folha de estilos. Viu o que aconteceu? O firebug abriu a folha, exatamente no ponto que precisamos alterar. O hexadecimal que está montando a barra na tonalidade de azul, é o #1374A5;Duvida? Pause o mouse sobre ele e você verá um retangulo na tonalidade azul.

Vamos mudar para #cccccc; e obter um tom cinza? Basta clicar com o mouse e digitar #cccccc; na caixa que vai abrir. Percebeu que já houve a mudança na visualização do navegador? Magavilhoso né?

Só um detalhe frustrante, se você apertar f5, ou seja, atualizar a página, você perderá a edição. O motivo é simples, você não consegue salvar as alterações efetuadas no firebug. Na verdade, você até consegue se instalar outra extensão no firefox mas não precisaremos disto. Antes que você difame o criador do firebug, que podia ter sido legal e pensado nos usuários do joomla que estariam trabalhando local e etc..., lembre-se que ele busca bugs no código-fonte e nada mais.

E agora, o que fazer? Simples, você já sabe qual a folha de estilos alterar e já fez o teste, alterando no firebug e visualizando no navegador. Então, copie sua alteração e cole no linha 55 do style.css que está em styles/header/blue.

O que aconteceu? Todas as barras ficaram cinza independente da folha que você escolheu no frontend correto? Por quê? Porque estamos utilizando o ja-purity como modelo e ele possui vários parâmetros de configuração, dentre eles a configuraçao do HEADER que no nosso está usando o tema blue. Como resolver? Poderia mudar a parametrização, criar novas variáveis, mas vamos ser práticos:

Basta mover este pedaço de código para o daltonismo.css e desta forma só ele será atingido. Lembre-se de deixar o código original do style.css.

Agora só falta mudar a cor dos hiperlinks, de azul para preto e penso que nossa folha de estilos vai estar ok. Através do firebug, identificamos a div responsável pela cor do hiperlink (ítem de menu) e a mesma está na folha de estilo style.css. Porém, neste caso o style.css fica em style/elements/blue

(*) - O NR 1 mostra a div a ser editada; e

(*) - O NR 2 mostra a folha de estilos em que ela se encontra. O processo é idêntico ao da barra, mude para #000000; (preto) e veja o resultado.

Agora, abra a folha de estilo style.css selecione todo o código da folha, copie e cole no seu daltonismo.css.

O resultado pode ser verificado no frontend de nosso website acessível.

Desta forma terminamos a folha de estilos para daltônicos, na próxima aula iremos criar a folha de estilos para pessoas com baixa visão. Sucesso!