Entonces siendo objetiva voy a entrar en una leve comparación, si el diseñador es el artista, el creativo, el desarrollador es el pincel, el limitador y la web es el lienzo en sí misma, que depende de cada fabricante. Se entiende? Por lo tanto no podemos manejarnos igual en todos los lienzos (impresoras, navegadores, sistemas operativos).
Para solucionar este problema el desarrollador se ocupa de traducir al lenguaje de la web lo que el diseñador quiere hacer y de esta forma no entendemos todos... Entonces las reglas no las pone ni el diseñador ni el programador sino la web, así que basta de autoritarismo y ninguneos, solo debemos adaptarnos a losestándares web...
Principal diferencia y la raíz de todos los males
1.-IMAGEN
Imagen para el diseñador
Resolución, colores, formato.
Mientras más resolución tenga mejor calidad e imagen más pequeña
En una imagen de 640 x 480 su tamaño final dependerá de los dpi. Cuantos más pixeles se prensan en cada centímetro de papel, menor será la imagen.
Imagen para el desarrollador
Peso, dimensiones, formato.
Mientras menos pese sin perder calidad, mejor rendimiento al cargarse.
En una imagen de 640 x 480 su tamaño final será de 640 x 480, lo dpi son invisibles a la web. Cada pixel de la imagen ocupa un pixel de la pantalla.
2.-TIPOGRAFIAS
Tipografía para el diseñador
Se pueden descargar y utilizar en todos los programas diferentes tipos de fuentes, hay de todos los tipos, se pueden crear propias inclusive, se ven iguales en todas las impresiones. Con la mezcla de más de una se consiguen resultados seductores para el cliente.
Tipografía para el desarrollador
Se utilizan las Fuentes Web seguras (Cambria, Constantina, Times New Roman, Georgia, Arial Black, etc) o también se pueden encontrar en Google Font muchas más para elegir. Otra opción,que es la más conocida y la mejor para los diseñadores es que pueden bajarse y adjuntarse al servidor fuentes no seguras. Pero previo a esto se debería hacer un testeo en los diferentes navegadores.
En todos los casos como medida de seguridad por si el navegador no encuentra la fuente especificada se utilizan fuentes de respaldo a la que ya elegimos como fuente principal.
Los logos son siempre tratados como imágenes impresas así que no tenemos inconvenientes con esto.Pero en los contenidos de la web debemos limitarnos con los gustos de las fuentes, ya que una web cargada de imagenes en todo su contenido (menu, logo, pie de pagina, contenido principal, etc) se vuelve muy pesada.
Maquetación de la pantalla
Para pensar en el ancho de la pantalla se utilizaba más o menos el siguiente criterio, pensando como diseñador 1024px o más y pensando como desarrollador 960px o menos.
Hoy en día hay que adaptarse a las diferentes pantallas iPads, widescreen iPads, iPhones, Samsung Galaxy, portátiles, monitores de 21" a 1024px, monitores de 27" a 2560px , ect . Es responsabilidad de los desarrolladores que una web pueda verse en todos los formatos digitales sin limitación. Hay que utilizar %, las medidas EM, los @media screen.
Ejemplo práctico:
Por último dejo un ejemplo práctico y sencillo de cómo se hace un rectángulo rojo desde el lado del diseño y desde el lado del desarrollo.
Diseño utilizando CorelDraw
Seleccionamos Herramientas - Caja de Herramientas - Herramienta Rectángulo - Nos arrastramos con el mouse y definimos tamaño en la hoja virtual elegida - Luego elegimos color y borde desde los gráficos adecuados
Desarrollo utilizando lenguaje Web
En Html definimos el código del elemento
<div class= “rectangulo”> </div>
En Css definimos el diseño del elemento
.rectangulo { width: 100px;
heigth: 100px;
background: red;
border-color: red;}
Conclusión = Son distintos idiomas sin dudas, hay que encontrar el equilibrio y no abandonar en el intento.El resultado siempre sera mejor si se trabaja juntos!
