11:25
Ricardo Ortéga
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>
Posted in: CSS,JavaScript,Programação
0 comentários:
Postar um comentário