7 complementos para Firefox que todo diseñador debe tener

Un saludo a todos! en esta edición les traigo 7 complementos que todo Diseñador Web o Front-End Developer debería tener.

1. FireBug

Sin ninguna duda nuestro número uno y gran amigo de aquellos que lidiamos con markup y css a diario... FireBug, es la  extensión que te permite monitorear, editar y hacer debug en vivo de tu html, css y javascript.

2. PixelPerfect

Para aquellos que nos esmeramos porque el diseño sea igual al markup, esta PixelPerfect, que te permite sobreponer una imágen sobre la página para ver que tan diferente esta tu diseño de tu markup, bastante útil para cuadrar pixel a pixel y dejar perfecto el markup.

3. MeasureIt

Siguiendo con el tema de pixeles y medida perfecta, MeasureIt te despliega una regla en tu página web para medir elementos, separación entre ellos o lo que quieras medir en tu página. Perfecto para medir espaciado entre elementos y dejar tu markup al pelo :)

4. FirePicker

Ya habíamos hablado de FirePicker un gran alíado de Firebug a la hora de escoger el color de un elemento con una cool paleta de colores.

5. YSlow

YSlow es para aquellos que se preocupan por el rendimiento de sus páginas, tiempos de carga y peso de recursos para que tu aplicación corra lo más rápido posible.

6. Web Developer

Web Developer trae un conjunto de herramientas bastate útil para cualquier diseñador, puesde desde desactivar carga de imágenes, css o html, hasta validar tu código html y css bajo las reglas w3c sin moverte de pestaña.

7. ColorZilla

Por último para los amantes del color, está ColorZilla que te permite extraer el color con un maravilloso cuentagotas, además  de eso tambien trae un zoom especial para tener mayor exactitud a la hora de tomar los colores de alguna página. 

Bueno eso les tengo por el día de hoy algun comentario o feedback no duden en comentar!

Como colocar glow a tus campos de texto con css3

Como lo prometido es deuda, aquí les tengo el css para hacer el glow effect en los campos de texto.

Es bastante sencillo, está probado en firefox, safari y chrome. Básicamente la magia la hace la propiedad box-shadow, que permite colocarle sombra a cualquier elemento html.

 

Código CSS

form input[type="text"]{
margin-right:10px;
border:1px solid #5ABAE7;
color:#767E76;
font-family:verdana;
font-size:12px;
padding:10px;
width:230px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
}
form input[type="text"]:focus{
-moz-box-shadow:0 0 15px rgba(24, 223, 227, 0.5);
-webkit-box-shadow:0 0 15px rgba(24, 223, 227, 0.5);
}

FirePicker for Firebug

Para los que usamos Firebug, aquí les tengo FirePicker un addon para Firefox bastante útil a la hora de escoger el color de nuestros elementos en css. Firepicker nos despliega la gama completa de colores, así no tenemos porque usar un editor de imágenes para escoger un color en particular. Resulta bastante útil y rápido a la hora de cambiar un color en nuestra hoja de estilos.

Crea tus clases y selectores automaticamente con PrimerCSS

Para aquellos que nos pasamos creando hojas de estilo css a diario o es nuestro pan de cada día crear nuevos estilos, les tengo esta herramienta para crear automáticamente los selectores css, nada más tienen que pegar su html en el formulario de PrimerCSS y zas! primer se encarga del trabajo sucio de crear el css!!! .... no crees ?? pues usalo tú mismo aquí.

Agrega glow a tus campos de texto

El text field glow es una técnica usada para ayudar al usuario a enfocarse en un campo de texto al momento de llenar el formulario. Este tipo de técnicas mejoran la navegación y facilita el llenar formularios que es una tarea de todos los días para muchos de nosotros.

El color usado para el resaltar el campo de texto es muy importante, normalmente los colores ténues, suaves y fríos son usados para enfocar al usuario en un campo en específico. Ya que si usamos colores fuertes o rojizos le sugerimos al usuario que hubo algun error al ingresar la información. En el ejemplo de la imágen se muestra el formulario de login de twitter en donde contrastan con un resaltado azul. Más adelante les mostraré un tutorial de CSS3 para hacer este efecto.

Fuente: uxmovement.com