Joel Gómez

Una imagen “Geek” habla por si sola….

Joel Gómez — Tue, 08 Jun 2010 16:23:37 +0000

LOL….

Catalyst Web Framework – Segunda Parte

Joel Gómez — Fri, 26 Mar 2010 16:58:54 +0000

En el Post anterior jugamos un poco con la creación del proyecto, controladora y vista. Ahora vamos a divertirnos con la modificación de nuestro Helper (Ayudante o Auxiliar de Vistas) TTSite para la inclusión de Javascript y Css.

Helper TTSite encapsula los trozos de lógica correspondientes a la presentación y al acceso a datos y componentes que necesite una vista, haciendo que la vista permanezca de esta forma mucho más simple, reutilizable y mantenible. La lógica de presentación se encarga de formatear datos a través de Template Toolkit para que sean visualizados en una página, mientras que el acceso a datos o componentes implica la obtención de datos. TTSite tiene como debilidad que no podemos incluir Javascript’s o Css’s de manera razonable a una vista en particular (digo razonable porque si tratan de incluirlo entonces éste quedará fuera de la etiqueta de nuestro html generado). Por tal motivo tendremos que hacer unas pequeñas y sencillas modificaciones al Helper.

Antes de proseguir con el ejemplo práctico es obligatorio explicar los Actions Types
Los Actions Types es la forma mediante el cual Catalyst puede leer a la URL en la Controladora para luego hacer Match con los métodos dentro de ella. Los diferentes Actions son los siguientes:

Path
sub metodo : Path(’save’) { }
Hace Match con el método save de la controladora http://localhost:3000/controlador/save esta también se puede usar de forma relativa al controlador en uso
sub metodo : Path(‘/save’) { }
Hace Match con http://localhost:3000/save

Local
sub metodo : Local { }
Hace Match con http://localhost:3000/controlador/metodo no hace falta colocarle los argumentos

Global
sub metodo : Global { }
Es similar a la anterior solo que nuestra URL es http://localhost:3000/metodo se ignora el nombre de la controladora

Regex
sub metodo : Regexp(^save) { }
Este hace uso de expresiones regulares para hacer match con la URL de manera Global, el resultado puede ser el siguiente:

http://localhost:3000/save

http://localhost:3000/save_usuario

http://localhost:3000/save_evento

LocalRegexp
sub metodo : LocalRegexp(^save) { }
Igual que el anterior pero ahora de manera local, la URL puede ser

http://localhost:3000/controlador/save

http://localhost:3000/controlador/save_usuario

http://localhost:3000/controlador/save_evento

Private
sub metodo : Private { }
Este nunca hará Match por la URL, es decir, no se puede acceder a este método mediante la URL, es privado de la controladora.

Buildin-in Actions Special
Estas son acciones predefinida por Catalyst, las cuales son: index, auto, begin, end y default

default
Si Catalyst no consigue o no hace Match con un método en la controladora entonces el método default será ejecutado

index
Este método se ejecuta si el usuario trata de acceder a un método solo colocando en la URL el nombre de la controladora.
Ej, http://localhost:3000/controlador

begin
Una vez que el nombre del controlador ha sido identificado y antes de hacer Match con cualquier otro entonces el método begin se ejecutará

end
Catalyst llamará al método end luego que hace Match con el método pasado por URL y ejecute su contenido

auto
Este método se ejecuta exactamente después del begin pero justo antes de procesar el método que hace Match con la URL

Ahora si podemos para a la práctica
Por ejemplo, Si quiero usar la vista error.tt2 (ubicada en root/src) la cual es propia de TTSite que se utiliza principalmente para cuando se produce algún error en nuestra aplicación entonces debemos hacer lo siguiente:

1.- Modificación al archivo html (ubicado en root/lib/site)

1 [%#
2
3 Parametros (en orden de aparición):
4    js_local     : un bloque de javascript que se incluye inline en head
5    js_ext       : un arreglo de archivos de js a enlazar
6    css_ext      : un arreglo de archivos de CSS a enlazar
7    ccs_local    : un bloque de CSS que se incluye en línea
8    title        : titulo personalizado de la vista
9
10 -%]

Este es un comentario al principio del archivo para los momentos de olvidos

12
13 <html>
14 <head>
15         <title>[% title %]title>
16         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
17         [% FOR sc = js_ext %]
18             <script type="text/javascript" src="[% sc %]">script>
19         [% END %]
20
21         [% IF js_local %]
22             <script type="text/javascript">[% js_local %]script>
23         [% END %]
24
25         [% FOR sc = css_ext %]
26            <link rel="stylesheet" type="text/css" media="screen" href="[% sc %]">
27         [% END %]
28
29 head>
30 <body>
31 [% content %]
32 body>
33 html>

Nótese que el archivo tiene bastante sintaxis de Template Toolkit, el cual nos hace el pase de valores desde la vista hacia la controladora a través del Helper. Además, con esto lo que en realidad estamos haciendo es que en cualquier vista puedo incluir Javascript y/o Css y no tenemos que incluirlo en todas las vistas de la aplicación.

2.- Modificación al archivo error.tt2 (ubicado root/src)

1 [% js_local = BLOCK %]
2    $("document").ready(function(){
3         $("div#mainerror").corner();
4     });
5 [% END %]
6 [% js_ext = [
7                 '/static/js/jquery-1.4.2.js',
8                 '/static/js/jquery.corner.js'
9                     ]
10 %]
11
12 [% css_ext = [
13                 '/src/ttsite.css',
14                    ]
15 %]
16
17 [% title = "Mi Título" %]

El código que acabamos de ver lo ubicaremos en la primera línea del archivo, éste cumple con la finalidad de utlizar las variables con formato de Template Toolkit que habiamos colocado en el archivo html (ubicado root/lib/site)

19 <div id="mainerror">
20    <img src="/static/images/warning80×67.png"  alt="error">
21       <p>
22   An error has occurred.  We’re terribly sorry about that, but it’s
23   one of those things that happens from time to time.  Let’s just
24   hope the developers test everything properly before release…
25       p>
26       <p>
27   Here’s the error message, on the off-chance that it means something
28   to you: <span class="error"><a>[% error %]a>span>
29       p>
30 div>

Nótese que he creado una carpeta en root/static llamada js donde se almacenarán todos los javascript y descargué una imagen y la coloqué en la carpeta root/static/images

3.- Modificación al archivo ttsite.css (ubicacion root/src)
En este archivo es donde esté escrito en Template Toolkit lo reemplazamos por el valor que deseado, En mi archivo ttsite.css modifiqué lo siguiente:
[% site.col.page %]  del body reemplazado por #FFFFFF
[% site.col.head %]  del header reemplazado por #E3E6EA
[% site.col.line %]  del header reemplazado por #F08900
[% site.col.head %]  del footer reemplazado por #E3E6EA
[% site.col.line %]  del footer reemplazado por #F08900
[% site.col.message %]  del message reemplazado por #66AA66
[% site.col.error %]  del error reemplazado por #CC4444

Este es el estilo que aplico a un div que coloqué en el archivo error.tt2 y conjuntamente con el Framework Javascript jQuery y con la librería jquery-corner.js saldrá un div centrado en la página con los bordes redondeados

47 div#mainerror{
48     background-color: #E3E6EA;
49     padding: 15px;
50     width: 60%;
51     left: 20%;
52     top: 20%;
53     position: absolute;
54     border: 1px solid #000000;
55 }

4.- Modificamos nuestra controladora llamada Root.pm ubicada en lib/evento/Controller
En el método default eliminamos o comentamos con # la dos líneas que aparecen allí y nuestro método quedará así:

36 sub default : Path {
37     my ( $self, $c ) = @_;
38
39     $c->stash->{error}    = ‘Not Found (404)‘;
40     $c->stash->{template} = ‘error.tt2‘;
41
42 }

Con esto, lo que estamos haciendo es pasarle a la vista error.tt2 la variable error, luego guardamos y solo resta colocar en nuestro navegador una URL que no exista como por ejemplo http://localhost:3000/registro/adios

Con esto considero suficiente la segunda parte del tuto, en la siguiente entrega (haré una pausa por la semana mayor) vamos hacer una página de acceso a usuarios usando base de datos.
Descargue el ejemplo Aquí

Catalyst Web Framework – Primera Parte

Joel Gómez — Tue, 16 Mar 2010 15:47:00 +0000

¿Qué es un Framework?
Es un conjunto de herramientas que están integradas o hacen comunicación entre sí para la resolución de un trabajo en
particular.

¿Qué es MVC?
Es una metodología o estilo para construir aplicaciones que divide la implementación en “Modelo”, “Vista” y “Controlador”. El modelo es la representación de la información con el cual el sistema opera. La vista representa el modelo en un formato de salida para interactuar con el usuario (GUI). El controlador es la parte del sistema que responde a eventos del usuario e interactúa con el modelo con la información de entrada.

¿Qué es Catalyst Web Framework?
Es un Framework de código libre para aplicaciones web programado en Perl y hace uso de MVC. Catalyst no es un lenguaje de programación, es un Framework que integra un sin fin de módulos de Perl.

Instalando Catalyst Web Framework
Existen al menos dos maneras de instalarlo:
1.- Haciendo uso de los repositorios de su distribución:

# aptitude install libcatalyst-perl libcatalyst-engine-apache-perl
libcatalyst-model-cdbi-perl libcatalyst-modules-extra-perl
libcatalyst-modules-perl libcatalyst-view-tt-perl

Con el comando anterior estamos instalando tanto el Framework como algunos módulos extras para la conexión a bases de datos y generadores de vistas como Helpers

2.- Haciendo uso de CPAN

cpan -i Catalyst::Runtime Catalyst::Devel Task::Catalyst
Catalyst::Model::DBIC::Schema Catalyst::View::TT
DBD::SQLite DBIx::Class

Si es la primera vez que ejecutas CPAN entonces, éste le hará una serie de preguntas que no son del otro mundo y a las mayoría de las preguntas basta con darle

Comencemos entonces usar Catalyst

Lo primero que debemos hacer es ejecutar el siguiente comando para crear nuestro proyecto (por seguridad, no ejecute ningún comando de Catalyst como root ni tampoco edite los archivos como root):

# catalyst.pl evento

Tendremos como resultado lo siguiente:

created "evento"
created "evento/script"
created "evento/lib"
created "evento/root"
created "evento/root/static"
created "evento/root/static/images"
created "evento/t"
created "evento/lib/evento"
created "evento/lib/evento/Model"
created "evento/lib/evento/View"
created "evento/lib/evento/Controller"
created "evento/evento.conf"
created "evento/lib/evento.pm"
created "evento/lib/evento/Controller/Root.pm"
created "evento/README"
created "evento/Changes"
created "evento/t/01app.t"
created "evento/t/02pod.t"
created "evento/t/03podcoverage.t"
created "evento/root/static/images/catalyst_logo.png"
created "evento/root/static/images/btn_120x50_built.png"
created "evento/root/static/images/btn_120x50_built_shadow.png"
created "evento/root/static/images/btn_120x50_powered.png"
created "evento/root/static/images/btn_120x50_powered_shadow.png"
created "evento/root/static/images/btn_88x31_built.png"
created "evento/root/static/images/btn_88x31_built_shadow.png"
created "evento/root/static/images/btn_88x31_powered.png"
created "evento/root/static/images/btn_88x31_powered_shadow.png"
created "evento/root/favicon.ico"
created "evento/Makefile.PL"
created "evento/script/evento_cgi.pl"
created "evento/script/evento_fastcgi.pl"
created "evento/script/evento_server.pl"
created "evento/script/evento_test.pl"
created "evento/script/evento_create.pl"

Nos cambiamos a la carpeta que nos acaba de crear que es el mismo nombre del proyecto que se creó en el catalyst

# cd evento

# tree

.
|-- Changes
|-- Makefile.PL
|-- README
|-- evento.conf
|-- lib
|   |-- evento
|   |   |-- Controller
|   |   |   `-- Root.pm
|   |   |-- Model
|   |   `-- View
|   `-- evento.pm
|-- root
|   |-- favicon.ico
|   `-- static
|       `-- images
|           |-- btn_120x50_built.png
|           |-- btn_120x50_built_shadow.png
|           |-- btn_120x50_powered.png
|           |-- btn_120x50_powered_shadow.png
|           |-- btn_88x31_built.png
|           |-- btn_88x31_built_shadow.png
|           |-- btn_88x31_powered.png
|           |-- btn_88x31_powered_shadow.png
|           `-- catalyst_logo.png
|-- script
|   |-- evento_cgi.pl
|   |-- evento_create.pl
|   |-- evento_fastcgi.pl
|   |-- evento_server.pl
|   `-- evento_test.pl
`-- t
|-- 01app.t
|-- 02pod.t
`-- 03podcoverage.t

Con el comando “tree” nos muestra un árbol de directorios y archivos que están dentro de la carpeta evento (si no tienes el comando “tree” basta con instalarlo con: aptitude install tree)

En este momento ya podremos ver nuestro servidor de Catalyst ejecutando, hacemos el siguiente comando:

# script/evento_server -r

En nuestro navegador colocamos la siguiente direccion: http://localhost:3000 y nos mostrará la página de bienvenida de Catalyst

La opción -r es para que cuando modifiquemos un archivo del Framework que requiera reiniciar el servidor no lo tengamos que hacer nosotros mismo sino que Catalyst lo reiniciará automáticamente.

Pasemos ahora a crear un Controlador:

# script/evento_create.pl Controller registro

exists "/home/joelgomez/evento/script/../lib/evento/Controller"
exists "/home/joelgomez/evento/script/../t"
created "/home/joelgomez/evento/script/../lib/evento/Controller/registro.pm"
created "/home/joelgomez/evento/script/../t/controller_registro.t"

Con nuestro servidor iniciado podremos colocar la siguiente dirección: http://localhost:3000/registro y nos mostrará una página web con:
Matched evento::Controller::registro in registro.

Esto, a parte de decirnos que vamos por buen camino, nos está diciendo lo que está programado en la controladora registro en el método index:

24 sub index : Path : Args(0) {
25 my ( $self, $c ) = @_;
26
27 $c->response->body(‘Matched evento::Controller::registro in registro.‘);
28 }

Nuestra controladora creada está ubicada en lib/evento/Controller y desde allí vamos a crear todos los método necesarios para nuestra aplicación.

Creación de vistas.
Para crear una vista es algo parecido a como hemos creado la controladora, vamos a usar TTSite como Helper, puesto que éste es mas flexible y usarlo es divertido, aunque tiene algunas limitaciones que más adelante iré detallando

# script/evento_create.pl View participante TTSite

exists "/home/joelgomez/evento/script/../lib/evento/View"
exists "/home/joelgomez/evento/script/../t"
created "/home/joelgomez/evento/script/../lib/evento/View/participante.pm"
created "/home/joelgomez/evento/script/../root/lib"
created "/home/joelgomez/evento/script/../root/src"
created "/home/joelgomez/evento/script/../root/lib/config"
created "/home/joelgomez/evento/script/../root/lib/config/main"
created "/home/joelgomez/evento/script/../root/lib/config/col"
created "/home/joelgomez/evento/script/../root/lib/config/url"
created "/home/joelgomez/evento/script/../root/lib/site"
created "/home/joelgomez/evento/script/../root/lib/site/wrapper"
created "/home/joelgomez/evento/script/../root/lib/site/layout"
created "/home/joelgomez/evento/script/../root/lib/site/html"
created "/home/joelgomez/evento/script/../root/lib/site/header"
created "/home/joelgomez/evento/script/../root/lib/site/footer"
created "/home/joelgomez/evento/script/../root/src/welcome.tt2"
created "/home/joelgomez/evento/script/../root/src/message.tt2"
created "/home/joelgomez/evento/script/../root/src/error.tt2"
created "/home/joelgomez/evento/script/../root/src/ttsite.css"

Debemos aclarar varias cositas hasta ahora: nuestros templates o vistas se almacenarán en root/src allí podremos crear las carpetas que nos sean necesarias para organizar mejor las vistas en caso de que la aplicación sea bastante grande. Vamos a crear un template llamado participante.tt2 y lo vamos a guardar en root/src/participante, por supuesto que la carpeta participante la tenemos que crear

# mkdir root/src/participante
# cd root/src/participante
# vim participante.tt2

Dentro de archivo participante.tt2 escribimos lo siguiente:

1 <p>Hola: [% nombre %] p>

[% nombre %] Template Toolkit, esto nos ayudará bastante en el pase de variables desde la controlador hacia la vista, pueden echarle un vistazo desde su sitio oficial: http://template-toolkit.org/docs/index.html

Ahora, en nuestra controladora registro.pm ubicada en lib/evento/Controller escribimos el siguiente código debajo de la subrutina index:

30 sub saludo : Local {
31     my ( $self, $c) = @_;
32
33     $c->stash->{template} = “participante/participante.tt2“;
34     $c->stash->{nombre}   = “Joel Gómez“;
35 }

En nuestro navegador colocamos la siguiente dirección: http://localhost:3000/registro/saludo Nótese que la url se descompone como servidor/controlador/método.

En nuestra subrutina saludo lo que estamos haciendo es diciéndole a Catalyst cual es la vista que va a usar para ese método y paso una variable llamada nombre para la vista.

Hasta aquí el primer tutorial de Catalyst Web Framework, en la siguente entrega voy a modificar el Helper TTSite y empezaremos a programar las vistas.

Descargue el ejemplo Aquí

Pack de 240 Plugins jQuery

Joel Gómez — Fri, 05 Mar 2010 16:38:46 +0000

Googleando me he topado con una lista de 240 plugins jQuery (Write Less, Do More) que nos facilitarán muchisimo las tareas a la hora de realizar nuestras aplicaciones web. jQuery no es más que un conjunto de librerías Javascript que permite simplificar la manera de interactuar con los documentos HTML, permitiendo manejar eventos,desarrollar animaciones, y agregar interacción con la tecnología AJAX a nuestras páginas web.

Sin más palabras acá mismo se los dejo:

Editar Braille en OpenOffice

Joel Gómez — Wed, 29 Jul 2009 19:01:04 +0000

Braille en OpenOffice

Será posible que se pueda escribir en Braille desde un editor de texto, especialmente desde OpenOffice? esta pregunta tiene una fácil respuesta. Existe una fuente que nos permite escribir en Braille, solo debemos descargala e instalarla, a continuación se explica como:

Primero, debemos descargar la fuente desde Aquí, Nótese que la fuente tiene licencia GNU/GPL

Segundo, debemos instalar la fuente.
Descomprimimos el archivo que descargamos (braille_font.zip)

Creamos una carpeta en el directorio: /usr/share/fonts/truetype
Nombremos a esa carpeta: braille

Pegamos el archivo que descomprimimos en la carpeta braille

Por último

Cambie los permisos con: chown usuario:usuario braille/

Y listo, hagan la prueba en su OpenOffice seleccionando la fuente que acabamos de instalar y automáticamente todo lo que editemos aparecerá en Braille.

Plugin de Firefox para listar los enlaces de una página web

Joel Gómez — Thu, 11 Jun 2009 20:12:11 +0000

Lista de Enlaces

Las personas con discapacidad visual que hacen uso de la Internet siempre se consiguen con el inconveniente de que la mayoría de los super-desarrolladores web hacen su trabajo solo para que los sitios tengan las siguientes características en estricto orden: belleza, funcionabilidad y si se acuerdan hacen depuración, por tal motivo los sitios poseen cierta eficacia para las personas videntes pero las personas invidentes pasan por un viacrucis para navegar.

Imaginemos por un momento que una persona con discapacidad visual esté navegando en un sitio que contenga una cantidad considerable de enlaces, para poder navegarla tenemos que pulsar tabulador (tab) para ir pasando por los enlaces hasta llegar al link deseado y pulsar enter (bastante tedioso).

Me di a la tarea de estudiar un poquito de XUL (acrónimo de XML-based User-interface Language, lenguaje basado en XML para la interfaz de usuario) que entre muchas funcionabilidades permite la creación de Plugin para Firefox. Este plugin se denomina: Linkslist.

Para instalar el plugin en Firefox (Iceweasel en GNU/Linux Debian) lo descargamos aquí desde el proyecto Mozilla, reiniciamos el navegador y con el atajo control + shift + L mostrará una pequeña ventana con soporte para los lectores de pantalla en Linux, listando todos los enlaces que tiene el sitio, buscamos en enlace deseado y presionamos enter.

Todavía el plugin dentro del Proyecto Mozilla está en fase experimental pero ya se puede utilizar sin ningún problema ni riesgo.

Aprendiendo Chino como un verdadero Geek ;)

Joel Gómez — Tue, 17 Mar 2009 21:21:06 +0000

Aprender el idioma chino no se ve tan difícil desde el punto de vista informático. Acá le dejo la prueba de esto:

目 – rack de servidores

鈕 - arbol de navidad al lado de un rack de servidores

器 – red de PCs

明 – 2 racks de servidores

員 – 2 servidores

管 – 2 servidores con cables por encima

自 - rack de servidores con una antena wifi

開 – escritorio con 2 monitores

Visto en LugSaJu

Debian Lenny – Debian Squeeze

Joel Gómez — Fri, 06 Mar 2009 16:28:30 +0000

Siempre es de mi costumbre trabajar en Debian en la versión Testing o de prueba, debido a que Lenny ya pasó a ser stable entonces me tocó pasarme a squeeze que está para valientes todavia

Editando nuestro /etc/apt/souces.list cambiamos la palabra lenny por squeeze

Antes

deb http://ftp.debian.org/debian/ lenny main non-free contrib
deb http://www.debian-multimedia.org/ lenny main

Después

deb http://ftp.debian.org/debian/ suqeeze main non-free contrib
deb http://www.debian-multimedia.org/ squeeze main

Solo nos resta hacer:

aptitude update && aptitude safe-upgrade

Listo, Debian Squeeze instalado.

OpenOffice 2.4 mas veloz

Joel Gómez — Thu, 05 Mar 2009 01:12:54 +0000

Quien no ha tenido que pensar en demora antes de abrir OpenOffice? bueno, ahora podremos abrir cualquier archivo de OpenOffice mas rápido mediante unos pocos cambios en su configuración.

Abrimos cualquier programa de OpenOffice y nos ubicamos en el menú de Herramientas -> Opciones

OpenOffice.org
|
-> Memoria de Trabajo

En esta opción colocamos lo siguiente:

Cantidad de Pasos: 30
Usar para OpenOffice.org: 128
Memoria por Objeto: 20,0
Eliminar de la memoria tras: 00:10
Cantidad de Objetos: 20

Además, chequean la opción: Habilitar Quickstarter en bandeja del sistema

Por último, en el mismo nivel de la Sección OpenOffice.org está la sección Java, nos ubicamos allí y hacemos lo siguiente:

OpenOffice.org
|
-> Memoria de Trabajo
|
|
-> Java

Chequean la opción: Usar un entorno de ejecución Java, Luego clickean en añadir y por último seleccionar la opción que aparecerá luego
de añadir un entorno llamada: Free Software Fundation, 1.4.2

Les mostraré mis screenshot’s del antes y después de las modificaciones al OpenOffice:

Reinician su OpenOffice y Listo. Notarán la diferencia en cuanto a la velocidad de carga del OpenOffice.

Hello world!

Joel Gómez — Wed, 04 Mar 2009 22:25:50 +0000

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

Joel Gómez

Una imagen “Geek” habla por si sola….

Catalyst Web Framework – Segunda Parte

Catalyst Web Framework – Primera Parte

Pack de 240 Plugins jQuery

File upload

Form Validation

Form – Select Box stuff

Form Basics, Input Fields, Checkboxes etc.

Time, Date and Color Picker

Rating Plugins

Search Plugins

Inline Edit & Editors

Audio, Video, Flash, SVG, etc

Photos/Images/Galleries

Google Map

Games

Tables, Grids etc.

Charts, Presentation etc.

Border, Corners, Background

Text and Links

Tooltips

Menus, Navigations

Accordions, Slide and Toggle stuff

Drag and Drop

XML XSL JSON Feeds

Browserstuff

Alert, Prompt, Confirm Windows

CSS

DOM, Ajax and other jQuery plugins