CSS Peeper, un inspector inteligente orientado a diseñadores.
CSS Peeper es una extensión gratuita desarrollada para el explorador Chrome. Su finalidad es la de obtener los recursos visuales que conforman una página web. Podrás obtener colores, imágenes y además podrás saber de manera rapida algunas de las especificaciones css asignadas a cada elemento. El gran acierto de CSS Peeper es el de crear una interfaz de usuario limpia y sencilla de entender para cualquier tipo de usuario. No llega a inventar nada que el inspector no nos proporcione actualmente. Sin embargo CSS Peeper lo condensa de manera perfecta. Estamos ante un producto orientado al diseño web, ergo creado para diseñadores (as).
. . .
Un inspector orientado a diseño
Bajo la premisa de «No more digging in a code» nace CSS Peeper. Una extensión gratuita de Chrome desarrollada por Dawid Młynarz & Jędrzej Sadowski que tiene como fin poder inspeccionar cualquier elemento de una página web de manera sencilla y visualmente agradable. Así es, no mas inspector de Chrome, Firefox con lineas de código. CSS Peeper llegó para revolucionar el diseño web. Al alcance de pocos clicks podrás obtener paletas de color, iconos, distancias, etc.
Una interfaz sencilla y visualmente agradable.
CSS Peeper cuenta con una interfaz de usuario muy sencilla y fácil de usar. Lo primero que podrás ver son los aspectos generales de la página. Familia Tipográfica, tiempo de carga, peso de archivo, título SEO, entre otras cosas.
Una vez que das clic a algún elemento es cuando las cosas se ponen más interesantes. De manera muy clara se presentan las especificaciones del objeto seleccionado. Nombre de la clase o ID, distancia, line-height, colores, etc.
Exportar cualquier elemento al alcance de un clic
Por si no fuera poco poder inspeccionar los elementos de manera sencilla sin perder la vista en el intento. CSS Peeper nos da la opción de exportar los elementos de los que está compuesta la web que estamos inspeccionando. Ya sean iconos o imágenes, fácilmente podrás exportarlos y ocuparlos en tu propio proyecto. Personalmente no es algo que yo recomiende, ya que la autoría de esos elementos pertenece a alguien más, sin embargo puedo ver la utilidad dentro de esta funcionalidad.
Ahondemos un poco en este tema ya que la línea es delgada entre sólo inspeccionar una web por aprendizaje y curiosidad y el plágio. Supongamos los siguientes escenarios.
En el primer escenario acabas de conocer a una empresa que está interesada en tus servicios de desarrollo web, UI o UX. La empresa ya cuenta con una página web y quieren renovarla. Como parte de tu investigación lo más probable es que vayas directamente a ver lo ya hecho. Entonces abres CSS Peeper y ves que familia tipográfica están ocupando, paleta de colores y fotos e iconos. Supongamos que hayas quedado en mostrar una propuesta en una siguiente reunión y para ello exportes por medio de CSS Peeper los elementos que necesites. Si este es el escenario que te estás imaginando déjame decirte que probablemente es una buena opción para contar rápidamente con imágenes reales de la empresa. Ya sea la imagen de la marca, fotos de producto e iconos.
Herramienta de trabajo, no de plagio
Ahora supongamos un segundo escenario en dónde en lugar de revisar la web de la empresa que está pidiendo el rediseño tu entraste a otra web. Aquí encontraste una fotografía que te gustó o un icono. Al igual que en el ejemplo anterior con CSS Peeper es fácil exportar estos elementos y usarlos en nuestro proyecto. Pero ojo en este segundo escenario estamos ocupando elementos de los cuales no contamos con los derechos de autoría, ni la empresa que solicitó nuestros servicios.
El respeto al diseño ajeno es la Paz Clic para tuitearEste es un tema de mucho cuidado ya que podemos meternos en un problema legal grave. Además de que moralmente estamos sentando un precedente erróneo en la manera en la que desarrollamos nuestro trabajo. Sin dejar de lado que estamos plagiando el trabajo de otr@s compañer@s del sector. Mi recomendación es ver esta herramienta como una oportunidad de aprendizaje y en algunos casos de dinamismo en el desarrollo con el debido respeto a lo ajeno.
CSS Peeper es una herramienta creada para facilitar el trabajo de los diseñadores.
Sin duda está herramienta ha llegado para quedarse y esperemos se mantenga continua evolución. Hay un potencial enorme en el uso de CSS Peeper al momento de estar diseñando. Con un uso consciente CSS Peeper puede llegar a ser una de las herramientas indispensables para cualquier grupo de diseño y desarrollo. Le deseamos a CSS Peeper una larga vida dentro del medio y te invito a que la instales, pruebes y me comentes si te fue de utilidad.
Te dejo los siguientes enlaces para que puedas probar esta extensión