Administrar el tamaño de las fuentes ... con un control deslizante!
Página 1 de 2
Implementación de un sitio moderno y debe tener en cuenta no sólo de los gráficos y contenido, sino también de «accesibilidad.
¿Hay algunas pautas acerca de la W3C, se puede encontrar la traducción aquí .
Entre otras cosas, también es importante para permitir que aquellos que nos visitan para ser capaz de ampliar el texto de una página o sección.
Esta característica, además de ser disfrutado por personas con problemas visuales pueden llegar a ser el buque insignia de nuestro trabajo si se aplican de una manera creativa.
La solución
Pensé que esta vez utilizando el componente de interfaz de usuario deslizante jQuery para crear nuestra fontSize-switchers, haciendo uso también, por supuesto, unas pocas líneas de CSS.
Para dar una idea del resultado final que queremos conseguir un aspecto de la imagen de abajo:
La necesaria
Esta es una imagen "de un ejemplo sencillo la estructura de carpetas:
jQuery UI y jQuery
Podemos descargar la última versión de jQuery primero de aquí (1.6.1 en el momento de escribir esto)
El siguiente paso es descargar jQuery UI , y en particular el componente de control deslizante, siguiendo los mismos pasos que hemos descrito aquí para la barra de progreso.
El index.html
Hay, pues, una estructura simple de HTML, lo que llamamos una página index.html sólo
<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
Sliders <title> jQuery UI cesarogcaleb.com y font-size </ title>
href = "css / style.css" <link rel="stylesheet" type="text/css" />
href = "css/ui-lightness/jquery-ui-1.8.13.custom.css" type="text/css" <link rel="stylesheet" />
src = "js/jquery.1.6.1.js" <script type="text/javascript"> </ script>
src = "js/jquery-ui-1.8.13.custom.min.js" <script type="text/javascript"> </ script>
src = "js / index.js" <script type="text/javascript"> </ script>
</ Head>
<body>
JQuery Sliders <h3> Ui cesarogcaleb.com y font-size <h3 />
<div id="fontLabels">
<div id="normal"> A </ div>
<div id="big"> A </ div>
<div id="bigger"> A </ div>
<div id="biggest"> A </ div>
</ Div>
<div id="sliderCont"> <div id="slider" class="ui-widget-header"> </ div> </ div>
<div id="textcontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque sem risus, eget eget CONGU más digno, pharetra en frascos.
En hac dictumst audiencia habitare.
</ Div>
</ Body>
</ HTML>
La página incluye todos los archivos necesarios, css y js que necesitamos. En el interior del cuerpo de la etiqueta que acabamos de definir un div con id = fontLabels interior con cuatro div que contendrá la muestra "A" con un tamaño de fuente diferente.
Justo debajo se define un contenedor (div id = "sliderCont") tenemos que ponernos en el centro de la página y dentro de un div con id = "slider" en el que vamos a construir con el control deslizante jQuery UI sí mismo.
He añadido el contenedor de texto con id = "TextContent" en la que vamos a actuar para aumentar / disminuir el tamaño de la fuente.
 |
CSS (Curso)
Diseño Web y de accesibilidad de acuerdo con W3C CSS y XHTML. A partir de 29 €. |
 |
HTML (del curso)
El lenguaje de marcado para la web desde 29 €. |
 |
Javascript (Curso)
Guía completa de scripting del lado del cliente. A partir de 39 €. |