<?xml version="1.0" encoding="UTF-8"?> <rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
><channel><title>Joseba Umbelina&#187; css, todo sobre css</title> <atom:link href="http://www.josebaumbelina.com/tag/css/feed/" rel="self" type="application/rss+xml" /><link>http://www.josebaumbelina.com</link> <description>SEO y desarrollo web</description> <lastBuildDate>Fri, 11 Jun 2010 20:17:17 +0000</lastBuildDate> <generator>http://wordpress.org/?v=abc</generator> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <atom:link rel="hub" href="http://pubsubhubbub.appspot.com"/><atom:link rel="hub" href="http://superfeedr.com/hubbub"/> <item><title>Consejos de maquetación de emails para evitar problemas</title><link>http://www.josebaumbelina.com/20091121/consejos-evitar-problemas-maquetacion-emails/</link> <comments>http://www.josebaumbelina.com/20091121/consejos-evitar-problemas-maquetacion-emails/#comments</comments> <pubDate>Sat, 21 Nov 2009 09:07:31 +0000</pubDate> <dc:creator>Joseba Umbelina</dc:creator> <category><![CDATA[Desarrollo web]]></category> <category><![CDATA[css]]></category> <category><![CDATA[html]]></category> <category><![CDATA[maquetacion]]></category><guid isPermaLink="false">http://www.josebaumbelina.com/?p=2372</guid> <description><![CDATA[Desde el momento en el que metemos código HTML en un email, surge la dificultad de conseguir que se vea igual en Hotmail, Gmail, Yahoo, Outlook y demás clientes de correo. Desde NETTUTS han publicado una buena recopilación de consejos a seguir a la hora de maquetar de emails, con intención de minimizar los problemas [...]]]></description> <content:encoded><![CDATA[<p>Desde el momento en el que metemos <strong>código HTML en un email</strong>, surge la dificultad de conseguir que se vea igual en Hotmail, Gmail, Yahoo, Outlook y demás clientes de correo. Desde <a target="_blank" href="http://net.tutsplus.com/tutorials/html-css-techniques/20-email-design-best-practices-and-resources-for-beginners/">NETTUTS</a> han publicado una buena <strong>recopilación de consejos</strong> a seguir a la hora de maquetar de emails, con intención de minimizar los problemas que surgen habitualmente:</p><ul><li><strong>Usa tablas</strong>: olvídate de usar <em>divs</em> porque dan más quebraderos de cabeza que otra cosa.</li><p></p><li><strong>Usa estilos <em>inline</em></strong>: imprescindible hacerlo así porque la mayoría de clientes de correo eliminan los estilo por clases.</li><p></p><li><strong>Usa el atributo ALT en todas las imágenes</strong>: es muy habitual que el cliente de correo por defecto no enseñe las imágenes y entonces es recomendable enseñar el texto del ALT.</li><p></p><li><strong>No definas <em>width</em> y <em>height</em> para las imágenes</strong>: si se definen tamaños para las imágenes pero luego estas no se muestran, el resultado puede no ser bueno.</li><p></p><li><strong>Que el email esté dentro de una tabla con <em>width</em> del 100%</strong>: los clientes de correo solo tienen en cuenta el código dentro de la etiqueta <em>body</em> y no el código de la etiqueta <em>body</em> en sí misma. A tener en cuenta si por ejemplo se requiere un color de fondo.</li><p></p><li><strong>Ancho máximo de 600px</strong>: debido a que hay mucha gente que no abre el email y se queda con la <em>preview</em>.</li><p></p><h4><img style="margin-left:120px;border: 1px solid #CCCCCC;" src="http://www.josebaumbelina.com/images/screenshot/maquetar-email-tablas.png" alt="Breadcrumbs Google" width="358" height="210" /><span class="pie_foto">Uso recomendado de tablas en los emails</span></h4><p></p><li><strong>Da estilo a los enlaces</strong>: para machacar el estilo que tenga definido el cliente por defecto para todos los enlaces.</li><p></p><li><strong>Intenta no meter tablas dentro de otras tablas</strong>: para evitar problemas, mejor una tabla detrás de otra que una dentro de la otra.</li><p></p><li><strong>No uses imágenes de fondo</strong>: el texto encima de imágenes de fondo se ven mal en varios clientes.</li><p></p><li><strong>Los bordes no funcionan</strong>: como alternativa, se puede usar columnas de 1px.</li><p></p><li><strong>Bug con las imágenes en Hotmail</strong>: el cliente de Microsoft añade un extraño padding a todas, que se soluciona con un <em>display:block</em>.</li><p></p><li><strong>Codifica todos los caracteres</strong>: usar HTML <em>entities</em> en lugar de los caracteres especiales, asegura que el texto se verá bien en todos los clientes.</li><p></p><li><strong>No incluyas Javascript</strong>: si lo haces, lo más problable es que el email no pase el filtro de peligrosidad del cliente de correo.</li><p></p><li><strong>Ofrece al usuario una salida</strong>: un enlace para darse de baja del envío resulta imprencindible, hoy en día creo que por ley en España.</li><p></p><li><strong>Ofrece al usuario una alternativa</strong>: ofrecer un link hacia una visualización vía web del email resulta recomendable.</li><p></p><li><strong>Usa un GIF transparente</strong>: algunos navegadores no asimilan bien columnas sin contenido, por lo que si necesitas alguna, puedes usar una imagen transparente del tamaño que haga falta.</li><p></ul><p>Antes de hacer envío hay que testearlo bien, por lo que resulta imprescindible tener <strong>cuentas en los principales servicios de correo</strong> como Hotmail, Yahoo y Gmail, así como varios navegadores disponibles, las versiones 6, 7 y 8 de Internet Explorer, Firefox, Safari y Google Chrome al menos.</p><p>Fuente: <a target="_blank" href="http://net.tutsplus.com/tutorials/html-css-techniques/20-email-design-best-practices-and-resources-for-beginners/">20 Email Design Best Practices and Resources for Beginners</a></p>Compártelo:<a rel="nofollow"  target="_blank" href="http://twitter.com/home?status=Consejos%20de%20maquetaci%C3%B3n%20de%20emails%20para%20evitar%20problemas%20-%20http%3A%2F%2Fwww.josebaumbelina.com%2F20091121%2Fconsejos-evitar-problemas-maquetacion-emails%2F" title="Twitter"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/twitter.png" title="Twitter" alt="Twitter" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.josebaumbelina.com%2F20091121%2Fconsejos-evitar-problemas-maquetacion-emails%2F&amp;t=Consejos%20de%20maquetaci%C3%B3n%20de%20emails%20para%20evitar%20problemas" title="Facebook"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="mailto:?subject=Consejos%20de%20maquetaci%C3%B3n%20de%20emails%20para%20evitar%20problemas&amp;body=http%3A%2F%2Fwww.josebaumbelina.com%2F20091121%2Fconsejos-evitar-problemas-maquetacion-emails%2F" title="email"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="http://barrapunto.com/submit.pl?subj=Consejos%20de%20maquetaci%C3%B3n%20de%20emails%20para%20evitar%20problemas&amp;story=http%3A%2F%2Fwww.josebaumbelina.com%2F20091121%2Fconsejos-evitar-problemas-maquetacion-emails%2F" title="BarraPunto"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/barrapunto.png" title="BarraPunto" alt="BarraPunto" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="http://bitacoras.com/anotaciones/http%3A%2F%2Fwww.josebaumbelina.com%2F20091121%2Fconsejos-evitar-problemas-maquetacion-emails%2F" title="Bitacoras.com"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/bitacoras.png" title="Bitacoras.com" alt="Bitacoras.com" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="http://delicious.com/post?url=http%3A%2F%2Fwww.josebaumbelina.com%2F20091121%2Fconsejos-evitar-problemas-maquetacion-emails%2F&amp;title=Consejos%20de%20maquetaci%C3%B3n%20de%20emails%20para%20evitar%20problemas&amp;notes=Desde%20el%20momento%20en%20el%20que%20metemos%20c%C3%B3digo%20HTML%20en%20un%20email%2C%20surge%20la%20dificultad%20de%20conseguir%20que%20se%20vea%20igual%20en%20Hotmail%2C%20Gmail%2C%20Yahoo%2C%20Outlook%20y%20dem%C3%A1s%20clientes%20de%20correo.%20Desde%20NETTUTS%20han%20publicado%20una%20buena%20recopilaci%C3%B3n%20de%20consejos%20a%20seguir%20a%20l" title="del.icio.us"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.josebaumbelina.com%2F20091121%2Fconsejos-evitar-problemas-maquetacion-emails%2F&amp;title=Consejos%20de%20maquetaci%C3%B3n%20de%20emails%20para%20evitar%20problemas&amp;bodytext=Desde%20el%20momento%20en%20el%20que%20metemos%20c%C3%B3digo%20HTML%20en%20un%20email%2C%20surge%20la%20dificultad%20de%20conseguir%20que%20se%20vea%20igual%20en%20Hotmail%2C%20Gmail%2C%20Yahoo%2C%20Outlook%20y%20dem%C3%A1s%20clientes%20de%20correo.%20Desde%20NETTUTS%20han%20publicado%20una%20buena%20recopilaci%C3%B3n%20de%20consejos%20a%20seguir%20a%20l" title="Digg"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="http://meneame.net/submit.php?url=http%3A%2F%2Fwww.josebaumbelina.com%2F20091121%2Fconsejos-evitar-problemas-maquetacion-emails%2F" title="Meneame"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/meneame.png" title="Meneame" alt="Meneame" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="http://www.wikio.com/vote?url=http%3A%2F%2Fwww.josebaumbelina.com%2F20091121%2Fconsejos-evitar-problemas-maquetacion-emails%2F" title="Wikio"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/wikio.png" title="Wikio" alt="Wikio" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="http://reporter.nl.msn.com/?fn=contribute&amp;Title=Consejos%20de%20maquetaci%C3%B3n%20de%20emails%20para%20evitar%20problemas&amp;URL=http%3A%2F%2Fwww.josebaumbelina.com%2F20091121%2Fconsejos-evitar-problemas-maquetacion-emails%2F&amp;cat_id=6&amp;tag_id=31&amp;Remark=Desde%20el%20momento%20en%20el%20que%20metemos%20c%C3%B3digo%20HTML%20en%20un%20email%2C%20surge%20la%20dificultad%20de%20conseguir%20que%20se%20vea%20igual%20en%20Hotmail%2C%20Gmail%2C%20Yahoo%2C%20Outlook%20y%20dem%C3%A1s%20clientes%20de%20correo.%20Desde%20NETTUTS%20han%20publicado%20una%20buena%20recopilaci%C3%B3n%20de%20consejos%20a%20seguir%20a%20l" title="MSN Reporter"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/msnreporter.png" title="MSN Reporter" alt="MSN Reporter" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="http://www.josebaumbelina.com/feed/" title="RSS"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/rss.png" title="RSS" alt="RSS" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="http://technorati.com/faves?add=http%3A%2F%2Fwww.josebaumbelina.com%2F20091121%2Fconsejos-evitar-problemas-maquetacion-emails%2F" title="Technorati"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a><br/><br/>]]></content:encoded> <wfw:commentRss>http://www.josebaumbelina.com/20091121/consejos-evitar-problemas-maquetacion-emails/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Tutoriales de desarrollo web en video</title><link>http://www.josebaumbelina.com/20090809/tutoriales-desarrollo-web-video/</link> <comments>http://www.josebaumbelina.com/20090809/tutoriales-desarrollo-web-video/#comments</comments> <pubDate>Sun, 09 Aug 2009 18:37:37 +0000</pubDate> <dc:creator>Joseba Umbelina</dc:creator> <category><![CDATA[Desarrollo web]]></category> <category><![CDATA[css]]></category> <category><![CDATA[jquery]]></category> <category><![CDATA[mysql]]></category> <category><![CDATA[php]]></category><guid isPermaLink="false">http://www.josebaumbelina.com/?p=1501</guid> <description><![CDATA[En Nettuts han hecho una recopilación de 30 video-tutoriales para desarrolladores web, algunos para principiantes y otros más avanzados. Estos son algunos de los que me han parecido interesantes:
Performance Tuning Best Practices for MySQL: charla en Google sobre optimizar el rendimiento de MySQL, de la mano de Jay Pipes, empleado de MySQL.
Using CSS3: revisión de [...]]]></description> <content:encoded><![CDATA[<p>En <a target="_blank" href="http://net.tutsplus.com/articles/web-roundups/30-more-helpful-video-tutorials-for-web-developers/">Nettuts</a> han hecho una recopilación de <strong>30 video-tutoriales para desarrolladores web</strong>, algunos para principiantes y otros más avanzados. Estos son algunos de los que me han parecido interesantes:</p><p><a target="_blank" href="http://www.youtube.com/watch?v=u70mkgDnDdU">Performance Tuning Best Practices for MySQL</a>: charla en Google sobre optimizar el rendimiento de <strong>MySQL</strong>, de la mano de Jay Pipes, empleado de MySQL.</p><p><a target="_blank" href="http://css-tricks.com/video-screencasts/57-using-css3/">Using CSS3</a>: revisión de las características de la nueva versión de <strong>CSS</strong>, ya soportada por los últimos navegadores.</p><p><a target="_blank" href="http://www.youtube.com/watch?v=COEhiTT1KLk">Google Android App Training</a>: para empezar a desarrollar aplicaciones para <strong>Google Android</strong>.</p><p><a target="_blank" href="http://www.killerphp.com/videos/oop_why_learn_oop/why_learn_oop.html">Why Learn Object-Oriented PHP?</a>: las ventajas de la programación orientada a objetos sobre <strong>PHP</strong>.</p><p><a target="_blank" href="http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/">jQuery For Absolute Beginners Video Series</a>: iniciación a <strong>JQuery</strong>, una de las más utilizadas librerías Javascript.</p><p>También ofrecen <strong>tutoriales</strong> sobre: escribe tu primer script en PHP, como instalar <strong>Wordpress </strong>en entorno local, crear servicios web con NetBeans, como crear un plugin para Wordpress, <strong>Authlogic</strong>, introduccíon al desarrollo web visual, Rails con Jquery, empezando con Dreamweaver CS3, programar aplicaciones de alto rendimiento para <strong>Adobe AIR</strong>, introducción a la programación de bases de datos con <strong>Python</strong>, funcionalidad y estilos avanzados para formularios, cómo usar Firebug para CSS, programación básica del Iphone, introducción a <strong>CodeIgniter</strong>, debugging de aplicaciones AJAX con Firebug, <strong>Komodo </strong>para desarrollar aplicaciones Rails, empezando con el CSS, aprende <strong>Django </strong>para crear una Wiki en 20 minutos, lo esencial de DOM y Javascript, usar Scaffolding y Bake en <strong>CakePHP</strong>, accesibilidad, desarrollar extensiones de Firefox, Facebook connect y encadenar <em>strings </em>con <strong>Yahoo Pipes</strong>.</p><p> Fuente: <a target="_blank" href="http://net.tutsplus.com/articles/web-roundups/30-more-helpful-video-tutorials-for-web-developers/">30 More Helpful Video Tutorials For Web Developers</a></p>Compártelo:<a rel="nofollow"  target="_blank" href="http://twitter.com/home?status=Tutoriales%20de%20desarrollo%20web%20en%20video%20-%20http%3A%2F%2Fwww.josebaumbelina.com%2F20090809%2Ftutoriales-desarrollo-web-video%2F" title="Twitter"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/twitter.png" title="Twitter" alt="Twitter" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.josebaumbelina.com%2F20090809%2Ftutoriales-desarrollo-web-video%2F&amp;t=Tutoriales%20de%20desarrollo%20web%20en%20video" title="Facebook"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="mailto:?subject=Tutoriales%20de%20desarrollo%20web%20en%20video&amp;body=http%3A%2F%2Fwww.josebaumbelina.com%2F20090809%2Ftutoriales-desarrollo-web-video%2F" title="email"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="http://barrapunto.com/submit.pl?subj=Tutoriales%20de%20desarrollo%20web%20en%20video&amp;story=http%3A%2F%2Fwww.josebaumbelina.com%2F20090809%2Ftutoriales-desarrollo-web-video%2F" title="BarraPunto"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/barrapunto.png" title="BarraPunto" alt="BarraPunto" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="http://bitacoras.com/anotaciones/http%3A%2F%2Fwww.josebaumbelina.com%2F20090809%2Ftutoriales-desarrollo-web-video%2F" title="Bitacoras.com"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/bitacoras.png" title="Bitacoras.com" alt="Bitacoras.com" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="http://delicious.com/post?url=http%3A%2F%2Fwww.josebaumbelina.com%2F20090809%2Ftutoriales-desarrollo-web-video%2F&amp;title=Tutoriales%20de%20desarrollo%20web%20en%20video&amp;notes=En%20Nettuts%20han%20hecho%20una%20recopilaci%C3%B3n%20de%2030%20video-tutoriales%20para%20desarrolladores%20web%2C%20algunos%20para%20principiantes%20y%20otros%20m%C3%A1s%20avanzados.%20Estos%20son%20algunos%20de%20los%20que%20me%20han%20parecido%20interesantes%3A%0D%0A%0D%0APerformance%20Tuning%20Best%20Practices%20for%20MySQL%3A%20char" title="del.icio.us"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.josebaumbelina.com%2F20090809%2Ftutoriales-desarrollo-web-video%2F&amp;title=Tutoriales%20de%20desarrollo%20web%20en%20video&amp;bodytext=En%20Nettuts%20han%20hecho%20una%20recopilaci%C3%B3n%20de%2030%20video-tutoriales%20para%20desarrolladores%20web%2C%20algunos%20para%20principiantes%20y%20otros%20m%C3%A1s%20avanzados.%20Estos%20son%20algunos%20de%20los%20que%20me%20han%20parecido%20interesantes%3A%0D%0A%0D%0APerformance%20Tuning%20Best%20Practices%20for%20MySQL%3A%20char" title="Digg"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="http://meneame.net/submit.php?url=http%3A%2F%2Fwww.josebaumbelina.com%2F20090809%2Ftutoriales-desarrollo-web-video%2F" title="Meneame"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/meneame.png" title="Meneame" alt="Meneame" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="http://www.wikio.com/vote?url=http%3A%2F%2Fwww.josebaumbelina.com%2F20090809%2Ftutoriales-desarrollo-web-video%2F" title="Wikio"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/wikio.png" title="Wikio" alt="Wikio" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="http://reporter.nl.msn.com/?fn=contribute&amp;Title=Tutoriales%20de%20desarrollo%20web%20en%20video&amp;URL=http%3A%2F%2Fwww.josebaumbelina.com%2F20090809%2Ftutoriales-desarrollo-web-video%2F&amp;cat_id=6&amp;tag_id=31&amp;Remark=En%20Nettuts%20han%20hecho%20una%20recopilaci%C3%B3n%20de%2030%20video-tutoriales%20para%20desarrolladores%20web%2C%20algunos%20para%20principiantes%20y%20otros%20m%C3%A1s%20avanzados.%20Estos%20son%20algunos%20de%20los%20que%20me%20han%20parecido%20interesantes%3A%0D%0A%0D%0APerformance%20Tuning%20Best%20Practices%20for%20MySQL%3A%20char" title="MSN Reporter"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/msnreporter.png" title="MSN Reporter" alt="MSN Reporter" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="http://www.josebaumbelina.com/feed/" title="RSS"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/rss.png" title="RSS" alt="RSS" class="sociable-hovers" /></a> <a rel="nofollow"  target="_blank" href="http://technorati.com/faves?add=http%3A%2F%2Fwww.josebaumbelina.com%2F20090809%2Ftutoriales-desarrollo-web-video%2F" title="Technorati"><img src="http://www.josebaumbelina.com/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a><br/><br/>]]></content:encoded> <wfw:commentRss>http://www.josebaumbelina.com/20090809/tutoriales-desarrollo-web-video/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> </channel> </rss>