Proyecto Parfait

Adobe ha lanzado un sitio web https://projectparfait.adobe.com/, que se encuentra actualmente en Beta, que permite trabajar con archivos PSDs directamente desde el navegador, con el proposito de obtener medidas, distancias y otras propiedades.

proyecto Parfait

Proyecto Parfait – Pantalla por defecto

Con solo seleccionar elementos o capas podemos obtener los valores e incluso generar de una vez reglas y estilos CSS.

Por defecto se nos presenta un archivo con el que ya podemos probar la herramienta seleccionando el contenido, pero podemos rapidamente subir un PSD simplemente arrastrandolo al navegador, hice algunas pruebas con el sistema y funciona perfectamente incluso con documentos muy grandes, una vez se terminan de subir este empieza a procesarlos para poder extraer los datos del archivo una vez completado el procesamiento puedes empezar a trabajar con las diferentes partes del archivo.

proyecto Parfait

Proyecto Parfait – Procesamiento de imagen

Resulta muy interesante la cantidad de informacion que podemos obtener de la herramienta, desde los tipos de letras utilizados incluso los  colores

proyecto Parfait

proyecto Parfait – colores y letras usados

proyecto Parfait

proyecto Parfait – Ejemplo css

ancho de Select inputs y text inputs en formularios HTML

Un problema muy comun a la hora de trabajar con formularios, es que si asignamos un ancho sobre estos por ejemplo utilizando una clase o una propiedad css sobre ellas es que cuando los previsualizamos en el navegador sus anchos no son identicos. por ejemplo este caso:

<form><selectname="name1"style="width:198px"><option>value1</option><option>value2</option></select><br/><inputtype="text"name="id1"style="width:193px"><br/><inputtype="text"name="id2"style="width:193px"></form>

la forma de solventar esto, es bastante sencilla y es compatible con varios navegadores, basta colocar en la hoja de estilos la siguiente regla:

input, select, textarea {   box-sizing: border-box;   -moz-box-sizing: border-box;   -webkit-box-sizing: border-box; }

y con eso tenemos solventado el problema. Podemos a partir de aca, asignarles los anchos que deseamos y estos se presentaran de la misma manera.