Guia BreveDiseño y desarrollo Web

Una de las formas más efectivas y populares para fidelizar usuarios es la de los boletines vía e-mail. Con ellos conseguimos hacer que el usuario vuelva a nuestro sitio al leer el boletín.

Uno de los problemas que tienen esta clase de técnicas, aparte de muchas veces ser considerados Spam, es el crear un diseño que se vea adecuadamente en cualquier tipo de cliente de correo, ya sea vía web o de escritorio.

Para ello, MailChimp ha creado esta interesante lista de plantillas gratuitas optimizadas para que se vean en cualquier cliente de correo, de esta forma solo tendremos que modificarlo un poco y adaptarlos a nuestro gusto y objetivos.

De todos modos, aunque estén probados en la mayoría de clientes siempre es recomendable añadir la clásica frase “Si no puede ver el email correctamente haga clic aquí.” para ahorrar problemas.

Algo muy importante para un diseñador web es conocer que fuentes puede utilizar en sus proyectos de forma que todos, o la mayoría de los usuarios puedan ver la web correctamente. Para ello en Font Tester han publicado un lista muy completa con todas las fuentes que podemos utilizar y que se verán correctamente en los sistemas operativos más populares.

Lista de fuentes compatibles con la mayoría de sistemas operativos:

font-family: Arial, Helvetica, sans-serif;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-family: ‘Bookman Old Style’, serif;
font-family: ‘Comic Sans MS’, cursive;
font-family: Courier, monospace;
font-family: ‘Courier New’, Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: ‘Lucida Console’, Monaco, monospace;
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
font-family: ‘MS Sans Serif’, Geneva, sans-serif;
font-family: ‘MS Serif’, ‘New York’, sans-serif;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: ‘Times New Roman’, Times, serif;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;

Vía: List of Web Safe Fonts (Font tester)

PSD2CSS Online es un web que nos permite pasar nuestros diseños hechos en Photoshop a CSS y Html de forma automática y Online. Simplemente tendremos que subir nuestro archivo en formato PSD y automáticamente nos mostrará el resultado, un archivo Html con el CSS incrustado en él.

Además nos permite indicar varios tipos de capas en Photoshop incluyendo un guión y una pequeña palabra al final de su nombre para que la web las trate de una forma o de otra:

• Con _text podremos definir aquellas capas que son tipo texto.
• _form, _inputtext, y _submit nos permitirán autogenerar formularios.
• _jpg conseguiremos que esa capa se guarde como una imagen en formato jpg.
• Con _link indicaremos que se trata de un enlace. Y con _linkover conseguiremos hacer enlaces con Roll Overs. (Enlaces que cambian al situarnos encima)
• Con _center centraremos la capa marcada.
• _bkgnd nos permite que la capa sea un fondo de un div.

Yo lo he probado con un diseño que tenía guardado desde hace algún tiempo y el resultado no ha sido perfecto, he de admitir que el PSD probablemente no estaba bien construido, ni si quiera use ninguna de las propiedades que se indican arriba, fue solo una prueba rápida, pero aún así repito que aunque no fue perfecto el resultado fue bastante bueno y con solo unos retoques podría dejarlo tal y como quiero.

De los creadores de PSDTuts, un blog donde se publican tutoriales sobre Photoshop, nos llega Nettus, un blog donde se publicarán tutoriales sobre desarrollo y diseño web.

Adsensemeter nos permite calcular de forma aproximada los ingresos de nuestra Web o Blog. Para ello tendremos que insertar nuestra URL y el eCMP de nuestra región, y a partir del tráfico de Alexa nos indicará aproximadamente cuanto podemos llegar a ganar. (Vía)