Programo Web » Programación

Programo Web » Programación http://programoweb.com Desarrollo Web y WordPress Sat, 07 Aug 2010 00:10:59 +0000 en hourly 1 http://wordpress.org/?v=3.0 Feed con las últimas páginas de WordPress http://programoweb.com/feed-ultimas-paginas-wordpress.html http://programoweb.com/feed-ultimas-paginas-wordpress.html#comments Sun, 01 Aug 2010 04:58:37 +0000 JuanK http://programoweb.com/?p=1524 Ayer estuve buscando, desesperadamente casi, alguna forma de que se publiquen las últimas páginas estáticas creadas dentro de un feed, aunque no encontré ninguna forma de hacerlo, ni siquiera con plugin.

A causa de esto me acordé de un post que se publicó en Yoast.com, donde nos daban un código para crear un feed personalizable y se me ocurrió editarlo un poco.

Revisando un poco el Codex, la función query_posts, encontré una forma de publicar las últimas páginas en el feed, de esta forma:

<?php
/*
Template Name: Feed Páginas
*/

function yoast_rss_date( $timestamp = null ) {
$timestamp = ($timestamp==null) ? time() : $timestamp;
echo date(DATE_RSS, $timestamp);
}

function yoast_rss_text_limit($string, $length, $replacer = '...') {
$string = strip_tags($string);
if(strlen($string)> $length)
return (preg_match('/^(.*)\W.*$/', substr($string, 0, $length+1), $matches) ? $matches[1] : substr($string, 0, $length)) . $replacer;
return $string;
}

$args = array(
'posts_per_page' => 10,
'post_type' => page,
);

$posts = query_posts($args);

$lastpost = $numposts - 1;

header("Content-Type: application/rss+xml; charset=UTF-8");
echo '<?xml version="1.0"?>';
?><rss version="2.0">
<channel>
<title>Últimas páginas publicadas</title>
<link>http://www.tublog.com/</link>
<description>Las últimas páginas publicadas.</description>
<language>es-cl</language>
<pubDate><?php yoast_rss_date( strtotime($ps[$lastpost]->post_date_gmt) ); ?></pubDate>
<lastBuildDate><?php yoast_rss_date( strtotime($ps[$lastpost]->post_date_gmt) ); ?></lastBuildDate>
<managingEditor>joost@yoast.com</managingEditor>
<?php foreach ($posts as $post) { ?>
<item>
<title><?php echo get_the_title($post->ID); ?></title>
<link><?php echo get_permalink($post->ID); ?></link>
<description><?php echo '<![CDATA['.yoast_rss_text_limit($post->post_content, 500).'<br/><br/>Ver la fiche de <a href="'.get_permalink($post->ID).'">'.get_the_title($post->ID).'</a>'.']]>'; ?></description>
<pubDate><?php yoast_rss_date( strtotime($post->post_date_gmt) ); ?></pubDate>
<guid><?php echo get_permalink($post->ID); ?></guid>
</item>
<?php } ?>
</channel>
</rss>

Para usarlo sólo deben crear una página nueva y elegir la plantilla "Feed Páginas" y listo.

Ahora sólo entren a la nueva página y verán su feed nuevo.

]]> http://programoweb.com/feed-ultimas-paginas-wordpress.html/feed 2 WordPress 3.2 necesitará MySQL 5 http://programoweb.com/wordpress-3-2-necesitara-mysql-5.html http://programoweb.com/wordpress-3-2-necesitara-mysql-5.html#comments Sat, 24 Jul 2010 15:54:05 +0000 JuanK http://programoweb.com/?p=1508

WordPress Mantención

Ayer, desde el blog oficial de WordPress anunciaron la "muerte" de PHP 4 y MySQL 4, obligándonos a utilizar un hosting con PHP 5 y MySQL 5 para la versión 3.2 de WordPress.

Esto es algo realmente malo, ya que están pidiendo cosas que no todos los hosts tienen, lo que se traducirá en una migración de parte de muchos usuarios a otros proveedores con mejores características, lo que implica un mayor gasto de dinero, siendo que WP es totalmente gratis :S.

Esto es algo, que en lo personal no me afecta, pero es obvio que no todos pueden decir lo mismo, aunque también puede ser un avance para la comunidad de desarrolladores, ya que estás nuevas versiones (PHP y MySQL) son muchos más fiables, seguras y rápidas, además evitaremos código extra en el núcleo de WP.

También han publicado un plugin, llamado Health Check plugin, que permite saber si tu hosting tiene los requisitos necesarios. Además les aviso que la versión 3.2 estará para el próximo año, por lo tanto aún tenemos tiempo de prepararnos para un cambio de host si es necesario.

Por último les dejo este comentario que publicaron en Ayuda WP, donde Darío Ferrer da a conocer su punto de vista y es realmente bueno, acierta en todo lo que dice, por lo que está actualización no deja de ser buena.

]]> http://programoweb.com/wordpress-3-2-necesitara-mysql-5.html/feed 2 Lista de Blogs de Programación http://programoweb.com/lista-de-blogs-de-programacion.html http://programoweb.com/lista-de-blogs-de-programacion.html#comments Tue, 20 Jul 2010 04:32:11 +0000 JuanK http://programoweb.com/?p=1500 Hace unos días dije que escribiría una lista con los blogs que tengo en en el feed de artículos sobre programación. Por causas ajenas a mí, léase vacaciones, se me olvidó completamente que lo haría, pero aquí estamos de nuevo.

El feed se publica desde mi feed de mi lector de feeds. ¿Un poco más simple?, en mi lector de feeds tengo varios blogs de programación, todos dentro de una carpeta, las cuales tienen su propio feed; esto pasa en Google Reader, no sé si se puede hacer con otros lectores, pero yo soy fan de Google (?).

Ese feed lo pasé a FeedBurner solo por comodidad, ya que es más fácil de manejar, con más funciones y lo mejor de todo, una url mucho más fácil de recordar.

Luego de la explicación fome viene lo bueno, la lista:

Recuerden que si quieren seguir estos sitios hagánlo desde nuestro feed, es mucho más cómodo y rápido, además que se irán incluyendo más mientras encuentre algunos que valgan la pena

Espero que se les sean útiles y si conocen algunos que no estén aquí citados avisen en los comentarios, tal vez los agregamos.

]]> http://programoweb.com/lista-de-blogs-de-programacion.html/feed 0 Artículos sobre Programación Web http://programoweb.com/articulos-programacion-web.html http://programoweb.com/articulos-programacion-web.html#comments Tue, 13 Jul 2010 03:15:33 +0000 JuanK http://programoweb.com/?p=1496

Lenguajes de Programación

Siempre estoy buscando formas de ayudar con lo mismo que yo leo, una de las formas que ha funcionado es compartiendo los enlaces, pero hacerlo a mano es aburrido y lento, por eso me gusta hacer que las cosas se actualicen automáticamente.

En este post quiero mostrarles un feed que creé con el fin de compartir links sobre Programación Web, gran parte de los posts publicados están en inglés, pero de todas formas hay algunos en español.

En este feed encontrarás de todo tipo de lenguajes de programación, especialmente PHP, MySQL, JavaScript (jQuery principalmente) y hartas cosas más.

Si quieres seguir las actualizaciones puedes hacerlo de 4 formas:

A través de twitter: @programoweb
A través de Tumblr: Planet Programo Web
A través del mail.
Con un lector de feeds.

En twitter ya tenemos más de 100 followers, espero poder aumentarlos, aunque pueden usar las demás opciones si quieren.

Mañana publicaré una lista con los sitios que se encuentran en el feed, para que sepan cuales son y ustedes mismos puedan aportar algunos

]]> http://programoweb.com/articulos-programacion-web.html/feed 0 Error 404 – Ajustes finales http://programoweb.com/error-404-ajustes-finales.html http://programoweb.com/error-404-ajustes-finales.html#comments Mon, 12 Jul 2010 22:59:23 +0000 JuanK http://programoweb.com/?p=1486 Buee, no se como empezar, luego de casi un mes sin escribir algo me siento raro, pero debo decir que tenía el diseño final de la página de error desde hace 20 días :S.

Ahora, este es el post final sobre la creación de la página de Error 404, podemos decir que ya hicimos todo lo difícil, ahora sólo nos falta mejorar un poco nuestro primer intento con un poco de CSS e imaginación

Habíamos dicho que la página de error llevaría los últimos posts y suscripción al feed, eso es algo simple de hacer.

Para los últimos posts ya hemos visto varios ejemplos de como hacerlo, el más estable y seguro de usar en WordPress es este, que usa funciones nativas de WP para funcionar, pero en el ejemplo voy a usar el método con FeedBurner, fue más simple y además el diseño lo tengo hecho en una plantilla HTML básica.

En el post sobre FeedBurner se explica claramente como encontrar el código para usarlo (las imágenes ya no están por problemas de hosting, pero voy a intentar arreglarlas), se trata de un simple javaScript que obtiene los últimos posts, en mi caso elegí que se mostraran 7.

Lo hacemos de esta forma:

<div class="ultimos">
<p>O tal vez quieras revisar nuestros últimos artículos:</p>
<script src="http://feeds.feedburner.com/Blooging?format=sigpro" type="text/javascript"></script>
</div>

Ahora agregamos un poco de CSS:

.ultimos ul {list-style: none; padding-left: 10px;}
.ultimos ul li {background: url(http://programoweb.com/wp-content/themes/Blooging-it!/imagenes/relacionados.png) no-repeat 2px 2px; padding: 0 0 3px 20px;}
#creditfooter { visibility : hidden; height: 0px;}

De esta forma lograremos hacer que se vean bien los enlaces, para que sean agradables a la vista. El div "creditfooter" muestra una imagen de FB, por eso la ocultamos. Ahora pondremos la suscripción al feed, recuerden que dijimos que iría una imagen y un formulario de suscripción por mail.

Empezamos con la imagen:

<div class="feed">
<p>Suscríbete a nuestro sitio:</p>
<a href="http://feeds.feedburner.com/Blooging" title="Feed de Programo Web"><div class="feed-img"></div></a>

Y ahora el formulario para el mail:

<div class="mail">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Blooging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type="text" style="width:140px" name="email" value="Ingresa tu email..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/><input type="hidden" value="Blooging" name="uri"/><input type="hidden" name="loc" value="es_ES"/><input type="submit" value="Suscribirse" /></form>
</div>
</div>

Si lo dejamos de esta forma se ve feo, hay que decirlo, pero nosotros le agregaremos un poco de CSS para mejorar el aspecto:

.feed {float: right; margin: -170px 0 0 0; width: 500px;}
.feed a {width: 96px;}
.feed p {margin-left: 50px;}
.feed-img {height: 96px; width: 96px; background: url(feed-plomo.png); margin-left: 50px;}

.mail {margin: -70px 0 0 200px;}

Ahora se ve aceptable nuestra página de error y podemos decir que está lista. En el siguiente link podrán verla funcionando:

Demo Error 404

Como mencioné en el primer post, la idea de hacer esto es que los usuarios sientan la necesidad de explorar el sitio, pero sin ser molestos, ya que todo se ve ordenado.

Espero que les sea útil este simple tutorial, cualquier duda háganla en los comentarios

]]> http://programoweb.com/error-404-ajustes-finales.html/feed 0 Error 404 – Primer intento http://programoweb.com/error-404-primer-intento.html http://programoweb.com/error-404-primer-intento.html#comments Wed, 16 Jun 2010 23:43:08 +0000 JuanK http://programoweb.com/?p=1474 Como hablabamos en el post anterior, la página de Error 404 debe ser muy simple y funcional, evitando sobrecargarla para que sea fácil la navegación y uso de la misma.

Ahora haremos nuetro primer intento creando una y, como dijimos en el otro post, sólo incluíremos el logo, un texto de aviso y una caja de busqueda. El diseño de la misma la veremos en otro post, por ahora me baso en los colores de mi blog (no son muy bonitos, pero vamos, es el primer intento ).

Para hacer una caja de busqueda, podemos basarnos en la que trae nuestro theme, que se encuentra, normalmente, en el archivo searchform.php. Copiamos el contenido en nuestro archivo 404.php, que debería ser algo así:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input type="text" value="Buscar" name="s" id="s" onfocus="if(this.value=='Buscar')this.value=''" onblur="if(this.value=='')this.value='Buscar'" />
</form>

Ahora ya tenemos nuestro buscador hecho. Este paso es muy importante (todos lo son), ya que con el buscador estamos invitando a los usuarios a mantenerse dentro de nuestra página cuando se encuentren con este error.

Entonces sólo nos falta darle estilos a nuestra página. Para eso abriremos nuestro archivo style.css y usaremos los siguientes divs:

body
.logo
.buscador

Y la estructura de nuestro 404.php será la siguiente:

<div class="logo">

</div>
<div class="mensaje">

</div>
<div class="buscador">
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input type="text" value="Buscar" name="s" id="s" onfocus="if(this.value=='Buscar')this.value=''" onblur="if(this.value=='')this.value='Buscar'" />
</form>
</div>

Con esto ya está listo nuestro archivo 404.php, pero si lo abrimos no veremos nada interesante :S. Lo que haremos ahora será agregar algunas cosas al mismo, de esta forma:

Primero agregaremos el mensaje de error, algo como esto:

<h2>Error 404</h2>
<p>Haz llegado a esta página porque la que buscabas no la hemos encontrado, tal vez haya sido borrada o haz escrito mal su dirección.</p>
<p>Intenta realizar una nueva busqueda en el buscador que se encuentra más abajo.</p>

Eso es muy simple y ustedes pueden modificarlo como quieran, ahora comenzaremos a agregarle estilos a nuestra página y, como dije antes, me baso en los colores del blog para que no desentonen con lo demás. Lo primero que hago es definir el color de fondo y el ancho de la página, agregando estilos a la etiqueta body, así:

body {background: #E8E8E8 ; width: 1000px; margin: 20px auto;}

Ahora pondremos el logo, esto es lo más divertido, ya que es lo más difícil, podemos hacerlo de varias formas, pero yo lo hice de tal forma que sólo el lugar donde aparece el nombre tenga la url para enviar de vuelta a la página principal, de esta forma:

.logo {background: #E8E8E8 url(url-del-logo) no-repeat top left; height: 180px;}
.logo h1 {margin: 25px 0 0 200px; text-indent: -1000px}
.logo h1 a {display: block; height: 50px;}

Con eso, por lo menos en mi caso, logré hacer que el logo se viera "decente". Ahora continuaremos con el buscador y con esto terminamos nuestro primer intento con la página. El buscador es grande, la idea es que sea bien visible, y lo hacemos de esta forma:

.buscador {margin-left: 150px}
.buscador input {width: 600px;}

Con esto hice que el buscador estuviera 150px alejado del borde izquierdo y además que el cuadro de busqueda midiera 600px.

Y bueno, eso es todo. Ahora les dejo el código completo que usé para la página, yo no la hice para WP, hice una web estática, es por eso que uso una hoja de estilos distinta.

La plantilla HTML quedó de esta forma:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Error 404 - No encontramos la página</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="Feed de Blooging" href="http://feeds.feedburner.com/Blooging" />
<link rel='index' title='Blooging' href='http://programoweb.com' />
</head>
<body>
<div class="logo">
<h1><a href="http://www.programoweb.com" title="Programo Web">Programo Web</a></h1>
</div>
<div class="mensaje">
<h2>Error 404</h2>
<p>Haz llegado a esta página porque la que buscabas no la hemos encontrado, tal vez haya sido borrada o haz escrito mal su dirección.</p>
<p>Intenta realizar una nueva busqueda en el buscador que se encuentra más abajo.</p>
</div>
<div class="buscador">
<form method="get" id="searchform" action="http://programoweb.com/">
<input type="text" value="Escribe un término de busqueda" name="s" id="s" onfocus="if(this.value=='Escribe un término de busqueda')this.value=''" onblur="if(this.value=='')this.value='Escribe un término de busqueda'" />
</form>
</div>
</body>
</html>

Y la hoja de estilos así:

body {background: #E8E8E8 ; width: 1000px; margin: 20px auto;}

.logo {background: #E8E8E8 url(http://www.programoweb.com/wp-content/themes/Blooging-it!/imagenes/header-bg.png) no-repeat top left; height: 180px;}
.logo h1 {margin: 25px 0 0 200px; text-indent: -1000px}
.logo h1 a {display: block; height: 50px;}

.buscador {margin-left: 150px}
.buscador input {width: 600px;}

Demo de la página

Ahora podemos esperar al otro post, ahí agregaremos la suscripción al feed y los últimos posts.

]]> http://programoweb.com/error-404-primer-intento.html/feed 3 Eliminar utm_source de la URL con htaccess http://programoweb.com/eliminar-utm_source-url-htaccess.html http://programoweb.com/eliminar-utm_source-url-htaccess.html#comments Mon, 24 May 2010 22:19:36 +0000 JuanK http://programoweb.com/?p=1460 A través de Sentido Web encuentro una excelente forma de eliminar utm_source de la URL, usando htaccess. Según explica él en su post, este parámetro agregado a la url puede crear contenido duplicado, aunque usando la etiqueta canonical no debería haber problema, nunca está demás conocer nuevas alternativas.

]]> http://programoweb.com/eliminar-utm_source-url-htaccess.html/feed 1 Tabs con jQuery y CSS http://programoweb.com/tabs-con-jquery-y-css.html http://programoweb.com/tabs-con-jquery-y-css.html#comments Sun, 23 May 2010 04:14:38 +0000 JuanK http://programoweb.com/?p=1452 Desde hace un tiempo empezé a amar jQuery y todo su potencial y como siempre quiero aprender algo nuevo, estuve buscando tabs con jQuery y CSS simples, fáciles de usar y que cumplan bien su función.

Haciendo eso encontré esto: Simple Tabs with CSS & jQuery, y me encantaron. Son tan simples que hasta un gato puede hacerlas (?), pero lo bueno es que son 100% funcionales y utilizan un efecto fadeIn al presionar una tab, lo que las hace agradables a la vista.

Para implementarlas sólo debemos hacer lo siguiente:

Primero creamos la estructura de nuestras tabs, de la siguiente forma:

<ul class="tabs">
<li><a href="#tab1">Galería</a></li>
<li><a href="#tab2">Formulario</a></li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">
Aquí va tu galería
</div>
<div id="tab2" class="tab_content">
Aquí tu formulario
</div>
</div>

Ahora, debemos agregar los scripts a nuestra página, que son 2:

jQuery

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>

Script tabs

<script type='text/javascript' src='http://blooging.googlecode.com/files/tabsjquery.js'></script>

Como ya sabemos, utilizamos jQuery desde Google, aunque podríamos utilizarlo perfectamente desde Microsoft, pero no lo usemos desde nuestro hosting, ya que es un completo desperdicio.

Por último, pero no menos importante, el CSS:

CSS de las Tabs

ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}

CSS contenido de las Tabs

.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}

El CSS es completamente configurable y sólo depende de nuestra imaginación.

Demo

]]> http://programoweb.com/tabs-con-jquery-y-css.html/feed 2 Usar jQuery desde Microsoft CDN http://programoweb.com/usar-jquery-microsoft-cdn.html http://programoweb.com/usar-jquery-microsoft-cdn.html#comments Sun, 16 May 2010 00:58:30 +0000 JuanK http://programoweb.com/?p=1448 En este época donde todo es dominado por Google, incluso el uso de librerías AJAX, Microsoft no quiere dejarse vencer tan fácilmente y es por eso que ha liberado el uso de jQuery desde su propio CDN.

Ya mucho se ha hablado sobre la velocidad de carga de un sitio, que debe ser buena, ya que es un factor de posicionamiento, y gran parte de los desarrolladores han optado por utilizar las librerias desde Google, ya que su servicio es muy rápido, pero ¿usarlas desde Microsoft tendrá alguna diferencia?

La diferencia, en velocidad, es muy poca, en algunos lugares en mejor que en otros, por lo tanto no creo que sea mala idea probarlo.

Para agregarlo a nuestra web tan solo debemos agregar esta línea de código:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>

Recuerda que no debes agregar este framework si ya utilizas el de Google, ya que sería un completo desperdicio de tiempo.

Si programas en ASP deberías darte una vuelta por su web, donde encontrarás otro framework con el cuál trabajar.

]]> http://programoweb.com/usar-jquery-microsoft-cdn.html/feed 2 Crear RSS con PHP y MySQL http://programoweb.com/crear-rss-con-php-y-mysql.html http://programoweb.com/crear-rss-con-php-y-mysql.html#comments Wed, 05 May 2010 18:08:47 +0000 JuanK http://www.blooging.net/?p=1424 En Desarrollo Web encontramos un excelente tutorial sobre como crear un RSS con PHP y MySQL, para que tu feed se actualize dinámicamente y no debas darte el trabajo de actualizarlo a mano. En el tutorial nos muestran los pasos a seguir y el script para hacerlo facilmente.

]]> http://programoweb.com/crear-rss-con-php-y-mysql.html/feed 4