14 de enero de 2017

Tutorial: Como crear una barra de progreso para tus Desafíos o Retos

Tenemos muchas metas para este 2017 y nos gusta mostrar en nuestro blog el progreso.
 Agregar una barra de progreso adjunto al banner de los retos o desafíos siempre queda muy bien. Un ejemplo perfecto es mi espacio de Retos y Desafíos que tengo al final del blog.
A excepción del 2017 Reading Challenger, las demás barras son creadas por mi. Cada uno de los progresos tiene un color diferente, el cuál se relaciona de acuerdo al banner, eso le da un mejor aspecto ya que va con el diseño actual del blog. 
   El aspecto que tengo ha sido completamente modificado para que se ajuste al pie de mi blog, utilice tablas HTML y luego de muchas horas quedo como quería. Hoy simplemente les enseñare como agregar la barra de progreso en uno de los laterales del blog.
  1. Dirígetelanguageisavirus.com/word-meter, la cuál es una página que te ayudará para que la creación y la actualización de la barra no sea tan difícil. 
  2. Completa los datos que te pide y da click a "Calculate"
  3. Verifica que la barra quede como lo desees. 
  4. Copia el código que te ofrece.
Si fuera una meta literaria...
  • Current Word Count: Cuantos libros he leído (En este caso apenas llevo 1)
  • Total Word Goal: Total de libros por leer (En este caso tengo planificado leer un total de 12 libros)
  • Progress Bar Color: Color de la barra (En este caso quiero que sea de color #6666FF)
Cuando des click a Calculate la misma página te ofrece la vista previa y el código HTML de la barra. Dicho código lo debes de guardar.

El código será parecido a esto:
<a href="http://www.languageisavirus.com/nanowrimo/word-meter.html" target="_blank" title="NaNoWriMo writing toys games & gadgets"><div style="width:200px;height:15px;background:#FFFFFF;border:1px solid #000000;"><div style="width:8%;height:15px;background:#6666FF;font-size:8px;line-height:8px;"><br></div></div></a>1 / 12 words. 8% done!
Que da como resultado este aspecto:

Personalizar:


Si quieres cambiar un poco más el aspecto de la barra dirígete a htmledit.squarefree.com y en esa página pega el código de la barra.
  • htmledit.squarefree te ayudara para que  una vez que estes modificando la barra tengas inmediatamente la vista previa. Esta es una herramienta que utilizo mucho para verificar códigos HTML antes de aplicarlo en mi blog. 
Modifica el código a tu gusto y ve el resultado de los cambios en tiempo real.

Cambios:
  • NaNoWriMo writing toys games & gadgets: Lo cambio por "Progreso"
  • width:200px: Lo modifico de acuerdo al ancho de la sidebar o del banner. Si cambias el tamaño del borde del contenedor es mejor quitarle 1 o 4px. Si mi sidebar es de 260 entonces lo dejare como en unos 256px.
  • height:15px: Es el alto del contenedor y de la barra. Ambos tiene que ser igual. 
  • background:#FFFFFF: Es el fondo del contenedor de la barra. 
  • border:1px solid #000000: Es el tamaño, estilo y color del borde del contenedor. 
  • width:8%: Es el porcentaje del progreso. Si ya tienes más libros leídos este es lo que debes de modificar para que se muestre un avance en la barra. Si no sabes calcular porcentaje siempre puedes volver a languageisavirus.com/word-meter rellenar los datos y ver cual es el porcentaje de la cantidad total pero con más cantidad de libros leídos. Una vez que tengas el nuevo código solo copia el %. 
  • background:#6666FF: Color del progreso. Si no te gusto el que elegiste en languageisavirus.com/word-meter, lo puedes cambiar.
  • 1 / 12 words. 8% done!: Es el texto que sale debajo de la barra. Te recomiendo que cambies las palabras al castellano. Este es un simple texto. Si no te gusta lo puedes eliminar y si lo mantienes a medida que avances en el desafió/reto modifica el %. Que sea el mismo que coloques en  width: %. 
Añadir una imagen:
Arriba del código de la barra agregare un banner. Y para eso utilizo
<center><a href="URL-DE-LA-PÁGINA-DEL-RETO/DESAFIÓ" target="_blank"><img border="0" height="200" src="URL-DEL-BANNER" title="TÍTULO-DEL-DESAFIÓ/RETO" width="200" /></a></div></center>
  • height y width es el tamaño y ancho del banner, puedes cambiarlo a conveniencia. 
Centrar:
La barra no se puede centrar, ya que si lo hacen el progreso quedara en el medio. Ejemplo:
<center>CÓDIGO</center>
Resultado:
No queda nada bien y es por eso que es mejor no centrarlo y el ancho de la barra que sea acorde a la sidebar para que sea vea como si estuviera centrado.
   En cambio si solamente queremos centrar el texto añade la etiqueta center al inicio y al final del texto. Ejemplo:
CÓDIGO <center>1 / 12 words. 8% done!</center>
  • Nota: El tamaño del texto será el mismo tamaño que tengas predeterminado para la sidebar de tu blog. 

Añadir a mi blog

  1. Dirígete a Diseño → Añadir un Gadget  → HTML/Javascript
  2. Pega el código final. 
  3. Guarda los cambios. 
Resultado final:
Una vez aplicados las modificaciones y añadirla en un gadget HTML/Javascript te puede quedar algo así ↓
 el cuál es el resultado de:
<a href="http://newsyndrome.blogspot.com/2016/12/bingo-dramatico-2017.html" target="_blank"><img border="0" height="223" src="https://3.bp.blogspot.com/-bVApXilx0XA/WFMCQd4XQaI/AAAAAAAAUtw/lLEph8QP6ZE6OYxVg_NaHCcMCDdxuBdYQCLcB/s320/Bingo%2BDram%25C3%25A1tico%2B%2528Benner%2529.png" title="Asia Team" width="223" /></a>
<a href="http://www.languageisavirus.com/nanowrimo/word-meter.html" target="_blank" title="Progreso"><div style="width:219px;height:15px;background:#eee;border:2px solid #000000;"><div style="width:45%;height:15px;background:#ff61b0;font-size:8px;line-height:8px;"><br /></div></div></a><center>5 / 12 libros. 45% leídos!</center>
  • Si tienes más desafíos realiza el mismo procedimiento para crear las barras de c/u.
Este es el modo más sencillo para un progreso HTML. Con CSS serian más arreglos y más complicaciones si no sabes mucho de CSS.

Y este es el tutorial de la noche. Espero les guste y les ayude mucho.
Hasta la próxima...

Les envió muchos besos. Si quieren un tutorial en especifico solo pídanlo en los comentarios o llenen ESTE FORMULARIO...

6 comentarios:

  1. Hola guapa!!
    Como siempre, un tutorial genial! :)
    Yo no suelo usarlo, y menos este año, pero seguro que a mucha gente le sirve!
    Besos :33

    ResponderEliminar
    Respuestas
    1. Eso espero.
      Yo el año paso no lo utilice pero para esta ocasión si los voy a aprovechar! xD

      Eliminar
  2. Muchas gracias por el tutorial, me daba dolor de cabeza centrar la barra jajaj
    Besitos<3

    ResponderEliminar
    Respuestas
    1. Y a mi, pase horas *la primera vez que las utilice* buscando una solución.
      Espero ahora todo sea más simple para ti.
      Besos!!

      Eliminar
  3. ¡Hola^^!
    Este tutorial es genial^^ Yo tuve que descubrir como hacer esto por mi cuenta, aunque ya no use la barra, pero estoy segura que le servirá a muchas personas :D

    ¡Un beso♥!

    ResponderEliminar
    Respuestas
    1. Yo tenia muchas ganas de utilizarla y por fin las puedo personalizar tal como deseo!!!
      Gracias por tus comentarios.
      Besos!

      Eliminar