Xnview, Herramienta de captura y conversión de imágenes

XnView es una herramienta de captura y conversión de imágenes excelente y muy útil para desarrolladores web. Es una aplicación que se ofrece como Freeware para uso privado con carácter no comercial o con propósitos educacionales o para organizaciones sin ánimo de lucro. Es una herramienta realmente sencilla de manejar y muy útil para realizar capturas de pantalla para incorporar a manuales de usuarios, wikies o blogs. Soporta mós de 400 formatos de imagen ofrece algunas utilidades como reescalado, rotación y cortado de imagen, etc. Xnview se ejecuta en Windows, MacOS X, Linux x86, Linux ppc, FreeBSD x86, OpenBSD x86, NetBSD x86, Solaris sparc, Solaris x86, Irix mips, HP-UX, AIX.

Captura

XnView puede ser descargado desde esta página y se instala fácilmente. La funcionalidad que más me gusta es la de captura de pantalla, para lo cual hay que hacer click en la imagen de la cámara y pulsar F10, Luego, con el mouse puedes seleccionar un área de la pantalla capturada y guardarla con el formato que desees. (Excelente para hacer documentación). Para los usuarios de windows vista, deben bajarse la última versión, porque la versión anterior se cuelga aunque la ejecute como distribuidor.

Buen tutorial JavaScript Orientado a Objetos

En esta página (http://mckoss.com/jscript/object.htm) pueden encontrar un buen tutorial sobre javascript orientado a objetos . En mi poca experiencia programando con orientación a objetos en javascript me he dado cuenta de la gran potencia que tiene y sobretodo para aquellos que realizamos programación OO en otros lenguajes como PHP, C# o Java, es muy adecuado seguir el mismo paradigma en la parte de cliente. Además, hoy en dia, muchas librerías de javascript como prototype, scriptaculous y otras vienen orientadas a objetos, con lo cual, si nuestra aplicación es OO, especificar la misma en diagramas UML es muy fácil.

De manera resumida, para programar una clase javascript lo primero que hay que elegir es el nombre (Ej. Usuario), definir una función para el constructor con el mismo nombre, y agregar los métodos y atributos. Para la creación de los métodos tres formas de hacerlo. La primera, declarar las funciones anidadas en la declaración de la función de la clase, la segunda, declarar una variable por cada función usando this.variable y asignarle una función existente, y la última, asignar los métodos a través del atributo prototype. Aqui pongo dos ejemplos básicos.

Declaración anidada de métodos

function Usuario(){

this.crear=function crear(nombre){

//codigo de la función

}

}

Métodos mediante atributos.

function Usuario(){

this.crear=crearUsuario;

}

function crearUsuario(nombre){

//codigo de la función

}

Declaración mediante prototype.

function Usuario(){

}

Usuario.prototype.crear=function crearUsuario(nombre){

//codigo de la función

}

Mis preferidos son: Declaración anidada de métodos cuando la cantidad de métodos no es mucha y en general son cortos. Y la tercera, para cuando la clase es demasiado grande.

Fin de la vida de PHP4

Leo en php.net que el pasado 13 de julio se cumplieron 3 años de la liberación de PHP5,  el cual es actualmente rápido, estable y está en producción. PHP6 ya viene en camino y PHP4 se acerca a su fin. El equipo de desarrollo seguirá dando soporte hasta finales del 2007 y despues del 31/12/2007 no van a sacar nuevas versiones. Se realizarán correcciones de problemas de seguridad críticos dependiendo de los casos hasta agosto 08 de 2008.

Lista de Herramientas de desarrollo web

Como desarrollador e ingeniero de desarrollo de aplicaciones web, y con la experiencia ganada en los años previos usando software open source, he llegado a un utilizar un conjunto de herramientas que para mi son fundamentales y mi constituyen la base de desarrollo de aplicaciones. En esta lista me limitaré a los desarrollos con php, mysql y apache.Herramientas de Edición

Eclipse: Eclipse es uno de los editores open source más utilizados en entornos java junto con otras herramientas como netbeans. Pero no solo se limita a este lenguaje. Eclipse tiene un módulo para php llamado PDT (PHP Develpment Tool) (descargar PDT). Es un framework abierto que puede es extendido por la comunidad open source y tiene diferentes módulos que permiten cubrir todo el ciclo de vida de los proyectos. Este módulo de PHP es muy completo y da un soporte al desarrollo orientado a objetos excelente que no deja nada que envidiar a otras herramientas comerciales. Para que el sistema de reconocimiento de clases funcione adecuadamente, lo único que hay que hacer es documentar adecuadamente las clases y usar las directivas de documentación como @return para los métodos que devuelven objetos.

Scite: Editor de código basado en texto, contiene plugins para reconocimiento de muchos lenguajes de programación (ADA, C++, Perl, PHP, Javascript, etcc), algunas funciones de completado e indentación de código. Es muy útil para realizar pequeños cambios que no requieren de un entorno gráfico completo. Es una buena alternativa al Notepad para otras labores de edición de texto en windows.

Herramientas Complementarias

Firefox: Es una herramienta para mi fundamental e impresindible. Actualmente se tienen muchos plugins para desarrolladores que facilitan las tareas enormemente. Lo verdaderamente importante es ver Firefox como algo más que un navegador, para ello, voy a listar a continuación la lista de plugins que a este momento son importantes para el desarrollo de aplicaciones web.

  • view source chart: Crea un diagrama en capas de la estructura HTML de una página web

  • jsview: Permite ver el código de las páginas externas (enlazadas) a una página web. Como hojas de estilo, ficheros de javascript, etc.

  • FireBug: Herramienta de depuración de javascript. Muy útil pues permite visualizar los errores y cargar el código javascript.

  • fireFTP: Integra un cliente de transferencia de ficheros. Trabaja con SSL, permite hacer sincronización de directorios etc.

  • Web Developer: Esta extensión ofrece herramientas a los desarrolladores web para aprender y depurar sitios web.

  • del.icio.us Complete: Herramienta para guardar y gestionar tags en del.icio.us

  • IP: Muestra la dirección IP de salida a Internet

  • Extensión para medir areas de página

  • Server Spy Permite identificar el tipo de servidor web donde nos estamos conectando. (Ej. Apache 2.2.2, IIS etc).

  • ColorZilla Este plugin permite “capturar” valores de colores de una página web mediante un gotero. Muy útil para los diseñadores.

  • JavaScript Debugger: Depurador de javascript. Permite colocar puntos de ruptura y hacer seguimiento paso a paso de la ejecución de código. Excelente para cuando los scripts cascan y no sabemos exáctamente donde puede estar el fallo. Es un complemento de FireBug que tiene una consola muy buena para ver los errores de javascript.

De la lista anterior, los que yo más utilizo en desarrollo son, FireBug, fundamental para el desarrollo de aplicaciones ajax, pues nos da una vista de cada petición que se envía al servidor, los parámetros pasados y la respuesta recibidia. Adicional a ello, nos ofrece información sobre el peso de la página (tamaño), lista de ficheros css y javascript que se descargan, imágenes y otras herramientas.

Como segunda herramienta imprescindible es la herramienta de desarrollo web, de esta herramienta utilizo principalmente tres funciones, las relacionadas con las hojas de estilo en cascada que permite ver que estilos tienen los elementos html que visualizamos (permite “depurar” las hojas de estilo), la herramienta de formulario para determinar nombres, campos ocultos, etc y la validación de código local, para validar nuestro código generado (Depurar html).

La herramienta de ColorZilla y la extensión para medir áreas son útiles para los diseñadores pues permiten capturar colores y obtener los valores rgb y medir áreas para la elaboración de imágenes. del.icio.us aunque no es una herramienta de desarrollo, para mi es fundamental para no perder la referencia a tutoriales, guias, blogs, herramientas, metodologías y demás que en cualquier momento podemos necesitar.

Herramientas de Soporte

Subversion: Servidor de control de versiones, es altamente recomendable que por pequeño que sea un proyecto, mantengamos un sistema de control de versiones. Subversion tiene diferentes aplicaciones cliente, yo utilizo tortoise svn.

Argo UML: Herramienta de diseño con UML, es una herramienta open source que permite documentar nuestros desarrollos orientados a objetos. Lo único que actualmente no permite hacer y que es fundamental son los diagramas de secuencia. O por lo menos, yo no he encontrado una forma de hacerlos adecuadamente.

Herramienta de Gestión de bugs: Fundamental este tipo de herramientas para hacer u nseguimiento a los fallos encontrados y nuevas características pedidas por los clientes. FlySpray es una buena herramienta y la que uso actualmente.

Herramienta de Documentación:
Para escribir los proyectos, documentos y demás yo personalmente utilizo dokuwiki y wordpress cada uno con propósitos diferentes.

Widgets de WordPress

Este post resume mi lectura acerca de widgets de wordpress de automattic.com creadores de los mismos. Un widget de wordpress es un trozo pluggleable (que se puede conectar) para un sidebar. A partir de la versión 2.2, el plugin de widget forma parte del core de wordpress.

Tener habilitado wordpress para soportar widgets no es suficiente, se necesia que los temas estén habilitados para utilizarlo, en el artículo “widgetizing themes” hay un tutorial que indica como hacerlo.

Los widget de wordpress como se dijo anteriormente, se usan en los sidebar, lo primero que debemos hacer es identificar como está implementado nuestro sidebar y como está dividida cada sección. En la mayoría de los casos en los temas que nos encontramos en internet, estos widget están implemementados en listas no ordenadas html, esta estructura puede ser fácilmente adaptada via hojas de estilo en cascada (css) para lograr direntes tipos de efectos.

Para hacer un tema conciente de los widget, basta con agregar en la parte de código que genera el sidebar lo siguiente.

<?php if ( !function_exists('dynamic_sidebar')|| !dynamic_sidebar() ) : ?>
 <!-- codigo sidebar estático-->
<?php endif; ?>

La instrucción dynamic_sidebar() esta disponible en wordpress habilitados con widget y permite que el plugin de widgets fije dinámicamente el contenido del sidebar.

El siguiente paso es registrar el sidebar (Wodpress version 2.0 o superior) para ello, edite el ficher function.php (o creelo si no está) y agrege:

<?php
if ( function_exists('register_sidebar') )
    register_sidebar();
?>

Esto permitirá al plugin conocer que su tema necesita exactamente un sidebar y agregará en la parte administrativa presentación de wordpress un botón widget que le permitirá configurar dinámicamente su barra lateral de manera gráfica usando drag & drop.

El plugin de widget soporta además otras formas de sidebar y permite configurar el contenedor del título y del widget, para personalizar las salidas de los widget, usamos una versión extendida de register_sidebar.

<?php

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<div class="title">',
        'after_title' => '</div>',
    ));
?>

La estructura de before_widget es un poco más compleja, el valor por defecto es incluye las directivas %1$s y %2$s que corresponden al id y a la clase respectivamente (El ID debe ser único en todo el documento html). De esta forma, el registro del sidebar sería:

if ( function_exists('register_sidebar') )

    register_sidebar(array(

    'before_widget' => '<div id="%1$s" class="widget %2$s">',

    'after_widget' => '</div>',

    'before_title' => '<div class="title">',

    'after_title' => '</div>',

    ));

?>

Para registrar varios sidebars use register_sidebars(n) y en el sidebar indique el sidebarque desea usar en la instrucción dynamic_sidebar(Número Sidebar).

Finalmente, para implementar nuestros propios widgets, creamos una función en el tema y la registramos como widget.

function widget_mytheme_search() {
?>
    << PASTE YOUR SEARCH FORM HERE >>
<?php
}
if ( function_exists('register_sidebar_widget') )
register_sidebar_widget(__('Search'), 'widget_mytheme_search');

Para más información sobre como hacer widgets puede leer el documento How I do Develop a Widget. Yo luego estaré escribiendo algo del tema, ahora me voy a jugar un rato con mi temas para widgetizarlos… que termino más raro. :-).

WordPress y Bucle

WordPress utiliza el bucle de post para permitir manipular los mismos. De acuerdo al funcionamiento de wordpress, el número de post que presenta depende donde se ejecute. Ej. Si se llama index.php se muestran los más recientes, pero si se está en una categoría, se muestran los más recientes en esa categoría.

Como necesitaba mostrar los más recientes, implementé una funcion que recupera los registros y usa start_wp para hacer el tratamiento de los mismos.

function plugin_showlast($n){
$postslist = get_posts(‘numberposts=’.$n.’&order=ASC&orderby=post_title’);
foreach ($postslist as $post) :start_wp(); ?>
<li><a href='<?php the_permalink();?>’><?php the_title(); ?></a></li>
<?php endforeach;
global $wp_query;
// Since the old style loop is being used, advance the query iterator here.
$wp_query->rewind_posts();
}

Esta función, tiene la particularidad de que saca los $n últimos dependiendo del sitio donde se ejecute, con lo cual la función  get_posts es contextual.

La instrucción:

$wp_query->rewind_posts();

Se usa para reiniciar la variable que contiene los post del contexto, me vi oblicado a ponerla porque se presenta un problema al intentar ver un registro único para hacer comentarios, el bucle principal de single.php donde saca un mensaje que indica que no se han encontrado registros con el criterio utilizado.  (Cuando uso esta función antes de la ejecución del bucle por defecto de wordpress).

Inconsistencia en $_SERVER PHP

He estado programando un plugin para wordpress con un servidor apache 2.2 ejecutandose en el puerto 8080 y php5.2.1. Pero esta mañana se me presentó un problema con un código que aparentemente no tiene nada de malo.

El código es el siguiente.

var GB_ROOT_DIR = “<?php echo ‘http://’.$_SERVER[‘SERVER_NAME’].’:’.$_SERVER[‘SERVER_PORT’].$this->gbPath?>”;

El Problema

Bajo ciertas condiciones en WordPress al cargar una entrada específica (usando single.php), la variable $_SERVER[‘SERVER_PORT’] me da el valor de 80, en lugar de 8080 que es donde escucha el servidor web.

La Solución

Luego voltear un rato, encontré lo siguiente:

Aunque mi servidor está en el puerto 8080 (La directiva Apache tiene este valor -Listen 8080-), la variable ServerName está en el puerto 80. (ServerName server.server.com:80).

Cambiando el valor de server.server.com a 8080 se solucionó el problema

El lio es que esto solo se presentó al mostrar las entradas del blog individuales, las entradas de categorías y el index no presentaron ningún problema.

El contenido de la variabel $_SERVER es el siguiente.

Array ( [REDIRECT_STATUS] => 200
[HTTP_ACCEPT] => image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/x-shockwave-flash, */*
[HTTP_REFERER] => http://localhost:8080/blogs/ws/2007/05/25/pepito-perez-2/59
[HTTP_ACCEPT_LANGUAGE] => es
[HTTP_ACCEPT_ENCODING] => gzip, deflate
[HTTP_USER_AGENT] => Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; InfoPath.1)
[HTTP_HOST] => localhost:8080
[HTTP_CONNECTION] => Keep-Alive
[HTTP_COOKIE] => rated_23=1; dbx-postmeta=grabit:0+|1+|2+|3+|4+|5+|6+&advancedstuff:0-|1-|2-; dbx-pagemeta=grabit:0-|1-|2-|3-|4-|5-|6-|7-&advancedstuff:0- [PATH] => C:\\WINDOWS\\SYSTEM32;C:\\WINDOWS;C:\\WINDOWS\\SYSTEM32\\WBEM;C:\\Archivos de programa\\Microsoft SQL Server\\80\\Tools\\BINN;C:\\Archivos de programa\\Panda Software\\Panda Antivirus Platinum\\;c:\\Archivos de programa\\Microsoft SQL Server\\90\\Tools\\binn\\;C:\\Archivos de programa\\MySQL\\MySQL Server 5.0\\bin
[SystemRoot] => C:\\WINDOWS
[COMSPEC] => C:\\WINDOWS\\system32\\cmd.exe
[PATHEXT] => .COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JS;.JSE;.WSF;.WSH [WINDIR] => C:\\WINDOWS
[SERVER_SIGNATURE] =>
[SERVER_SOFTWARE] => Apache/2.2.4 (Win32) PHP/5.2.1
[SERVER_NAME] => localhost [SERVER_ADDR] => 127.0.0.1
[SERVER_PORT] => 80
[REMOTE_ADDR] => 127.0.0.1
[DOCUMENT_ROOT] => D:/apacheweb/htdocs
[SERVER_ADMIN] => diego.acosta@xxxxxx.org
[SCRIPT_FILENAME] => D:/apacheweb/htdocs/blogs/ws/index.php [REMOTE_PORT] => 2809
[REDIRECT_URL] => /blogs/ws/2007/05/25/pepito-perez-2/59 [GATEWAY_INTERFACE] => CGI/1.1
[SERVER_PROTOCOL] => HTTP/1.1 [REQUEST_METHOD] => GET
[QUERY_STRING] =>
[REQUEST_URI] => /blogs/ws/2007/05/25/pepito-perez-2/59
[SCRIPT_NAME] => /blogs/ws/index.php
[PHP_SELF] => /blogs/ws/index.php
[REQUEST_TIME] => 1180439795 )

Puede observase que [HTTP_HOST] => localhost:8080 y [SERVER_PORT] => 80 tienen valores diferentes.

Fatal error: Call to undefined function get_ipaddress()

Intentando probar el plugin de WP Rating en un servidor web con apache 2.0 y php 5.1 y wordpres 2.1.2 encuento el error anterior.

Buscando en google, las páginas retornadas apuntan al plugin WPPolling de los mismos creadores del plugin. (Ver Resultado en google)

El código de la función es como sigue:

if(!function_exists(‘get_ipaddress’)) {
function get_ipaddress() {
if (empty($_SERVER[“HTTP_X_FORWARDED_FOR”])) {
$ip_address = $_SERVER[“REMOTE_ADDR”];
} …….

Probé usarlo sin hacer la verificación y da errores de al intentar insertar los datos en la base de datos.

Lo absurdo de la programación

LLevo varios dias o ido de la cabeza, o falto de conectración o es que efectivamente muchos manuales no dicen lo que deberían decir.

He estado repasando Ajax, más específicamente con el framewokr de Prototype, y por más que he intentado poner a ejecutar un código, no lo logro. Cuando lees el manual, la cuestión parece muy simple.

No pido mucho, solo el uso de la la función Ajax.Update y un objeto Insertion, pero por más que quice, no me reconocío el parámetro segundo del objeto Insertion. Luego de luchar con diferentes opciones, me he decidido hacerlo con un Ajax.Request.

function showData() {

if($F(‘nombre’).length > 0) {
var url = ‘processForm.php’;
var params = ‘new_name=’ + $F(‘nombre’) +’&version=’ + $F(‘version’);
var ajax = new Ajax.Update(‘contenido,’url,{
method: ‘get’,
parameters: params,
onFailure: reportError,
onComplete : function(resp){
new Insertion.Bottom(‘contenido’,resp.responseText);
}
});

}
return false;
}

Luego, lo típico, que escribí Botton en lugar de Bottom.. Ugrrr… y media hora perdida, además porque el depurador de javascript que uso en el firefox no me daba ningún error. (FireBug). Por otro lado, pegandome con los plugins de WordPress… es la locura con la de funciones, filtros y actions que se tienen.