La página se llama Pixeden y según sus creadores ha nacido con la idea de crear un sitio único para recoger todas las herramientas que un diseñador necesita para su trabajo en el día a día. La forma de utilizar la página es bastante sencilla, puedes registrarte y comenzar a compartir tus recursos con la comunidad, estos recursos podrán ser:

• De impresión: logos, tarjetas de contacto, resúmenes, flyers, folletos, catálogos, otros.
• Webs: wireframing, elementos web.
• Iconos: media, e-commerce, social.
• Vectores: personajes, objetos, decorativos, conceptuales e ilustraciones.
• Gráficos: texturas, mock-ups (bocetos), backgrounds (fondos), textos con efecto, aplicaciones móviles.

En cada ficha de cada elemento aparece la información más reseñable como: un pequeño resumen del autor, fecha de inclusión, número de archivos, formato, tamaño, número de veces que ha sido descargado, vista previa y por último aunque no menos importante licencia del recurso ya que aunque sean gratuitos se comparten con diferentes tipos de licencia. En la ficha también se permiten los comentarios de otros autores, de esta forma aumentará el feedback y las posibilidades de mejora.

Para terminar y por ponerle un pero, sólo se echa de menos una mayor visibilidad por parte del autor de cada recurso, ya que parece que toman más importancia los propios recursos que sus diseñadores encargados de realizarlos.

Con esta herramienta podremos generar código CSS3 simplemente modificando los parámetros de los diferentes componentes con los que podemos trabajar, entre los que se encuentran: bordes redondeados, degradados, trasformaciones, animaciones y transiciones CSS, selector de colores RGBA, sombra en: texto y cajas y rotación y seleción de tipografía @Font Face.

Como es puede ver el la imagen, a medida que seleccionemos un componente para trabajar, en la parte inferior se nos informará de la compatibilidad entre los diferentes navegadores y navegadores móviles.

Por último, en la parte derecha aparecerá el código listo para copiar en nuestra hoja de estilos CSS o descargar en un fichero .zip para posteriores usos.

Sin duda una página imprescindible en tu lista de herramientas CSS3.

Como en la vida real, en el mundo de internet, el diseño es lo primero que entra por los ojos y antes de comenzar a leer o adentrarnos en el contenido de la página, en lo primero que nos fijamos, es en el esquema de colores. Cualquier artista, diseñador gráfico, o en definitiva, cualquier webmaster con gusto sabrá qué colores son convenientes en cada ocasión, colores claros y fondo blanco para facilitar la lectura, colores oscuros para sites que ofrezcan la posibilidad de ver películas o video o esquemas de colores definidos por temáticas, con los ejemplos más típicos: moda/ belleza – diferentes tonos de magenta, deportes / fútbol – escala de colores de verde, sites de temática de humor – contraste de tonos de colores vivos como el amarillo.

Para ayudarnos a elegir un buen esquema de colores para nuestra web existen varias herramientas como por ejemplo:

Color Palette Gallery

Una web donde encontrarás una galería con muchas combinaciones de colores, junto al nombre de los colores que las componen.

Color Scheme Designer

Esta herramienta nos da opción de elegir nosotros mismos la combinación, según el número de tonos o colores que deseamos para nuestro site, sin duda de gran utilidad.

$(document).ready(function(){
     var altomax = 0;
     $('.alturas').each(function(){
         if($(this).height() > altomax){
             altomax = $(this).height();
         }
     });
     $('.alturas').height(altomax);
 });

Para finalizar añadimos en el HTML la clase “alturas” a todos los elementos a los que queramos que se muestren a la misma altura:

<div id=”articulos” class=”alturas”>
…
</div><div id=”lateral1″ class=”alturas”>
…
</div>

<div id=”lateral2″ class=”alturas”>
…
</div>

La solución lógica es hacer que ese botón se muestre sólo cuando es realmente necesario y tiene una utilidad, es decir, el momento en el que el usuario comienza a realizar scroll en nuestra página hacia abajo. Al realizar el efecto contrario también desaparece, ya que el usuario no está haciendo uso de el y por lo tanto, es un elemento en pantalla del que se puede prescindir.

UItoTop es un plugin bastante sencillo que nos servirá para hacer desaparecer el botón de “Subir” o “Ir arriba” y mostrarlo sólo cuando sea necesario.

Para comenzar a utilizar el plugin bassta con descargar los ficheros, realizar las llamadas en nuestro documento y añadir el siguiente código:

$(document).ready(function() {

	var defaults = {
		containerID: 'moccaUItoTop',
		containerHoverClass: 'moccaUIhover',
		scrollSpeed: 1150,
		easingType: 'linear'
	};

	$().UItoTop({ easingType: 'easeOutQuart' });
});

En el código se pueden configurar algúnanas opciónes como: el diseño CSS y la velocidad del scroll con la que sube nuestra página al pulsar sobre el botón, recordar que no es recomendable una velocidad demasiado baja, ya que el fin de este botón es ahorrar tiempo a los usuarios para llegar de nuevo a la cabecera del sitio.

Textualizer es un plugin jQuery con el que podrás realizar transiciones entre textos con hasta cuatro efectos diferentes como:  aparición progresiva (fadeIn), desplazamiento a la izquierda (slideLeft), desplazamiento arriba (slideTop) y efecto aleatorio (ramdom), además el plugin acepta cualquier número de palabras.

Para ello primero definimos los tres estados diferentes:

.textualizer('pause') // Pausar animaciones finalizando la animación
.textualizer('stop') // Parar la animación
.textualizer('destroy') // Elimina la instancia

Para utilizarlo, descargar el fichero js y alojarlo en tu servidor, realizar las llamadas correspondientes desde tu código, estas son algunas de las variables que se pueden configurar:

var list = ['first blurb', 'second blurb', 'third blurb'];  // list of blurbs

var txt = $('#txtlzr');  // The container in which to render the list

var options = {
    duration: 1000,          // Time (ms) each blurb will remain on screen
    rearrangeDuration: 1000, // Time (ms) a character takes to reach its pos.
    effect: 'random',        // Animation effect the characters use to appear
    centered: true           // Centers the text relative to its container
}

txt.textualizer(list, options); // textualize it!
txt.textualizer('start'); // start

Textualizer es compatible con los principales navegadores web: Chrome, Safari, Firefox, Internet Explorer (6,7,8,9+), Opera y Safari.

Ya hemos hablado, en varias ocasiones de sistemas de alertas que utilizan jQuery para mostrar notificaciones a los visitantes de nuestro site de una forma elegante.

La siguiente herramienta noty  por defecto incorpora soporte para alertas de: mensajes positivos, errores y mensajes de confirmación de acciones en nuestra página. Desde la misma web se puede configurar cómo y dónde queremos que se muestren: parate superior/inferior, al margen izquierdo/derecho y en el centro de la pantalla. También existen muchas opciones para personalizar las notificaciones, como: velocidad de apertura, cierre de las animaciones, duración de permanencia en la pantalla, mostrar/ocultar icono para cerrar la alerta, forma de mostrar las notificaciones modal (pantalla oscura de fondo)…

Una vez configurado nuestro diseño de notificaciones descargamos el código personalizado y lo alojamos en nuestro servidor.

Añadimos las siguientes llamadas en el <head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.noty.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.noty.css"/>

Para crear las notificaciones utilizamos la propiedad noty(properties);

// ex1 - alert
$('.ex1.alert').click(function() {
noty({text: 'noty - a jquery notification library!'});
});

Es cierto que en versiones anteriores de FireFox ya se incluía una consola web, un editor Javascript y una sencilla herramienta para inspeccionar el Document Object Model (DOM), todo ello accesible desde la barra de herramientas, seleccionando la categoría desarrollador web.

En las nuevas versiones de FireFox, a partir de la versión 10, se ha incorporado, o mejor dicho, rediseñado un nuevo panel de desarrollo, donde se incluyen las funciones de inspector DOM y una herramienta para visualizar y modificar las propiedades CSS (al vuelo), es decir, podremos visualizar directamente los cambios en la página.

Para acceder a esta nueva herramienta, podemos hacerlo de dos formas, como se accedía anteriormente o posicionando el puntero sobre la página y haciendo click derecho en el menú inspeccionar elemento.

Una vez activada esta función, el inspector DOM permanecerá en nuestro cursor y según lo movamos por los diferentes elementos de la página se cambiará mostrándonos su composición, nombre del estilo CSS y código HTML. Todo muy bien mostrado gracias a unas completas “migas de pan” (breadcrumb o navegación por categorías).

Otro de los botones es el de estilo, que se encargará de abrirnos el panel de inspector CSS desde donde podremos acceder, modificar y eliminar elementos y su estilo CSS asociado.

Sin duda una nueva funcionalidad que si bien poco aporta si ya conocías otras extensiones más completas como Firebug, puede servir de gran ayuda para todos los webmasters, que realizan consultas en otros navegadores en los que no se disponga de la posibilidad de instalar extensiones.

En estos plugins para realizar efectos, lo principal que se busca, es que sean livianos y lo más sencillos de implementar posible. Este es el caso de Shadow animation que cumple ambos requisitos ya que apenas ocupa 4.5 kb en su versión extendida y de 2.3kb en su versión comprimida además le poedemos sacar un gran partido para animar cualquier elemento de nuestra web añadiendo un bonito efecto de sombra.

Demostración

Shadow animation hace uso de la propiedad de CSS Shadow jugando con la posición y el color, consiguiendo el efecto de animar el elemento seleccionado. De una forma sencilla y sin recargar la página (sería muy común utilizar elementos Flash, por ejemplo, para conseguir el efecto en botones).

El plugin está pensado para dar respuesta según determinadas acciones que se realicen sobre ellos, por ejemplo: al situal el ratón encima del elemento o hacer click dentro de el.

Ejemplo de utilización:

$('#box1').animate({boxShadow: '0 0 30px #44f'});

Nota: el plugin funciona perfectamente en las versiones más recientes de los navegadores: Firefox, Safari, Chrome e Internet Explorer 9.

Desde la web Asciifi podemos crear a partir de una imagen, su versión en código ASCII.

Asciifi utiliza código HTML5 para convertir, la imagen o fotografía que subimos en el mismo momento, por lo que la conversión de imagen a código ASCII resulta casi inmediata.

Además podemos configurar desde su interfaz el tipo de caracteres con los que deseamos que se genere el código y la anchura de línea (cuanta más anchura más sencillo resultara su lectura).