<?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>Eliseos.net</title> <atom:link href="http://eliseos.net/feed/" rel="self" type="application/rss+xml" /><link>http://eliseos.net</link> <description>Wordpress, Diseño, jQuery and Coffee</description> <lastBuildDate>Mon, 26 Jul 2010 06:33:44 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" /> <item><title>Embeber videos de Youtube con shortcodes en WordPress</title><link>http://eliseos.net/embeber-videos-youtube-shortcodes-wordpress/</link> <comments>http://eliseos.net/embeber-videos-youtube-shortcodes-wordpress/#comments</comments> <pubDate>Sun, 25 Jul 2010 06:02:18 +0000</pubDate> <dc:creator>Alexis</dc:creator> <category><![CDATA[Wordpress]]></category> <category><![CDATA[shortcodes]]></category><guid
isPermaLink="false">http://eliseos.net/?p=3099</guid> <description><![CDATA[Puede ser que estés al tanto o no, pero Youtube ahora nos permite utilizar un embed code mucho mas sencillo de recordar, si bien este código por ahora no aparece como un "embed oficial" es posible usarlo donde lo necesitemos]]></description> <content:encoded><![CDATA[<p
style="text-align: left;">Puede ser que estés al tanto o no, pero Youtube ahora nos permite utilizar un<strong> embed code</strong> mucho mas sencillo de recordar, si bien este código por ahora no aparece como un &#8220;embed oficial&#8221; es posible usarlo donde lo necesitemos.</p><p><span
id="more-3099"></span></p><p
style="text-align: center;"><img
src="http://eliseos.net/wp-content/uploads/2010/07/shortcodes_youtube.jpg" alt="shortcodes youtube Embeber videos de Youtube con shortcodes en Wordpress" title="shortcodes youtube wordpress" width="600" height="250" class="alignnone size-full wp-image-3112" /></p><p>Este nuevo método hace referencia a un <strong>&lt;iframe&gt;</strong> y la estructura es la siguiente:</p><div
class="wp_syntax"><div
class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">iframe</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;youtube-player&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/html&quot;</span> <span style="color: #000066;">width</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;640&quot;</span> <span style="color: #000066;">height</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;385&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://www.youtube.com/embed/VIDEO_ID&quot;</span> <span style="color: #000066;">frameborder</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;0&quot;</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">iframe</span>&gt;</span></pre></div></div><p
style="text-align: left;">Como lo podes ver es muy sencillo de recordar, a diferencia del método anterior. Ahora, no seria bueno incluir este nuevo método con un Shortcode dentro de WordPress? Mi respuesta es sí! Y es muy sencillo.</p><p
style="text-align: left;">En tu archivo <em><code>functions.php</code></em> crearemos un nuevo shortcode con la siguiente estructura:</p><div
class="wp_syntax"><div
class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">//youtube embed</span>
<span style="color: #000000; font-weight: bold;">function</span> youtube_embed<span style="color: #009900;">&#40;</span> <span style="color: #000088;">$atts</span><span style="color: #339933;">,</span> <span style="color: #000088;">$content</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">null</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #666666; font-style: italic;">//definimos nuestro shortcode</span>
    <span style="color: #990000;">extract</span><span style="color: #009900;">&#40;</span>shortcode_atts<span style="color: #009900;">&#40;</span><span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
    	<span style="color: #0000ff;">'width'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'640'</span><span style="color: #339933;">,</span><span style="color: #666666; font-style: italic;">//ancho por defecto</span>
        <span style="color: #0000ff;">'height'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'385'</span><span style="color: #339933;">,</span> <span style="color: #666666; font-style: italic;">//largo por defecto</span>
        <span style="color: #0000ff;">'id'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">,</span> <span style="color: #666666; font-style: italic;">// ID del video</span>
    <span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$atts</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   <span style="color: #b1b100;">return</span> <span style="color: #0000ff;">'&lt;iframe class=&quot;youtube-player&quot; type=&quot;text/html&quot; width=&quot;'</span><span style="color: #339933;">.</span> <span style="color: #000088;">$width</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'&quot; height=&quot;'</span><span style="color: #339933;">.</span> <span style="color: #000088;">$height</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'&quot; src=&quot;http://www.youtube.com/embed/'</span><span style="color: #339933;">.</span> <span style="color: #000088;">$id</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'&quot; frameborder=&quot;0&quot;&gt;
&lt;/iframe&gt;'</span><span style="color: #339933;">;</span><span style="color: #666666; font-style: italic;">// el output</span>
<span style="color: #009900;">&#125;</span>
add_shortcode<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'youtube'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'youtube_embed'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">//sintaxis</span>
<span style="color: #666666; font-style: italic;">//youtube embed</span></pre></div></div><p
style="text-align: left;">Aqui lo importante es definir el ancho y largo de nuestro video para agilizar luego al momento de llamar al <strong>Shortcode</strong>. Si no se especifica un ancho y largo predeterminado el Shortcode por defecto toma los ya especificados, en nuestro caso 640&#215;385.</p><p
style="text-align: left;">Ahora, cada vez que necesitemos mostrar un video de Youtube, solo debemos saber el <strong>ID</strong> del video, ese conjunto de <strong>11 caracteres</strong> al final de <em><code>URI</code></em> del video.</p><p
style="text-align: left;">Un método rápido de escritura seria,</p><div
class="wp_syntax"><div
class="code"><pre class="text" style="font-family:monospace;">[youtube id=&quot;BfYR6EH_9qg&quot;]</pre></div></div><p
style="text-align: left;">Donde se toma el ancho y largo por defecto antes especificado.</p><p
style="text-align: left;">Si queremos un ancho y largo especifico, podemos escribir:</p><div
class="wp_syntax"><div
class="code"><pre class="text" style="font-family:monospace;">[youtube id=&quot;BfYR6EH_9qg&quot; height=&quot;300&quot; width=&quot;600&quot;]</pre></div></div><p
style="text-align: left;">Como siempre: sencillo y rápido.</p> ]]></content:encoded> <wfw:commentRss>http://eliseos.net/embeber-videos-youtube-shortcodes-wordpress/feed/</wfw:commentRss> <slash:comments>2</slash:comments> </item> <item><title>Simple y facil: Contar la cantidad de palabras en un post</title><link>http://eliseos.net/simple-facil-contar-cantidad-palabras-post/</link> <comments>http://eliseos.net/simple-facil-contar-cantidad-palabras-post/#comments</comments> <pubDate>Fri, 23 Jul 2010 22:30:09 +0000</pubDate> <dc:creator>Alexis</dc:creator> <category><![CDATA[Wordpress]]></category> <category><![CDATA[hack]]></category><guid
isPermaLink="false">http://eliseos.net/?p=3095</guid> <description><![CDATA[Siempre que reviso el repositorio de Wordpress me encuentro con innumerables plugins innecesarios, ya a esta altura deben saber que no soy muy amante de sobrecargar una instalación de Wordpress con plugins]]></description> <content:encoded><![CDATA[<p
style="text-align: left;">Siempre que reviso el repositorio de WordPress me encuentro con innumerables<strong> plugins innecesarios</strong>, ya a esta altura deben saber que no soy muy amante de sobrecargar una instalación de WordPress con plugins que pueden ser reemplazados por unas <strong>simple lineas de código</strong> usando el <strong>Core</strong> de WordPress.</p><p><span
id="more-3095"></span></p><p
style="text-align: left;">A que viene todo esto? He visto que hay varios plugins para mostrar cuantas palabras contiene una entrada. Algo que lo podemos lograr en dos segundos sin utilizar ningún tipo de plugin.</p><p
style="text-align: left;">Tenemos dos opciones para trabajar.</p><h2>Primera opción</h2><p
style="text-align: left;">Como bien lo mencionan en <a
href="http://digwp.com/2010/04/wordpress-custom-functions-php-template-part-2/">DigWP</a>, en tu archivo <em><code>functions.php</code></em> crearemos una nueva función:</p><div
class="wp_syntax"><div
class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> contar_palabras<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$post</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">echo</span> <span style="color: #990000;">str_word_count</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">post_content</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div><p
style="text-align: left;">Sola resta realizar el llamado correspondiente donde queramos que se muestren la cantidad de palabras utilizadas en un post, por ejemplo:</p><div
class="wp_syntax"><div
class="code"><pre class="php" style="font-family:monospace;">Esta entrada cuenta con <span style="color: #000000; font-weight: bold;">&lt;?php</span> contar_palabras<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span> palabras.</pre></div></div><p
style="text-align: left;">La principal <strong>ventaja</strong> de este método es que no estamos limitados solo a contar palabras dentro de una entrada, si no que también podemos hacerlo con cualquier otro ítem, por ejemplo el titulo:</p><div
class="wp_syntax"><div
class="code"><pre class="php" style="font-family:monospace;">Este titulo cuenta con <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #990000;">str_word_count</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">post_title</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span> palabras.</pre></div></div><h2>Segunda opción</h2><p
style="text-align: left;">Si no estamos de humor para tocar el archivo <em><code>functions.php</code></em>, podemos evitarlo y utilizar esta linea:</p><div
class="wp_syntax"><div
class="code"><pre class="php" style="font-family:monospace;">Esta entrada cuenta con <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #990000;">str_word_count</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">post_content</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span> palabras.</pre></div></div><p
style="text-align: left;">Solo debemos asegurarnos que estamos dentro del <strong>Loop</strong> y tendremos la cantidad de palabras utilizadas.</p> ]]></content:encoded> <wfw:commentRss>http://eliseos.net/simple-facil-contar-cantidad-palabras-post/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>Incrementar el largo del selector de categorias en WordPress</title><link>http://eliseos.net/incrementar-largo-height-selector-categorias-wordpress/</link> <comments>http://eliseos.net/incrementar-largo-height-selector-categorias-wordpress/#comments</comments> <pubDate>Thu, 22 Jul 2010 22:49:37 +0000</pubDate> <dc:creator>Alexis</dc:creator> <category><![CDATA[Wordpress]]></category> <category><![CDATA[hack]]></category><guid
isPermaLink="false">http://eliseos.net/?p=3091</guid> <description><![CDATA[Si sos un tanto "quisquilloso" o contás con una inmensa cantidad de categorías en tu sitio, quizás encuentres un tanto molesto tener que hacer scroll cada vez que escribís una nueva entrada para seleccionar la categoría que queremos]]></description> <content:encoded><![CDATA[<p
style="text-align: left;">Si sos un tanto &#8220;quisquilloso&#8221; o contás con una inmensa <strong>cantidad de categorías</strong> en tu sitio, quizás encuentres un tanto molesto tener que hacer scroll cada vez que escribís una nueva entrada para <strong>seleccionar la categoría</strong> que necesitas. Lamentablemente el box donde se encuentran las categorías no se comporta como un <strong>Meta box </strong>y no podemos controlar el largo o el ancho.</p><p
style="text-align: left;">Por suerte desde <a
href="http://wpcanyon.com/tipsandtricks/increasing-the-categories-selection-height-in-wordpress-admin/" title="Increasing The Categories Selection Height In WordPress Admin">WpCanyon</a> nos plantean una solución sencilla: Hacer que el largo del selector de categorías se comporte acorde a nuestras necesidades.</p><p
style="text-align: left;">Una primera opción es aplicar un filtro y definir el <em><code>height</code></em> que necesitamos, para este en tu archivo <em><code>functions.php</code></em> crea este nuevo filtro:</p><div
class="wp_syntax"><div
class="code"><pre class="php" style="font-family:monospace;">add_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'admin_head'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'categories_list_height_css'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">function</span> categories_list_height_css<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">echo</span><span style="color: #0000ff;">'
	&lt;style type=&quot;text/css&quot;&gt;
		#category-all.tabs-panel{ height:500px; }
	&lt;/style&gt;
	'</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div><p
style="text-align: left;">Lo importante es que definas un <em><code>height</code></em> que se adapte a tus necesidades. Generalmente <strong>500px</strong> son más que suficientes, pero se llegaras a tener muchas categorías, tal vez debas ajustar este valor.</p><p
style="text-align: left;">Otra opción es utilizar <strong>jQuery</strong> (recomendable) y hacer el que <em><code>height</code></em> se ajuste automáticamente. De nuevo crearemos un filtro con el siguiente contenido:</p><div
class="wp_syntax"><div
class="code"><pre class="php" style="font-family:monospace;">add_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'admin_head'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'categories_list_height_jquery'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">function</span> categories_list_height_jquery<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">echo</span><span style="color: #0000ff;">'
	&lt;script type=&quot;text/javascript&quot;&gt;
		jQuery(function($){
			$(&quot;#category-all.tabs-panel&quot;).height($(&quot;#categorychecklist&quot;).height());
		});
	&lt;/script&gt;
	'</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div><p
style="text-align: left;">Cualquiera de las dos alternativas es más que válida, solo debes elegir la que te haga sentir más cómodo.</p> ]]></content:encoded> <wfw:commentRss>http://eliseos.net/incrementar-largo-height-selector-categorias-wordpress/feed/</wfw:commentRss> <slash:comments>2</slash:comments> </item> <item><title>Un Framework para aquellos que trabajan en User Interface</title><link>http://eliseos.net/framewiok-trabajan-user-interface-gui/</link> <comments>http://eliseos.net/framewiok-trabajan-user-interface-gui/#comments</comments> <pubDate>Wed, 21 Jul 2010 22:18:56 +0000</pubDate> <dc:creator>Alexis</dc:creator> <category><![CDATA[Diseño]]></category> <category><![CDATA[framework]]></category> <category><![CDATA[Illustrator]]></category><guid
isPermaLink="false">http://eliseos.net/?p=3085</guid> <description><![CDATA[Webalys nos acerca un Framework para todos aquellos que trabajan en UI (User Interface). Como todo Framework el objetivo es reducir el tiempo de trabajo, en este caso cuando se trabaja con UI e Illustrator. Este Framework cuenta ]]></description> <content:encoded><![CDATA[<p
style="text-align: left;"><a
title="User Interface Design Framework" href="http://www.webalys.com/design-interface-application-framework.php">Webalys</a> nos acerca un <strong>Framework</strong> para todos aquellos que trabajan en <strong>UI</strong> (User Interface). Como todo Framework el objetivo es reducir el tiempo de trabajo, en este caso cuando se trabaja con UI e <strong>Illustrator</strong>.</p><p><span
id="more-3085"></span></p><p
style="text-align: center;"><a
href="http://www.webalys.com/design-interface-application-framework.php"><img
class="alignnone size-full wp-image-3086" title="User Interface Design Framework" src="http://eliseos.net/wp-content/uploads/2010/07/User-Interface-Design-Framework.jpg" alt="User Interface Design Framework Un Framework para aquellos que trabajan en User Interface" width="600" height="250" /></a></p><p
style="text-align: left;">Este Framework cuenta con todos los elementos GUI para poder comenzar a realizar un mockup de una interfaz. Cuenta elementos del tipo, acordeones, slides, ratings,etc. Un conjunto de más de 260 Iconos y más de 200 estilos y 330 swatches para personalizar nuestros elementos.</p><p
style="text-align: left;">Por ultimo el pack cuenta con una licencia que ter permite usarlo en proyectos personales y comerciales haciendo referencia a la atribución solamente.</p> ]]></content:encoded> <wfw:commentRss>http://eliseos.net/framewiok-trabajan-user-interface-gui/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>Personalizar Gravatar en WordPress</title><link>http://eliseos.net/personalizar-gravatar-wordpress/</link> <comments>http://eliseos.net/personalizar-gravatar-wordpress/#comments</comments> <pubDate>Mon, 19 Jul 2010 23:01:49 +0000</pubDate> <dc:creator>Alexis</dc:creator> <category><![CDATA[Wordpress]]></category> <category><![CDATA[gravatar]]></category><guid
isPermaLink="false">http://eliseos.net/?p=3079</guid> <description><![CDATA[Si estas buscando una forma de darle un toque mas personal a tu sitio quizás encuentres útil el poder usar un Gravatar personalizado que se muestre por defecto en caso de que el lector no cuente con uno, como una buena forma de dar ese toque]]></description> <content:encoded><![CDATA[<p
style="text-align: left;">Si estas buscando una forma de darle un toque mas personal a tu sitio quizás encuentres útil el poder usar un <strong>Gravatar personalizado</strong> que se muestre por defecto en caso de que el lector no cuente con uno, como una buena forma de dar ese toque.</p><p
style="text-align: left;">Si ves los comentarios aquí en Eliseos veras que el Gravatar por defecto es el siguiente:</p><p><span
id="more-3079"></span></p><p
style="text-align: center;"><img
src="http://eliseos.net/wp-content/uploads/2010/07/Gravatars-en-WordPress.jpg" alt="Gravatars en WordPress Personalizar Gravatar en Wordpress" title="Gravatars en WordPress" width="600" height="250" class="alignnone size-full wp-image-3080" /></p><p
style="text-align: left;">Muchos Themes no ofrecen esta posibilidad por defecto, pero se puede implementar muy fácil.</p><p
style="text-align: left;">Solo necesitas una imagen que quieras que se muestre por defecto, lo recomendable es usar una imagen de no mas de <strong>100px X 100px</strong>. Cuando cuentes con esta imagen, guardala en la carpeta del Theme que estés usando.</p><p
style="text-align: left;">Ahora, en tu archivo <em><code>functions.php</code></em> insertaremos:</p><div
class="wp_syntax"><div
class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> add_custom_gravatar <span style="color: #009900;">&#40;</span><span style="color: #000088;">$avatar</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
<span style="color: #000088;">$custom_avatar</span> <span style="color: #339933;">=</span> get_bloginfo<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'template_directory'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'/images/nombre-de-nuestro-gravatar.jpg'</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$avatar</span><span style="color: #009900;">&#91;</span><span style="color: #000088;">$custom_avatar</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;Nombre de Gravatar a mostrarse en nuestro CP&quot;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">return</span> <span style="color: #000088;">$avatar</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_filter<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'avatar_defaults'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'add_custom_gravatar'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div><p
style="text-align: left;">Lo único que resta es activar el Gravatar por defecto. Para esto, dentro del panel de administración de WordPress nos dirigiremos a <strong>Settings &gt; Discussion</strong> y al final de la lista encontraremos una serie de Gravatar a utilizar por default, solo seleccionaremos el nuestro y guardaremos los cambios.</p><p
style="text-align: center;"><img
src="http://eliseos.net/wp-content/uploads/2010/07/Gravatars-en-WordPress-Panel.jpg" alt="Gravatars en WordPress Panel Personalizar Gravatar en Wordpress" title="Gravatars en WordPress Panel" width="600" height="250" class="alignnone size-full wp-image-3081" /></p><p
style="text-align: left;">Simple, rápido y damos un toque personal a nuestro sitio.</p> ]]></content:encoded> <wfw:commentRss>http://eliseos.net/personalizar-gravatar-wordpress/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> <item><title>Alienta a tus lectores a que utilicen tus imagenes</title><link>http://eliseos.net/alienta-lectorese-utilicen-tus-imagenes/</link> <comments>http://eliseos.net/alienta-lectorese-utilicen-tus-imagenes/#comments</comments> <pubDate>Thu, 15 Jul 2010 22:31:34 +0000</pubDate> <dc:creator>Alexis</dc:creator> <category><![CDATA[Wordpress]]></category> <category><![CDATA[imagenes]]></category><guid
isPermaLink="false">http://eliseos.net/?p=3073</guid> <description><![CDATA[Supongamos por un momento que tenemos un sitio en el que las imágenes/fotos que publicamos son nuestro mayor recurso. Seguramente no nos gustaría que se "roben" esas imágenes sin que nos algún tipo de crédito]]></description> <content:encoded><![CDATA[<p
style="text-align: left;">Supongamos por un momento que tenemos un sitio en el que las<strong> imágenes/fotos</strong> que publicamos son nuestro<strong> mayor recurso</strong>. Seguramente no nos gustaría que se &#8220;roben&#8221; esas imágenes sin que nos algún<strong> tipo de crédito</strong>. Podemos tomar algunas medidas para eso, pero nunca estaremos 100% cubiertos.</p><p
style="text-align: center;"><a
href="http://wordpress.org/extend/plugins/embed-image/"><img
class="alignnone size-full wp-image-3074" title="Embed Image" src="http://eliseos.net/wp-content/uploads/2010/07/Embed-Image.jpg" alt="Embed Image Alienta a tus lectores a que utilicen tus imagenes" width="500" height="250" /></a></p><p><span
id="more-3073"></span></p><p
style="text-align: left;">Con el plugin <a
title="Embed Image" href="http://wordpress.org/extend/plugins/embed-image/">Embed Image </a> alentaremos a nuestro lectores a que <strong>utilicen</strong> nuestras imágenes brindándoles un código para que puedan<strong> embeber las imágenes en sus sitios</strong>. Al permitirles esta opción cada vez que se re-publiqe una imagen nuestra, esta incluirá un link hacia la imagen original, sumando en <strong>SEO</strong> y asegurándonos del crédito de la imagen.</p><p
style="text-align: left;">Algo que llama la atención es que ocasionalmente se vera en la imagen embebida un pequeño spot para publicidad para monetizar cada imagen. Ese anuncio al parecer rota entre, digamos, nuestro anuncio y el de los creadores del plugin, por lo que hay un 50% de <strong>Ad Revenue</strong>. Realmente no estoy seguro si esto es valido según las políticas de Adsense, pero es así es como funciona el plugin.</p><p
style="text-align: left;">Por ultimo contamos con un panel de control para poder llevar cuentas desde que sitio se estan enlazando nuestras imágenes, las impresiones que genera y la posibilidad de bloquear sitios que creemos no deberían utilizar nuestras imágenes.</p><p
style="text-align: left;">Como lo mencione al principio, nunca podemos asegurar que nuestras imágenes se usen en nuestros términos al 100% por eso esta es una buena idea de alentar a los lectores a utilizar nuestras imágenes, teniendo nosotros un poco más de control sobre ellas.</p> ]]></content:encoded> <wfw:commentRss>http://eliseos.net/alienta-lectorese-utilicen-tus-imagenes/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> <item><title>Pack de Patterns 100% Seamless</title><link>http://eliseos.net/pack-patterns-100-seamless/</link> <comments>http://eliseos.net/pack-patterns-100-seamless/#comments</comments> <pubDate>Wed, 14 Jul 2010 20:18:50 +0000</pubDate> <dc:creator>Alexis</dc:creator> <category><![CDATA[General]]></category> <category><![CDATA[patterns]]></category> <category><![CDATA[Photoshop]]></category><guid
isPermaLink="false">http://eliseos.net/?p=3069</guid> <description><![CDATA[Muchas veces lo que separa a un buen diseño de un diseño regular son los pequeños  detalles. Uno de esos detalles que hay que tener en cuenta son las llamadas Patterns (patrones)]]></description> <content:encoded><![CDATA[<p
style="text-align: left;">Muchas veces lo que separa a un <strong>buen diseño</strong> de un diseño regular son los pequeños  detalles. Uno de esos detalles que hay que tener en cuenta son las llamadas <strong>Patterns</strong> (patrones) que nos permiten aplicar una textura en el diseño de manera uniforme.</p><p
style="text-align: center;"><a
href="http://tileabl.es/"><img
class="alignnone size-full wp-image-3070" title="Tileables - Never Ending Patterns" src="http://eliseos.net/wp-content/uploads/2010/07/tileabl.es_.jpg" alt="tileabl.es  Pack de Patterns 100% Seamless" width="600" height="336" /></a></p><p
style="text-align: left;"><a
title="Tileables - Never Ending Patterns" href="http://tileabl.es/">Tileabl.es</a> es un nuevo sitio donde podrás encontrar Packs de <strong>Patterns 100% semaless</strong> para que las apliques. De momento el sitio cuenta con cuatro Packs de Patterns, pero con el correr de los días se irán sumando otras colecciones.</p><p
style="text-align: left;">Cada pack incluye los archivos necesarios para poder modificar las Patterns (<em>source file</em>) y el archivo<em> .PAT</em> para trabajar en Photoshop.</p><p
style="text-align: left;">Estos archivos son <strong>100% FREE </strong>y podes usarlos en proyectos personales y comerciales libre de licencias, si te gusta lo usas, no importa de que forma; simple y sin restricciones.</p> ]]></content:encoded> <wfw:commentRss>http://eliseos.net/pack-patterns-100-seamless/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> <item><title>Usar CSS3 en Internet Explorer 6-8</title><link>http://eliseos.net/usar-css3-internet-explorer-6-8/</link> <comments>http://eliseos.net/usar-css3-internet-explorer-6-8/#comments</comments> <pubDate>Mon, 12 Jul 2010 20:29:24 +0000</pubDate> <dc:creator>Alexis</dc:creator> <category><![CDATA[CSS]]></category> <category><![CDATA[CSS3]]></category> <category><![CDATA[hack]]></category><guid
isPermaLink="false">http://eliseos.net/?p=3065</guid> <description><![CDATA[Hace unos meses atrás había hablado aquí de como hacer que Internet Explorer se comporte como un navegador moderno al hacer que abrace algunas de las propiedades que CSS3 tiene para ofrecer]]></description> <content:encoded><![CDATA[<p
style="text-align: left;">Hace unos meses atrás <a
href="http://eliseos.net/?p=2836">había hablado</a> aquí de como hacer que <strong>Internet Explorer</strong> se comporte como un navegador moderno al hacer que abrace algunas de las propiedades que <strong>CSS3</strong> tiene para ofrecer.</p><p
style="text-align: center;"><img
class="alignnone size-large wp-image-3066" title="PIE CSS3" src="http://eliseos.net/wp-content/uploads/2010/07/PIE-CSS3-600x361.jpg" alt="PIE CSS3 600x361 Usar CSS3 en Internet Explorer 6 8" width="600" height="361" /></p><p
style="text-align: left;">El día de hoy, ha salido otra alternativa: <a
title="PIE CSS3" href="http://css3pie.com/">CSS3 PIE</a> que como el método anterior, también trabaja por medio de un archivo <strong>htc</strong> para poder usar las propiedades de <strong>CSS3</strong> que necesitamos.</p><p
style="text-align: left;">Estas propiedades que se pueden utilizar son: border-radius, box-shadow, border-image, -pie-background (multiple background images), multiple background images (integacion con javascript), rgba color values y gradients.</p><p
style="text-align: left;">Como se puede apreciar, no están todas la propiedades que un quisiera, pero si se encuentran las quizás, mas usadas; por lo que podremos brindarles a los usuarios de IE un experiencia mas agradable a la hora de visitar nuestro sitio.</p><p
style="text-align: left;">En cuanto a su uso o aplicación, es de lo mas sencillo, solo debemos hacer referencia al archivo <strong>htc</strong> en un regla y listo. Por ejemplo:</p><div
class="wp_syntax"><div
class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#unelemento</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#999</span><span style="color: #00AA00;">;</span>
    -webkit-border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
    -moz-border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
    border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
    behavior<span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">ruta/a/PIE.htc</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div><p
style="text-align: left;"> Por ultimo no te olvides de revisar la documentación, donde encontraras ejemplo prácticos junto con todo lo necesario para hacer correr CSS3 en Internet Explorer.</p> ]]></content:encoded> <wfw:commentRss>http://eliseos.net/usar-css3-internet-explorer-6-8/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> <item><title>Utilizar Thumbnails a modo de menu de navegacion en WordPress</title><link>http://eliseos.net/utilizar-thumbnails-modo-menu-de-navegacion-wordpress/</link> <comments>http://eliseos.net/utilizar-thumbnails-modo-menu-de-navegacion-wordpress/#comments</comments> <pubDate>Tue, 06 Jul 2010 22:49:31 +0000</pubDate> <dc:creator>Alexis</dc:creator> <category><![CDATA[Wordpress]]></category> <category><![CDATA[Theme]]></category><guid
isPermaLink="false">http://eliseos.net/?p=3059</guid> <description><![CDATA[Desde la salida de Wordpress 2.9 se ha introducido la posibilidad de trabajar/añadir thumbnails (capturas) a nuestros posts. No seria bueno poder usar esas imágenes a modo de menú de navegación, es decir reemplazando a previous_pos() y next_pos() ]]></description> <content:encoded><![CDATA[<p
style="text-align: left;">Desde la salida de <strong>WordPress 2.9</strong> se ha introducido la posibilidad de trabajar/añadir <strong>thumbnails</strong> (capturas) a nuestros posts. No seria bueno poder usar esas imágenes a modo de menú de navegación, es decir reemplazando a <em><code>previous_pos()</code></em> y <em><code>next_pos()</code></em> ?</p><p
style="text-align: center;"><a
href="http://themethesis.com/tutorials/previous-next-thumbnails-wordpress/"><img
src="http://eliseos.net/wp-content/uploads/2010/07/WordPress-Thumbnails-for-Previous-Next.jpg" alt="WordPress Thumbnails for Previous Next Utilizar Thumbnails a modo de menu de navegacion en Wordpress" title="How to Use Thumbnails for Previous/Next Navigation in WordPress" width="600" height="250" class="alignnone size-full wp-image-3060" /></a></p><p
style="text-align: left;">En <a
href="http://themethesis.com/tutorials/previous-next-thumbnails-wordpress/" title="How to Use Thumbnails for Previous/Next Navigation in WordPress">Theme Thesis</a> han salido con una solución bastante elegante que nos permitirá usar esas capturas y <strong>reemplazar</strong> al ya clasico post siguiente y post anterior.</p><p
style="text-align: left;">Este pequeño solo funcionara con WordPress 2.9 en adelante ya que en versiones anteriores no contamos con soporte para las thumbnails.</p><p
style="text-align: left;">En primer lugar debemos indicarle a nuestro Theme (si es que no le hemos hecho ya) que vamos a trabajar con thumbnails. Para eso en tu archivo <em><code>functions.php</code></em>, se lo haremos saber.</p><div
class="wp_syntax"><div
class="code"><pre class="php" style="font-family:monospace;">add_theme_support<span style="color: #009900;">&#40;</span>‘post<span style="color: #339933;">-</span>thumbnails’<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div><p
style="text-align: left;">Ahora viene la parte interesante, reemplazar el menú de navegación clásicos (por asi decirlo) con nuestras capturas. En tu archivo single.php localizaremos donde se encuentra <em><code>previous_post_link()</code></em> y <em><code>next_post_link()</code></em> (si es que el Theme contaba con él) y lo reemplazaremos con lo siguiente:</p><div
class="wp_syntax"><div
class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #000088;">$prevPost</span> <span style="color: #339933;">=</span> get_previous_post<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$prevthumbnail</span> <span style="color: #339933;">=</span> get_the_post_thumbnail<span style="color: #009900;">&#40;</span><span style="color: #000088;">$prevPost</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">150</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">150</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
previous_post_link<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'%link'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">''</span><span style="color: #339933;">.</span><span style="color: #000088;">$prevthumbnail</span><span style="color: #339933;">.</span><span style="color: #0000ff;">''</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">TRUE</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span>
&nbsp;
&lt;p class=&quot;prev_next2&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> previous_post_link<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'%link'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'&lt;'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #000088;">$nextPost</span> <span style="color: #339933;">=</span> get_next_post<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$nextthumbnail</span> <span style="color: #339933;">=</span> get_the_post_thumbnail<span style="color: #009900;">&#40;</span><span style="color: #000088;">$nextPost</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">150</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">150</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
next_post_link<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'%link'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">''</span><span style="color: #339933;">.</span><span style="color: #000088;">$nextthumbnail</span><span style="color: #339933;">.</span><span style="color: #0000ff;">''</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">TRUE</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span>
&lt;p class=&quot;prev_next2&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> previous_post_link<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'%link'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'&gt;'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/p&gt;</pre></div></div><p
style="text-align: left;">Una vez guardados los cambios cuando estemos en una entrada, en lugar de contar con la frase post siguiente y/o post anterior, ahora veremos nuestras capturas.</p><p
style="text-align: left;">Nota que el código trabaja por defecto con capturas del orden de los <strong>150px X 150px</strong> cosa que los podes modificar a tu antojo. Para darle formato a la captura, recordá que debes utilizar un poco de <strong>CSS</strong>, mas concretamente vas a necesitar definir y trabajar con <strong>class</strong> <em>.wp-post-image</em></p><p
style="text-align: left;">Simple y contundente, una opción para cambiarle la cara a tu sitio, con poco trabajo.</p> ]]></content:encoded> <wfw:commentRss>http://eliseos.net/utilizar-thumbnails-modo-menu-de-navegacion-wordpress/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> <item><title>WP-Piwik: Web analytics en WordPress</title><link>http://eliseos.net/wp-piwik-web-analytics-wordpress/</link> <comments>http://eliseos.net/wp-piwik-web-analytics-wordpress/#comments</comments> <pubDate>Mon, 05 Jul 2010 22:41:56 +0000</pubDate> <dc:creator>Alexis</dc:creator> <category><![CDATA[Wordpress]]></category> <category><![CDATA[open source]]></category><guid
isPermaLink="false">http://eliseos.net/?p=3054</guid> <description><![CDATA[Puede que estés familiarizado (o no) con Piwik, un sistemas de estadísticas web Open Source que entre muchas de sus virtudes cuenta con característica de brindar informes en tiempo real. El día de hoy quería recomendarles el plugin correspondiente para Wordpress: WP-Piwik]]></description> <content:encoded><![CDATA[<p
style="text-align: left;">Puede que estés familiarizado (o no) con Piwik, un sistemas de <strong>estadísticas web Open Source </strong>que entre muchas de sus virtudes cuenta con característica de brindar <strong>informes en tiempo real</strong>. El día de hoy quería recomendarles el plugin correspondiente para <strong>WordPress</strong>: <a
title="WP-Piwik" href="http://wordpress.org/extend/plugins/wp-piwik/">WP-Piwik</a>.</p><p
style="text-align: center;"><a
href="http://wordpress.org/extend/plugins/wp-piwik/"><img
class="alignnone size-full wp-image-3055" title="WP-Piwik" src="http://eliseos.net/wp-content/uploads/2010/07/WP-Piwik.jpg" alt="WP Piwik WP Piwik: Web analytics en Wordpress" width="600" height="250" /></a></p><p
style="text-align: left;">A <a
title="Piwik" href="http://piwik.org/">Piwik</a> lo podríamos definir como la alternativa Open Source a<strong> Google Analytics</strong> con la ventaja de que somos nosotros los dueños de la informacion generada, a diferencia de Google Analytics. Piwik  se instala en nuestro servidor (solo necesitamos PHP y MySQL)  y una vez configurado, ya contaremos con un sistema de estadísticas web en tiempo real.</p><p
style="text-align: left;">Ahora, con Wp-Piwik lo que hacemos es integrar estas estadísticas directamente en el Dashboard de WordPress, para acceder a ellas fácilmente.</p><p
style="text-align: left;">Demás esta decir que el único requerimiento necesario para usar este plugin es contar con una instalación de Piwik.</p> ]]></content:encoded> <wfw:commentRss>http://eliseos.net/wp-piwik-web-analytics-wordpress/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> </channel> </rss>
<!-- Served from: eliseos.net @ 2010-07-31 16:46:19 by W3 Total Cache -->