Construir patrones para fondos. BgPatterns. | Oloblogger Para ir desperezándonos poco a poco tras las celebraciones del nuevo año (hablo por mí), hoy sólo va...

3 de enero de 2011

Construir patrones para fondos. BgPatterns.

Para ir desperezándonos poco a poco tras las celebraciones del nuevo año (hablo por mí), hoy sólo vamos a ver una sencilla herramienta para contruir patrones que nos servirán para montar fondos mediante la repetición de pequeños trozos a modo de teselas.

La utilidad se llama BgPatterns y la conocí en el blog de Paola Magariños, una artista que en sus ratos libres también se dedica a pasarnos útiles e interesantes enlaces con recursos diversos.

Esta aplicación la verdad es que no necesita mucha explicación, pero por si acaso teneis problemas con la lengua de Shakespeare, os comento un poco las distintas opciones.


La principal viene a ser la de Image, que es la que nos permite escoger entre distintos motivos prediseñados. Vereis que en cuanto pinchais algún modelo, este pasa a la vista previa del cuadro a la derecha. Seleccionable también el nivel de transparencia de la imagen, el formato de distribución del motivo en la repetición y la escala de este.

En Colors se puede elegir tanto el color del motivo principal como el del fondo que servirá de contraste. Hay un botón debajo a la izquierda para poder intercambiar los tonos elegidos.


Canvas nos permite elegir una textura de entre cinco disponibles: arenisca, tejido regular, lienzo desgastado, manchas y rugoso. Aquí también podemos definir de manera independiente el alto y ancho de la tesela. Si queremos modificar el tamaño de forma proporcional, hay que pinchar en el símbolo superior que parece un infinito, encima de los valores numéricos. A la derecha de estos aparece un selector para la mayor o menor transparencia de la textura.


Por último, con Rotation podeis girar la imagen principal el número de grados que querais.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

11 comentarios :

  1. Saludos, como puedo insertar dibujos canvas en mi blog? lo he intentado pero no he tenido exito. Hay un articulo en Vagabundia creo que funcionaba pero yo no veo nada de los espacios con Canvas. Probe con notepad++ y mi navegador y ejecuta canvas ademas los ejemplos en w3 se ejecutan

    ResponderEliminar
    Respuestas
    1. No te puedo ayudar con eso Luis, pues Canvas es algo que no he tocado nunca. Lo siento.

      Eliminar
  2. Gracias, primero que todo he probado algunas cosas que has colocado como el Indice l cual quedo muy bien, claro yo fui uno de los que caí en la "advertencia" jeje, pero ya todo bien. Me ha sorprendido lo complejo que puede ser Blogger, es decir aunque manejes CSS, Html y un poquito de javascript hay que trastear mucho más con Blogger :(.
    Voy aprovechar para comentarte algunas cosas para ver que opinas y un pequeñito aporte. Primero algo que me pareció extraño inserte un codigo javascript sencillisimo para usar canvas en un blog de prueba, javascript antes de /head y entre // Y NO FUNCIONO :(. Aqui lo interesante luego lo inserte en un Gadget y hay funciono en la ENTRADA pero no en el Gadget!!!!! hay me provoco arrancarme mis pocos cabellos :(, que puede estar pasando? creo que el rollo no es Canvas dicen que blogger da soporte.
    ¿Sera que tengo que usar obligatoriamente JQuery al insertar mi codigo javascript?
    Te agradesco lo que me puedas orientar

    ResponderEliminar
    Respuestas
    1. Yo no lo veo igual, pero claro, llevo mucho tiempo por aquí. Lo que pasa es que lo que en web está en una hoja de estilos (.css) en Blogger va directamente en plantilla, pero para mí, como decía, eso es una facilidad más que una complicación.

      Sobre el JavaScript, Blogger usa un DocType 1.0 Strict, por lo que algunas cosas no funcionan bien en la plantilla si no las pones de determinada manera. En los gadgets sin problema, pues no forman parte de la estructura de la página, pero para la plantilla, usa la segunda opción que explico en este artículo:

      Alojar scripts para Blogger

      Eliminar
  3. Quiero insertar mapas en mi Blog se que lo puedo hacer desde DropBox o GoogleDrive pero soy muy testarudo y no me rindo, ya estoy que busco un hosting gratis como 000webhost. Bien ahora un aporte o comentario:
    Revisando uno de tus Post viejitos este: Mover imágenes y otros elementos. Scriptaculous note que en el Blog de Luis Fernando Limas, supongo un doctor, coloca un grafico para estimar peso en relación a la edad y utiliza las propiedades Draggeble (algo que me parece espectacular par mis mapas :D ), bien pienso que insertando un codigo javascript que lea las coordenadas de la imagen (inician de la esquina superior izquierda en pixeles), podría colocar una formula que transforme esas coordenadas de pixeles a valores peso/edad, (esto lo puede hacer mediante reglas de tres, sencillo escalamiento) y de esta forma cuando mueva el cursor por la imagen podria mostrar mediante un popup o una barra de estado los valores:
    Este es el script para tener la posicion del cursor:

    En posx y posy, añade las formulas requeridas para escalar
    En la parte inferior se reporta el resultado:

    En mi caso lo reporte como Norte y Este, en el caso de el Doctor seria peso y Kg

    ResponderEliminar
    Respuestas
    1. Scriptaculous sigue funcionando, pero personalmente prefiero actualmente jQuery por su facilidad de uso.

      No lo he usado nunca y no te podría decir exactamente pero sé que con jQuery UI tienes unas instrucciones que facilitan mucho la tarea. En una búsqueda con "arrastrar elemento jQuery" seguro que encuentras varios tutoriales.

      Gracias por el apunte en cualquier caso ;)

      Eliminar
  4. Gracias a ti, por tus acertadas respuestas y reponder tan rapido, intente colocarte un código pero no pude en el comentario, el aporte era un codigo para que al mover el cursor te mostrara las coordenadas de la imagen, algo sencillo, que pienso le serviria al doctor Limas.
    Lo que me dices de Blogger es totalmente cierto mira esta es mi web de prueba igual esta publicada www.pruebacartogeo.blogspot.com, como señalas en los gadgets el codigo corre de las mil maravillas, tanto canvas como una librería especializada llamada leaflet, pero en la plantilla ni se entera, voy a probar la opción que me dices me parece muy muy adecuada espero funcione. Si tengo éxito estaré compartiendo por aqui, que tal, de pronto abres un espacio en tu web sobre mapas en la web ;)

    ResponderEliminar
    Respuestas
    1. El Doctor creo que hace mucho tiempo que ya no pasa por aquí ;)

      Eliminar
  5. Hola, saludos Oloman jeje disculpa la insistencia ya tengo esto como un foro :), pero esta vez vengo a aportar, no me parece dejar las dudas en el aire alguien pudiera necesitar el dato, puede que esta sea otra opción :D.
    Bien te cuento que probé lo que aconsejas en el post de alojar los javascripts dentro del Blog y no funciono :(, así que después de indagar me encontré una solución colocar el código javascript en el body, después de class='post-header-line-1' por lo que veo esto es el header de los post (realmente no se que hice jeje), antes de pegar el código lo "parsee" en esta pagina http://www.elliotswan.com/postable/ lo copias y el lo traduce, puedes ver el resultado en mi blog de prueba pruebacartogeo.blogspot.com

    ResponderEliminar
  6. Ah si después de indagar puedes ayudarme a comprender que hice lo agradezco igual seguiré indagando y compartiendo descubrimientos jeje

    ResponderEliminar
    Respuestas
    1. Pues simplemente pasaste el código a texto plano y de esa manera te saltaste algunas limitaciones de Blogger :)

      Eliminar