Pixel perfect y Web development

Pixel perfect y Web development

developer oír hablar de “pixel perfect” puede ser un dolor de cabeza. La cuestión es que si el web designer ha proyectado aquella imagen para la web e incluso el cliente ya lo ha validado, hay que transformar en código aquel diseño. Bueno, por lo menos darle una apariencia lo más fidedigna al trabajo del diseñador que sea posible. El problema viene cuando el diseñador habla de pixel perfect, y no habla precisamente de la película de Disney. La necesidad de transformar un diseño web en una página web y que sea pixel perfect en una época donde el responsive design es obligatorio es una tarea interesante y apasionante, sobre todo cuando hay que respetar el tema cross-browsers. Felizmente hay diferentes formas de abordar este problema y solucionarlo. Pixel Perfect Pixel Perfect es un add-on de Firebug, para Firefox  que en mi versión de Firefox (25.0.1) no ha funcionado y en otras versiones funciona incorrectamente. Así que no he dedicado mucho tiempo investigándolo, a pesar de la buena pinta que tiene. PerfectPixel PerfectPixel es de aquellos add-ons que simplemente funcionan y es realmente fácil de usar. Por lo menos en mi versión de Google Chrome. PerfectPixel es una herramienta sencilla, pero poderosa. Es una extensión que permite sobreponer imágenes, supongo que tal como el Pixel Perfect del FF, directamente sobre el HTML, lo que  facilita el trabajo de redimensionar y posicionamiento de elementos por pantalla. PerfectPixel permite editar el nivel de opacidad de la imagen de forma intuitiva, controlar la escala de la misma y añadir diferentes capas. Su interface permite mover la imagen por el monitor y también fijarla. Otra de las características interesantes es que las capas se guardan en las sesiones del navegador. ¡No hay que volver a añadir una nueva capa después de recargar la página! Con PerfectPixel es posible obtener resultados muy precisos y de una forma muy rápida.  Realmente vale la pena experimentarlo. Otras opciones Como siempre, cada developer tiene sus trucos y a lo mejor una herramienta personalizada es la más adecuada para este trabajo de transformar el diseño en un site pixel perfect. Una alternativa por ejemplo es la de Samuel Claxon que ha decidido solucionar esta necesidad con un pequeño código de HTML  & CSS. Fuentes:

]]>

Leave A Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Déjate sorprender...

Gestionar el consentimiento de las cookies

Para ofrecerte la mejor experiencia de uso, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento a estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.

Funcional

Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.

Estadísticas

El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos anónimos. Sin una requerimiento, el cumplimiento voluntario por parte de su proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarlo.

Marketing

El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en un sitio web o en varios sitios web con fines de marketing similares.