UXecutioners

7 complementos para Firefox que todo diseñador debe tener

2010-09-27T10:14:00.002-05:00

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

2010-09-26T23:20:00.004-05:00

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

2010-09-26T22:10:00.001-05:00

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

2010-09-24T21:21:00.001-05:00

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

2010-09-24T20:50:00.003-05:00

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

"PrettyFile" un toque único a tus input file

2010-08-26T14:32:00.005-05:00

El otro día me tope con el problema de personalizar un input file, y me tome el tiempo de personalizarlo con css, una tarea que me tomo bastante tiempo y fué bastante tediosa. Pues aquí les dejo una solución más rápida, se llama PrettyFile está hecho en jquery y me parece una solución fácil y rápida para personalizar los input file.

Cuanto tiempo tardas en tu Facebook o Twitter ?

2010-05-21T19:06:00.003-05:00

Sin duda el impácto que generan las redes sociales ha crecido en los últimos años y al parecer seguirá creciendo. En este video verán interesantes estadísticas del uso de Facebook y Twitter en España y en todo el mundo, es interesante ver cuanto tiempo tardamos navegando en Facebook y Twitter, demostrando que son medios en los que predominan la publicidad.

Firefox en buses de la india

2010-03-12T22:12:00.012-05:00

Todos apreciamos a nuestro Firefox, pero en la India ya fueron al extremo colocando el logo del zorro en los buses jejeje, disfrutemos de la creatividad y esperemos a que los buses de aquí se contagien con esta onda, sobretodo los buses de granabastos jajajaaja ahi les dejo :)

Pueden disfrutar más de arte firefox aquí

Corre cualquier navegador desde la web !

2009-09-10T11:36:00.005-05:00

Es para todos claro que al diseñar una página web y darle estilo con css hay que tener en cuenta que esta se vea de manera correcta en cualquier navegador (cross-browser). Esto para algunos parece una maldición, e incluso un trabajo tedioso (gracias a nuestro amigo ie), primero el hecho que te tienes que descargar los navegadores más usados, además de eso probar tu web en las distintas versiones que existen de cada navegador; en fin...

Aquí les tengo una aplicación web que nos permite correr varios navegadores a la vez sin necesidad de instalarlos. Entre estos Internet explorer (versión 6, 7 y 8), Firefox (versión 2, 3 y 3.5), Safari, entre otros.

Así que maravilloso para los que no tenemos Internet explorer 6, que aunque cada vez más se esta usando menos hay que tenerlo en cuenta de todos modos. De igual forma nos queda de consuelo que cada vez más los navegadores se están preocupando por lo estándar, aunque parezca imposible que se pongan deacuerdo esperamos que algún día se acerquen a lo que todos queremos.

Carga tu css dependiendo de la resolución de la pantalla

2008-04-29T23:16:00.028-05:00

Según este artículo (Adios a la resolución de 800x600), ya podemos despedirnos de la resolución de 800x600 y le damos la bienvenida a otras como 1024 x 768 que según estadísticas se usa un 56,15% en todo internet, le sigue 1280x1024 que es usada un 15.79%, pero que por obvias razones pasará a reemplazar la de 1024x768.

Hoy en día es muy importante el tema de los estándares, se habla de la web 2.0 y temas como saber diseñar tu página web, tener en cuenta la usabilidad... en fin. Por tanto es indispensable tener en cuenta, que tipo de usuario va a interactuar con tu página, como se le va a formatear la información y si está cumple con los estándares. Este ejemplo puede ser muy útil si quieres cargar distintos css dependiendo de la resolución del cliente. Puede llegar a ser muy útil cuando se tienen imágenes que para una determinada resolución parezca pequeña, pero que para otras sea demasiado grande causando que se vea antiestética la página o molestando al usuario al tener que hacer más scroll. Bueno no siendo más el código...

1. Primer paso: Preparar el enlace del estilo

Bueno el primer paso es definir un enlace a un archivo .css de esta forma, pero ojo sin especificar la propiedad href, es decir sin hacer link a ningúna hoja de estilos. Quedará algo así:

Observaciónes: Esta línea debe estar en la cabecera de tu página. idDeTuEstilo es el identificador con el que se hará referencia desde javascript.

2. Segundo Paso: Usar DOM javascript.

Luego sólo queda definir con javascript que estilo se cargará. El truco utilizado es crear con anterioridad los archivos css cuyos nombres tendrán como valor el ancho de la resolución del cliente, ejemplo:1024.css, 800.css. Ahora utilizando DOM, se obtendrá el objeto que contendrá el enlace a la respectiva hoja de estilos:

document.getElementById("idDeTuEstilo"): Sirve para obtener referencia al objeto que tenga como valor del parámetro id = "idDeTuEstilo".

En nuestro caso, obtenemos referencia al objeto que enlaza a los archivos .css. Luego por medio de la propiedad href le asignamos el nombre de la hoja de estilo a la que dicho enlace hará referencia. He aquí el truco !! se obtiene el ancho de la pantalla del cliente con screen.width y se le concatena ".css":

screen.width+".css"

Quedando entonces de la forma: 1024.css o 800.css. Cabe agregar que como única desventaja es que la ejecución de tus estilos dependerán por completo de si el usuario tiene activado o no la ejecución de javascript, algo que estos días es muy inusual y no muy recomendado.

Edición Gráfica de páginas web en NetBeans con Visual Web Page Layouts

2007-12-10T03:13:00.000-05:00

Aquí encontre un plugin bastante bueno para facilitar la parte gráfica en aplicaciones web. Sólo para netbeans 6.

http://plugins.netbeans.org/PluginPortal/faces/PluginDetailPage.jsp?pluginid=3941

Interesante o no ??? ....
Este plugin instala páginas predefinidas, para hacer más rápida la creación de una página, pues te permite seleccionar diferentes plantillas... Además de eso podemos editarla gráficamente!!, te imaginas editar tus páginas justo como haces en DreamWeaver!!, esta maravilla hace de netbeans el IDE más completo del mercado.... Qué esperas pruebalo ya!!