Archive for the 'Código' Category

Ponle color a tu nano

No es algo nuevo pero desconocia que al editor de texto Nano tenía la posibilidad de colorear código, estaba levantando una máquina en Amazon EC2 para Chile Ayuda y al usar el editor venía por defecto, por lo que investigué un poco para habilitarlo en mis otras máquinas.

Por defecto viene solo para algunas extensiones y están ubicadas en:

/usr/share/nano/

Descargué algunas otras me son útiles desde el proyecto nanosyntax:

cd /usr/share/nano
sudo wget http://nanosyntax.googlecode.com/svn/trunk/syntax-nanorc/css.nanorc
sudo wget http://nanosyntax.googlecode.com/svn/trunk/syntax-nanorc/js.nanorc

El mismo sitio tiene dos opciones para PHP pero finalmente me decidí por el que encontré en el wiki de gentoo

sudo nano /usr/share/nano/php.nanorc
syntax "php" "\.php[2345s~]?|\.ctp$"

#html
color yellow "</?[a-z0-9]+"
color yellow ">"

#functions
color white "\<[a-z_][A-Za-z_]*\("

#vars
color brightred "\$[A-Za-z_]*"
color cyan "->[A-Za-z_]*"
color green "->"

#keywords
color green "\<(array|as|class|compact|empty|extends|null|parent)\>"
color yellow "\<(empty|endforeach|endif|for|foreach|if|return|var)\>"
color magenta "\<(function)\>"
color brightmagenta "\<(echo)\>"

#operators
color yellow "\s(&&|&=|<|==|=>|\|\|)\s"
color yellow "(=|::)"

#types
color red "(true|false)"
color red "\s[0-9]+\s"

#strings
color red "'([^'\\]*(\\.[^'\\]*)*)'"
color red ""([^"\\]*(\\.[^"\\]*)*)""

#parens/brackets/braces
color magenta "(\(|\))"
color magenta "(\[|\])"
color magenta "(\{|\})"

#quotes
color white "'"
color white """

#comments
color brightblue "^//.*"
color brightblue "\s//.*"
color brightblue start="/\*" end="\*/"

# Trailing whitespace
color ,green "[[:space:]]+$"

#php tags
color magenta "(<\?(php)?|\?>)"

Luego tenemos dos opciones para habilitarlo, la primera para todo el sistema es agregar al final de /etc/nanorc las siguientes lineas:

include "/usr/share/nano/php.nanorc"
include "/usr/share/nano/man.nanorc"
include "/usr/share/nano/c.nanorc"
include "/usr/share/nano/nanorc.nanorc"
include "/usr/share/nano/css.nanorc"
include "/usr/share/nano/sh.nanorc"
include "/usr/share/nano/java.nanorc"
include "/usr/share/nano/patch.nanorc"
include "/usr/share/nano/python.nanorc"
include "/usr/share/nano/html.nanorc"
include "/usr/share/nano/perl.nanorc"
include "/usr/share/nano/ruby.nanorc"
include "/usr/share/nano/js.nanorc"

O para tu usuario creando en tu carpeta home el archivo .nanorc y agregando las mismas líneas

nano ~/.nanorc
include "/usr/share/nano/php.nanorc"
include "/usr/share/nano/man.nanorc"
include "/usr/share/nano/c.nanorc"
include "/usr/share/nano/nanorc.nanorc"
include "/usr/share/nano/css.nanorc"
include "/usr/share/nano/sh.nanorc"
include "/usr/share/nano/java.nanorc"
include "/usr/share/nano/patch.nanorc"
include "/usr/share/nano/python.nanorc"
include "/usr/share/nano/html.nanorc"
include "/usr/share/nano/perl.nanorc"
include "/usr/share/nano/ruby.nanorc"
include "/usr/share/nano/js.nanorc"

Unable to load dynamic library php_curl.dll – No se puede encontrar el módulo especificado

El problema para cargar la librería php_curl.dll es ya conocido, aún así no pude resolverlo por largo tiempo hasta hoy, aunque probé varias de las soluciones, finalmente me encontré con un post en la página de Paralles que solucionó todo.

El problema no era apache ( estoy con Apache 2.2.16 ), si no PHP 5.2.14, que por alguna razón tiene problemas específicamente con esta librería, la solución:

  1. Descargar PHP 5.2.13 zip package y desde los archivos que vienen acá
  2. Copiar libeay32.dll y ssleay32.dll ( que es el origen de muchos problemas similares con esta librería ) en la carpeta windows/system32
  3. Copiar php_curl.dll a la carpeta ext que tienes en tu carpeta instalada de PHP 5.2.14 y reemplazar el que viene con esta versión

Y todo debería quedar funcionando correctamente.

jQuery plugin: Autocomplete actualizado para Internet Explorer 7 y 8

El conocido y muy utilizado jQuery Autocomplete Plugin tiene varios problemas con Internet Explorer 8 y 7, primero el cursor aparece al comienzo del campo de texto al seleccionar una opción y luego al utilizar la opción multiple funciona bien al seleccionar con las “flechas” y apretar ENTER, pero al seleccionar con un click una opción funciona de forma incorrecta, aquí el código del plugin modificado, puede que agregue luego otra versión con otras mejoras.

Probado con jQuery 1.4.2

Continue reading ‘jQuery plugin: Autocomplete actualizado para Internet Explorer 7 y 8′

Transición de imagenes o slideshow con jQuery

Para un par de sitios (aún no los lanzamos así que una vez que lo hagamos lo agrego al post) necesitábamos que existiera una transición de imágenes con un fade, algo bien simple, por lo que me puse a buscar un buen plugin de jQuery, pero nada era lo suficientemente simple y limpio, por lo que buscando encontre un muy buen post para construir uno, lo tomé como base y lo arreglé un poco para poder configurar el tiempo entre transiciones, el tiempo que dure el difumado y no tener que agregar css, quedando así:

jQuery.SimpleSlide.js en GitHub
/**
 *
 * Copyright (c) 2010 Pedro Fuentes ( http://pedrofuent.es )
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 **/

jQuery.fn.simpleSlide = function(a){

	a				= a || {};
	a.duration		= a.duration || 5000;
	a.transition	= a.transition || 1000;
	a.stopAt		= a.stopAt || false;
	a.element		= a.element || "img";

	var	c	= $(this);

	$(c).css("position","relative");

	$(a.element,$(c))
		.css({
			'position'	: 'absolute',
			'top'		: '0px',
			'left'		: '0px',
			'z-index'	: '8'
			})
		.find(":first")
			.addClass("slide-active")
			.css('z-index','10');

	var cnt			= 0;

	var interval	= setInterval(function(){

			if(!isNaN(a.stopAt)){
				cnt++;
				if(cnt==a.stopAt){
					clearTimeout(interval);
				}
			}

			var $active = $(a.element+".slide-active",$(c));

			if($active.length == 0) $active = $(a.element+":last",$(c));

			var $next	= $active.next().length ? $active.next() : $(a.element+":first",$(c));

			$active
				.addClass("slide-last-active")
				.css('z-index','9');

			$next
				.css({opacity: 0.0})
				.addClass("slide-active")
				.css('z-index','10')
				.animate({opacity: 1.0}, a.transition, function(){
					$active
						.removeClass('slide-active slide-last-active')
						.css('z-index','8');
				});
		}, a.duration);

}

¿Como funciona? Simple, un contenedor (ej. un div) y dentro una lista de imágenes:


<div id="contenedor">
		<img src="imagen_1.jpg" alt="Imagen 1" />
		<img src="imagen_2.jpg" alt="Imagen 2" />
		<img src="imagen_3.jpg" alt="Imagen 3" />
		<img src="imagen_4.jpg" alt="Imagen 4" />
		<img src="imagen_5.jpg" alt="Imagen 5" /></div>

y obviamente con jQuery previamente cargado

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>

para que se inicie la transición cuando cargue la página

	$(document).ready(function(){

		$("#contenedor").simpleSlide();

	});

si quieren configurar el tiempo en que demora en iniciar la nueva transición (duration) o el tiempo que dura el efecto (transition) deberían llamarlo así

	$(document).ready(function(){

		$("#contenedor").simpleSlide({duration:5000,transition:1000});

	});

Continue reading 'Transición de imagenes o slideshow con jQuery'

Agregar paginación a Comentarios en WordPress

Hace unos días me enteré por twitter que Charla Técnica, proyecto de mi amigo Norman Varas, tenía problemas en su migración desde Blogger a WordPress, principalmente porque estaba usando un hosting compartido que no aguantaba el alto tráfico que tiene este sitio y además el problema de estar probando directamente sobre el sitio en producción plugins y cambios al mismo por lo que ahora ya además cuenta con un sitio de desarrollo que evitará generar problemas como en los días antes de la migración.

Por ahora está usando uno de mis servidores esperando la migración final a uno propio, aproveché de ayudarlo con algunas cosas, entre otros habilitando WP Super Cache, que ayudaría a bajar la carga que se lleva el servidor sobre todo en este fin de semana que jugó Chile contra Paraguay (2-0).

Pero uno de los grandes temas que le preocupaba a Norman era no tener paginación para los comentarios, que fácilmente sobrepasan los 500 en algunos artículos, por lo que me puse a buscar algún plugin que ayudara en esta tarea, probé varios, ninguno cumplía con lo requerido, algunos cambiaban la forma en que se mostraban inclusive los comentarios, por lo que opté por buscar una solución “a mano”, y me encontré con la grata sorpresa de que era más simple de lo que pensaba.

Es así como encontré la función paginate_comments_links de muy simple uso, bastaba ir dentro del template que están usando a comments.php y agregar esta función, en este caso sobre y bajo los post para facilitar el acceso a los usuarios.

<div class="navigation">
<span>Páginas:</span>
<?php paginate_comments_links(); ?>
</div>
<ol class="commentlist">
<?php wp_list_comments(); ?>
</ol>
<div class="navigation">
<span>Páginas:</span>
<?php paginate_comments_links(); ?>
</div>

y agregando un poco de estilo con css

.navigation{
clear:left;
margin:1em 0;
padding:1em;
height:21px;
}

.navigation span{
border:1px solid #FFFFFF;
display:block;
float:left;
margin-right:0.1em;
padding:0.2em 0.5em;
}

.navigation a{
border:1px solid #FFFFFF;
display:block;
float:left;
margin-right:0.1em;
padding:0.2em 0.5em;
}

.navigation .page-numbers{
border:1px solid #9AAFE5;
text-decoration:none;
}

.navigation a:hover{
background:#2E6AB1 none repeat scroll 0 0;
border:1px solid #2E6AB1;
color:#FFFFFF;
font-weight:bold;
}

.navigation .current{
background:#2E6AB1 none repeat scroll 0 0;
border:1px solid #2E6AB1;
color:#FFFFFF;
font-weight:bold;
}

.navigation .next{
font-weight:bold;
}

.navigation .prev{
font-weight:bold;
}
.navigation .dots{
border:0;
}

con esto obtenemos para un post de 9 páginas

Paginación Ejemplo 1

Pero el espacio útil para mostrar páginas es más ancho, entonces me puse a buscar como poder controlar para esta función la cantidad de páginas a mostrar, así fui a la función que utiliza paginate_comments_links para generar la paginación que es paginate_links, que tal como se explica en la documentación, puede ser útil para crear listado de páginas de cualquier área dependiendo de los argumentos que se le pasen a la función.

Para lograr controlar la cantidad de páginas debíamos definir dos variables, end_size y mid_size.

end_size, es la cantidad de páginas que se muestran antes o luego de los puntos suspensivos que se muestran cuando la cantidad de páginas antes y/o despues de la actual supera el valor definido en mid_size.

mid_size, que permite definir cuantas páginas van junto a la página actual, si definimos por ejemplo este valor en 4 antes de la página actual tendremos máximo 4 páginas y luego de la página actual un máximo de 4 páginas.

Como ejemplo cuando nos encontramos con 9 páginas si definimos end_size = 2 y mid_size = 4 veríamos lo siguiente al estar en la página 8:

Ejemplo Paginación 2

Al estar en la página 2:

Ejemplo Paginación 3

Para controlar esto hacemos la siguiente modificación en el código anterior y pueden cambiar los valores a su gusto.

<div class="navigation">
<span>Páginas:</span>
<?php
$pcl_args = array('end_size' => 2,'mid_size' => 4);
paginate_comments_links($pcl_args);
?>
</div>
<ol class="commentlist">
<?php wp_list_comments(); ?>
</ol>
<div class="navigation">
<span>Páginas:</span>
<?php paginate_comments_links($pcl_args); ?>
</div>

Como ejemplo en caso de confusión, si quiero que se muestren un máximo de 13 páginas siempre tendríamos según los ejemplos ya mostrados, end_size = 2 y mid_size = 4, esto nos lleva a una formula:

cantidad_de_paginas = ( end_size * 2 ) + ( mid_size * 2 ) + 1

Y obtendríamos para 15 páginas cuando estamos ubicados en la página 8 algo como esto:

Ejemplo Paginación 4