Avisar de contenido inadecuado

Herramientas en Pixelovers

Expand

10 Extensiones de Firebug que deberias conocer

Logo Firebug

Si estas en el mundo del Desarrollo Web, es muy probable que ya conozcas Firebug.

Este popular plugin de Firefox nos permite, entre otras cosas, hacer debug del Javascript, cambiar el CSS de tus paginas en tiempo real y ver el trafico de red de tu pagina.

Pero aparte de lo que viene de serie, Firebug nos permite añadirle funcionalidades a traves de extensiones. Algunas de estas extensiones se estan convirtiendo en imprescindibles para muchos diseñadores y programadores web.

Asi que aquí os dejo una lista de las 10 extensiones para Firebug que considero más interesantes:

Expand

Crear un CSS inicial con PrimerCSS

PrimerCSSSi te da miedo enfrentarte a una hoja de estilos en blanco, no sabes por donde empezar. ¿Qué  elementos tienes en el HTML? ¿Qué clases has usado? ¿Qué identificadores empeaste? Y también si no te quieres dejar ningún elemento de la página sin estilo una buena forma de empezar es con PrimerCSS.

Personalmente le veo más utilidad cuando quieres hacer una hoja de estilo para una web ya existent, más que para empezar un proyecto. Por ejemplo es muy útil para hacer una plantilla de Wordpress u otro CMS. Si te gustaría crearte tu propio CSS para Stylish no te dejarías nada por diseñar. ¿Para qué utilizarías tu PrimerCSS? ¿Le ves utilidad o prefieres ir sacando tu mismo los selectores?

Expand

Chuleta de jQuery en PDF

Siguiendo con los post relacionados con las chuletas, ya os presentamos la chuleta de HTML5, hoy toca una chuleta de jQuery 1.3 en versión PDF, gracias al trabajo de Antonio Lupetti.

Espero que con esta ayuda tengais un desarrollo más ágil y no os perdáis detalle de los ejmplos que estamos incluyendo, como fue el caso de Namespace en eventos de jQuery.

Expand

UpShot, revisión de bocetos colaborativa

UpShot es una herramienta que promete hacer las delícias de los diseñadores freelance. Permite compartir bocetos durante el proceso de desarrollo de un logotipo, un interfaz, etc., y que los participantes puedan marcar áreas en ese diseño para añadir comentarios, así como responder a los comentarios dejados por otros participantes. Magnífico: simple y efectivo.

Quizás el único pero es que como aplicación independiente me queda un poco pequeño. Normalmente, cuando realizamos un trabajo para un cliente externo, el proceso de bocetado y seguimiento del diseño sólo es una pequeña parte del "todo". Lo ideal sería pensar en UpShot como una herramienta integrada en algo más grande, como Basecamp, por ejemplo.

Sitio oficial | UpShot

Expand

¿La mejor combinación de colores? Mira a tu alrededor

La elección de la paleta de colores es una de las fases clave en el diseño de interfaces. Posiblemente el color ejerce más influencia que ningún otro elemento de diseño en cómo nos sentimos en determinado espacio (en nuestro dormitorio, en la oficina, en un restaurante, en un coche... y ¿como no?, en un sitio web) y por eso su elección no es, para nada, trivial.

104643-78739.jpg

Aunque ya hemos hablado en más de una ocasión sobre herramientas gratuítas que pueden ayudarnos a escoger la mejor combinación de colores, esta vez vamos a tratar de buscar ayuda en otro sitio, fuera de nuestro ordenador y lejos nuestras herramientas de trabajo habituales: vamos a tratar de fijarnos en nuestro entorno, en la naturaleza.

104643-78734.jpgLos colores que solemos encontrarnos en la naturaleza nos son familiares, y generalmente combinan entre ellos de forma armoniosa y equilibrada, con lo que pueden ser una fuente -¡inagotable!- de inspiración para nuestros diseños. ¿Y por dónde empezar? Tus propias fotos o galerías de fotos públicas como Flickr son un buen punto de partida.

Además, existen algunos sitios, como ColourLovers, que ofrecen de forma periódica paletas de colores "naturales" basadas en fotografías de animales, de paisajes, urbanas, etc, de dónde también podemos sacar buenas ideas o practicar para ir cogiendo soltura en la "selección de colores de base" a partir de nuestras propias fotografías.

Y es que, como puedes ver, no sólo Gaudí se inspiró en las formas y colores de la naturaleza para crear sus obras.

104643-78736.jpg  104643-78737.jpg
104643-78738.jpg

Expand

Coda: editor de código todo-en-uno para Mac

10699-11708.jpg

Coda es un editor de texto orientado al desarrollo web que integra, además, un completo gestor de sites, funciones de un cliente FTP, un cliente SSH, un editor visual de hojas de estilo, opciones de previsualización incorporadas, funciones de autocompletado para HTML, CSS, PHP, SQL... Vamos, un todo-en-uno en toda regla, y con la solvencia de haber sido desarrollado por la gente de Panic.

10699-11707.jpg Lo conocí esta misma semana a través de una de estas webs que recopilan diseños interesantes: CSSRemix, CSSMania... no recuerdo cuál. Debo reconocer que en nuestra primera toma de contacto me quedé sólo con lo atractivo del diseño de su página y pensé que no sería si no "otro más" de esos programas que intentan sin mucho éxito combinar demasiadas cosas bajo un único interface. Sin embargo, el viernes Eric, uno de los compañeros de la oficina, me lo recomendó, así que hoy he decidido darle una oportunidad usándolo durante toda la tarde para llevar a cabo algunos cambios a OboLog.

La verdad es que supera con creces la prueba. Tanto, que me estoy planteando sustituir mi actual editor de texto, TextMate, por éste.

  • El interface es cómodo e intuitivo, consigue conjugar todas las 'caras' de la aplicación sin saturar al usuario con miles de opciones.
  • 10699-11709.jpgEl editor de texto, como comentaba más arriba, incorpora auto-completion para los lenguages más habituales, así como coloreado automático del código.
  • Organiza los archivos abiertos en pestañas, en vez de abrir nuevas ventanas para cada uno.
  • Trabaja de forma fluida aunque los archivos se encuentren en red ( uno de los temas que más problemas me daban con TextMate ).

En mi caso la verdad es que poco partido le saco al cliente FTP. Si tuviera integrado un cliente para Subversion o similar sería ya El Editor Definitivo, pero será una carencia que perdonaremos, ya que con el cliente SSH en la misma interfaz podemos, en un momento dado, lanzar los commits en local o los updates en el servidor cuando haga falta.

En definitiva, toda una opción a tener en cuenta. Posiblemente siga usando CSSEdit 2 para la creación y edición de hojas de estilo, puesto que en ese aspecto es mucho más completo que Coda, pero creo que ambos van a formar un buen equipo. El precio, por otra parte, no es desorbitado: $79.

Actualización 2 de Mayo: Panic ofrece una actualización desde su web a Coda 1.0.1, en la que han añadido soporte para JPS-HTML y ActionScript, la posibilidad de trabajar con plantillas Smarty, y la opción de definir una URL local para lanzar las previsualizaciones mientras estemos desarrollando (release notes de la nueva versión). 

Expand

CSSEdit y las hojas de estilo bien organizadas

CSSEdit Releía esta mañana CSS Crib Sheet , un artículo de Dave Shea que podéis encontrar traducido al castellano gracias a la gente de Armonía y pensaba, mientras repasaba de nuevo los consejos que Dave da a los diseñadores que trabajan con CSS, en el ahorro de tiempo que supone la automatización de algunos de los puntos de la lista mediante el software adecuado.

En mi caso llevo algunos meses trabajando con CSSEdit ( sólo Mac OsX ), un editor de hojas de estilo realmente genial.

Entre sus muchas virtudes destacaría:

  • Dispone de una vista "preview", una ventana donde podemos ver en tiempo real el efecto de todas las propiedades que vamos añadiendo y modificando.
  • Podemos extraer y modificar el CSS de cualquier página web, mediante la ventana de preview.
  • Mediante una sintaxis propia, usando simplemente comentarios en la hoja de estilos, nos permite agrupar propiedades e ids, traduciéndose esa organización en un listado jerárquico, a modo de un explorador de archivos, en la propia ventana de edición de código. Esto me parece especialmente útil, cuando se trabaja con hojas de estilo medianamente grandes. Dado que muchas veces mantener un orden adecuado es esencial para el correcto funcionamiento de la cascada y en formato jerárquico propiedades e IDs me parece genial.
  • Mezcla funcionalidades de autocompletar con una barra de herramientas lateral dónde podemos escoger mediante clics las propiedades y los valores que queremos asignar a cada clase o ID. Acaba sirviéndonos de cheatsheet a la vez que de barra de herramientas.
  • Dispone de un validador CSS integrado en la propia aplicación
  • Permite gestionar versiones de nuestras hojas de estilos

CSSEdit screenshot En definitiva... "¡por qué no te habré conocido antes!", como decía el amigo Jesús Puente. Además, como punto a favor, el precio acompaña bastante: sólo $29.95.

Otras opciones similares, como StyleMaster ( Win & MacOsX ) cuestan casi tres veces más.