viernes, 10 de enero de 2014

Nuevo reto + Barras de progreso





Hola! He encontrado un nuevo reto al que unirme y es del blog de mi pareja actual de guest blogging Lost in a sea of dreams , si le dan clic a la imagen pueden ver la explicación del reto






En este reto tienen que leer un libro en el que salga alguno de los siguientes nombres (mínimo 5 de ellos):

  • Un dragón
  • Un unicornio
  • Un hada
  • Un ángel 
  • Un mago/hechicero
  • Un gnomo
  • Un gigante 
  • Un montaraz
  • Una sirena
  • Un vampiro
  • Un duende
  • Un arma mágica (a Selene le da igual cual)

Después de leerlo tienes que hacer la reseña en la que tienen que incluir la frase que incite más a soñar o que más bonita sea del libro (de ahí el nombre de la iniciativa).


Como dije en mi otra entrada sobre los retos de este año voy a agregar una pestaña con los retos y las barras de progreso, mientras buscaba una barra que me pudiera gustar he encontrado estas que me parecen muy lindas por si quieren usarlas:

(Para cada caso pueden darle clic y los va a llevar a una página dónde pueden hacerlos)

(Por si necesitan los códigos de colores en html pueden usar esta página)

Opción 1



1 / 12 words. 8% done!

En esta página sólo deben seleccionar la meta final, cuánto llevan hasta ahora y el color.
El html es el siguiente:
"
<div style="background: #FFFFFF; border: 1px solid #000000; height: 15px; width: 200px;">
<div style="background: #14B1C6; font-size: 8px; height: 15px; line-height: 8px; width: 50%;">
<br /></div>
</div>
6 / 12 words. 50% done!<br />
"
En el verde cambian el código del color y en lo fucsia van cambiando su progreso



6 / 12 (50%)


En esta página hay más opciones que en el caso anterior, ahora pueden cambiar desde allí (sin tener que tocar el html) el color, fondo, bordes, tipo de letra, si quieren mostrar el porcentaje, etc.
El html es:
"
<div style="margin: auto; text-align: center; width: 30%;" title="8.33%">
<div style="background: #E0E0E0; border: solid 1px #AAAAAA; font-size: 0px; line-height: 0px; margin: 2px auto; overflow: hidden; text-align: left;">
<div style="background: #F04DE5; font-size: 0px; height: 5px; line-height: 0px; max-width: 8.33%; min-width: 0%; width: 8.33%;">
<!----></div>
</div>
<div>
<div style="font-family: cursive; font-size: 8pt;">
1 / 12 (8.33%)</div>
<div style="font-family: cursive; font-size: 8pt;">
<br /></div>
<br /></div>
</div>
"


Opción 3





Para este caso si les recomiendo ingresar directamente a la página porque modificar el html es un poco más fastidioso. Pueden seleccionar entre varios colores e incluso el "Based on progress" que comienza en rojo y va cambiado a verde mientras más cerca estamos de la meta, también pueden seleccionar el tipo de letra que quieren, el tamaño de la barra y de la fuente también.



Opción 4





1 / 12
(8.33%)



En este caso igual que el anterior recomiendo ir directamente a la página. También pueden seleccionar el color, progreso, porcentaje de espacio que quieren que ocupe y si quieren que sea gif o png.



Opción 5

Esta opción no es realmente para barra de progreso de estar leyendo a menos que lo hagan por palabras, lo comparto porque me parece excelente para todos aquellos que tengan una meta de cuántas páginas quieren escribir este año, el único detalle es que creo que sólo pueden poner como meta 50,000 words 


Lo divertido es que el personaje va cambiando de estados de ánimo y la pila de hojas se va llenando con nuestro progreso

4 comentarios:

  1. Me encanta la primera barra y el reto está superinteresante, pero no saco tiempo para nada xD

    Un besiño enorme :*
    PD: a ver si pronto te puedo hacer una entrevista o algo para darte más publicidad en el blog, aunque la mayoría de los que me comentan ya los he visto por aquí alguna vez :P

    ResponderEliminar