Como alterar a skin do seu site em apenas um clique

Se você já é um programador experiente, não irá ler nada de novo aqui. Mas se você ainda é iniciante ou ainda nem tão experiente assim, vale muito a pena a leitura. Você poderá sair daqui com alguns tricks a mais em seu arsenal.

Mas antes de tratarmos do assunto propriamente dito… Você sabe o que é a skin de um site?

O termo skin vem do Inglês e significa “pele”. Se você gosta de jogos, já deve ter ouvido a gíria gamer “a skin do personagem”, se referindo à sua aparência geral, não só a pele, mas também as roupas, e até as armas, todo este conjunto forma a “cobertura” do personagem, que para este caso faz as vezes de “pele” e dando origem ao termo.

Lightning Returns garbs

Exemplo de uma mesma personagem com diferentes skins. A propósito, recomendo demais o jogo.

No caso de sites, o termo “skin” é praticamente a mesma coisa. Obviamente, um site não é um personagem e não usa armas ou roupas, nem tem pele. A “cobertura” do site, no caso, é a sua interface: basicamente, suas cores e a posição dos elementos. Mais precisamente, tudo o que o usuário vê em sua tela e interage com ele. Falando agora mais tecnicamente, todo o front-end do trabalho. Por exemplo, aqui neste site, eu uso uma skin mais escura, na intenção de não cansar a visão do usuário, já que eu espero que ele permaneça algum tempo navegando no meu site entre meus trabalhos.

Agora que você já sabe o que é a skin de um site, podemos passar para o assunto principal deste artigo: vamos aprender como alterar rapidamente, com apenas um clique, a skin de qualquer site ou página, proporcionando ao usuário a opção de, por exemplo, usar um tema mais claro ou mais escuro, de acordo com sua preferência. Muitos sites atualmente fazem uso disso, principalmente forums. E o melhor, é uma coisa extremamente simples de fazer.

Então agora chega de enrolação e vamos às vias de fato: para fazer o proposto neste texto, usaremos a linguagem Javascript. Note que programação é um mundo muito vasto, e há várias maneiras de se obter um mesmo resultado, ou seja, a demonstração que darei aqui não é a única maneira de se fazer isso, mas com certeza é uma das mais simples (se não for a mais).

Javascript é uma das primeiras linguagens que um desenvolvedor web aprende, mas novamente, programação é um mundo muito vasto e é realmente muito difícil conhecer tudo de uma linguagem, por mais que você seja bom nela. Hora ou outra você pode se deparar com algum recurso que você nem fazia idéia que existia, e para este artigo, tal recurso se chama className.
a

O que é e como utilizar o className

 

Embora programação seja um mundo muito vasto onde é quase impossível saber tudo… 99% dos termos usados são muito sugestivos, o que facilita o nosso trabalho. Com o className não é diferente: o comando manipula o elemento de acordo com… Isso mesmo, o nome da classe que o elemento possui, seja apenas localizando, ou adicionando/retirando classes, o que irá mudar sua aparência. Combinando o className com uma função if-else básica que seja, já é possível produzir efeitos bem bacanas. Vamos a um exemplo simples através de um pequeno exercício: abra o seu editor e crie uma frase qualquer e um botão embaixo, como demonstrado a seguir:

Texto e botão HTML

Lá no HTML seria mais ou menos isso aqui:

Código HTML

É importante que você atribua um #ID ao elemento, ainda que sem nenhuma formatação, pois é através dele que a função do Javascript irá localizá-lo. Mas antes, é necessário criar no CSS as duas classes que irão trocar entre si:

Código HTML

Você pode ver que as duas classes são idênticas, a única coisa diferente é a cor do texto. Pois bem, agora que nosso HTML e CSS estão prontos, vamos criar a nossa função de Javascript que será responsável por trocar as classes. É uma função bem simples:

Javascript função className

Agora coloque esta função no botão e execute o código no navegador. Se tudo estiver digitado corretamente, cada clique no botão deve alterar a cor do texto.

Legal, né? O botão simplesmente retira a classe “texto branco” e coloca a “texto dourado” e vice-versa. Essa é a maravilha do Javascript: manipular o CSS em tempo real. Não entendeu? Calma, vamos entender o que esse código faz:

– Uma variável localiza o elemento de acordo com o #id dele (por isso é necessário atribuir um #id, lá no começo)

– Uma função if-else básica dá o seguinte comando: se o elemento localizado estiver sob efeito de uma classe chamada “texto_branco_amostra”, troque-a para “texto_dourado_amostra”. Caso contrário (caso não seja texto_branco_amostra), então aplique a texto_branco_amostra. Isso vai fazer com que as classes de “texto branco” e “texto dourado” fiquem alternando entre si.

Sim, é só isso! E o que nós iremos fazer para trocar a skin de um site todo, nada mais é do que isso, mas em escala maior: ao invés de trocar somente uma característica por outra, iremos trocar várias. Isso vai alterar a aparência de vários elementos ao mesmo tempo… Trocando assim a skin do site como um todo. A lógica é a mesma, só o tamanho do código que vai aumentar. Veja abaixo:

Interface clara

Agora vamos trocar não só a cor do texto, mas também a cor do fundo. Crie duas classes onde essas duas características sejam diferentes:

Código HTML

Onde o #ID “sample_site” é o #ID que irá chamar o Javascript, como no exemplo passado. Você pode atribuí-lo à <div> onde a área que será afetada está, ou simplesmente no <body> mesmo, caso queira afetar toda a página.

Agora, basta criar a função e atribuir ao botão:

Javascript função className

Código HTML

Se tudo estiver digitado certo, ao clicar no botão, serão alterados a cor do texto e também a cor do fundo do site:

Interface escura

Usando desse recurso, você pode alterar tantas características você queira, com um único clique!

Agora que você já conhece o segredo do poderosíssimo className, é hora de praticar! Faça seus próprios códigos e melhore a interatividade das suas páginas! Quando se trata de programação, a sua criatividade é o limite! Portanto, mãos à obra!

Até a próxima!

a

– Rei Leo

CompartilheShare on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Print this page

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *