Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)
El equipo de Truematter recibió recientemente la tarea de crear una aplicación web divertida y sexy que presente datos numéricos de una manera atractiva. Después de juntar nuestras cabezas, creamos un gráfico de barras que responde interactivamente a la entrada del usuario sin, Dios no lo quiera, recargar ninguna página. Estamos muy contentos de poder compartir eso con la comunidad de programadores. Hay algunos trucos de CSS involucrados, una dosis de jQuery y algo de magia gráfica, pero cuando terminemos con este tutorial, tendremos un gráfico maravillosamente interactivo que puedes personalizar como tu corazon lo desee.
Preparando los gráficos
Los elementos gráficos y la forma en que esos elementos se cortan y compilan es lo que realmente le da a este gráfico un factor sorpresa. Solo se necesitan tres elementos gráficos para este proyecto, pero, dado que esencialmente estamos creando una ilusión utilizando CSS e imágenes, esos gráficos deben diseñarse con precisión.
El gráfico en sí está compuesto por tres PNG separados apilados uno encima del otro usando CSS, dos de los cuales son estacionarios (las partes de la carcasa del gráfico frontal y posterior "vidriosos"), y uno de los cuales está animado usando jQuery (la barra verde en la mitad).
Elemento gráfico 1: parte posterior del gráfico
La pieza de fondo se compone de la parte inferior del gráfico (que solo vemos cuando la barra está vacía al 0%), los paneles posterior izquierdo y posterior derecho. En esta capa inferior, incluimos todas las caras de la carcasa del gráfico que deben "cubrirse" cuando el gráfico está completo o parcialmente lleno. Esta es la capa que realmente le da cierta profundidad a la ilusión 3D.
Elemento gráfico 2: el gráfico de barras
La parte central animada de este gráfico es fácil de crear. Sugerimos usar funciones de extrusión 3D muy básicas en Illustrator, o también puedes simplemente dibujar una forma de tres paneles en Photoshop y terminarlo. Colorea tu gráfico de manera muy brillante, sobresaturando tanto como sea posible. ¿Por qué? Porque en el gráfico final, se mostrará debajo de una carcasa semitransparente, por lo que el color será silenciado por la capa que lo recubre.
Es muy importante que los bordes superior e inferior de esta pieza permanezcan transparentes, así que asegúrate de guardarlo como PNG.
También es igual de importante: haz que esta pieza tenga exactamente la misma altura que las piezas de la carcasa del gráfico. Aquí en nuestras imágenes, la capa intermedia parece más corta que la carcasa; cuando crees tu pieza central, haz que la barra central sea exactamente tan alta como la carcasa. Si lo haces demasiado corto, tu gráfico nunca podrá llenarse correctamente al 100%. Si lo haces demasiado alto, el gráfico puede salir disparado del contenedor de la carcasa cuando sea animado.
Elemento gráfico 3: la carcasa superior
Aquí es donde llegamos al verdadero truco visual, que ocurre a lo largo del borde inferior de esta tercera y última pieza. Mientras que los bordes superior izquierdo y derecho conservan la transparencia, los bordes inferior izquierdo y derecho deben rellenarse de forma sólida con el mismo color que el fondo en el que se asentará el gráfico.
Por ejemplo, si el fondo de tu sitio web es negro, los dos bordes inferiores de esta pieza deben rellenarse con negro sólido. En nuestro ejemplo anterior, el fondo del sitio es blanco, por lo que rellenamos los bordes inferiores con blanco. Esta área de color sólido oculta de manera efectiva cualquier desbordamiento de la pieza central del gráfico de barras (elemento gráfico 2). Sin esta pieza y su borde inferior opaco, perdemos el efecto 3D por completo. Aquí está el gráfico sin él:
El HTML
¡Ok! Tenemos todas nuestras piezas gráficas completas y estamos listos para saltar directamente al código. El HTML en sí es bastante sencillo. Estás viendo algunos campos de selección de formularios básicos y algunos divs para el gráfico de barras.
Primero, veamos el código completo, luego lo tomaremos pieza por pieza (¡sin juego de palabras!). Ten en cuenta que los elementos div del gráfico de barras se incluyen dentro de la etiqueta del formulario.
1 |
<noscript><h3>You must enable JavaScript to view this demo!</h3></noscript> |
2 |
|
3 |
<form id="form1" action="#" onsubmit="return false;"> |
4 |
<!-- container for the form elements -->
|
5 |
<div id="formcontainer"> |
6 |
How much money do you want to contribute to savings each month? |
7 |
<select id="savings" onchange="calculate();"> |
8 |
<option selected="selected" value="0">- select an amount -</option> |
9 |
<option value="100">100 dollars</option> |
10 |
<option value="200">200 dollars</option> |
11 |
<option value="300">300 dollars</option> |
12 |
<option value="400">400 dollars</option> |
13 |
<option value="500">500 dollars</option> |
14 |
<option value="1000">1000 dollars</option> |
15 |
<option value="2000">2000 dollars</option> |
16 |
<option value="3000">3000 dollars</option> |
17 |
<option value="4000">4000 dollars</option> |
18 |
<option value="5000">5000 dollars</option> |
19 |
</select>
|
20 |
|
21 |
What is your monthly income? |
22 |
<select id="income" onchange="calculate();"> |
23 |
<option selected="selected" value="0">- select an amount -</option> |
24 |
<option value="1000">1000 dollars</option> |
25 |
<option value="2000">2000 dollars</option> |
26 |
<option value="3000">3000 dollars</option> |
27 |
<option value="4000">4000 dollars</option> |
28 |
<option value="5000">5000 dollars</option> |
29 |
</select>
|
30 |
</div>
|
31 |
|
32 |
<div id="grapharea"> |
33 |
<h4>Percentage of Monthly Salary Saved</h4> |
34 |
<div id="p25">25%</div> |
35 |
<div id="p50">50%</div> |
36 |
<div id="p75">75%</div> |
37 |
<div id="p100">100%</div> |
38 |
<div id="graphcontainer"> |
39 |
<img id="graphbackground" src="http://nettuts.s3.amazonaws.com/2032_animatedBarGraph/images/graphbackground.png" alt="" width="262" height="430" /> |
40 |
<img id="graphbar" src="http://nettuts.s3.amazonaws.com/2032_animatedBarGraph/images/graphbar.png" alt="" width="262" height="430" /> |
41 |
<img id="graphforeground" src="http://nettuts.s3.amazonaws.com/2032_animatedBarGraph/images/graphforeground.png" alt="" width="262" height="430" /> |
42 |
</div>
|
43 |
</div>
|
44 |
</form>
|
El desglose
Dado que este gráfico depende de JavaScript, primero verificamos que esté habilitado en el navegador:
1 |
<noscript><h3>You must enable JavaScript to view this demo!</h3></noscript> |
Ahora comenzamos el formulario. Para los propósitos de esta demostración, hemos usado dos menús desplegables simples, pero podrías modificar este código con la misma facilidad para usar campos de texto, botones de opción o cualquier otro tipo de entrada. El atributo select onchange recibe la función "calculate();", que cubriremos en la sección jQuery a continuación.
1 |
<div id="formcontainer"> |
2 |
How much money do you want to contribute to savings each month? |
3 |
<select id="savings" onchange="calculate();"> |
4 |
<option selected="selected" value="0">- select an amount -</option> |
5 |
<option value="100">100 dollars</option> |
6 |
<option value="200">200 dollars</option> |
7 |
<option value="300">300 dollars</option> |
8 |
<option value="400">400 dollars</option> |
9 |
<option value="500">500 dollars</option> |
10 |
<option value="1000">1000 dollars</option> |
11 |
<option value="2000">2000 dollars</option> |
12 |
<option value="3000">3000 dollars</option> |
13 |
<option value="4000">4000 dollars</option> |
14 |
<option value="5000">5000 dollars</option> |
15 |
</select>
|
16 |
|
17 |
What is your monthly income? |
18 |
<select id="income" onchange="calculate();"> |
19 |
<option selected="selected" value="0">- select an amount -</option> |
20 |
<option value="1000">1000 dollars</option> |
21 |
<option value="2000">2000 dollars</option> |
22 |
<option value="3000">3000 dollars</option> |
23 |
<option value="4000">4000 dollars</option> |
24 |
<option value="5000">5000 dollars</option> |
25 |
</select>
|
26 |
|
27 |
</div>
|
Y finalmente, incluidos dentro de la etiqueta del formulario, los elementos gráficos:
1 |
<div id="grapharea"> |
2 |
<h4>Percentage of Monthly Salary Saved</h4> |
3 |
<div id="p25">25%</div> |
4 |
<div id="p50">50%</div> |
5 |
<div id="p75">75%</div> |
6 |
<div id="p100">100%</div> |
7 |
<div id="graphcontainer"> |
8 |
<img id="graphbackground" src="http://nettuts.s3.amazonaws.com/2032_animatedBarGraph/images/graphbackground.png" alt="" width="262" height="430" /> |
9 |
<img id="graphbar" src="http://nettuts.s3.amazonaws.com/2032_animatedBarGraph/images/graphbar.png" alt="" width="262" height="430" /> |
10 |
<img id="graphforeground" src="http://nettuts.s3.amazonaws.com/2032_animatedBarGraph/images/graphforeground.png" alt="" width="262" height="430" /> |
11 |
</div>
|
12 |
</div>
|
El CSS
1 |
#formcontainer { float: left; } |
2 |
#grapharea { position: relative; float: left; margin-left: 4em; } |
3 |
#graphcontainer { |
4 |
position: relative; |
5 |
width: 262px; |
6 |
height: 430px; |
7 |
overflow: hidden; |
8 |
}
|
9 |
#graphbackground, #graphforeground { position: absolute; } |
10 |
#graphbar { position: absolute; top: 430px; } |
11 |
|
12 |
.graphlabel { position: absolute; left: 270px; } |
13 |
#p25 { top: 365px; } |
14 |
#p50 { top: 278px; } |
15 |
#p75 { top: 191px; } |
16 |
#p100 { top: 105px; } |
Probablemente lo más importante que debería llamar tu atención aquí es el div #graphbar. Observa que nuestro div #graphbar comienza en 430px - la altura total del gráfico de barras. Esta declaración de altura es el número que se manipula a través de jQuery para animar el gráfico. Si has creado tus propios elementos gráficos que son más altos o más cortos que 430 px, necesitarás ajustar ese número para que coincida con tus propios gráficos.
Del mismo modo, también deberás ajustar el px de #p25, #p50, #p75 y #p100. Estas declaraciones superiores establecen la posición de los marcadores de 25%, 50%, 75% y 100% en el lado derecho del gráfico.
Además, observa de cerca los estilos de #graphcontainer:
1 |
#graphcontainer { |
2 |
position: relative; |
3 |
width: 262px; |
4 |
height: 430px; |
5 |
overflow: hidden; |
6 |
}
|
Poner una declaración position:relative; en esta envoltura externa nos permite usar el posicionamiento absoluto en los tres divs dentro de #graphcontainer, por lo que podemos apilarlos uno encima del otro usando compensaciones CSS. Establecer una altura y un ancho también es vital aquí: la altura y el ancho de este div deben coincidir perfectamente con la altura y el ancho de los elementos gráficos 1 y 3. Y overflow: hidden; oculta el gráfico animado, elemento 2, cuando se extiende fuera de los límites del div de ajuste.
El código
¡Ah, ahora para jQuery! Une todas las piezas y las agrega a la animación. Una revisión rápida de jQuery completo:
1 |
<script> |
2 |
function calculate() {
|
3 |
var ZEROPOS = 355; |
4 |
var salary = $("#income").val();
|
5 |
var savings = $("#savings").val();
|
6 |
var percent = savings / salary; |
7 |
|
8 |
if (parseInt(savings) > 0 && parseInt(salary) > 0) |
9 |
{
|
10 |
if (parseInt(savings) > parseInt(salary)) |
11 |
alert("You cannot save more than you earn - please change your selections accordingly.");
|
12 |
else |
13 |
{
|
14 |
val = (percent == 0) ? ZEROPOS : ZEROPOS - (percent * ZEROPOS); |
15 |
$("#graphbar").animate({ top: val + "px" }, 1500);
|
16 |
} |
17 |
} |
18 |
} |
19 |
</script> |
El desglose final
Primero, crea una constante para usar en los cálculos. ZEROPOS es el valor de píxel donde el elemento gráfico central (gráfico 2, la pieza móvil) debe posicionarse para representar el 0%.
1 |
var ZEROPOS = 355; |
A continuación, busca los valores seleccionados por el usuario utilizando las casillas de selección: salario y ahorros. Luego calcula el valor porcentual - percent.
1 |
var salary = $("#income").val();
|
2 |
var savings = $("#savings").val();
|
3 |
var percent = savings / salary; |
El siguiente paso es una verificación de validación para asegurarse de que el usuario haya seleccionado realmente los valores de ambos cuadros de selección. Si es así, continuamos con el guión. De lo contrario, no hacemos nada.
1 |
if (parseInt(savings) > 0 && parseInt(salary) > 0) |
Si el usuario ha introducido los valores adecuados, nos aseguramos de que haya seleccionado un salario superior a la cantidad que desea contribuir al ahorro. Si es así, continuamos con el guión. De lo contrario, le pedimos al usuario que cambie sus selecciones.
1 |
if (parseInt(savings) > parseInt(salary)) |
2 |
alert("You cannot save more than you earn - please change your selections accordingly.");
|
Ahora finalmente llegamos al meollo del script: calculamos la posición a la que moveremos la barra gráfica y luego activaremos la funcionalidad animada de jQuery para que esto suceda.
1 |
val = (percent == 0) ? ZEROPOS : ZEROPOS - (percent * ZEROPOS); |
2 |
$("#graphbar").animate({ top: val + "px" }, 1500);
|
Por lo tanto, al calcular el valor de la posición de la barra del gráfico, val, primero determina si el porcentaje es cero. Si es así, establece un valor igual a la constante ZEROPOS. De lo contrario, calcula la nueva posición de la barra restando el valor porcentual multiplicado por el valor de la posición cero del valor de la posición cero. Esta fórmula se utiliza porque estamos animando la barra desde la posición cero en la parte inferior del gráfico hacia la parte superior.
Una vez que se calcula el valor de píxel, sabemos hacia dónde nos dirigimos, así que simplemente llama al método animado en jQuery en el objeto de la barra gráfica pasando el nuevo valor CSS para la posición superior con una tasa de animación de 1500 (la velocidad de la animación en milisegundos). Entonces jQuery hace la magia por nosotros y mueve la barra dentro del gráfico en consecuencia. ¡Voilà!
¡Espero que hayas disfrutado este tutorial!
By
