Joel Gómez

Catalyst Web Framework – Segunda Parte

by on Mar.26, 2010, under Catalyst

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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
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/warning80x67.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í

9 Comments more...

Catalyst Web Framework – Primera Parte

by on Mar.16, 2010, under Catalyst

¿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 <enter> 😀

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

screenshot del servidor

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í

19 Comments more...

Pack de 240 Plugins jQuery

by on Mar.05, 2010, under jQuery

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:

    File upload

    Ajax File Upload
    jQUploader
    Multiple File Upload plugin
    jQuery File Style
    Styling an input type file
    Progress Bar Plugin

    Form Validation

    jQuery Validation
    Auto Help
    Simple jQuery form validation
    jQuery XAV – form validations
    jQuery AlphaNumeric
    Masked Input
    TypeWatch Plugin
    Text limiter for form fields
    Ajax Username Check with jQuery

    Form – Select Box stuff

    jQuery Combobox
    jQuery controlled dependent (or Cascadign) Select List
    Multiple Selects
    Select box manipulation
    Select Combo Plugin
    jQuery – LinkedSelect
    Auto-populate multiple select boxes
    Choose Plugin (Select Replacement)

    Form Basics, Input Fields, Checkboxes etc.

    jQuery Form Plugin
    jQuery-Form
    jLook Nice Forms
    jNice
    Ping Plugin
    Toggle Form Text
    ToggleVal
    jQuery Field Plugin
    jQuery Form’n Field plugin
    jQuery Checkbox manipulation
    jTagging
    jQuery labelcheck
    Overlabel
    3 state radio buttons
    ShiftCheckbox jQuery Plugin
    Watermark Input
    jQuery Checkbox (checkboxes with imags)
    jQuery SpinButton Control
    jQuery Ajax Form Builder
    jQuery Focus Fields
    jQuery Time Entry

    Time, Date and Color Picker

    jQuery UI Datepicker
    jQuery date picker plugin
    jQuery Time Picker
    Time Picker
    ClickPick
    TimePicker
    Farbtastic jQuery Color Picker Plugin
    Color Picker by intelliance.fr

    Rating Plugins

    jQuery Star Rating Plugin
    jQuery Star Rater
    Content rater with asp.net, ajax and jQuery
    Half-Star Rating Plugin

    Search Plugins

    Autocomplete Box
    jQuery Suggest
    jQuery Autocomplete
    jQuery Autocomplete Mod
    jQuery Autocomplete by AjaxDaddy
    jQuery Autocomplete Plugin with HTML formatting
    jQuery Autocompleter
    AutoCompleter (Tutorial with PHP&MySQL)
    quick Search jQuery Plugin

    Inline Edit & Editors

    jTagEditor
    WYMeditor
    jQuery jFrame
    Jeditable – edit in place plugin for jQuery
    jQuery editable
    jQuery Disable Text Select Plugin
    Edit in Place with Ajax using jQuery
    jQuery Plugin – Another In-Place Editor
    TableEditor
    tEditable – in place table editing for jQuery

    Audio, Video, Flash, SVG, etc

    jMedia – accessible multi-media embedding
    JBEdit – Ajax online Video Editor
    jQuery MP3 Plugin
    jQuery Media Plugin
    jQuery Flash Plugin
    Embed QuickTime
    SVG Integration
    jQuery Multimedia Portfolio
    jQuery YouTube Plugin

    Photos/Images/Galleries

    ThickBox
    jQuery lightBox plugin
    jQuery FancyBox
    jQuery Multimedia Portfolio
    jQuery Image Strip
    jQuery slideViewer
    jQuery jqGalScroll 2.0
    jQuery – jqGalViewII
    jQuery – jqGalViewIII
    jQuery Photo Slider
    jQuery Thumbs – easily create thumbnails
    jQuery jQIR Image Replacement
    jCarousel Lite
    jQPanView
    jCarousel
    Interface Imagebox
    Image Gallery using jQuery, Interface & Reflactions
    simple jQuery Gallery
    jQuery Gallery Module
    EO Gallery
    jQuery ScrollShow
    jQuery Cycle Plugin
    jQuery Flickr
    jQuery Lazy Load Images Plugin
    Zoomi – Zoomable Thumbnails
    jQuery Crop – crop any image on the fly
    Image Reflection

    Google Map

    jQuery Plugin googlemaps
    jMaps jQuery Maps Framework
    jQmaps
    jQuery & Google Maps
    jQuery Maps Interface forr Google and Yahoo maps
    jQuery J Maps – by Tane Piper

    Games

    Tetris with jQuery
    jQuery Chess
    Mad Libs Word Game
    jQuery Puzzle
    jQuery Solar System (not a game but awesome jQuery Stuff)
    jQuery Memory

    Tables, Grids etc.

    UI/Tablesorter
    jQuery ingrid
    jQuery Grid Plugin
    Table Filter – awesome!
    TableEditor
    jQuery Tree Tables
    Expandable “Detail” Table Rows
    Sortable Table ColdFusion Costum Tag with jQuery UI
    jQuery Bubble
    TableSorter
    Scrollable HTML Table
    jQuery column Manager Plugin
    jQuery tableHover Plugin
    jQuery columnHover Plugin
    jQuery Grid
    TableSorter plugin for jQuery
    tEditable – in place table editing for jQuery
    jQuery charToTable Plugin
    jQuery Grid Column Sizing
    jQuery Grid Row Sizing

    Charts, Presentation etc.

    Flot
    jQuery Wizard Plugin
    jQuery Chart Plugin
    Bar Chart
    Accessible Charts using Canvas and jQuery

    Border, Corners, Background

    jQuery Corner
    jQuery Curvy Corner
    Nifty jQuery Corner
    Transparent Corners
    jQuery Corner Gallery
    Gradient Plugin

    Text and Links

    jQuery Spoiler plugin
    Text Highlighting
    Disable Text Select Plugin
    jQuery Newsticker
    Auto line-height Plugin
    Textgrad – a text gradient plugin
    LinkLook – a link thumbnail preview
    pager jQuery Plugin
    shortKeys jQuery Plugin
    jQuery Biggerlink
    jQuery Ajax Link Checker
    Chili jQuery code highlighter plugin
    jScroller

    Tooltips

    jQuery Plugin – Tooltip
    jTip – The jQuery Tool Tip
    clueTip
    BetterTip
    Flash Tooltips using jQuery
    ToolTip

    Menus, Navigations

    jQuery Tabs Plugin – awesome! [demo nested tabs]
    another jQuery nested Tab Set example (based on jQuery Tabs Plugin)
    jQuery idTabs
    jdMenu – Hierarchical Menu Plugin for jQuery
    jQuery SuckerFish Style
    jQuery Plugin Treeview
    treeView Basic
    FastFind Menu
    Sliding Menu
    Lava Lamp jQuery Menu
    jQuery iconDock
    jVariations Control Panel
    ContextMenu plugin
    clickMenu
    CSS Dock Menu
    jQuery Pop-up Menu Tutorial
    Sliding Menu

    Accordions, Slide and Toggle stuff

    jQuery Plugin Accordion
    jQuery Accordion Plugin Horizontal Way
    haccordion – a simple horizontal accordion plugin for jQuery
    Horizontal Accordion by portalzine.de
    HoverAccordion
    Accordion Example from fmarcia.info
    jQuery Accordion Example
    jQuery Demo – Expandable Sidebar Menu
    Sliding Panels for jQuery
    jQuery ToggleElements
    Coda Slider
    jCarousel
    Accesible News Slider Plugin
    Showing and Hiding code Examples
    jQuery Easing Plugin
    jQuery Portlets
    AutoScroll
    Innerfade
    CodaSlider

    Drag and Drop

    UI/Draggables
    EasyDrag jQuery Plugin
    jQuery Portlets
    jqDnR – drag, drop resize
    Drag Demos

    XML XSL JSON Feeds

    XSLT Plugin
    jQuery Ajax call and result XML parsing
    xmlObjectifier – Converts XML DOM to JSON
    jQuery XSL Transform
    jQuery Taconite – multiple Dom updates
    RSS/ATOM Feed Parser Plugin
    jQuery Google Feed Plugin

    Browserstuff

    Wresize – IE Resize event Fix Plugin
    jQuery ifixpng
    jQuery pngFix
    Link Scrubber – removes the dotted line onfocus from links
    jQuery Perciformes – the entire suckerfish familly under one roof
    Background Iframe
    QinIE – for proper display of Q tags in IE
    jQuery Accessibility Plugin
    jQuery MouseWheel Plugin

    Alert, Prompt, Confirm Windows

    jQuery Impromptu
    jQuery Confirm Plugin
    jqModal
    SimpleModal

    CSS

    jQuery Style Switcher
    JSS – Javascript StyleSheets
    jQuery Rule – creation/manipulation of CSS Rules
    jPrintArea

    DOM, Ajax and other jQuery plugins

    FlyDOM
    jQuery Dimenion Plugin
    jQuery Loggin
    Metadata – extract metadata from classes, attributes, elements
    Super-tiny Client-Side Include Javascript jQuery Plugin
    Undo Made Easy with Ajax
    JHeartbeat – periodically poll the server
    Lazy Load Plugin
    Live Query
    jQuery Timers
    jQuery Share it – display social bookmarking icons
    jQuery serverCookieJar
    jQuery autoSave
    jQuery Puffer
    jQuery iFrame Plugin
    Cookie Plugin for jQuery
    jQuery Spy – awesome plugin
    Effect Delay Trick
    jQuick – a quick tag creator for jQuery
    Metaobjects

    elementReady

    5 Comments more...

    Editar Braille en OpenOffice

    by on Jul.29, 2009, under OpenOffice

    Braille en OpenOffice

    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.

    2 Comments more...

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

    by on Jun.11, 2009, under Firefox

    Lista de Enlaces

    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.

    2 Comments more...

    Aprendiendo Chino como un verdadero Geek ;)

    by on Mar.17, 2009, under Geek's

    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

    1 Comment more...

    Debian Lenny – Debian Squeeze

    by on Mar.06, 2009, under Debian

    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.

    3 Comments more...

    OpenOffice 2.4 mas veloz

    by on Mar.04, 2009, under OpenOffice

    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:

    Antes

    Después

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

    3 Comments more...

    Hello world!

    by on Mar.04, 2009, under OpenOffice

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

    1 Comment more...

    Looking for something?

    Use the form below to search the site:

    Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

    Visit our friends!

    A few highly recommended friends...

    Archives

    All entries, chronologically...