Utilice PHP y CSS para cambiar el tamaño del texto de las páginas web: al diseñar su sitio web, tenga en cuenta una cosa: no todos los visitantes son jóvenes brillantes y no necesariamente están completamente familiarizados con los distintos métodos de uso de los navegadores web.
Al diseñar un sitio web, tenga en cuenta una cosa: no todos los visitantes son jóvenes brillantes y no necesariamente están completamente familiarizados con las distintas formas de utilizar un navegador web. Los diseñadores inteligentes entienden esto y a menudo incorporan varias características especiales de accesibilidad en el diseño de sitios web para que incluso las personas mayores o con discapacidades puedan utilizar el sitio web fácil y cómodamente sin tener que realizar un esfuerzo adicional.
El dimensionador de texto es una de las funciones de accesibilidad más efectivas que cualquier sitio web puede necesitar. En resumen, es una herramienta que se utiliza para cambiar el tamaño del texto de una página web. Generalmente se usa para agrandar el texto para que sea más fácil de leer. Muchos navegadores ya vienen con esta función, pero los principiantes en navegadores web no saben cómo usarla. Por lo tanto, los diseñadores de sitios web a menudo implementan esta función colocando botones más fáciles de usar en cada página web.
Esta guía le mostrará cómo agregar este dimensionador de texto funcional a sus páginas web usando PHP y CSS, así que continúe y agregue esta accesibilidad a su sitio web y aproveche al máximo a los usuarios que tienen más de 50 puntos Kudos, siga leyendo y podrá aprende a usarlo.
NOTA: Esta guía asume que ya tienes instalado Apache y PHP.
¿Cómo funciona?
Antes de escribir código, es útil dedicar algo de tiempo a comprender cómo funciona el medidor de texto. Cada página del sitio contiene una serie de controles que permiten al usuario seleccionar el tamaño del texto de la página: Pequeño, Mediano y Grande. Cada tamaño de fuente corresponde a una hoja de estilo CSS que guarda el texto utilizado para la página. tamaños de texto de página.
Cuando el usuario realiza una selección, PHP almacena el tamaño de fuente seleccionado por el usuario en una variable de sesión y luego recarga la página web. La página leerá el tamaño de fuente seleccionado de la variable de sesión y llamará dinámicamente a la hoja de estilo correspondiente para actualizarla. Vuelva a renderizar la página con un tamaño de fuente más pequeño o más grande.
El primer paso delproceso
: la creación de una página web
comienza con la creación de un documento HTML. Primero, complete el contenido del marcador de posición en la Lista A:
Lista A:
Tamaño del texto: pequeño | href="resize.php?s=medium">mediano grande
Loremipsum dolor sit amet,
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore
magna aliqua.
Ad minim veniam, ejercicio quisnostrud ullamcolaboris nisi utaliquip ex ea
comodoconsequat.
Duisauteirure dolor in reprehenderit in
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat non proident, sunt in culpa qui
oficiateseruntmollitanim id estlaborum.
Preste especial atención a los hipervínculos de texto en la parte superior de la página. Cada hipervínculo apunta a un archivo de script llamado resize.php y le pasa el tamaño de fuente seleccionado mediante el método URL GET.
Guarde este documento en el directorio de su servidor web con una extensión .php, por ejemplo, index.php.
Paso 2: Crear hojas de estilo
A continuación, cree archivos de hojas de estilo para cada tamaño de texto: pequeño.css, mediano.css y grande.css. Este es el contenido del archivo de pequeño.css:
cuerpo {.
fuente: 10px
}
De manera similar, puede crear medium.css y large.css, usando 17px y 25px respectivamente, y guardar estos archivos de hojas de estilo en el mismo directorio que la página web creada en el paso anterior.
Paso 3: Crear un mecanismo de cambio de tamaño de texto
Como se introdujo anteriormente, la página web puede "saber" qué archivo de hoja de estilo cargar buscando las variables de sesión predefinidas. Las variables de sesión se controlan a través del archivo de script resize.php (consulte el Listado B). ), este archivo se activa cuando el usuario hace clic en el botón para cambiar el tamaño del texto en la parte superior de la página web. Este es el contenido de resize.php:
Lista B
// iniciar sesión.
// importar el tamaño seleccionado a la sesión
inicio_sesión();
$_SESSION['textsize'] = $_GET['s'];
encabezado("Ubicación: " . $_SERVER['HTTP_REFERER']);
?>
Esto es muy simple cuando el usuario selecciona un nuevo tamaño de texto, resize.php obtiene el valor del tamaño de fuente a través del método GET y lo almacena en la variable de sesión $_SESSION['textsize'], y luego reinicia el navegador. a la página abierta originalmente.
Por supuesto, todavía falta un componente aquí: la página web es lo suficientemente inteligente como para detectar automáticamente el tamaño del texto seleccionado actualmente por el usuario y cargar la hoja de estilo correspondiente. Para agregar esta función, abra el archivo index.php de su página web y agregue. la siguiente declaración al comienzo del archivo (ver Listado C):
Listado C
// iniciar sesión
//importar variables
inicio_sesión();
// establece el tamaño de texto predeterminado para esta página
si (!isset($_SESSION['textsize'])) {
$_SESSION['textsize'] = 'medio';
}
?>
También debes agregar un enlace de hoja de estilo entre los ... elementos, de la siguiente manera:
tipo="texto/css">
Este es el Listado D. El archivo index.php completo debería verse así:
Listado D:
// iniciar sesión
//importar variables
inicio_sesión();
// establece el tamaño de texto predeterminado para esta página
si (!isset($_SESSION['textsize'])) {
$_SESSION['textsize'] = 'medio';
}
?>
tipo="texto/css">
Tamaño del texto: pequeño | href="resize.php?s=medium">mediano grande |
Loremipsum dolor sit amet,
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore
magna aliqua.
Ad minim veniam, ejercicio quisnostrud ullamcolaboris nisi utaliquip ex ea
comodoconsequat.
Duisauteirure dolor in reprehenderit in
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat non proident, sunt in culpa qui
oficiateseruntmollitanim id estlaborum.
Debería ser muy sencillo entender cómo funciona esto. Cuando se carga una página web, reanuda la sesión actual y comprueba si la variable $_SESSION['textsize'] coincide con el tamaño de fuente seleccionado actualmente y luego carga dinámicamente la hoja de estilo correspondiente. a través del elemento. , lo que hará que la página web se vuelva a representar automáticamente con el tamaño correcto. El uso combinado de PHP y CSS es ligeramente diferente del método tradicional, que utiliza JavaScript para cambiar dinámicamente la hoja de estilo CSS. En comparación con el método JavaScript, la ventaja del método PHP es que no necesita depender del soporte del cliente. para JavaScript Preocúpese por crear trabajo específicamente para un determinado navegador, tal vez descubra que este enfoque funciona bien la próxima vez que se siente a diseñar un sitio web, ¡feliz codificación!