<?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>UTDC Blog &#187; wordpress</title>
	<atom:link href="http://www.untrocitodecielo.com/blog/tag/wordpress/feed" rel="self" type="application/rss+xml" />
	<link>http://www.untrocitodecielo.com/blog</link>
	<description></description>
	<lastBuildDate>Sun, 21 Jun 2009 11:29:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Añadiendo twitter</title>
		<link>http://www.untrocitodecielo.com/blog/anadiendo-twitter</link>
		<comments>http://www.untrocitodecielo.com/blog/anadiendo-twitter#comments</comments>
		<pubDate>Sun, 21 Jun 2009 11:18:43 +0000</pubDate>
		<dc:creator>Tijeran</dc:creator>
				<category><![CDATA[diseño]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[añadir]]></category>
		<category><![CDATA[blog]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[twitter]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://www.untrocitodecielo.com/blog/?p=87</guid>
		<description><![CDATA[En un momento en el que twitter se ha consolidado y se mantiene como una de las herramientas por excelencia de la web 2.0, los blogs están empezando a usarlo cada vez más, para darles un toque personal. En mi opinión, un blog con twitter gana mucho en dos aspectos. En primer lugar acerca al [...]]]></description>
			<content:encoded><![CDATA[<p><img src="/imagenes/tweeter.png" alt="Añadir twitter a tu blog" width="180" height="180" class="alignright size-full wp-image-141" /><br />
En un momento en el que twitter se ha consolidado y se mantiene como una de las herramientas por excelencia de la web 2.0, los blogs están empezando a usarlo cada vez más, para darles un toque personal. En mi opinión, un <strong>blog con twitter</strong> gana mucho en dos aspectos. En primer lugar acerca al autor a su público, estableciendo lazos con sus lectores. En segundo lugar, incluir los comentarios de twitter puede ser una adición muy llamativa que dará frescor al diseño de cualquier blog si se hace adecuadamente. </p>
<p>La mejor forma y la más sencilla para <strong>poner twitter en nuestro blog</strong> es usar uno de los muchos <strong>plugins</strong> que existen para este cometido. De entre todos <a href="http://wordpress.org/extend/plugins/twitter-for-wordpress/">yo me he inclinado por este</a>, dado que es fácil de usar y se adapta a lo que necesito.<span id="more-87"></span><br />
Una vez instalado basta con arrastrarlo a la sección de widgets si el tema de tu blog dispone de ella, o mediante php con la siguiente función:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p87code2'); return false;">Ver código</a> PHP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p872"><td class="line_numbers"><pre>1
</pre></td><td class="code" id="p87code2"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> twitter_messages<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;nombreUsuario&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>La segunda opción más usada, aunque un poco más liosa es hacerlo mediante <strong>javascript</strong>, en concreto con <a href="http://tweet.seaofclouds.com/">la librería tweet</a>. Para un blog no es necesario<br />
meterse en algo tan engorroso, pero si queremos añadirlo a una web propia es la mejor solución.</p>
<p>Por útimo existen otras formas de hacerlo, todas ellas válidas pero bastante más complejas, por ejemplo con php o asp. En <a href="http://www.noupe.com/tutorial/twitter-status-design-tutorials-icons-wp-plugins.html">esta entrada de Noupe</a> podréis encontrar casi todas las alternativas.</p>
<p>Si decidís probar <strong>twitter</strong> o <strong>añadirlo</strong> a vuestro blog, aquí teneis una gran <a href="http://www.untrocitodecielo.com/blog/iconos-twitter">selección de iconos y personajes</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.untrocitodecielo.com/blog/anadiendo-twitter/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Estilo de las entradas en wordpress</title>
		<link>http://www.untrocitodecielo.com/blog/estilo-entradas-worpress</link>
		<comments>http://www.untrocitodecielo.com/blog/estilo-entradas-worpress#comments</comments>
		<pubDate>Thu, 04 Jun 2009 15:59:08 +0000</pubDate>
		<dc:creator>Tijeran</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[destacado]]></category>
		<category><![CDATA[diseño]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[Añadir etiqueta nueva]]></category>
		<category><![CDATA[campos personalizados]]></category>
		<category><![CDATA[meta]]></category>
		<category><![CDATA[metadatos]]></category>
		<category><![CDATA[mini-post]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://www.untrocitodecielo.com/blog/?p=127</guid>
		<description><![CDATA[Hoy vamos a aprender cómo añadir una sección de mini-posts a un blog wordpress. En realidad con lo que vamos a aprender se puede hacer muchas más cosas, el tema de las mini entradas es solo para ejemplificarlo. Si tienes la última versión de wp habrás notado que mientras escribes, debajo de cada entrada hay [...]]]></description>
			<content:encoded><![CDATA[<p>Hoy vamos a aprender cómo añadir una sección de mini-posts a un blog wordpress. En realidad con lo que vamos a aprender se puede hacer muchas más cosas, el tema de las mini entradas es solo para ejemplificarlo.</p>
<p>Si tienes la última versión de wp habrás notado que mientras escribes, debajo de cada entrada hay una sección llamada <strong>campos personalizados</strong>. Pues bien, esto no es otra cosa que la posibilidad de añadir <strong>meta datos</strong> a nuestras entradas. La forma en la que lo usaremos ahora, es para hacer distinción entre unos posts y otros, es decir poder identificarlos y así darles forma a nuestro gusto en el css.</p>
<p>Para el ejemplo voy a añadir la siguiente sección a mi css, que consiste en una nueva clase para cambiar el aspecto de los <strong>mini-posts</strong>. Después en mi footer usaré un bucle que llame a la función de wp encargada de reproducir los posts, pero haciendo uso de los <strong>metadatos</strong> podré cambiar la clase para que se muestre de distinto modo.<br />
<span id="more-127"></span><br />
En el css:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p127code5'); return false;">Ver código</a> CSS</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p1275"><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code" id="p127code5"><pre class="css" style="font-family:monospace;">.mini<span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #993333;">white</span><span style="color: #00AA00;">;</span>
  <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #000000; font-weight: bold;">black</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Estas dos modificaciones simplemente cambian el color de fondo a negro y el color de las letras a blanco, lo único importante es darse cuenta de que usamos <strong>una clase</strong>, y no un atributo, es decir usamos un punto delante del nombre y no una almohadilla.</p>
<p>En el html:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p127code6'); return false;">Ver código</a> HTML</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p1276"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code" id="p127code6"><pre class="html" style="font-family:monospace;">&nbsp;
&lt;div class=&quot;&lt;?php echo get_post_meta($post-&gt;ID,'mini', true) ?&gt;&quot; id=&quot;post-&lt;?php the_ID(); ?&gt;&quot;&gt;
  &lt;h2&gt;&lt;a href=&quot;&lt;?php the_permalink() ?&gt;&quot; rel=&quot;marcadores&quot; title=&quot;Enlace permanente a&lt;?php the_title_attribute(); ?&gt;&quot;&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt;
     &lt;p&gt;&lt;?php the_time('F jS, Y') ?&gt; &lt;!-- by &lt;?php the_author() ?&gt; --&gt;&lt;/p&gt;
&nbsp;
	&lt;?php the_content('Seguir leyendo &amp;raquo;'); ?&gt;
&nbsp;
&lt;/div&gt;</pre></td></tr></table></div>

<p>Lo único que nos interesa de aquí es  el <strong>&#8220;get_post_meta()&#8221;</strong> y esta sección irá en el bucle principal dónde mostremos nuestras entradas. Lo que hacemos es pedirle a wordpress los metadatos de la entrada que tienen el nombre &#8220;mini&#8221; y puesto que está dentro de un echo lo intrepretará como si fuera el nombre de la clase.</p>
<p>Solo queda meter los metadatos en las entradas con la sección de campos personalizados, para no liarnos lo más sencillo es meter en los dos campos lo mismo, asi no tenemos que pensar si es el nombre del metadato o el contenido a la hora de llamar a la función. Quedaría asi:</p>
<p><img class="aligncenter size-full wp-image-141" title="campos personalizados" src="http://www.untrocitodecielo.com/blog/wp-content/uploads/2009/05/metadatos.jpg" alt="campos personalizados" width="500" height="250" /></p>
<p>Jugando con el css y los metadatos podemos hacer casi cualquier cosa con nuestras entradas, en mi caso he añadido al pie de página una sección de mini-posts con freebies que iré actualizando.<br />
Fuente: <a href="http://codex.wordpress.org/Using_Custom_Fields">codex.wordpress</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.untrocitodecielo.com/blog/estilo-entradas-worpress/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Diseñando para WordPress</title>
		<link>http://www.untrocitodecielo.com/blog/disenando-para-wordpress</link>
		<comments>http://www.untrocitodecielo.com/blog/disenando-para-wordpress#comments</comments>
		<pubDate>Wed, 27 May 2009 13:58:50 +0000</pubDate>
		<dc:creator>Tijeran</dc:creator>
				<category><![CDATA[diseño]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[cms]]></category>
		<category><![CDATA[temas]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://www.untrocitodecielo.com/blog/?p=62</guid>
		<description><![CDATA[Este post no es ni pretende ser un tutorial para crear temas de wordpress, sino una sencilla introducción al diseño de blogs usando wordpress como CMS(administrador de contenidos), para aclarar conceptos y su uso en general.A la hora de diseñar páginas web con contenido dinámico, especialmente blogs, wordpress es un aliado muy poderoso. Esto se [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.untrocitodecielo.com/blog/wp-content/uploads/2009/05/disenando.png" alt="Diseñando para wordpress" title="Diseñando para wordpress" width="400" height="200" class="alignleft size-full wp-image-64" />Este post no es ni pretende ser un <strong>tutorial para crear temas de wordpress</strong>, sino una sencilla<br />
introducción al diseño  de blogs usando wordpress como CMS(administrador de contenidos), para aclarar<br />
conceptos y su uso en general.A la hora de <strong>diseñar páginas  web</strong> con contenido dinámico, especialmente blogs, wordpress es un aliado muy poderoso.</p>
<p>Esto se debe principalmente a su flexibilidad y sencillez. En el momento de diseñar para wordpress debemos tener en mente que nuestra única preocupación será el envoltorio,<br />
es decir la apariencia, ya que todo <strong>el contenido</strong> lo generaremos luego de manera <strong>automática</strong>.</p>
<p>Wp es a simple vista, o más bien, de la manera que a nosotros nos interesa, un conjunto de<br />
<strong>funciones php</strong> que intercalaremos en nuestro código html y que se convertirán en texto, imágenes y otros contenidos cuando publiquemos en el <strong>blog</strong>.<br />
<span id="more-62"></span>En pseudocódigo sería asi:</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p62code8'); return false;">Ver código</a> PHP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p628"><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code" id="p62code8"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>div id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;contenedor&quot;</span><span style="color: #339933;">&gt;</span>
	<span style="color: #339933;">&lt;</span>div id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;entrada&quot;</span><span style="color: #339933;">&gt;</span>
		<span style="color: #000000; font-weight: bold;">&lt;?</span> funcionPhp<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
	<span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;/</span>div<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p>Ahora que entramos en materia, intentemos coger la idea general de la estructura de wp.<br />
Para ello podemos pensar en una <strong>página principal</strong> y varias <strong>secundarias</strong>. La principal estará dividida en varias secciones:</p>
<ol>
<li>Header</li>
<li>Index</li>
<li>(¿)Barras laterales(?)</li>
<li>Footer</li>
</ol>
<p>La <strong>barras laterales</strong> son<strong> opcionales</strong> aunque la mayoría de los sitios las usan; en realidad todos los elementos son opcionales pero esto ya lo veremos más adelante.</p>
<p>Así, tenemos una página vacía a simple vista, pero que se completará como si de un  papel roto en varios<br />
trozos se tratara. Cada sección es una página independiente que se llamará mediante una <strong>función de worpress</strong>.</p>
<p><img src="http://www.untrocitodecielo.com/blog/wp-content/uploads/2009/05/esquema.png" alt="Esquema wordpress" title="Esquema wordpress" width="350" height="225" class="aligncenter size-full wp-image-64" /></p>
<p>El resto de páginas(contact, single, about, etc) siguen el mismo funcionamiento reutilizando las secciones<br />
comunes como el header o el footer. La flexibilidad de worpress nos posibilita incluso a añadir nuestras propias páginas o secciones, por ejemplo, una segunda barra lateral o un apartado &#8220;adds&#8221; para la publicidad. </p>
<p>Una vez entendido el funcionamiento básico, podemos empezar con las pautas de diseño.<br />
Para facilitarnos el trabajo a la hora de comenzar, y ahorrarnos crear los archivos php, funciones<br />
y consolidar la jerarquía de documentos, existen los llamados <strong>&#8220;blank themes&#8221;</strong>, temas lisos,<br />
prefabricados, para no empezar desde cero.<br />
Particularmente uso el <a href="http://elliotjaystocks.com/blog/">starkers</a>, que va muy bien, está perfectamente estructurado e incluye distintas hojas de estilo para agrupar los hacks de los navegadores &#8220;conflictivos&#8221; (lease ie en todas sus variantes).</p>
<p>Por último, una de las cosas que debería hacerte inclinarte por <strong>wordpress</strong> a la hora de elegir <strong>cms</strong>, es la abundante comunidad de usuarios que hay por detrás y que está continuamente ayudando a corregir problemas, creando tutoriales y aportando <strong>plugins</strong>.</p>
<p>Los plugins son pequeños programas que  proporcionan funciones exclusivas, como pueden ser la addición de<br />
captchas a los formularios, la integración de twitter o el resaltado de entradas destacadas.</p>
<p>Hasta aquí esta breve introducción acerca de el funcionamiento de wordpress de cara al diseño de temas.<br />
Próximamente crearé la continuación, en la cual ya tocaremos un poco de código.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.untrocitodecielo.com/blog/disenando-para-wordpress/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

