Fala pessoal! devido o excesso de trabalho, somente agora
arranjei tempo pra escrever meu primeiro artigo no MX Masters, que logo
logo vai estar bombando de tanto conteúdo.
Neste primeiro exemplo vou relatar uma situação que vivi hoje, quando
entreguei um site magnifico à um cliente e o mesmo reclamou que não
consegue visualizar as fontes direito, já que tem certos problemas de
visão.
Qual webmaster nunca montou um site com um índice de notícias? E quem
nunca teve problemas com tamanho de fontes nos textos das notícias? às
vezes o tamanho ideal para o layout acaba sendo pequeno demais para quem
tem algum prolema de visão. Eu, por exemplo, já estou tendo
dificuldades para ler noticias e artigos em alguns sites e preciso
aumentar a fonte usando CTRL + “+” para conseguir visualizar melhor.
No entanto, na grande maioria dos casos, quanto aumentamos a fonte de
forma “manual”, o layout do site se estraga completamente e algumas
imagens ficam totalmente desproporcional ao que site original, já que,
ao invés de somente o texto da notícia, todas as fontes são aumentadas,
como menu, títulos, índice de noticias, etc, etc, etc…
Sendo assim, neste primeiro artigo iremos ver como se cria uma
página, na qual o usuário tem na própria tela do site, uma opção de
aumentar a fonte do texto principal da notícia, já que o interessante
para nós é justamente o seu conteúdo.
A página que iremos criar utiliza CSS e Javascript (é intessante que
você tenha uma noção básica dessas tecnologias). De início iremos fazer
com três tamanhos de fonte. Uma padrão, que melhor combina com o layout e
outras duas de tamanho superior, para aqueles que tem dificuldades de
visão ou preferem não forçar a vista.
Abaixo vai o código de Estilo CSS. Veja que o Body terá a fonte
Verdana. No div com id texto, definimos apenas a largura dele, que é de
600px (varia de acordo com seu layout). A classe “fonte1″ será o padrão
do texto. Já as classes “fonte2″ e “fonte3″ são as maiores
(alternativas):
<style type="text/css">
<!--
body { font-family: verdana; }
#texto { width: 600px; }.fonte1 { font-size: 12px; }
.fonte2 { font-size: 16px; }
.fonte3 { font-size: 20px; }
-->
</style>
Agora vamos criar os links para o usuário alterar o tamanho da fonte
do texto. Vamos utilizar Javascript para que o tamanho da fonte se
altere sem atualizar a página.
<span class="fonte1"><a href="#" onclick="TamanhoFonte(1, 'texto')">a</a></span>
<span class="fonte2"><a href="#" onclick="TamanhoFonte(2, 'texto')">a</a></span>
<span class="fonte3"><a href="#" onclick="TamanhoFonte(3, 'texto')">a</a></span>
Quando selecionar um tamanho de fonte nos links do código acima, o
link estará chamado uma função Javascript que fará o trabalho de
aumentar a fonte instantaneamente. Segue o código para colocar no
cabeçalho de sua página:
<script type="text/javascript">
function TamanhoFonte(num, id)
{
document.getElementById(id).className = "fonte"+num;
}
</script>
Para encerrar, vamos criar o DIV com a nossa notícia:
<h4>TÍTULO DA NOTÍCIA</h4>
<div id="texto" class="fonte1">
<p>Este é o texto principal da notícia, onde o usuário poderá aumentar o tamanho da fonte através de um simples clique e sem estragar o layout do site. Este é o texto principal da notícia, onde o usuário poderá aumentar o tamanho da fonte através de um simples clique e sem estragar o layout do site. Este é o texto principal da notícia, onde o usuário poderá aumentar o tamanho da fonte através de um simples clique e sem estragar o layout do site.</p>
</div>
Agora, mãos a obra, faça e adapte para o seu site da maneira que ficar melhor em seu layout! Espero que seja útil!
<HTML>
<HEAD>
<TITLE>Script CSS e JavaScript</TITLE><!-- AQUI VAI O CÓDIGO JAVASCRIPT -->
<script type="text/javascript">
function TamanhoFonte(num, id)
{
document.getElementById(id).className = "fonte"+num;
}
</script>
<!-- AQUI VAI O ESTILO CSS -->
<style type="text/css">
<!--
body { font-family: verdana; }
#texto { width: 600px; }
.fonte1 { font-size: 12px; }
.fonte2 { font-size: 16px; }
.fonte3 { font-size: 20px; }
-->
</style>
</HEAD>
<BODY>
<!-- AQUI VAI OS BOTÕES PARA AUMENTAR O TAMANHO DA FONTE -->
<span class="fonte1"><a href="#" onclick="TamanhoFonte(1, 'texto')">a</a></span>
<span class="fonte2"><a href="#" onclick="TamanhoFonte(2, 'texto')">a</a></span>
<span class="fonte3"><a href="#" onclick="TamanhoFonte(3, 'texto')">a</a></span>
<span class=”fonte1?><a href=”#” mce_href=”#”onclick=”TamanhoFonte(1, ‘texto’)”>a</a></span>
<span class=”fonte2?><a href=”#” mce_href=”#”
onclick=”TamanhoFonte(2, ‘texto’)”>a</a></span>
<span class=”fonte3?><a href=”#” mce_href=”#”
onclick=”TamanhoFonte(3, ‘texto’)”>a</a></span>
<h4>TÍTULO DA NOTÍCIA</h4>
<!-- AQUI VAI O TEXTO DA NOTICIA QUE SERA AUMENTADO-->
<div id="texto" class="fonte1">
<p>Este é o texto principal da notícia, onde o usuário poderá aumentar o tamanho da fonte através de um simples clique e sem estragar o layout do site. Este é o texto principal da notícia, onde o usuário poderá aumentar o tamanho da fonte através de um simples clique e sem estragar o layout do site. Este é o texto principal da notícia, onde o usuário poderá aumentar o tamanho da fonte através de um simples clique e sem estragar o layout do site.</p>
</div>
</BODY>
</HTML>
0 comentários:
Postar um comentário
Sua opnião é importante pra nós ! .