Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Extremo Cambio de Imagen: jPaginator Edición CSS3

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

jPaginator es un plugin jQuery ingenioso elaborado por Remy Elazare que combina la numeración de páginas y el deslizamiento en una interfaz de usuario sencilla. Remy, hace poco me pregunto si me gustaría usarlo para realizar algo en Webdesigntuts+, y revisará si sería un estupendo candidato para renovar estilos.

La numeración de páginas a menudo implica muchos enlaces de páginas, las cuales se necesitan cuando navega antes de que usted las seleccione. jPaginator tiene como objetivo mejorar la experiencia de usuario de los números de páginas largas, al ofrecer un deslizador para aplicar animaciones a los enlaces que están a la izquierda y a la derecha. Además, usted puede controlar los enlaces ya sea del lado de la numeración o, incluso, que se base en las flechas del teclado.


Introducción

Revise jPaginator en su estado natural. No es complicado y es perfectamente útil, pero vamos a ver si no podemos modernizarlo un poco. Vamos a usar algunas técnicas CSS3, eso es lo que vamos a intentar practicar con este tutorial, pero nos aseguraremos de que el resultado de la interfaz es al menos útil para los navegadores sin soporte.


¿Qué es lo que vamos a incluir?

Notable CSS:
text-shadow
gradients
border-radius
box-shadow
multiple backgrounds
:after selector
uso de hojas sprite

Soporte para Navegadores (sin soluciones alternativas):
IE9+
FireFox 3.6
Safari 1.0
Chrome 1.3
Opera 10.5


Paso 1: El PSD

Podría escribir un tutorial acerca de como fue elaborado el archivo .psd, después, continuar explicando el marcado HTML y el estilo, sin embargo, no hay forma de que usted  preste atención a algo así de largo. En lugar de eso, solamente agarre los recursos que se pueden descargar y juegue con los archivos.

Vale la pena mencionar que la textura para el fondo es la "Tactile Noise", y que puede descargar desde el sitio web Atle Mo´s  subtlepatterns.com que es muy útil.

jPaginator psd layout

Paso 2: Nuevo Documento HTML

Vamos a crear un documento nuevo, luego vamos a hacer referencia a un par de archivos que necesitaremos para usarlo con el plugin jPaginator.

Comenzaremos con un documento HTML5 muy básico, referencia a jQuery (en este caso gestionado por Google), luego el plugin para el deslizador jQuery UI del cual depende jPaginador, y finalmente el código de jPaginator.

Habiendo hecho eso, enlazamos el archivo jPaginator.css (el cual nos da la base para trabajar con el deslizador) y luego, finalmente, nuestro propio archivo CSS custom.css que usaremos para aplicar estilo al lote completo de los deseos de nuestros corazones.

Aquí está la estructura que su documento debería de tener en este punto:


Paso 3: Iniciar el jPaginator

Es hora de añadir nuestro jPaginator a la página. Comencemos con el marcado HTML, vamos a ajustarlo en la etiqueta <body> de nuestro documento.

El div llamado "pagination" es el que vamos a seleccionar, es justo en ese div donde añadiremos nuestra jPaginator.  El elemento div antes de la "pagination" no es crucial, pero vamos a usarlo para ilustrar la numeración de página actual haciendo algo, cambiando el contenido dentro de éste cada vez que un botón es pulsado.

Además, cabe destacar que los botones de control, son dos enlaces en cualquier lado de "paginator_p_wrap" que usaremos para controlar nuestra numeración de las páginas. Aunque éstos son completamente opcional, les asignaremos un rol en los parámetros cunado vayamos a llamar jPaginator. Finalmente, incluimos el marcado HTML para los deslizadores.

Después, el lote entero está dentro en un div "container", pero solamente para ayudarnos a mostrar las cosas de una mejor manera.

Ahora necesitamos llamar jPaginator dentro del <head>:

Aquí puede ver que jPaginator está siendo aplicado a nuestro div "pagination", meticulosamente retocado con un par de los muchos parámetros que están disponibles para nosotros. Hemos ajustado la cantidad de páginas a 64, los márgenes alrededor de cada enlace con 5px y la longitud (aunque muchos enlaces serán visibles) a 8. Continuando con nuestro diseño, hicimos una lista de los 4 controles de elementos que añadimos a nuestro marcado HTML, ahora es que harán algo. Por último, una función (proporcionada por Remy) para cambiar el contenido de nuestro div "page" cuando hacemos clic sobre él.

Habiendo completado los pasos hasta el momento, usted debería tener todo trabajando en su forma más sencilla:


Paso 4: Dejemos que comiencen los juegos.

Para construir de forma precisa nuestros elementos, primero deberemos estar seguro de que conocemos cuan grande es todo en nuestro diseño. Vamos a echar un vistazo a varias de las dimensiones de nuestro diseño:

measurements

En resumen, tenemos los botones de la numeración de páginas (aunque no son botones, sin embargo, nos referiremos a ellos como botones desde este punto), que tienen una dimensión de 30x30px, el contenedor (incluyendo las luces y las sombras) que tienen una altura de 110px y los enlaces de la navegación que son de 40px de ancho.

Con eso cubierto, vamos a continuar haciendo algo más bonito…


Paso 5: Hojas de Estilo

Los botones para nuestra numeración de páginas son creados de manera dinámica, así que si usted borra los comentarios, por ejemplo, necesitará usar Firebug o algún otro inspector de navegador para ver cómo es que están unidas las cosas.

firebug output

Habiendo aclarado que nuestros botones son div con una clase "paginator_p", por fin sabemos a qué estamos aplicando estilos. También podemos ver que muchos de los estilos en linea son añadidos a estos elementos por jPaginator, aunque todos determinan un diseño de contraposición a la estética. 

Vamos a agregar algunas reglas a nuestra hoja de estilo, para que empiece...

Una estrella sólida. Antes de que empecemos desordenando los botones, ajustamos una imagen de fondo para el <body> y añada algunos estilos a nuestro div "container". Hemos especificado que nuestros botones deben ser de 30x30px, también hemos ajustado la propiedad line-height dentro de ellos para que sea igual a la dimensión del botón (esto ubicará nuestros números más o menos al centro vertical) y hemos aplicado la propiedad text-align, para alinear el texto horizontalmente al centro, para arreglar la alineación de los números. Así que tenemos botones cuadrados, con los números perfectamente centrados. Bien, ahora aumentamos el tamaño del texto y cambiemos el color de acuerdo a nuestro diseño.


Paso 6: Colores bonitos

Continuando con nuestro tutorial, vamos a aplicar el fondo correcto a nuestros botones. Usaremos los degradados CSS3 que hemos visto en todos los navegadores modernos, incluso IE10. Para garantizarlo, tendremos un color sólido y una imagen de degradado como segunda opción para los navegadores no cooperativos. Además, añadiremos una sutil sombra paralela al texto dentro de nuestro botón, como lo consideramos para nuestro diseño.

Nota: Si usted tiene 5 minutos, revise CSS3 de Paul Irish, por favor. Para más información sobre CSS3 y el soporte para los navegadores.


Paso 7: El Círculo de la Vida

Ya especificamos que nuestros enlaces deben ser cuadros de 30px, ahora agreguemos 15px a las esquinas para formar un círculos perfecto. Luego, ya puede dejarlo...


Paso 8: ¡Pop!

Estamos a unos cuantos detalles de tener los botones como los que tenemos en el archivo .psd. Así que vamos añadir una sombras paralela para hacer nuestro elemento más popular. De hecho, vamos añadir dos.

Le daremos a cada enlace una sombra oscura, que actúe como un resplandor oscuro alrededor del círculo. Vamos a expandir 1px fuera del círculo, luego desenfocaremos 4px aún más. He especificado el color exacto (gracias a la herramienta cuentagotas de Photoshop) pero también podríamos haber usado un valor rgb con opacidad.

Habiendo aplicado nuestra primer sombra, ahora podemos aplicar una segunda (le van a encantar las sombras de cajas) para que actúe como nuestra cosas que resplandezca. Usted verá que el segundo conjunto de valores procede del "recuadro" que empuja el resplandor hacia adentro. Sin desenfoque, sin desplazamiento del eje-x, pero desplazando 1px hacia abajo para que el resplandor roce la punta de nuestros círculos.

Así  es como luce el resultado CSS para nuestro div "paginator":


Paso 9: Meta #1

En este momento, tenemos nuestros enlaces en sus estados predeterminados, ¡y se ven muy bien! Pero ahora necesitamos añadir un poco de espacio para que los elementos alrededor de los enlaces respiren:

El elemento "paginator_p_bloc" es el elemento primario (parent) de todos nuestros botones, y necesita un poco de padding (espacio entre el contenido y el margen de un elemento) para dejar espacio a la sombra paralela que hemos aplicado. Lo que ahora tiene debe de verse como nuestra primera meta.


Paso 10: Estado hover

Vamos a aplicar un magnífico estado hover a nuestros botones, tal y como lo arreglamos en el archivo .psd.

¿Qué hemos hecho? Bueno, hemos oscurecido los colores de los números y les aplicamos una sombra tenue. Hemos alterado los valores del degradado de fondo (para aclarar más las cosas) y hemos alterado sutilmente la claridad de la sombra en la parte de arriba de los enlaces. El resplandor oscuro de la sombra que igual, pero tenemos que declararlo nuevamente, ya que si no lo hacemos será ignorado.


Paso 11: Estado Seleccionado (Meta #2).

Hemos arreglado de forma simpática una clase seleccionada, así que vamos a aplicarle estilo como si el botón ha sido oprimido (me refiero a que haya sido pulsado hacia adentro, no está sentado en el baño, ni sollozando dentro de una olla de mantequilla de maní).

Hemos incluido un estado selected:hover para que el botón no cambie cuando el cursor del mouse pase por encima. Pero, ¿qué más hemos hecho aquí? Nuevamente, cambiamos el color y la sombra del texto, invertimos la dirección del degradado para darle una apariencia geométrica y, también, reducimos el resplandor oscuro (lo que sugiere que ya no está muy pegado). Simple. Lo que tiene hasta ahora deberá tener la apariencia de nuestra segunda meta.


Paso 12: El Deslizador

Habiendo resuelto lo de los botones, volcamos nuestra atención hacia el deslizador. Es, relativamente, muy sencillo, pero necesitamos alterar los márgenes para tener el espacio adecuado, darle un fondo y hacerlo con la altura correcta. La altura necesita ser de 10px de alto, de acuerdo a nuestro diseño, así que le daremos 8px de altura más 1px de borde alrededor para rellenarlo. Le dimos a los bordes de arriba y los de la izquierda un color oscuro, luego a los bordes del fondo y de la derecha un color tenue para darle una impresión de relieve.

Por último, redondeamos las esquinas en cualquier extremo, ahora tenemos un magnífico carril para nuestro deslizador.


Paso 13: El Control

Si, el control. Parece un buen nombre al mismo tiempo, pero supongo que podría haber quedado con "controlador". De cualquier modo, vamos a añadir algunos estilos a esa cosa sobre lo que usted hace clic y, también, vamos a arrastrarlo sobre el carril del deslizador...

La mayor parte de este estilo le resultará familiar ya que se parece a los estados de nuestros botones predeterminados, la anchura y la altura predefinida, el degradado de fondo, las esquinas redondas y varias sombras de caja.

Las otras reglas notables son outline:non que eliminará el trazado punteado en Firefox, la posición del eje-y para alterar dónde se situará el botón verticalmente en el carril del deslizador, y la propiedad: margin-left: -10px; que empuje el botón exactamente a la izquierda, exactamente a la mitad de su anchura. Revise la imagen abajo para averiguar porqué:

negative margin
¡Gracias a Alex por señalar este error!

Estamos avanzando, así que revisemos nuestra tercera meta.


Paso 14: Controles

Continuando con nuestro tutorial, ahora vamos a arreglar los controles que están en ambos lados de la numeración de la página.

Por el bien de la sencillez, vamos a usar imágenes, así que regresemos a Photoshop y prepare un hoja de iconos para los iconos de los enlaces. Ya empece recopilando un hoja de iconos para la opción alternativa de los degradado, así que solamente añadiré eso, colocando todo de manera lógica para la referencia del archivo CSS. Si usted opta por proyectar todo de forma aleatoria en su hoja de iconos, entonces también puede localizar sus imágenes gracias a servicios tales como Sprite Cow.

jPaginator nav sprite

Cada estado de un icono tiene 40x10px y vamos a contrastar los estados hover verticalmente.  Como usted puede ver en el estilo que está debajo, cada botón es un bloque de 40x40px y tiene aplicada la imagen adecuada, dependiendo de su posición y estado. El código CSS está comentado, así que ahora lo cerraré.

Muy bien, eche un vistazo a lo que se ha hecho hasta este momento en la meta #4.


Paso 15: Sensación de Hundimiento

En realidad, solamente hay un par de detalles más que necesitamos tener en cuenta. Nuestros botones están muy altos, y desaparecen cuando tocan el borde del contenedor primario, lo que es bastante apagado. Nuestro diseño se encarga de esto sugiriendo que se metan debajo de un espacio en el fondo, así que vamos a ver si podemos trasladar eso en el navegador.

Eche un vistazo a la siguiente imagen. En ella, usted verá que necesitamos cuatro imágenes para tratar con cada una de las sombras y las luces. Las luces pertenecen a los controles de cualquiera de los lados del contenedor, las sombras pertenecen al mismo contenedor, así que necesitamos hacerlo 110px de alto.

Primero vamos a encargarnos  del padding (incrementarlo) de nuestro elemento contenedor:

Habiendo hecho eso, nuestra numeración de páginas ha sido empujada dentro de su debida posición.


Paso 16: Cirugía Estética

OK, vamos a darle un espacio a estas sombras (otra vez, he añadido una hoja de iconos).

...y ahora, vamos a tratar con las luces usando el selector :after (que tiene soporte en los principales navegadores).

El selector :after efectivamente genera un objeto dentro de nuestra página. Después, podemos manipular ese elemento como cualquier otro, tendiendo en mente que hereda propiedades de sus padres, o del contenedor primario. En nuestro caso, debido al estilo extensivo del objeto primario, hemos optado por activar la posición absoluta para identificar donde aparecerá la luz.

Algunos estilos adicionales para ordenar el contenido de la página, y luego, listo, terminamos.

¡Excelente! Hemos llegado hasta la meta #5, la linea final a menos que usted quiera adaptarlo a los navegadores antiguos.


Paso 17: Compatibilidad al revés

Voy a dejarle esto a usted. Las técnicas que hemos practicado fueron exactamente eso, técnicas para practicar y he hecho una lista de la compatibilidad de navegadores en la introducción. Sin embargo, si usted quiere ir un paso más hacia adelante y asegurarse de que todo está correcto en los navegadores antiguos, en ese caso usted tiene algunas opciones. Nos hemos asegurado que nuestros degradados incluyen imágenes como segunda opción en la hoja de iconos. Sin embargo, al colocar múltiples imágenes de fondo, sombras de cajas, sombras de texto y bordes redondos no es bastante sencillo.

Emplear CSS3PIE le ayudará con la mayoría de estas cosas (todo aparte de la sombra de texto) o usted podría añadir botones a la hoja de iconos (de hecho, ya hice eso por usted) y aplicarlas usando una hoja de estilos específica para el navegador. Seleccione IE8 y una versión inferior usando una condición adicional tal como la siguiente y los navegadores modernos no serán los más sabios.


Conclusión

Gracias por seguirnos, espero que usted pueda sacar algunas ideas útiles de lo que ha leído. Además, agradezco a Remy por su participación voluntaria de jPaginator como conejillo de india. Recuerde revisar su desarrollo en GitHub!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.