Webmaster Libre

Desarrollo web con software libre

Buscador

Archivo de la categoría "Herramientas Online"

CSS Color Extractor, sacándole los colores a tus CSS

Esta mañana, en el trabajo, estaba pensando cual sería la forma más cómoda de obtener todos los colores empleados en una hoja de estilo para simplemente buscar y sustituir un color u otro. En mi caso, en principio era para encontrar dos tonos de azul que convivían en la hoja y poder deshacerme definitivamente de uno de ellos.

Entonces, apareció en el horizonte el CSS Color Extractor (no recuerdo la fuente originaria, lo siento en el alma), una simple herramienta que te permite pegar un código css y obtener los colores que hay en él, acompañados de una pequeña previsualización de cada color.

Sin duda, hay otras aplicaciones pero, como dice el mismo autor, la mayoría (al menos de las que yo conozco) te extraen los colores de una URL y, si la página no está publicada no hay forma.

CSS Color Extractor

En los comentarios comentan una solución más cómoda para los que utilizéis Firefox con la Web Developer Toolbar (Information>View Color Information) pero para los que teneis otro navegador o no tengáis la extensión ahí queda.

Anuncio de la herramienta: http://hackd.wordpress.com/2007/10/01/extract-colors-from-css-code/

CSS Color Extractor: http://www.thrivesmart.com/open_source/color-parser.html

Premailer, preparando tu HTML para ser enviado por correo electrónico

Si alguna vez has tenido que maquetar un boletín de correo electrónico o algún tipo de página HTML destinada a ser enviada por correo, sabrás lo rápido que se convierte en un engorro al tener que emplear estilos en línea.

Además, como no podía ser menos, los diversos clientes de escritorio y webmails tienen carencias y no todo lo que puedes hacer con una página web, puede ser enviado y visto correctamente por e-mail.

Premailer es un script creado por Alex Dunae que te permitirá convertir una página HTML normal y corriente en una página “lista para enviar”.

Con solo introducir la URL de un documento HTML Premailer se encargará de todo por tí:

  • Los estilos CSS serán convertidos en atributos en línea
  • Las rutas relativas serán convertidas a rutas absolutas
  • Las propiedades CSS serán probadas contra las capacidades de los clientes de e-mail, siguiendo la guia de Campaign Monitor
  • Se creará una versión en texto plano

Cabe recordar que es un script en desarrollo y algunos resultados pueden resultar desastrosos. No obstante, su autor trabaja constantemente para mejorarlo.
Premailer está construido en Ruby y Hpricot y dispones del código fuente por si quieres descargarlo y echarle un vistazo.

Premailer: http://code.dunae.ca/premailer.web/

pForm, generando formularios HTML en dos segundos

Se me ocurren un montón de situaciones en las que podemos agradecer tener a mano un generador de formularios como este.
Con pForm podrás tener un formulario en HTML (relativamente bueno) con un bonito estilo. Para ello sólo tendrás que seleccionar un esquema de color, escoger los campos y escribir las etiquetas que los acompañarán.

pForm

El resultado podréis descargarlo para integrarlo en vuestros sitios comodamente y gratis.

pForm: http://www.phpform.org/

doTemplate: personaliza y descarga tu plantilla HTML

Si el lado creativo del desarrollo web no es tu fuerte o estás empezando a hacer tus pinitos con el desarrollo web, te va a encantar doTemplate.

doTemplate

doTemplate es una interesante herramienta que te permitirá escoger una plantilla web, personalizarla a tu gusto cómodamente online y descargate el resultado en HTML y CSS.

Hay plantillas con un aspecto excelente y siendo totalmente gratuito ¿por qué no probar?

doTemplate: http://www.dotemplate.com/

Via MoMB

3 invitaciones para Jumpchart

Jumpchart

Jumpchart,es la nueva aventura web de Paste Interactive, una aplicación web con la que podrás construir mapas de tus sitios web, coordinar la arquitectura de la información con los otros miembros de tu equipo y tener siempre claras las partes de tu web y, por tanto, el trabajo que te queda por hacer. Podrás añadir tantas páginas como desées e incluso los contenidos de las mismas.

Y, lo mejor de todo, una vez lo tengas todo listo podrás exportar esa arquitectura básica de tu sitio en XHTML y CSS (según prometen válido).

Esta tarde me ha llegado una invitación para probar el servicio y, como esta gente son bastante majos, me han regalado otras tres invitaciones para que las reparta. Si queréis una dejad un comentario, sólo tengo 3 así que serán para los 3 primeros (no os olvidéis de dejar un mail válido para que os la envíe).

Por lo que he ido viendo, es una aplicación agradable de usar y puede ser realmente útil en una tarea tan importante como la planificación y distribución de los contenidos de nuestro sitio web.

Jumpchart:
http://www.jumpchart.com/

GreatDB, más información sobre tus dominios

Seguro que conocéis cientos de sitios de este estilo pero, como suele decirse, mejor que sobre…

GreatDB logo

GreatDB es otra herramienta de esas en las que introduces tu dirección y te devuelve datos interesantes. En este caso devuelve datos como el ranking de alexa, información whois, backlinks… Nada nuevo hasta aquí, una herramienta útil para hacer consultas rápidas, lo mejor de todo es que nuestro reporte tendrá una dirección web desde la que acceder a él en cualquier momento. Así nos ahorramos hasta teclear (y no, no es ironía, realmente prefiero ir a una página de los favoritos que rellenar un campo de formulario).

Aquí os dejo el mío de ejemplo pero lo mejor es que lo probéis vosotros mismos.

GreatDB:
http://greatdb.com/

Via Webadictos

Build With, ¿de qué están hechas las páginas web?

Build With

Seguro que alguna vez, al visitar un sitio web, te ha entrado una terrible curiosidad por saber cómo y con qué está hecho.
Con Build With podrás saber más sobre cualquier sitio: lenguajes de programación, CMS, librerías, widgets, sistema operativo de la máquina, publicidad…

Sin duda nos ofrece gran cantidad de datos, no le veo acertar en algunas cosas pero supongo que tendrá que ver también con la configuración del servidor en el que esté alojada la página.

Built With: http://builtwith.com

Via Bitelia

Feng GUI, Feng Shui para tus interfaces de usuario

Si quieres que tus imagenes, sitios web o interfaces tengan el máximo impacto en tus visitantes tendrás que tomar en consideración los puntos en los que centran su atención.

Feng GUI

Feng GUI te permite crear automáticamente un mapa de calor (heat map) generado por una inteligencia artificial que, mediante el algoritmo View Find, imita la respuesta humana. De esta forma sabrás dónde están mirando tus visitantes y podrás adaptar tus sitios a los usuarios para sacarles el máximo rendimiento.

Debo decir que el algoritmo está lejos de ser realista, se basa principalmente en señalarte los puntos de coloración más llamativa. No obstante para imágenes o diseños complejos, puede resultar interesante.

Feng GUI: http://www.feng-gui.com

SQL Designer, diseñando bases de datos online

Modelar una base de datos es una tarea tediosa y cualquier herramienta capaz de faciliarnos realmente la tarea es interesante tenerla cerca. A través de Bitelia descubro SQLDesigner un script, pensado para ser descargado e instalado desde tu servidor (puede ser un servidor local, claro) mediante el cual podrás diseñar las tablas de tu base de datos, exportar el modelo en XML y crear los scripts SQL necesarios para crear nuestra base de datos en los servidores de base de datos más comunes y utilizados: Oracle, Postgres, MySQL, MSSQL, etc.

SQL Designer

Podéis haceros una idea de como funciona mediante la beta online disponible en su sitio oficial, no obstante me permito recomendaros que lo descarguéis e instaléis en local si pensáis utilizarlo a menudo. Generalmente este tipo de proyectos tiene recursos limitados y si todos utilizamos la demo podríamos llegar a causar un perjuicio económico a alguien que nos brinda una herramienta tan práctica. (sería un agradecimiento algo peculiar).

SQL Designer: http://ondras.zarovi.cz/sql/

GrayBit, tus páginas en escala de grises

Sin duda, un aspecto fundamental para que nuestros sitios sean verdaderamente accesibles es el color. A pesar de que, salvo en aquel anuncio del Golf, las personas con ceguera al color han pasado bastante desapercidas, se trata de un trastorno bastante común.
A pesar de que estoy segura de que todos sabemos lo que es el daltonismo y procuramos no hacer juegos con el rojo y el verde, existen muchos otros tipos de ceguera al color, tanto parciales como totales.

Por eso esta herramienta que descubro a través de Xyberneticos puede resultarnos tremendamente útil. GrayBit nos propone una forma diferente de ver nuestro sitio web, en escala de grises, para que podamos comprobar si los contrastes de nuestros colores son suficientes aún para personas que no son capaces de verlos.

Aquí os dejo una captura de este sitio, sale bastante bien parado aun que, como en todo, siempre se puede mejorar.

Webmaster Libre en escala de grises

GrayBit: http://graybit.com/

Blogalaxia BlogESfera - Directorio de Blogs Hispanos Web Developement Blogs - BlogCatalog Blog Directory