Desde la aparición de CSS3 no cesan de aparecer herramienta para facilitarnos el trabajo, un ejemplo de ello es DryIcons, una aplicación online que nos asiste en la creación de botones que solo utilizan CSS para mostrarse, sin embargo el efecto visual logrado es muy bueno y, aunque parezca increíble, no se utiliza ni una sola imagen.

La aplicación es muy personalizable, podemos configurar una infinidad de parámetros para lograr el resultado deseado, por ejemplo: color del gradiente, tipo de borde, sombra, tipografía, y muchas variables más.

Algo interesante de esta herramienta, y que no todas tienen, es que permite configurar el botón en sus tres estados: normal, hover y activo. Para cada estado la configuración anterior se mantiene para facilitarnos el trabajo, por ejemplo podemos lograr cambiar el color del botón muy fácilmente simplemente cambiando el color en su estado hover.

Un detalle importante es que los cambios que vamos realizando se van notando inmediatamente en el botón mostrado en el margen inferior, una especie de vista previa en tiempo real.

Cuando finalizamos el trabajo simplemente solicitamos el código presionando el botón correspondiente y listo, tendremos nuestro precioso botón CSS3 listo para utilizar en nuestros proyectos.

Web: DryIcons

Hay situaciones en las que un ícono puede disparar un estilo para diseñar o ideas para un logo, siempre teniendo en cuenta el perfil del destinatario del diseño un set de iconos como este que ha realizado Tanya de ArtDesigner.

Los sets de Tanya siempre incluyen una impronta personal y son de excelente calidad, detallados y muy originales. El set My Secret incluye una serie de elementos personales que seguramente no encontrarán en otro lugar.

Descargar My secret 10 icons | ArtDesigner

El paquete contiene 10 iconos diferentes en 128×128, obviamente pueden contactar a Tanya para conseguir diseños de mayor tamaño, aunque no sean gratuitos, es una forma de apoyar su trabajo.

También les recomiendo su set de Cupcakes que no tiene desperdicio. Son todos realmente bonitos, obviamente siempre que gusten de este estilo.

Una buena practica para acelerar nuestros sitios es la de comprimir las hojas de estilo. Para lograr este cometido podemos: suprimir todos los espacios y saltos de linea, utilizar las propiedades acortadas, agrupar clases similares, o bien eliminar clases no utilizadas, ademas de algunas otras técnicas.

Hacer esto es realmente un trabajo simple, pero muy pesado y aburrido, para ayudarnos en la tarea de comprimir nuestros archivos, y así lograr optimizar CSS, podemos utilizar la herramienta creada por CSS Drive.

La herramienta es muy fácil de utilizar, simplemente pegamos nuestras hojas de estilo en el campo destinado para ello, y seleccionamos el modo de compresión que puede ser: light, normal o super compacto.

Comprimir nuestros archivos CSS tiene la única desventaja que el código se vuelve menos legible, a mayor compresión mas compleja y dificultosa se vuelve su lectura. Una buena practica es tener dos archivos, uno normal y otro comprimido.

La herramienta creada por CSS Drive cuenta con un modo avanzado de compresión que permite configurar al máximo el tipo de compresión, indicando punto a punto las tareas a realizar.

Web: CSS Drive

Una vez más me encuentro con una plantilla para WordPress de excelente calidad dentro de una gran colección recopilada por Hongkiat. En este caso voy a hablarles de Boldy, diseñada para utilizarse como sitio completo con secciones particulares incluyendo un blog para actualizaciones frecuentes.

Boldy cuenta con un slider principal animado e interactivo, que permite mostrar imágenes de gran tamaño y oficia a su vez de muestrario de contenido, además de cerrar estéticamente el diseño.

Contiene detalles muy buenos, con definición pixel perfect que le da un aspecto profesional. Obviamente siempre las plantillas deberían de ser modificadas según las necesidades del usuario, por lo que quizás encontrarán que muchas cosas están de más. Pero por suerte, podemos personalizarlo de forma muy fácil, siempre que conozcan la forma en la que se manejan estas plantillas.

Descargar Boldy | Demo | Hongkiat

Una buena opción para salir adelante airosos ante la necesidad de implementar un sitio personal o de empresa que requiera múltiples secciones y actualizaciones regulares.

GoSquared es una fantástica herramienta para aquellos que trabajamos con proyectos web, permite monitorear el trafico en tiempo real y de una manera muy gráfica, prácticamente no requiere tiempo de aprendizaje y la podemos comenzar a utilizar hoy mismo.

Al tratarse de una herramienta que trabaja en tiempo real su interface esta preparada para mostrar lo que esta ocurriendo en el preciso momento en que visitamos la aplicación. Por ejemplo podemos visualizar que artículos de nuestro sitio se están visitando, la cantidad total o parcial de visitantes, y como es de esperarse, los sitios que nos están refiriendo el trafico.

Pueden ver una demostración online.

Otro detalle importante, y más hoy en día, es que muestra la plataforma del visitante, si es un dispositivo móvil, la versión del navegador, y el sistema operativo utilizado.

En lo personal algo que me gusto, y mucho, es que las paginas que están siendo visitadas se van reordenando automáticamente según la cantidad de personas que la estén visualizando, todo esto lo realiza sin la necesidad de refrescar la aplicación en ningún momento.

GoSquared muestra en un apartado los sitios de referencia, y hace mucho hincapié en los sitios sociales, específicamente en Twitter, por ejemplo podemos ver en tiempo real lo que se esta hablando sobre nosotros en la red social.

Los visitantes pueden discriminarse en visitantes totales o visitantes que vuelven luego de una visita previa, a su vez estos se pueden etiquetar para una fácil identificación.

La aplicación es gratuita hasta las 10.000 paginas vistas por mes, en el caso de necesitar más podemos acceder a ello por medio de un pago, que va desde los 9.99 dólares para 150.000 paginas vistas por mes, hasta los 99 dólares por mes para 2.5 millones de PV.

Web: GoSquared

jRumble es un plugin jQuery que vibra, tiempo y gira cualquier elemento que seleccionemos. Es muy interesante su implementación a modo de efecto para controlar o bien, dirigir la atención del usuario a determinados elementos.

Dentro de las posibilidades de configuración están disponibles las opciones de controlar el rango X, Y, la velocidad, la rotación y finalmente, el evento por el cual queremos lanzar la animación.

Pueden ver las distintas demostraciones desde el sitio oficial del plugin.

Un simple ejemplo de configuración de este plugin podría ser:

$('#demo2').jrumble({
	rangeX: 10,
	rangeY: 10,
	rangeRot: 4
});

Muy simple verdad?

Web: jRumble

Debo confesar que soy muy nueva en el tema maquetación y cada vez que encuentro una plantilla que me gusta tengo que descargarla para hacer pruebas. Pero entiendo que muchos buscan este tipo de recursos para utilizarlos de forma más profesional.

Una excelente plantilla diseñada por Joefrey Mahusay de HTML5Awesome, brinda un espacio perfecto para presentar una web personal dónde mostrar trabajos diversos u obras de artista. Con una distribución muy limpia y fondo estilo bokeh, simple y concreto, es la opción ideal para desplegar la información necesaria.

Descargar Free Modern Personal Portfolio | Skyje

Con detalles estilo pixel perfect en textos destacados, excelente disposición de los elementos, juego dinámico entre el fondo y el contenido, y obviamente la posibilidad de editarlo como necesiten.

Los efectos de sombreado han poblado el universo del diseño en estos últimos años, y no es de extrañarse, ya que con una pequeña sombra se pueden lograr detalles excelentes y que no requieren demasiado conocimiento.

En este caso es un paquete de 50 sombras diferentes para aplicar sobre capas de Photoshop en formas que pueden ir desde cuadros de diálogo, contenedores generales o cualquier elemento delimitado por un marco. Incluso pueden utilizarse ante la ausencia de relleno, ya que desplegando simplemente la sombra podrán dar el efecto óptico de que hay algo que se despega.

Descargar 50 curved drop shadow effects | WordPressThemeShock

La forma de utilizarlo es muy simple, les explico aquí ya que quizás nunca trasladaron efectos de capa sobre otros elementos. En este caso al descargar el archivo verán dos .PSD que contienen todas las opciones. Una vez abierto recorrerán todas las posibilidades que brinda, cuando seleccionen el que desean, hacen click sobre la capa correspondiente y con el botón derecho copian el estilo de capa. De esta forma, se dirigen a su diseño (al elemento que quieran sombrear) y en la capa correspondiente y otra vez con el botón contextual, pegan el estilo y voilá, está  listo!

Obviamente una vez aplicados se pueden editar para adaptarlos lo mejor posible a su diseño, aunque no creo que haga falta. Los efectos de capas de photoshop suelen ser muy elásticos en ese sentido y estoy segura que no les darán problemas. Un recurso para atesorar y ahorrar tiempo en el momento que se precise.

¿Vieron esas cosas que no pueden dejar pasar? Bueno, este paquete de vectores me resultó tan original que tuve que compartirlo. Quizás esté demasiado orientado al público infantil, pero crean o no, a veces, debemos incluir este estilo de elementos en un diseño y no sabemos dónde ir a buscarlos.

Ideal para proyectos que tengan que ver con los niños, establecimientos educativos, sitios de maestros o porqué no, educación online para los más pequeños. La calidad de los vectores es tal, que estoy segura encontrarán el lugar ideal para agregarlos. Funcionan perfectamente como íconos por lo que pueden formar parte de un menú.

Descargar Funny Office Icons | Gfxtra

Con colores llamativos, el paquete incluye el archivo en formato vectorizado .EPS y las imágenes en alta resolución .TIFF. En el caso que no necesiten editarlos, las imágenes les serán más que suficientes. Y como recomiendo siempre, utilizar el vector para impresión gráfica es lo más conveniente, por la definición que posee.

Si estas buscando una forma de recordar los pequeños detalles de determinados sitios web, entonces Adhesive te va a encantar.

Adhesive es una extensión gratuita para Google Chrome, sirve para agregar notas virtuales y pegarlas de forma dinámica en los sitios web que estamos visitando, muy simple y útil.

Las notas se ven de la siguiente forma:

El punto más favorable de la extensión es su simplicidad, ademas las notas quedan guardadas en el disco y aparecen al regresar al sitio web tal y como las dejamos.

Las opciones disponibles para las distintas notas que creemos son pocas pero necesarias, podemos rotar la nota, moverla y finalmente cambiarle el color tal y como se ve en la captura de pantalla que realice.

Web de la extensión: Adhesive