Gabriel Rodriguez Plancarte » Desarrollo 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)

Como hacer funcionar los Server Side Includes (SSI) en IIS 7 para archivos HTML

Gabriel — Tue, 01 Dec 2009 19:10:17 +0000

IIS 7 Logo

Por lo general, IIS trae preconfigurados los SSI (Server Side Includes) para los archivos de tipo .shtml. Sin embargo, puede haber ocasiones en que estemos agregando funcionalidad de SSI a un sitio ya existente, y cuyos archivos tenian extensiones .html.

Para estos casos, lo que tenemos que hacer es agregar un Module Mapping en IIS para que los archivos con extension .html sean manejados por el modulo correcto. Como todo, hay algunos detalles que si no se hacen de cierta manera, las cosas no van a funcionar. Batallé como 2 horas para hacer funcionar esto, así que lo escribo por si a alguien le ahorra tiempo.

Pasos para hacer funcionar SSI para archivos HTML en IIS 7

1. Start -> Run -> inetmgr -> enter.
2. En el arbol/menu de la izquierda, seleccionar la aplicacion especifica que queremos configurar. Si no se selecciona una aplicación en especifico, estaríamos modificando los mappings para todo IIS, y puede que no sea esto lo que queramos.
3. Doble click en Handler Mappings

IIS 7 Handler Mappings

4. Podemos notar que ya existen 3 Mappings con el prefijo SSINC, para los archivos de tipo .shtml, .stm y .shtm
5. Hacemos click derecho en cualquier mapping, y seleccionamos la opción Add Module Mapping.

Module Mappings de SSI en IIS 7

6. Llenamos el campo Request Path con el valor *.html, para que aplique para todos los archivos .html.

Nuevo Module Mapping para SSI en IIS 7

7. En el campo Module, seleccionamos la opción de ServerSideIncludeModule.
8. Y en el campo de Name, para ser consistentes con las otras extensiones, podemos usar el valor SSINC-html.
9. Hacemos click en el botón de Request Restrictions.
10. Activar el checkbox de “Activate Handler only if request is mapped to“, y seleccionar la opción de File.

Request Restrictions para el Module Mapping de SSI

Ahora, IIS ya está configurado. Pero hay un par de detalles más que hay que tomar en cuenta.

Se pueden llegar a topar con el error “Error processing SSI file” de IIS.

Para solucionar esto yo tuve que hacer 2 cosas:

1.Asegurarse que el usuario IIS_IUSRS tenga acceso total al folder donde esta físicamente el sitio.

IIS 7 SSI Correct File Permissions

2. En el archivo HTML, al hacer el include, usar la opción file en lugar de virtual.

Usar file en lugar de virtual al hacer un include de SSI en IIS

[Update] Se me olvidó mencionar que obviamente, como este Mapping hace que todos los archivos .html sean interpretados por el modulo de Server Side Include, estamos haciendo que IIS ya no trate los archivos .html como si fueran estaticos, lo cual implica una mínima perdida de performance de compresión, y un mínimo overhead de procesamiento para los archivos HTML solamente. Para mas información, pueden leer el cuarto comentario de este link, hecho por un MVP de IIS: Enable SSI to include an HTML File.

Y eso es todo…espero les sirva. Si tienen dudas o problemas, dejen un comentario.

Tip: Problema con multiples etiquetas de FORM en una WebForm de ASP.NET

Gabriel — Sun, 15 Nov 2009 20:53:59 +0000

.NET Logo

Estoy trabajando en adaptar un diseño HTML/CSS a una aplicación existente de ASP.NET, en Webforms.

Ya estando casi todo lo visual adaptado, y viendose bien, me faltaba transformar una forma de log-in a mark-up de XML, para poder hacer el código de Login.

Como el usuario debía poder loggearse desde cualquier ASPX de la parte pública, decidi transformar los controles de log-in originales en un ASP.NET User Control (ASCX), para poder tener la logica de todo el log-in en un solo lugar, y poder reutilizar el User Control en todas las paginas publicas.

Cree el puro ASCX con el Markup, y abri la pagina en IE. Todo bien.

Convertí el a un . Error, tengo que agregar la etiqueta de

Agregué la etiqueta, View in Browser, no mas error, pero todo el contenido del panel derecho se desplazó hacia abajo.

Despues de batallar como 1 hora con el problema, e intentar googlear, me topé con un artículo que tenía como título “Multiple forms causing strange CSS problem“. Pero yo no tengo multiples formas (eso creí), así que lo ignoré.

Despues de media hora de moverle…recordé que todo el problema empezó cuando agregué la etiqueta de al ASPX. Regreso al mark-up del User Control (ASCX) y ahi estaba…no había borrado la etiqueta de original al momento de pasar el HTML de la forma de log-in.

Borre la etiqueta de del User Control, y listo…el diseño se ve bien otra vez.

Así que como moraleja….Tener mas de una etiqueta en una ASP.NET Webform te genera problemas raros de CSS.

7 Diferencias de Javascript entre Internet Explorer y Firefox

Gabriel — Sat, 02 May 2009 00:28:31 +0000

Hace poco estaba pensando en posibles preguntas para usar en entrevistas de trabajo que me toca hacer de vez en cuando a desarrolladores orientados a aplicaciones web.

Ésta fue una de las que se me ocurrió, y me dio risa la coincidencia de ver un post escrito sobre esto practicamente al mismo tiempo que pensé en la pregunta.

Alguien que realmente ha desarrollado aplicaciones web tiene que conocer las principales diferencias a la hora de programar Javascript para los navegadores principales, los work-arounds, hacks, etc.

ImpressiveWebs: 7 JavaScript Differences Between Firefox & IE