Use PHP e CSS para alterar o tamanho do texto das páginas da web - Ao projetar seu site, tenha uma coisa em mente: nem todos os visitantes são jovens brilhantes e não estão necessariamente familiarizados com os vários métodos de uso de navegadores da web.
Ao projetar um site, tenha uma coisa em mente: nem todos os visitantes são jovens brilhantes e não estão necessariamente familiarizados com as diversas maneiras de usar um navegador da web. Os designers inteligentes compreendem isto e muitas vezes incorporam vários recursos especiais de acessibilidade no design dos websites, para que mesmo os idosos ou pessoas com deficiência possam utilizar o website de forma fácil e confortável, sem ter de despender um esforço extra.
O dimensionador de texto é um dos recursos de acessibilidade mais eficazes que qualquer site pode precisar. Resumindo, é uma ferramenta usada para alterar o tamanho do texto de uma página da web. Muitos navegadores já vêm com esse recurso, mas os iniciantes em navegadores da web não sabem como usá-lo. Portanto, os designers de sites geralmente implementam esse recurso colocando botões mais fáceis de usar em cada página da web.
Este guia mostrará como adicionar este dimensionador de texto funcional às suas páginas da web usando PHP e CSS, então vá em frente e adicione esta acessibilidade ao seu site e obtenha o máximo dos usuários com mais de 50 pontos de Kudos, continue lendo e você aprenda como usá-lo.
NOTA: Este guia pressupõe que você já tenhao
Apache e o PHP instalados.
Antes de escrever o código, é útil passar algum tempo entendendo como funciona o dimensionador de texto. Cada página do site contém uma série de controles que permitem ao usuário selecionar o tamanho do texto da página: Pequeno, Médio e Grande. Cada tamanho de fonte corresponde a uma folha de estilo CSS que salva o texto usado para a renderização da web. tamanhos de texto de página.
Quando o usuário faz uma seleção, o PHP armazena o tamanho da fonte selecionado pelo usuário em uma variável de sessão e, em seguida, recarrega a página da web. A página lerá o tamanho da fonte selecionado na variável de sessão e chamará dinamicamente a folha de estilo correspondente para atualizá-la. . Rerenderize a página com um tamanho de fonte menor ou maior.
A primeira etapa doprocesso
: A criação de uma página da web
começa com a criação de um documento HTML. Primeiro, complete o conteúdo do espaço reservado. A Lista A é um exemplo.
Lista A:
Tamanho do texto: pequeno | href="resize.php?s=medium">médio | grande
Loremipsum dolor sit amet,
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore
magna aliqua.
Ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex ea
comodoconsequat.
Duisauteirure dolor in reprehenderit em
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat non proident, sunt in culpa qui
officiateseruntmollitanim id estlaborum.
Preste atenção especial aos hiperlinks de texto no topo da página. Cada hiperlink aponta para um arquivo de script chamado resize.php e passa para ele o tamanho da fonte selecionado por meio do método URL GET.
Salve este documento no diretório do seu servidor web com uma extensão .php, por exemplo, index.php.
Etapa 2: Criar folhas de estilo
Em seguida, crie arquivos de folha de estilo para cada tamanho de texto: small.css, medium.css e large.css Este é o conteúdo do arquivo small.css:
body {.
fonte: 10px
}
Da mesma forma, você pode criar Medium.css e Large.css, usando 17px e 25px respectivamente, e salvar esses arquivos de folha de estilo no mesmo diretório da página da Web criada na etapa anterior.
Etapa 3: Criar um mecanismo de alteração de tamanho de texto
Conforme apresentado acima, a página da Web pode "saber" qual arquivo de folha de estilo carregar consultando as variáveis de sessão predefinidas. As variáveis de sessão são controladas por meio do arquivo de script resize.php (consulte a Listagem B. ), este arquivo é ativado quando o usuário clica no botão para alterar o tamanho do texto no topo da página web. Este é o conteúdo de resize.php:
Lista B
// inicia sessão.
//importa o tamanho selecionado para a sessão
sessão_start();
$_SESSION['textsize'] = $_GET['s'];
header("Localização: ". $_SERVER['HTTP_REFERER']);
?>
Isso é muito simples. Quando o usuário seleciona um novo tamanho de texto, resize.php obtém o valor do tamanho da fonte através do método GET e o armazena na variável de sessão $_SESSION['textsize'], e então reinicia o navegador Direct. para a página originalmente aberta.
Claro, ainda falta um componente aqui: a página da web é inteligente o suficiente para detectar automaticamente o tamanho do texto atualmente selecionado pelo usuário e carregar a folha de estilo correspondente. Para adicionar esta função, abra o arquivo index.php da sua página da web e adicione. a seguinte instrução no início do arquivo (consulte a Listagem C):
Listagem C
// iniciar sessão
//importa variáveis
sessão_start();
//define o tamanho do texto padrão para esta página
if (!isset($_SESSION['tamanho do texto'])) {
$_SESSION['textsize'] = 'médio';
}
?>
Você também deve adicionar um link de folha de estilo entre os elementos ..., como segue:
type="texto/css">
Esta é a Listagem D. O arquivo index.php completo deve ficar assim:
Listagem D:
// iniciar sessão
//importa variáveis
sessão_start();
//define o tamanho do texto padrão para esta página
if (!isset($_SESSION['tamanho do texto'])) {
$_SESSION['textsize'] = 'médio';
}
?>
type="texto/css">
Tamanho do texto: pequeno | href="resize.php?s=medium">médio grande |
Loremipsum dolor sit amet,
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore
magna aliqua.
Ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex ea
comodoconsequat.
Duisauteirure dolor in reprehenderit em
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat non proident, sunt in culpa qui
officiateseruntmollitanim id estlaborum.
Deve ser muito simples entender como isso funciona. Quando uma página da web é carregada, ela retoma a sessão atual e verifica se a variável $_SESSION['textsize'] corresponde ao tamanho da fonte atualmente selecionada e então carrega dinamicamente a folha de estilos correspondente. através do elemento , o que fará com que a página da web seja renderizada novamente no tamanho correto. O uso combinado de PHP e CSS é um pouco diferente do método tradicional, que usa JavaScript para alterar dinamicamente a folha de estilo CSS. Em comparação com o método JavaScript, a vantagem do método PHP é que você não precisa depender do suporte do cliente. para JavaScript. Preocupe-se em criar trabalho especificamente para um determinado navegador, talvez você descubra que essa abordagem funciona bem na próxima vez que você se sentar para criar um site, boa codificação!