Gabriel Rodriguez Plancarte » Diseño Web

Como poner imagenes en correos o paginas sin usar etiquetas de img o attachments

Gabriel — Mon, 29 Mar 2010 07:58:45 +0000

Habrá veces que queremos desplegar una imagen en un correo o en una página web sin utilizar una etiqueta (tag) de . O también que en una hoja de estilos (CSS) queramos especificar literalmente el contenido de la imagen en lugar de hacer referencia a ella en algún path.

Utilizando Data URI Schemes, podemos especificar el “string” de Base64 que equivale a una imagen gráfica. Es decir, estamos especificando “in-line” la imagen, en formato de datos, en lugar de utilizar una etiqueta img que implica la localización de la imagen como un recurso externo.

Es decir..es lo mismo poner esto:

que esto:

Ahora, cómo saber el Base64 string de una imagen? Podemos utilizar la herramienta online llamada “Image to Base64 converter“, hecha por Mads Kristensen, un excelente desarrollador de .NET. Mads trabaja en ZYB.

Chris Coyier, de CSS Tricks, también escribió recientemente sobre Data URIs y los comentarios en su blog post son interesantes. Chris también hace referencia a otra herramienta, similar a la de Mads, llamada Image to Data URI convertor.

Esto es sólamente una técnica, una manera más de lograr las cosas, que podría ser la más correcta o no, dependiendo de los escenarios. Los Data URIs también tienen algunas limitantes:

En Internet Explorer, solo funcionan en la version 8 en adelante.
En IE8, los Data URIs estan limitados a 32k, por lo que solo podrían servir para imagenes meramente decorativas, no fotos de alta resolución, etc.
Las imágenes no son cacheadas por separado, así que si el HTML o CSS se vuelve a descargar, las imágenes obviamente también.

Evalúen sus opciones, y espero les sirva.

MIX10 – excelentes conferencias y recursos de desarrollo

Gabriel — Sun, 21 Mar 2010 22:19:31 +0000

Del pasado 15 al 17 de Marzo se llevó a cabo la conferencia MIX10, que es una serie de conferencias de diseño y desarrollo web organizada por Microsoft, con platicas impartidas por la gente que está causando más impacto en la comunidad de desarrollo online (las sesiones son escogidas en base a votos, durante meses anteriores al evento).

Las platicas de este año se ve que estuvieron muy interesantes…así que aquí les dejo las ligas a los videos de las pláticas y también a una muy buena sección de recursos que armaron en el site de MIX10, con ligas a guías de desarrollo para Windows 7 Phone Series, Silverlight 4, WCF RIA y otros tantos temas que son lo relevante de hoy en día.

Algunas de las pláticas fueron:

Overview of the Windows Phone 7 Series Application Platform
10 Ways to Attack a Design Problem and Come Out Winning
Stepping Outside the Browser with Microsoft Silverlight 4
Total Experience Design
Understanding the Model-View-ViewModel Pattern
Beyond File | New Company: From Cheesy Sample to Social Platform
The Microsoft Silverlight Analytics Framework

Ligas:

MIX10 – The Next Web Now

MIX10 – Resources Page (Windows 7 Phone Series, Silverlight 4, etc)

Iconfinder – un buen buscador de iconos

Gabriel — Mon, 21 Dec 2009 03:50:48 +0000

Iconfinder Logo

Post rapido para recomendar Iconfinder.net, un muy buen buscador de íconos, y con una interfase al estilo Google, que creo que a la mayoría nos gusta.

Por el momento, dicen tener en su base de datos 122,683 iconos y/o 296 sets de iconos disponibles. La interfase de búsqueda es muy buena, les pongo aqui un screenshot de la pagina de resultados al teclear “Facebook” en la caja de búsqueda. Los resultados fueron muy variados y definitivamente hay iconos muy buenos ahi.

Resultados Iconfinder.net

Espero les sirva.

NavigateToURL con frames en ActionScript 3.0

Gabriel — Sat, 07 Mar 2009 08:14:28 +0000

Empece a diseñar paginas web a los 15 años creo, y me tocó trabajar con Flash desde su primera versión, cuando todavía se llamaba Splash, o algo asi. No trabajo mucho con Flash, y tenía mucho tiempo de no tener que programar algo en ActionScript, pero ayer tuve que editar un menú de la pagina de un cliente en Flash CS3….y no fue nada agradable.

Antes de que Adobe comprara Macromedia, todavía era sencillo trabajar con ActionScript. Hacer que un objeto o boton en una Movie abriera una liga en un iFrame de HTML era algo fácil y rápido. Agregar una action al boton y en el evento onRelease, usar el método getURL.

Ayer, tuve que rediseñar ese menu usando ActionScript 3.0 y que ineficiente hicieron el lenguaje. Algo que antes tomaba 2 lineas, ahora toma 10 o más. Y lo peor es que he visto que gente experimentada y fluida en programación de ActionScript ni siquiera encuentra intuitivamente la forma de hacer algo tan simple como navegar hacia otra pagina en un frame.

Por si a alguien le sirve, aqui hay una liga a Como Usar el metodo NavigateToURL en ActionScript 3.0. El autor de ese blog, Matt, ha posteado mucho sobre ActionScript 3.0 y ayuda mucho a sus lectores cuando le preguntan o incluso se quejan sobre la complejidad innecesaria de ActionScript 3.0.

Y todavía después de eso, estuve quebrandome la cabeza 2 horas más. Aún especificándole el nombre del iFrame como target, la pagina se abría en un tab nuevo. La solución fue, en el dialogo de Export Movie, seleccionar el valor de “Access Network Only” para la opción de Local Playback Security.

Flash CS 3 Export Movie dialog

Sin esto…nunca se abre el target en el frame seleccionado.