<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>Blog and Web</title>
	
	<link>http://blogandweb.com</link>
	<description>Recursos para Blog y Web</description>
	<lastBuildDate>Thu, 22 Mar 2012 13:15:33 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/zonachrome" /><feedburner:info uri="zonachrome" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><item>
		<title>Nuevas opciones SEO en Blogger</title>
		<link>http://feedproxy.google.com/~r/zonachrome/~3/PbIptDc_pA4/</link>
		<comments>http://blogandweb.com/blogger/opciones-seo-blogger/#comments</comments>
		<pubDate>Thu, 22 Mar 2012 13:06:14 +0000</pubDate>
		<dc:creator>Francisco</dc:creator>
				<category><![CDATA[Blogger]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[Buscadores]]></category>
		<category><![CDATA[Optimización]]></category>

		<guid isPermaLink="false">http://blogandweb.com/?p=3091</guid>
		<description><![CDATA[Blogger ha lanzado una nueva sección de opciones que pueden ayudar a mejorar el SEO de tu blog, son cuestiones tal vez muy básicas, pero importantes. Esta nueva sección se llama Preferencias de búsqueda y se encuentra en Escritorio → Configuración → Preferencias de búsqueda. Veamos una a una su funcionamiento: Etiquetas meta. Las famosas [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Blogger</strong> ha <a href="http://buzz.blogger.com/2012/03/customize-your-search-preferences.html">lanzado una nueva sección de opciones</a> que pueden ayudar a mejorar el <a href="http://blogandweb.com/seo/">SEO</a> de tu blog, son cuestiones tal vez muy básicas, pero importantes. Esta nueva sección se llama <strong>Preferencias de búsqueda</strong> y se encuentra en <em>Escritorio → Configuración → Preferencias de búsqueda</em>.</p>
<p>Veamos una a una su funcionamiento:</p>
<h4>Etiquetas meta.</h4>
<p>Las famosas <a href="http://blogandweb.com/blogger/metatags-en-blogger/">metatags</a>, o etiquetas meta como fueron traducidas, permiten dar información de cada página al buscador, por ahora Blogger permite agregar una descripción general del blog.</p>
<p><img class="aligncenter size-full wp-image-3092" title="blogger-seo-meta-descripcion" src="http://bw.imagenes.info/wp-content/uploads/2012/03/blogger-seo-meta-descripcion.png" alt="" width="600" height="217" /></p>
<h4>Errores y redireccionamientos.</h4>
<p><strong>Mensaje de página no encontrada personalizado.</strong></p>
<p><img class="aligncenter size-full wp-image-3094" title="blogger-seo-error-404-no-encontrado" src="http://bw.imagenes.info/wp-content/uploads/2012/03/blogger-seo-error-404-no-encontrado.png" alt="" width="693" height="175" /></p>
<p>Permite definir un mensaje para el famoso Error 404, ahora podemos hacerlo más original y más útil.</p>
<p><strong>Redireccionamiento personalizado.</strong><br />
<span id="more-3091"></span><br />
<img class="aligncenter size-full wp-image-3093" title="blogger-seo-redireccion" src="http://bw.imagenes.info/wp-content/uploads/2012/03/blogger-seo-redireccion.png" alt="" width="600" height="205" /></p>
<p>Como su nombre indica, esta opción permite hacer redireccionamiento de URLs determinadas, sea por que la página no exista, se haya linkeado una página de forma errónea o simplemente para redireccionar a un post más reciente esta herramienta será muy útil.</p>
<h4>Rastreadores e indexació.</h4>
<p><strong>Archivo robots.txt personalizado.</strong></p>
<p>El archivo <a href="http://blogandweb.com/blogger/blogger-agrega-el-sitemap-en-robotstxt/">robots.txt</a> es una herramienta muy poderosa para indicar que contenido debería ser rastreado y cual no. Las instrucciones se escriben directamente y Blogger generará el archivo automáticamente.</p>
<p><img class="aligncenter size-full wp-image-3095" title="blogger-seo-robots-txt" src="http://bw.imagenes.info/wp-content/uploads/2012/03/blogger-seo-robots-txt.png" alt="" width="600" height="180" /></p>
<p><strong>Etiquetas de encabezado de robots personalizadas.</strong></p>
<p>Esta opción tiene una función similar a la característica anterior pero funciona a través de los headers de cada consulta y permite indicar, entre otras cosas, la indexación, el rastreo y la utilización del contenido por parte de los bots, particularmente para la secciones: Home, archivo y páginas de búsqueda y las publicaciones individuales: entradas y páginas.</p>
<p><img class="aligncenter size-full wp-image-3096" title="blogger-seo-encabezados" src="http://bw.imagenes.info/wp-content/uploads/2012/03/blogger-seo-encabezados.png" alt="" width="600" height="400" /></p>
<h3>Conclusión.</h3>
<p><a href="http://blogandweb.com/blogger/">Blogger</a> era/es una de las plataformas menos flexibles para hacer SEO, las herramientas son pocas y no fáciles de implementar, así que esta nueva sección ayuda a mejorar este aspecto, aunque aun aun tienen muchas tareas por hacer.</p>
<p>Para mi es curioso como por una lado <a href="http://blogandweb.com/productos-google/">Google</a> da una serie de recomendaciones para el correcto rastreo de contenido y por otro, no da las suficientes herramientas para su implementación en su servicio más popular de generación de contenidos.</p>
<img src="http://feeds.feedburner.com/~r/zonachrome/~4/PbIptDc_pA4" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blogandweb.com/blogger/opciones-seo-blogger/feed/</wfw:commentRss>
		<slash:comments>21</slash:comments>
		<feedburner:origLink>http://blogandweb.com/blogger/opciones-seo-blogger/</feedburner:origLink></item>
		<item>
		<title>Biit, música gratis en tu Android o iPhone</title>
		<link>http://feedproxy.google.com/~r/zonachrome/~3/sc9_ju5knKM/</link>
		<comments>http://blogandweb.com/geek/biit-musica-telefono/#comments</comments>
		<pubDate>Wed, 21 Mar 2012 13:16:05 +0000</pubDate>
		<dc:creator>Francisco</dc:creator>
				<category><![CDATA[Geek]]></category>
		<category><![CDATA[Android]]></category>
		<category><![CDATA[iphone]]></category>

		<guid isPermaLink="false">http://blogandweb.com/?p=3088</guid>
		<description><![CDATA[Biit es una app de origen español que te permite escuchar música sin costo desde tu teléfono móvil, muy al estilo de Grooveshark o Spotify, pero con un sistema muy peculiar. Peculiar porque realmente no puedes escoger que canción escuchar, sino que a partir de bandas o artistas vas definiendo tus gustos musicales, de modo [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Biit</strong> es una app de origen español que te permite escuchar <strong>música</strong> sin costo desde tu <strong>teléfono móvil</strong>, muy al estilo de <em>Grooveshark</em> o <em>Spotify</em>, pero con un sistema muy peculiar. Peculiar porque realmente no puedes escoger que canción escuchar, sino que a partir de bandas o artistas vas definiendo tus gustos musicales, de modo que <em>Biit</em> genera algo así como una radio a tu medida.</p>
<p><iframe src="http://www.youtube.com/embed/VK4uiTpBcYk?rel=0" frameborder="0" width="600" height="335"></iframe><br />
<span id="more-3088"></span><a href="http://radiohead.mx"><img class="alignright size-full wp-image-3089" title="biit-musica-celular" src="http://bw.imagenes.info/wp-content/uploads/2012/03/biit-musica-celular.png" alt="" width="240" height="400" /></a></p>
<p>Además puedes ayudar al algoritmo a refinar sus propuestas indicando que canción te gusta y que no quieres escuchar con un resultado bastante aceptable. Con este sistema hasta puedes descubrir nueva música o recordar alguna canción que hace mucho no escuchabas.</p>
<p>Un agregado nada malo es la posibilidad de tener disponibles offline tres &#8220;canales&#8221; de música y sincronizarlos cada vez que te conectes a Internet. <em></em></p>
<p>¿Las contras? Pues sus limitaciones, por ejemplo, un número limitado de adelantos de canciones, el número de canales offline. También pautas de publicidad, pero por ahora muy espaciadas y no molestas. Seguramente veremos cuentas premium para eliminar estas restricciones.</p>
<p>Particularmente me parece una propuesta novedosa, legal y gratuita para escuchar música, habrá que ver como evoluciona. Puedes descargarla desde el repositorio oficial para tu OS, disponible para<em> Android, iPhone y BlackBerry</em>.</p>
<p>Sitio web: <a href="http://www.biit.fm/">biit.fm</a></p>
<img src="http://feeds.feedburner.com/~r/zonachrome/~4/sc9_ju5knKM" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blogandweb.com/geek/biit-musica-telefono/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		<feedburner:origLink>http://blogandweb.com/geek/biit-musica-telefono/</feedburner:origLink></item>
		<item>
		<title>Crear una página Google+ para tu blog</title>
		<link>http://feedproxy.google.com/~r/zonachrome/~3/25p9hsOQl3M/</link>
		<comments>http://blogandweb.com/productos-google/crear-una-pagina-google/#comments</comments>
		<pubDate>Mon, 07 Nov 2011 22:49:35 +0000</pubDate>
		<dc:creator>Francisco</dc:creator>
				<category><![CDATA[Productos Google]]></category>
		<category><![CDATA[suscripción]]></category>

		<guid isPermaLink="false">http://blogandweb.com/?p=3083</guid>
		<description><![CDATA[Google+ acaba de liberar la creación de páginas para sitios web, marcas, negocios, etc. y sin duda es un buen canal para promocionar tu blog o sitio web y establecerlo como un método más de suscripción, tal como hicimos antes con las páginas de Facebook y Twitter. Cómo crear una página en Google+ El proceso [...]]]></description>
			<content:encoded><![CDATA[<p><strong><img class="alignright size-full wp-image-3086" title="google-plus-paginas" src="http://bw.imagenes.info/wp-content/uploads/2011/11/google-plus-paginas.png" alt="" width="129" height="104" />Google+</strong> acaba de liberar la creación de páginas para sitios web, marcas, negocios, etc. y sin duda es un buen canal para promocionar tu blog o sitio web y establecerlo como un método más de suscripción, tal como hicimos antes con las<a title="Hacer una página en Facebook para tu blog" href="http://blogandweb.com/wordpress/convierte-tu-wordpress-en-una-app-para-iphone/"> páginas de Facebook</a> y <a href="http://blogandweb.com/blogs/twitter-como-herramienta-de-suscripcion-para-blogs/">Twitter</a>.</p>
<h3>Cómo crear una página en Google+</h3>
<p>El proceso es bastante sencillo:<span id="more-3083"></span></p>
<p><strong>1.</strong> Todo empieza entrando el <a href="https://plus.google.com/pages/create">formulario de creación de páginas</a> y seleccionando el rubro de la misma. Al no existir una opción directa para sitios web, &#8220;Otro&#8221; será el más adecuado. Aunque claro, de acuerdo al contenido de tu sitio web, podría encajar perfectamente en algunos de los existentes.</p>
<p><strong>2.</strong> Agrega el nombre de tu blog o website, la URL y lee las condiciones de uso para aceptarlas.</p>
<p><img class="aligncenter size-full wp-image-3084" title="crear-pagina-google-mas" src="http://bw.imagenes.info/wp-content/uploads/2011/11/crear-pagina-google-mas.png" alt="" width="600" height="328" /></p>
<p><strong>3.</strong> Agrega un slogan o descripción de tu sitio web, así como la foto para el perfil de la página.</p>
<p><img class="aligncenter size-full wp-image-3085" title="crear-pagina-google-mas-2" src="http://bw.imagenes.info/wp-content/uploads/2011/11/crear-pagina-google-mas-2.jpg" alt="" width="566" height="254" /></p>
<p>Google+ Además te ofrece la opción de editar la foto del perfil inmediatamente después de subirla con las herramientas de Picnik.</p>
<p><strong>4.</strong> Inmediatamente tienes las opción de compartir con tus amigos, aunque tal vez no sea el mejor momento, pues tu página esta vacío. Te recomiendo esperar a importar tu contenido antes de compartirla.</p>
<p><strong>5.</strong> Listo. Tu página Google+ esta terminada. Así que es un buen momento de dejar el primer mensaje y que mejor, que uno de bienvenida.</p>
<p>Por supuesto, estas invitado a suscribirte por <a href="http://twitter.com/blogandweb">Twitter</a>, <a href="http://facebook.com/blogandweb">Facebook</a>, <a href="https://plus.google.com/b/108099336045333213812/">Google+</a>, <a href="http://feeds.feedburner.com/blogandweb">RSS</a> o <a href="http://feedburner.google.com/fb/a/mailverify?uri=blogandweb">correo electrónico</a> a nuestras actualizaciones.</p>
<img src="http://feeds.feedburner.com/~r/zonachrome/~4/25p9hsOQl3M" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blogandweb.com/productos-google/crear-una-pagina-google/feed/</wfw:commentRss>
		<slash:comments>27</slash:comments>
		<feedburner:origLink>http://blogandweb.com/productos-google/crear-una-pagina-google/</feedburner:origLink></item>
		<item>
		<title>Convierte tu WordPress en una App para iPhone</title>
		<link>http://feedproxy.google.com/~r/zonachrome/~3/o1uentEG6hQ/</link>
		<comments>http://blogandweb.com/wordpress/convierte-tu-wordpress-en-una-app-para-iphone/#comments</comments>
		<pubDate>Tue, 01 Nov 2011 19:48:41 +0000</pubDate>
		<dc:creator>Francisco</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[iphone]]></category>

		<guid isPermaLink="false">http://blogandweb.com/?p=3080</guid>
		<description><![CDATA[Revisión patrocinada. WiziApp es un servicio que, a partir de un plugin, permite convertir tu blog en una WordPress iPhone App. De este modo, el contenido de tu blog en WordPress estará disponible de manera más organizada y accesible para los usuarios del teléfono de Apple. WordPress a iPhone Tener una vista previa de tu [...]]]></description>
			<content:encoded><![CDATA[<p><em>Revisión patrocinada.</em></p>
<p><a href="http://wiziapp.com/tour"><img class="alignright size-full wp-image-3082" title="wiziapp-wordpress-iphone" src="http://bw.imagenes.info/wp-content/uploads/2011/11/wiziapp-wordpress-iphone.jpg" alt="" width="200" height="214" />WiziApp</a> es un servicio que, a partir de un plugin, permite convertir tu blog en una <a href="http://www.wiziapp.com/"><em>WordPress iPhone</em></a> App. De este modo, el contenido de tu blog en <strong>WordPress</strong> estará disponible de manera más organizada y accesible para los usuarios del teléfono de Apple.</p>
<h4>WordPress a iPhone</h4>
<p>Tener una vista previa de tu App no tiene costo, sin embargo, para obtenerla y publicarla necesitar contratar uno de sus planes. El proceso de creación sencillo y rápido:</p>
<p><strong>1.</strong> Instala el <a href="http://wordpress.org/extend/plugins/wiziapp-create-your-own-native-iphone-app/">plugin de WiziApp</a>. Puede ser directamente desde tu sección de plugins o de forma manual con FTP.</p>
<p><strong>2.</strong> Ahora en tu panel de administración, puedes ir a la nueva sección llamada WiziApp para empezar la configuración y ver la previa de tu contenido.</p>
<p>En esta sección le pones nombre a tu App, personalizas el menú de pestañas, el fondo, la información a mostrar, el sistema de notificación y la monetización (vía Admob). Todo, viendo los cambios directamente en una previa del App.<br />
<span id="more-3080"></span><br />
<img class="aligncenter size-full wp-image-3081" title="wizi-app-wordpress-iphone-1" src="http://bw.imagenes.info/wp-content/uploads/2011/11/wizi-app-wordpress-iphone-1.jpg" alt="" width="600" height="533" /><strong>3.</strong> El siguiente paso es el pago por la creación de la App.</p>
<p>Hay tres planes distintos, en todos ellos das un pago inicial y posteriormente un pago por mes. Por ejemplo, el plan básico Blog Personal, tiene un costo de apertura de $199 USD y posteriormente un pago mensual de $19.90 USD.</p>
<p>El pago te da derecho a soporte y actualizaciones para tu App (derivadas de WordPress o el iOS), notificaciones y estadísticas.</p>
<p><strong>4.</strong> El último paso es publicar tu app en la App Store y hacerla disponible al mundo.</p>
<p>Solo debes rellenar la información de tu app, clasificar su contenido y subir el icono respectivo para identificarla.</p>
<h4>Opinión</h4>
<p>Para ofrecer contenido en dispositivos móviles hay principalmente dos formatos, uno vía App y otro vía navegador con versión móvil de un sitio web. Ambos ofrecen ventajas y desventajas y la falta de estándares hace difícil y costoso lograr compatibilidad a los principales sistemas móviles, tarea que esperemos cumpla HTML5.</p>
<img src="http://feeds.feedburner.com/~r/zonachrome/~4/o1uentEG6hQ" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blogandweb.com/wordpress/convierte-tu-wordpress-en-una-app-para-iphone/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		<feedburner:origLink>http://blogandweb.com/wordpress/convierte-tu-wordpress-en-una-app-para-iphone/</feedburner:origLink></item>
		<item>
		<title>Diario pan, diario internet</title>
		<link>http://feedproxy.google.com/~r/zonachrome/~3/d3euCIKJXKc/</link>
		<comments>http://blogandweb.com/geek/diario-pan-diario-internet/#comments</comments>
		<pubDate>Wed, 28 Sep 2011 08:50:45 +0000</pubDate>
		<dc:creator>Francisco</dc:creator>
				<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Geek]]></category>
		<category><![CDATA[Twitter]]></category>
		<category><![CDATA[chrome]]></category>
		<category><![CDATA[Facebook]]></category>
		<category><![CDATA[Fotografía]]></category>

		<guid isPermaLink="false">http://blogandweb.com/?p=3064</guid>
		<description><![CDATA[&#8220;Daily bread, daily net&#8221; es trabajo del fotógrafo francés Gregoire Vieille presentado en la semana del diseño de Milán este año. ¿Son ya tan cotidianos y necesarios estos servicios? En mi caso la respuesta es: totalmente. Por otro lado, es interesante pensar el porque de cada producto para cada servicio. Los invito a decirlo en los [...]]]></description>
			<content:encoded><![CDATA[<p>&#8220;<em>Daily bread, daily net</em>&#8221; es trabajo del fotógrafo francés <a href="http://www.gregoirevieille.com/">Gregoire Vieille</a> presentado en la semana del diseño de Milán este año.</p>
<p><img class="aligncenter size-full wp-image-3065" title="Cerveza Firefox" src="http://bw.imagenes.info/wp-content/uploads/2011/09/firefox-beer.jpg" alt="" width="480" height="336" /><br />
<span id="more-3064"></span><br />
<img class="aligncenter size-full wp-image-3066" title="Cereal Twitter" src="http://bw.imagenes.info/wp-content/uploads/2011/09/twitter-cereal.jpg" alt="" width="480" height="673" /></p>
<p><img class="aligncenter size-full wp-image-3067" title="Pastillas facebook" src="http://bw.imagenes.info/wp-content/uploads/2011/09/facebook-pills.jpg" alt="" width="480" height="673" /></p>
<p><img class="aligncenter size-full wp-image-3068" title="Cajita feliz Chrome" src="http://bw.imagenes.info/wp-content/uploads/2011/09/chrome-fast-food.jpg" alt="" width="480" height="336" /></p>
<p>¿Son ya tan cotidianos y necesarios estos servicios? En mi caso la respuesta es: totalmente. Por otro lado, es interesante pensar el porque de cada producto para cada servicio. Los invito a decirlo en los comentarios.</p>
<p><small><strong>Fuente:</strong> <a href="http://www.featureshoot.com/2011/09/web-browsers-search-engines-social-networks-yummy-photographs-by-gregoire-vieille/">featureshoot.com</a></small></p>
<img src="http://feeds.feedburner.com/~r/zonachrome/~4/d3euCIKJXKc" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blogandweb.com/geek/diario-pan-diario-internet/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		<feedburner:origLink>http://blogandweb.com/geek/diario-pan-diario-internet/</feedburner:origLink></item>
		<item>
		<title>Eliminar la LightBox de Blogger</title>
		<link>http://feedproxy.google.com/~r/zonachrome/~3/YW3ZmnYkrxw/</link>
		<comments>http://blogandweb.com/javascript/eliminar-lightbox-blogger/#comments</comments>
		<pubDate>Tue, 20 Sep 2011 07:23:06 +0000</pubDate>
		<dc:creator>Francisco</dc:creator>
				<category><![CDATA[Blogger]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Snippets]]></category>

		<guid isPermaLink="false">http://blogandweb.com/?p=3061</guid>
		<description><![CDATA[Blogger recientemente agregó de manera automática y obligatoria una LightBox en las imágenes de todos sus blogs. Una lightbox es una buena forma de resaltar fotografías y será útil en mucho casos, pero no en todos. Esta nueva característica usa javascript e igualmente con javascript se puede eliminar. Actualización: 20/10/2011. Parece que Blogger entendió que [...]]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-3062" title="blogger-lightbox" src="http://bw.imagenes.info/wp-content/uploads/2011/09/blogger-lightbox.jpg" alt="" width="600" height="303" /></p>
<p><a href="http://buzz.blogger.com/2011/09/your-images-never-looked-so-good.html">Blogger</a> recientemente agregó de manera automática y obligatoria una LightBox en las imágenes de todos sus blogs. Una lightbox es una buena forma de resaltar fotografías y será útil en mucho casos, pero no en todos. Esta nueva característica usa <a href="http://blogandweb.com/javascript/">javascript</a> e igualmente con javascript se puede eliminar.</p>
<p><strong>Actualización: 20/10/2011</strong>. Parece que Blogger entendió que no puede simplemente imponer características y ya ofrece la opción directamente desde el panel para eliminar la lightbox de imágenes. Para ello ve a <em>Escritorio &rarr; Configuración &rarr; Entradas y comentarios &rarr; Showcase images with Lightbox</em> y selecciona &#8220;No&#8221;.</p>
<p><img src="http://bw.imagenes.info/wp-content/uploads/2011/09/blogger-lightbox-desactivar.jpg" alt="" title="blogger-lightbox-desactivar" width="300" height="115" class="aligncenter size-full wp-image-3079" /></p>
<p><strong>Método por javascript, ya no recomendado</strong>:</p>
<p>Basta agregar el siguiente código antes de <code>&lt;/head&gt;</code>:</p>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
//&lt;![CDATA[
function killLightbox() {
 var images = document.getElementsByTagName(&#039;img&#039;);
 for (var i = 0 ; i &lt; images.length ; ++i) {
  images[i].onmousemove=function() {
   var html = this.parentNode.innerHTML;
   this.parentNode.innerHTML = html;
  };
 }
}

if (window.addEventListener) {
 window.addEventListener(&#039;load&#039;,killLightbox,false);
} else {
 window.attachEvent(&#039;onload&#039;,killLightbox);
}
//]]&gt;
&lt;/script&gt;</code></pre>
<p>Fuente: <a href="http://englishjavadrinker.blogspot.com/2011/09/fixing-bloggers-mistakes.html">English java drinker</a> / Vía: <a href="http://vagabundia.blogspot.com/2011/09/eliminar-el-nuevo-lightbox-de-blogger.html">Vagabundia</a>.</p>
<img src="http://feeds.feedburner.com/~r/zonachrome/~4/YW3ZmnYkrxw" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blogandweb.com/javascript/eliminar-lightbox-blogger/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		<feedburner:origLink>http://blogandweb.com/javascript/eliminar-lightbox-blogger/</feedburner:origLink></item>
		<item>
		<title>Modificar plantillas Blogger y WordPress facilmente con Firebug</title>
		<link>http://feedproxy.google.com/~r/zonachrome/~3/Vzy-ibCf7rc/</link>
		<comments>http://blogandweb.com/wordpress/modificar-plantillas-blogger-wordpress-facilmente-firebug/#comments</comments>
		<pubDate>Mon, 05 Sep 2011 21:53:20 +0000</pubDate>
		<dc:creator>Francisco</dc:creator>
				<category><![CDATA[Blogger]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Diseño]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Tutoriales]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Extensiones]]></category>
		<category><![CDATA[Firebug]]></category>

		<guid isPermaLink="false">http://blogandweb.com/?p=3048</guid>
		<description><![CDATA[Modificar una plantilla o theme es uno de los primeros retos de quienes inician un blog. Para hacerlo, nada nos libra de aprender lo básico de HTML y CSS, pero hay herramientas que pueden hacerlo más sencillo como Firebug, la extensión para Firefox y en versión Lite, para Chrome. Una de las herramientas más simples, [...]]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-3056" title="firebug-blogandweb" src="http://bw.imagenes.info/wp-content/uploads/2011/09/firebug-blogandweb.jpg" alt="" width="588" height="155" /></p>
<p>Modificar una plantilla o theme es uno de los primeros retos de quienes inician un blog. Para hacerlo, nada nos libra de aprender lo básico de HTML y CSS, pero hay herramientas que pueden hacerlo más sencillo como <a href="http://getfirebug.com/">Firebug</a>, la <a title="Extensiones Chrome y Firefox para bloggers y desarrolladores web" href="http://blogandweb.com/productos-google/extensiones-chrome-y-firefox-para-bloggers-y-desarrolladores/">extensión para Firefox</a> y en versión Lite, para Chrome.</p>
<p>Una de las herramientas más simples, pero también más útiles de Firebug es <em>Inspeccionar</em>, como su nombre lo indica, permite navegar por cada elemento de un sitio web y conocer como esta configurado y como esta relacionado con otros elementos. Esta es la herramienta que puede ayudar a cualquiera a modificar una plantilla, sea Blogger o WordPress, sin mucha dificultad.</p>
<p>Esta pequeña guía se enfocará básicamente en modificar el CSS para adaptar un diseño a nuestras necesidades. En Blogger el CSS esta dentro de la misma plantilla, entre los códigos <code>&lt;b:skin&gt;</code> y <code>&lt;/b:skin&gt;</code> y en WordPress en el archivo <code>style.css</code> en la carpeta del theme activo.</p>
<h3>Modificar el CSS de un elemento con Firebug.</h3>
<p>Para modificar cualquier característica de un elemento de una plantilla simplemente hay que:</p>
<p><strong>1.</strong> Instala Firebug en tu navegador: <a href="https://addons.mozilla.org/es-ES/firefox/addon/firebug/">Firefox</a> o <a href="https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench?hl=es">Chrome</a>. Personalmente yo recomiendo usar la de Firefox, es más completa y rápida, pero a ambas aplica el contenido de este tutorial.</p>
<p><strong>2.</strong> Dar clic en el botón de Firebug en la barra de herramientas <img class="alignnone size-full wp-image-3050" title="firebug-button" src="http://bw.imagenes.info/wp-content/uploads/2011/09/firebug-button.png" alt="" width="42" height="22" />, luego en el botón de Inspeccionar <img class="alignnone size-full wp-image-3051" title="firebug-inspect" src="http://bw.imagenes.info/wp-content/uploads/2011/09/firebug-inspect.png" alt="" width="16" height="15" /> y ubicar el cursor justo sobre el elemento a modificar, puede ser texto, <a title="La forma más sencilla de modificar una plantilla" href="http://blogandweb.com/wordpress/la-forma-mas-sencilla-de-modificar-una-plantilla/">imagen</a>, video, flash o cualquier elemento, y dar clic en él.</p>
<p><strong>3.</strong> En el cuadro de la derecha de Firebug, estando la pestaña &#8220;Estilo&#8221; activa, se muestran <strong>todos</strong> los estilos que afectan al elemento.</p>
<p>Se muestran tal como los tendríamos en una hoja de estilos CSS, sin embargo, Firebug ordena las propiedades alfabéticamente y las estandariza.</p>
<p>Es fácil reconocer las siguiente información: selectores, propiedades y la ubicación de dicho estilo (línea de código y archivo que lo contiene).</p>
<p><img class="aligncenter size-full wp-image-3052" title="firebug-estilos" src="http://bw.imagenes.info/wp-content/uploads/2011/09/firebug-estilos.png" alt="" width="600" height="194" /></p>
<p>Aquellas propiedades que aparezcan con un tachado, implica que otra reglas CSS las ha sobrescrito y que por lo tanto no están siendo aplicadas.</p>
<p><strong>4. Pruebas en vivo.</strong><br />
<span id="more-3048"></span><br />
Algo muy interesante de Firebug es que puedes modificar cualquier propiedad CSS y ver los resultados directamente aplicados sobre la página. Para ello solo es necesario dar clic sobre la propiedad o valor para cambiarlo, y ver directamente que pasa en la página.</p>
<p><img class="aligncenter size-full wp-image-3053" title="firebug-edit" src="http://bw.imagenes.info/wp-content/uploads/2011/09/firebug-edit.png" alt="" width="352" height="95" /></p>
<p>Para las propiedades que solo pueden tomar valores predeterminados, Firebug permite explorarlos con solo dar clic en el valor y usar las teclas de arriba y abajo del teclado.</p>
<p><img class="aligncenter size-full wp-image-3054" title="firebug-properties" src="http://bw.imagenes.info/wp-content/uploads/2011/09/firebug-properties.gif" alt="" width="214" height="164" /></p>
<p>Y muy similar para los valores numéricos:</p>
<p><img class="aligncenter size-full wp-image-3058" title="firebug-numeric" src="http://bw.imagenes.info/wp-content/uploads/2011/09/firebug-numeric.gif" alt="" width="214" height="164" /></p>
<p>Otra opción muy útil es la de desactivar propiedades para saber como se comporta un elemento sin ellos, basta dar clic en el circulo rojo a la izquierda de cada propiedad.</p>
<p><img class="aligncenter size-full wp-image-3055" title="firebug-cancel" src="http://bw.imagenes.info/wp-content/uploads/2011/09/firebug-cancel.gif" alt="" width="214" height="164" /></p>
<p>Encontrar la imagen de fondo de un elemento también es útil cuando se esta modificando una plantilla, para ello solo hay que colocarse sobre el elemento, dar clic y en el panel de &#8220;Estilo&#8221;, aparecerá el selector que contiene la imagen, normalmente en la propiedad <code>background</code> o <code>background-image</code>.</p>
<p><img class="aligncenter size-full wp-image-3059" title="firebug-backgrounds" src="http://bw.imagenes.info/wp-content/uploads/2011/09/firebug-backgrounds.png" alt="" width="544" height="198" /></p>
<p>Y hay otras varias herramientas que pueden ver directamente en el <a href="http://getfirebug.com/css">manual oficial</a>.</p>
<p><strong>5.</strong> Usando los datos de las pruebas.</p>
<p>Una vez que sabes haz llegado al resultado deseado en las pruebas, es necesario aplicar esos mismo cambios a los estilos en tu plantilla. Firebug <strong>nunca</strong> guarda cambios, esta parte debes hacerla tu manualmente.</p>
<p>En otras palabras, si haz agregado una propiedad en Firebug, debes agregar esa misma propiedad a tu hoja de estilos; si haz hecho una modificación, esta debe hacerse también en los estilos de la plantilla.</p>
<h3>Screencast</h3>
<p>Con esta introducción, pueden ver Firebug en acción en el screencast de introducción.</p>
<p><iframe src="http://cdnakmi.kaltura.org/apis/html5lib/mwEmbed/mwEmbedFrame.php?src%5B%5D=http%3A%2F%2Fgetfirebug.com%2Fvideo%2FIntro2FB.ogv&amp;src%5B%5D=http%3A%2F%2Fgetfirebug.com%2Fvideo%2FIntro2FB.mp4&amp;poster=Intro2FB.jpg&amp;skin=mvpcf&amp;durationHint=409.3089" frameborder="0" width="600" height="339"></iframe></p>
<h3>Conclusión</h3>
<p>Firebug es una herramienta muy intuitiva, así que algunas recomendaciones: Prueben y prueben, se aprende bastante de CSS y de la propia herramienta, pero sin riesgo de afectar nuestro código. Lean la <a href="http://getfirebug.com/wiki/index.php/Main_Page">guía oficial</a>, donde se pueden aprender a sacar más provecho de la extensión. Y por último, aprendan al menos lo básico de <a title="Librosweb, más libros de derarrollo web y versiones pdf" href="http://blogandweb.com/css/librosweb-mas-libros-de-derarrollo-web-y-versiones-pdf/">CSS y HTML</a>, hará cualquier tarea de diseño menos frustrante.</p>
<img src="http://feeds.feedburner.com/~r/zonachrome/~4/Vzy-ibCf7rc" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blogandweb.com/wordpress/modificar-plantillas-blogger-wordpress-facilmente-firebug/feed/</wfw:commentRss>
		<slash:comments>28</slash:comments>
		<feedburner:origLink>http://blogandweb.com/wordpress/modificar-plantillas-blogger-wordpress-facilmente-firebug/</feedburner:origLink></item>
		<item>
		<title>PaperCut, Geniales íconos-ilustraciones de suscripción</title>
		<link>http://feedproxy.google.com/~r/zonachrome/~3/FRdmTrp2B2M/</link>
		<comments>http://blogandweb.com/diseno/iconos/geniales-iconos-ilustraciones-para-suscripcion/#comments</comments>
		<pubDate>Wed, 13 Jul 2011 23:03:19 +0000</pubDate>
		<dc:creator>Francisco</dc:creator>
				<category><![CDATA[Diseño]]></category>
		<category><![CDATA[Iconos]]></category>
		<category><![CDATA[Freebies]]></category>

		<guid isPermaLink="false">http://blogandweb.com/?p=3039</guid>
		<description><![CDATA[Nuevamente de la mano de Ulises Arvizu de Maquiladora de Sueños (que han renovado diseño), traen otro freebie para los lectores de Blog and Web, se trata de cuatro ilustraciones / íconos para servicios de suscripción como Feedburner (RSS), Twitter, Facebook, y Correo electrónico. Están en PNG24 con transparencia en dos tamaños distintos, 100 y [...]]]></description>
			<content:encoded><![CDATA[<p>Nuevamente de la mano de <strong>Ulises Arvizu</strong> de <a href="http://maquiladoradesuenos.com/">Maquiladora de Sueños</a> (que han renovado diseño), traen otro freebie para los lectores de Blog and Web, se trata de cuatro <strong>ilustraciones</strong> / <strong>íconos</strong> para servicios de suscripción como <em>Feedburner</em> (RSS), <em>Twitter</em>, <em>Facebook</em>, y <em>Correo electrónico</em>.</p>
<p><img class="aligncenter" title="BlogAndWeb-MaquiladoraDeSueños" src="http://bw.imagenes.info/wp-content/uploads/2011/07/BlogAndWeb-MaquiladoraDeSueos.jpg" alt="BlogAndWeb-MaquiladoraDeSueños" width="600" height="600" border="0" /></p>
<p>Están en PNG24 con transparencia en dos tamaños distintos, 100 y 250 pixeles.</p>
<h4>Licencia de uso:</h4>
<ul>
<li>Se liberan bajo licencia <a href="http://creativecommons.org/licenses/by/2.5/mx/">Creative Commons Atribución 2.5</a>.</li>
<li>Puedes usarlos tanto en proyectos personales como comerciales (pero venta directa del pack no permitida).</li>
<li>Para distribuirlos, por favor, <strong>enlaza este artículo y no al archivo de descarga</strong> directo o otro post o servidor.</li>
</ul>
<h4>Descargar</h4>
<p><span id="more-3039"></span><br />
<a href="http://blogandweb.com/wp-content/download/PaperCut-Icons.zip">PaperCut Icons</a></p>
<img src="http://feeds.feedburner.com/~r/zonachrome/~4/FRdmTrp2B2M" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blogandweb.com/diseno/iconos/geniales-iconos-ilustraciones-para-suscripcion/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		<feedburner:origLink>http://blogandweb.com/diseno/iconos/geniales-iconos-ilustraciones-para-suscripcion/</feedburner:origLink></item>
		<item>
		<title>Redireccionar la página de adjuntos en WordPress</title>
		<link>http://feedproxy.google.com/~r/zonachrome/~3/lNByWIoiip8/</link>
		<comments>http://blogandweb.com/wordpress/redireccionar-paginas-adjuntos-wordpress/#comments</comments>
		<pubDate>Tue, 12 Jul 2011 05:30:06 +0000</pubDate>
		<dc:creator>Francisco</dc:creator>
				<category><![CDATA[Snippets]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://blogandweb.com/?p=3037</guid>
		<description><![CDATA[WordPress maneja cada archivo adjunto (imagen, video, etc) como un post y como tal, le crea una página para accesarlo. El problema esta en que muchos themes no tienen soporte para estas páginas y por tanto WP usa la plantilla del archivo single.php, que puede llevar a generar errores. Para quien necesite estas páginas especiales [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://blogandweb.com/wordpress/">WordPress</a> maneja cada archivo adjunto (imagen, video, etc) como un post y como tal, le crea una página para accesarlo. El problema esta en que muchos themes no tienen soporte para estas páginas y por tanto WP usa la <a href="http://blogandweb.com/templates-blogger/">plantilla</a> del archivo <code>single.php</code>, que puede llevar a generar errores.</p>
<p>Para quien necesite estas páginas especiales para adjuntos puede crear un archivo <code>attachment.php</code> y darle formato y para quienes no las usamos, la mejor opción es redireccionarla al post padre. Esta tarea la cumple bien el siguiente snippet:</p>
<pre><code>/**
 * Redirecciona los adjuntos al post padre, o bien, a la portada.
 */
function attachment_redirect()
{
	global $post;
	if ( is_attachment() )
    {
		if( $post->post_parent )
            wp_redirect( get_permalink($post->post_parent), 301 );
        else
            wp_redirect( home_url(), 301 );
        exit;
	}
}
add_action( 'template_redirect', 'attachment_redirect', 1 );</code></pre>
<p>Esta función se puede agregar al archivo <code>functions.php</code> del theme activo.</p>
<img src="http://feeds.feedburner.com/~r/zonachrome/~4/lNByWIoiip8" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blogandweb.com/wordpress/redireccionar-paginas-adjuntos-wordpress/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		<feedburner:origLink>http://blogandweb.com/wordpress/redireccionar-paginas-adjuntos-wordpress/</feedburner:origLink></item>
		<item>
		<title>Simulador de cámara reflex</title>
		<link>http://feedproxy.google.com/~r/zonachrome/~3/ST0XqvZWqdo/</link>
		<comments>http://blogandweb.com/recursos-en-linea/simulador-de-camara-reflex/#comments</comments>
		<pubDate>Tue, 12 Jul 2011 05:05:19 +0000</pubDate>
		<dc:creator>Francisco</dc:creator>
				<category><![CDATA[Servicios web]]></category>
		<category><![CDATA[Fotografía]]></category>

		<guid isPermaLink="false">http://blogandweb.com/?p=3035</guid>
		<description><![CDATA[CameraSim es un sencillo simulador de cámara reflex en línea, ideal para quien esta pensando comprarse o acaba de comprarse una DSLR y repasar la relación entre velocidad de obturación, apertura y sensibilidad ISO. Sitio: camerasim.com]]></description>
			<content:encoded><![CDATA[<p><strong><img class="aligncenter" title="simulador-reflex" src="http://bw.imagenes.info/wp-content/uploads/2011/07/simulador-reflex.jpg" alt="simulador-reflex" width="600" height="525" border="0" /></strong></p>
<p><strong>CameraSim</strong> es un sencillo simulador de cámara reflex en línea, ideal para quien esta pensando comprarse o acaba de comprarse una <a href="http://es.wikipedia.org/wiki/C%C3%A1mara_r%C3%A9flex_digital">DSLR</a> y repasar la relación entre velocidad de obturación, apertura y sensibilidad ISO.</p>
<p>Sitio: <a title="http://camerasim.com" href="http://camerasim.com">camerasim.com</a></p>
<img src="http://feeds.feedburner.com/~r/zonachrome/~4/ST0XqvZWqdo" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blogandweb.com/recursos-en-linea/simulador-de-camara-reflex/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://blogandweb.com/recursos-en-linea/simulador-de-camara-reflex/</feedburner:origLink></item>
	</channel>
</rss><!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Page Caching using disk: enhanced
Database Caching 1/33 queries in 0.046 seconds using disk: basic
Object Caching 561/635 objects using disk: basic
Content Delivery Network via bw.imagenes.info

Served from: blogandweb.com @ 2012-05-12 18:02:37 -->

