Tooler | Herramientas web y Recursos

Website Ribbon Generator es un generador online de cintas diagonales, llamadas ribbons en inglés, que puedes insertar en una esquina de tu blog/sitio en cuestión de segundos.

Si te gusta algún sitio o si eres partidario de una causa, no hay mejor forma de llevarla a cabo que insertando una cinta diagonal en tu sitio enlazando a esa página. En forma alternativa, si sólo deseas darle un toque distintivo a tu web o identificar todos tus sitios con una única cintilla, puedes usarla sin agregarle un enlace.

Puedes personalizar la apariencia de tu cinta, agregando el texto que deseas que muestre la misma, un enlace (opcional), tipo y tamaño de letra, color y tipo de ribbon. Finalmente presionas en Generate y la herramienta creará un código JavaScript que deberás copiar y pegar en el código fuente de tu página. La cinta se mostrará siempre en la misma esquina sin importar dónde insertes el código.

En mi opinión sería bueno que se pudiera agregar un color personalizado para la cinta además de los disponibles en forma predeterminada. Además al ser un código JavaScript, el que hay que insertar, supongo que no se mostrará en aquellos navegadores que no lo soporten. Pero la verdad que me parece una excelente herramienta, ideal para aquellos que deseen de forma inmediata mostrar una cinta y que no quieran hacerse líos con hojas de estilos. En el sitio de la herramienta recomiendan usar mayúsculas para obtener un mejor efecto.

Como ejemplo pueden observar la cinta en la esquina superior derecha del generador.

Vía: DigiZen.

Compártelo

RoundedCornr es otro generador online de código HML/CSS e imágenes que permite construir cajas con bordes curvos o redondeados, muy utilizados últimamente. Basta con insertar el grado de angulación que tendrá la esquina (Corner radius in pixels), el color de fondo donde estará ubicada la caja (Background color), el color de la misma (Box color) y hacer clic en “Create”. Nos generará un código HTML con un texto ejemplo, que deberás reemplazar por el que quieras, un código CSS que deberás introducir en tu hoja de estilos y las 4 imágenes que debes descargar y colocar en la mismo directorio de la página html.

Importante: Si colocás las imágenes en un directorio distinto de donde se encuentra la página html, deberás actualizar dichas localizaciones en el código css generado.

Si observamos un poco más abajo en la página del generador verán que también nos brinda la posibilidad de crear boxes con fondo degradado, con bordes y también de generar sólo una imagen GIF con los bordes (ya sea curvos o cuadrados), los colores de fondo, texto y otras opciones a nuestra elección, ideal para hacer pestañas, botones, imágenes de fondo sólido/degradado, etc. ¿Algo más?.

Ejemplos realizados por mí (Básico/Con degradado/Con borde/Imagen sola).

Vía: Digg.

Compártelo

YourGen es un generador de texto (Logos) online y gratuito que nos permite crear imágenes con un texto personalizado. Lo interesante de este generador son las fuentes de texto de muy buena calidad disponibles para generar las imágenes. Aunque no hay una gran variedad por el momento , vi algunas tipografías elegantes, finas y muy bien diseñadas, incluso con animaciones muy discretas, y otras un tanto cómicas. Este sitio también ofrece la posibilidad de utilizar un contador de visitantes, para insertar en tu sitio, con la fuente seleccionada. Una vez habiendo seleccionado nuestro texto y la fuente que queramos tenemos 2 posibilidades:

Clic en “Get Code”, nos genera el código de nuestra imagen que debemos insertar en el código fuente de nuestro sitio donde deseamos que aparezca.

Text Generator - Comic Text - Counters - YourGen.com

Clic en “Get Counter”, nos genera el código del contador de visitantes que también debemos insertarlo en el código fuente de nuestro sitio igual que el anterior.

Text Generator - Comic Text - Counters - YourGen.com

Punto ultra negativo a tener en cuenta: Cómo podrán observar en estos ejemplos, la imagen lleva impresa la url del sitio “YourGen.com” y además al ponerla desde el código también inserta una barra de links bajo la imagen. Por supuesto que “podríamos” obviar de descargar el código y directamente guardar la imagen evitando la barrita de links, en cuanto a la url del sitio “podríamos” quitarla fácilmente con cualquier editor gráfico, pero esto queda a conciencia de ustedes ya que supongo que el sitio no lo permite.

Vía: Digg.

Compártelo

Demofuse es un novedoso servicio gratuito que brinda la posibilidad de crear tours o demos interactivos de tus sitios. ¿Pero qué es un tour? Similar a lo que ocurre inmediatamente luego de instalar ciertas aplicaciones que nos brindan la posibilidad de explorar en forma rápida las funciones básicas de las mismas para empezar a utilizarlas rápidamente, Demofuse nos permite, a través de estos tours, resaltar determinados elementos o secciones de nuestra página web indicando lo que nuestros usuarios necesitan saber para sacar el mayor provecho de nuestro sitio.
No es necesario descargar ningún software adicional para utilizar este servicio. Actualmente sólo es posible utilizarlo solicitando una invitación desde este formulario pero pronto estará disponible para todo el público y en forma gratuita.
A modo de ejemplo, ellos mismos crearon un tour resaltando las características del servicio. Puedes verlo haciendo clic en el botón azul que dice “Sample Tour” ubicado en la página principal del sitio.

Vía: etc.

Compártelo

Mycoolbutton es una herramienta online que te permite generar en 4 pasos sencillos una imagen del estilo de los conocidos botones o logos 2.0. Entre sus características destaca la posibilidad de añadir al diseño un ícono o imagen en formato PNG. Podemos elegir entre íconos ya predeterminados o cargar alguno desde nuestra pc. También podemos definir ancho del botón, color de fondo (siempre degradado), tamaño y ubicación del ícono, tipo y tamaño del texto e ir previsualizando los cambios realizados haciendo clic en “Apply changes”. Finalmente apretamos en “Download” y descargaremos nuestra imagen en formato PNG.

Ejemplos de botones que puedes generar con esta herramienta:

Vía: Ajaxian.

Compártelo

VisorDir es una útil herramienta realizada en flash, gratuita, personalizable, que permite crear en segundos secuencias fotográficas animadas, visores de noticias, intros o banners, para incrustar en tu sitio web, a partir de ficheros gráficos (jpg) o de flash (swf) situados en la carpeta “imagenes”. VisorDir se personaliza fácilmente a través de un fichero de texto llamado VISOR.TXT situado en la misma carpeta que el fichero visor SWF.

Los parámetros a configurar son:

• Total de imágenes a visualizar.
• Color del marco, que rodea la imagen.
• Color de la barra de Información-Navegación.
• Tipos de archivos JPG o SWF a visualizar.
• Que al terminar vuelvan a empezar las imágenes.
• Transición automática entre imágenes.
• Tiempo de espera en la transición.
• Efecto al pasar de una imagen y otra.
• Permitir enlazar la imagen con una URL.
• Definición del enlace en cada imagen.

Para más información sobre su instalación, demostraciones del visor y descarga visiten el sitio oficial:

Sitio: VisorDir

Compártelo

Wordpress theme generator es un sencillo generador que te permite crear en muy poco tiempo themes o plantillas para tu Wordpress. No piensen que van a poder construir una plantilla extraordinaria con esta herramienta pero creo que no es en vano citarla ya que es la primera herramienta online, que vi hasta el momento, con esta función. Permite personalizar varios parámetros:

• Título, color del mismo o la inclusión de un logo.
• Ancho del cuerpo de la plantilla.
• Lugar de inclusión del sidebar (left y right) y ancho del mismo.
• Tipo de menú.
• Tipo de fondo con la posibilidad de elegir entre varias imágenes.
• Personalización de los distintos tipos de textos.

Una vez que hayan terminado la plantilla hacen clic en Save y se descargan el .ZIP que contiene todos los archivos de la plantilla.

Vía: Mangas Verdes

Compártelo

Stripe generator es un excelente generador online de fondos rayados estilo web 2.0. Incluye varias funciones para personalizar el diseño de tu background, como la posibilidad de modificar el tamaño, espacio, color principal, color de fondo, estilo de fondo, sombras y orientación de las rayas. El diseño del generador es muy intuitivo y fácil de comprender. Genera una imagen .png que podemos usar directamente en nuestro archivo .css o usarlo como patrón de fondo en algún programa de edición gráfica como Photoshop.

Vía: Digg

Compártelo

¿Estás creando tu blog o sitio web y aún no tienes un logo?
ImageTool es una utilidad online bastante sencilla que te permite generar logos al estilo 2.0 rápidamente.

Aunque este estilo de logos es usado en forma masiva desde hace un tiempo, y puede que algunos ya estén algo cansados del mismo, me parece una utilidad interesante para tener nuestro logo temporalmente mientras diseñamos el propio y es una herramienta que puede ayudar mucho a aquellos con escasos conocimientos sobre diseño gráfico que deseen un logo atractivo.
Por lo que vi, este generador incluye más funciones que otras herramientas del tipo:

Características:

• Estilos de texto: Negrita, cursiva y subrayado.
• Color de fondo.
• Gradiente de colores en el texto con paletas que facilitan la elección*.
• Tipo y tamaño de fuente.
• Graduación del reflejo y opción para desactivarlo.
• Posibilidad de añadir imágenes extras como Beta, plus y otras más.
• Algo muy importante es la posibilidad de seleccionar distintas calidades de la imagen resultante y permite generar el logo en 3 formatos: PNG, GIF y JPG.

*Nota: Por el momento recomiendo elegir los colores en forma manual sin usar la paleta ya que he notado algunos errores al generar la imagen.

Vía: Menéame

Compártelo

Wiki: “Una userbar es principalmente una imagen de 350×19, que se usa frecuentemente en las firmas de los foros de discusión. Se usan para mostrar gustos personales, direcciones de sitios y a veces varían en tamaños y en formatos.”

Estas imágenes representan un importante recurso para hacer publicidad de nuestro sitios web en los foros en los que participamos activamente (participando en forma adecuada por supuesto.)

Es por eso que considero interesante citar los siguientes recursos para que puedas tener tu propia userbar y de esta manera aumentar el tráfico hacia tu web.

Generadores online

Online Userbar Paint Tool

Es el más completo que vi hasta el momento. Posibilita el manejo de capas. Permito añadir más de una imagen y patrones de fondo creados por el usuario. Además efecto reflejo para la barra y función scroller entre otras herramientas. Pero tiene la desventaja de ser algo difícil de manejar al principio. Ejemplo creado:

Userbar maker

Un poco más sencillo que el anterior con la posibilidad de agregar una sola imagen del lado izquierdo de la barra (PNG, GIF y JPEG) , efecto degradado de fondo y patrones de fondos predeterminados para utilizar.

Userbar gif animator

Permite crear userbars animados. Nos permite ingresar hasta 10 url de barras estáticas, luego las combina, y nos devuelve una sola barra en la cual van rotando las imágenes agregadas anteriormente. Ejemplo creado:

Ubanimator

Igual que el anterior pero con algunas funciones más como la posibilidad de establecer el tiempo de pausa entre cada rotación, subir imágenes desde la pc y una excelente función que nos permite agregar efectos de transición como fade, scroll up, scroll left, door y squish entre las rotaciones. Ejemplo creado:

Customizalo | Userbars

Este generador nos permite seleccionar plantillas de userbars ya creadas y agregarle múltiples textos. Se puede modificar la textura, sombra, efectos, posición y tipo de fuente de los textos entre otras cosas. Un gran punto en contra es que introduce el texto “customizalo.com” en todas las plantillas sin posibilidad de removerlo. Ejemplo creado:

Galerí­as de userbars ya listos para descargar

A continuación varias galerías con barras ya creadas ordenadas por categorías con leyendas como: “Linux user”, “Firefox user”, “Nirvana fun”, etc. No servirán demasiado para promocionar nuestros sitios ya que por lo general no permiten insertar texto en ellas pero dado que son muy populares también las incluiremos en esta recopilación:

Leer texto completo »

Compártelo