Desarrollando para la WEB

JQUERY y Primeface

2011-12-05T11:29:00.003-08:00

JQUERY es uno de los tantos framework`s visuales para aplicaciones web y mobiles echo en Javascript y CSS.

Primefaces como ya sabemos es un conjunto de widgets para JSF. ahora podemos integrar JQUERY con primefaces con tan solo agregar una piel echa en jquery que se puede descargar desde la pagina de primeface.

Netbeans 7.x incorpora la integracion automatica de primeface a un proyecto web desde el momento que seleccionamos nuestro framework JSF para la aplicacion. En las versiones anteriores hay que ingresar la libreria al proyecto de forma manual. Ver mas informacion.

Una vez se ha descargado el tema se agrega como jar al proyecto en desarrollo.

Ahora solo hay que informar al servidor que nuestra aplicacion usa el jar como un contexto de la aplicacion, asi cuando se use un widget primeface JSF, este adquirira automaticamente el estilo del tema agregado.

y asi queda nuestra interfaz grafica una vez integrado JQUERY con primeface.

Aplicacion WEB JSF y Configuracion de Idiomas

2011-12-05T11:29:00.001-08:00

Las aplicaciones java web especificamente las desarrolladas bajo un framework JSF, nos proporciona de forma optima la configuracion y creacion de un archivo de idioma para cada pais o region donde se ejecute nuestra aplicacion. Es decir podremos configurar nuestra aplicacion para que sea usada en otros paises y en otro idioma sin la necesidad de acudir al codigo de las interfaces de la aplicacion para realizar las modificaciones en cada etiqueta de texto.

Claro este beneficio nos obliga a ser menticulosos en el desarrollo.
Debemos Iniciar y encapsular cada valor de etiqueta en un parametro de la aplicacion, estos parametros los almacenaremos en un archivo llamado Bundle.properties. que se ubicara en nuestro paquete de recursos .java

Archivo bundle.properties y su ubicacion (Click para ver la imagen original)

luego, para usarlo solo se invoca el nombre del archivo, siendo este su apuntador que invoca a una propiedad parametro:

implementacion del archivo bundle.properties (Click para ver la imagen original)

Cuando hacemos el proceso de generacion de codigo usando una herramienta como netbeans 6.x y posterior el IDE nos prepara un archivo bundle.properties por defecto. Este se localiza en el directorio que muestran las imagenes anteriores, debemos hacer una copia de este archivo y realizar las diferentes traducciones.

Al usar netbeans 7.x podremos ir desde el archivo en uso donde se contiene la etiqueta traducida y dar CONTROL + Click sobre el codigo para ir directamente a la propiedad o el metodo en el caso de ser otro tipo de archivo como un controlador. En versiones anteriores del netbeans esto no funcionaba bien, ahora es muy util.

Oracle ADF. Un nuevo framework java web

2011-12-05T11:27:00.001-08:00

ADF es el mas reciente framework desarrollado por la sun de oracle en bien de la comunidad desarrollador de software bajo nuestro mas eficiente lenguaje de desarrollo llamado JAVA.

ADF en sus siglas Oracle Application Development Framework se basa en la realizacion de aplicaciones software oriendas a la web o de escritorio con el mas minimo grado de codificacion digitada por un programador, con adf todo se realiza mediante programacion iconica o visual, adf contiene un complejo proceso de configuracion pero esto hace que el resultado de las aplicaciones software sean muy eficientes, agiles y robustas.

El Ide para desarrollo de aplicaciones ADF conocido como jdeveloper es muy complejo y util, yo pensaria que esta muy por encima de uno de los desarrollos de sun conocidos como NetBeans. siempre he sido fans de netbeans pero cuando conoci a jdeveloper nada que hacer, hay es donde uno dice la evolucion es evolucion. me quede con jdeveloper. hasta me permite partir de modelamiento y llegar a generacion de fuentes y recursos.

Este proceso resulta muy familiar para aquellos que conocemos lo que es visual estudio y sus aplicaciones de escritorio, tambien para los que conocemos LabView uno de los IDE de desarrollo de simulaciones mas complejo hasta ahora.

Arquitectura de Oracle ADF (Marco de trabajo para el desarrollo de aplicaciones java web).

La arquitectura ADF de Oracle se extiende a los dispositivos móviles

Publicacion en Desarrollo.

Experiencia con PHP

2011-12-05T11:23:00.001-08:00

He sido esarrollador de java por casi 6 años, hace dos años conoci a c# y .net de microsoft y ahora, adquiero una nueva experiencia al programar con PHP (PHP Hypertext Pre-processor) (inicialmente PHP Tools, o, Personal Home Page Tools).

PHP es un lenguaje muy rapido en su ejecucion, sencillo en su programacion y lo mejor, hay mucho soporte(documentacion) en la red, pero lo mejor, que yo llamaria mejor, es que el servicio de hospedaje en la red para este tipo de aplicaciones es muy popular y presenta mucha demanda en el mercado global, a un costo muy por debajo de servidores como java o .net y con un muy buen soporte tecnico, es cuestion solamente de darle un poco de seguridad y arquitectura a las aplicaciones y listo, en muy poco tiempo se construyen elegantes y complejas estructuras de software.

Las tecnicas de desarrollo como MDD(Desarrollo dirigido por modelos) o una de sus extesiones el MDSD(Desarrollo de software dirigido por modelos), permiten que aprendamos a diseñar, desarrollar e implementar soluciones web independiente de plataformas y lenguajes de programacion, es mas estoy seguro que con el tiempo se presentara una gran infraestructura hibrida en la que sin duda en el caso un portal estaria compuesto por muchos portles de diferentes plataformas, servidores y lenguajes dando asi mucho poder la desarrollo y a la integracion de servicios web. Entre mas idiomas o lenguajes conozcamos mucho mejor sera para nuestras empresa participar con nuestros productos en esas plataformas hibridas.

PHP permite que empleemos una arquitectura de 3 y mas capas. La arquitectura es una caracteristica del equipo solucionador (anteriormente desarrollador), esta se debe aplicar a cualquier escenario, asi damos seguridad, documentacion, soporte y eficiencia a nuestras soluciones web.

Para empezar con la seguridad en aplicaciones PHP es necesario como en todo , investigar mucho... y tener claro algunos conceptos como archivos.conf, configuracion de servidores, conexion a base de datos, php5, Captchas, MashUp, servicios web, SQLInjection, Symfony.

Seguramente php es muy optimo para el desarrollo de aplicaciones web no criticas, es decir aplicaciones pequeñas y agiles.

Ahora como todo tiende a ser orientados al soporte para dispositivos moviles, con PHP tenemos una gran banco de recursos y herramientas y de todas las clases y los estilos. Al ser cliente de jquery recomiento para iniciar con Moviles al framework JQUERY Mobile.

La Humilde tarea del Progamador.

2011-08-24T07:57:00.000-07:00

Hay dos sendas importantes para llegar a la cuspide del desarrollo de software (Aquitectura, diseño), una es yendo por el camino de la programacion de computadoras luego al desarrollo y otra es por la senda directa del desarrollo de software. las dos son equivalentes , el desarrollo de software nos muestra claramente que el progamador es un ente importante en la produccion, pero no entiende que hace!. mientras que cuando conocemos lo que hariamos como programadores se entiende el valor grato de la humilde tarea de programar computadores y de la influencia en los detalles de la elaboracion.

Ejemplo: Es como cuando construimos una casa, quienes lo hallan echo tendran en memoria que es necesario una serie de planos entre los que estan de cubiertas, de desagues, de estructuras, de planta, electrico, de desague, etc. en estos planos existe una simbologia y un nivel de abstracion en el que el ingeniero o jefe de obra interpreta que hay que ubicar una ventana a tantos metros del suelo o a tal distancia del techo con unos bordes(Filetes) visualmente esteticos, el maestro pone la ventana y junto con el ingeniero se determina el nivel de detalle de estos filetes que enmarcan la venta y de la buena nivelacion de su apertura. Pero, eso no esta en el plano, sin embargo el arquitecto lo expreso en su simbologia y hay que hacerlo(Poner la Ventana en un marco) porque es el detalle, poner la ventana y detallar al maximo los filetes para que esta se vea enmarcada elegante. Asi mismo es la tarea del programador implementar los detalles en los metodos de las clases donde se llevan a cabo las operaciones del negocio, estas operaciones le son dadas con claridad y es para el una herramienta eficiente en el proceso de programacion.

Es de hay que viene la importante tarea de que como modeladores y desarrolladores (Arquitectos), implementemos unos buenos diseños de software con tecnicas modernas como UML

Creo que soy un poco enrredado para escribir esto pero ire depurando el texto con el tiempo.

Dentro de los oficios que estudie para querer realizar, la programacion nunca estubo presente, y cuando lo estubo, de hay en adelante me ha otorgrado una guia para la realizacion de una vida profesional llena de exitos intelectuales, morales y relacionales.

Anteriormente el programador debia realizar un programa, este trabajo era supremamente engorroso para EL porque debia realizar todo un plano arquitectonico de software en la mente, alli se quedaba y se hiba plasmando poco a poco en el DOS, porque muy pocos recursos habian para la elaboracion de este recurso sofware quien a esta fecha es uno de los activos mas importantes en nuestras vidas y en las empresas del mundo.

Con la Llegada de estas nuevas herramientas, tecnicas y documentacion de APIS, como: UML, MDA, MDD,JDeveloper, Eclipse Ganymedela la construccion de software hoy es una maginifico trabajo en tiempo de programacion minima pero con tiempo de modelamiento prudente.

En conclusion ser Programador es una excelente opcion de vida, y una tarea inrremplazable por maquina o tecnica alguna. En los modelamientos, a nivel de abstracion siempre habra un porcentaje medio donde el nivel del detalle solo requiere ser tarea del programador.

EJB 3.x

2011-08-14T09:10:00.000-07:00

Los Enterprise Java Beans son los nuevos componentes java para la construccion de aplicaciones web con persistencia de Datos, empleando arquitectura J2EE6 Web.

Los EJB evolucionan de manera rapida y eficiente convirtiendose dia a dia en la herramienta numero uno para los desarrolladores de software.

Todo software maneja en su modelo de negocio entidades(objetos), estas entidades siempre tienen propiedades y metodos, EJB encapsula entidad, interfaz y controlador de un objeto para dar persistencia meidante un api de persistencia como TopLink o JPA.

Actualmente se encuentran en su version 3.2. cada version nueva emplea mecanismos de configuracion optima haciendo que el uso de EJB en las aplicaciones sea mucho mas facil y optima.

Existe una gran comunidad de desarrolladores detras de esta tecnologia. a todos muchas gracias por ese gran aporte a la tecnologia Java Web.

para conocer mas acerca de los EJB, este documento es interesante. Click para ir al documento

Tecnicamente los EJb son clases java organizadas de manera tal que representan:

Objeto Representado en una entidad
Clase controladora de Entidades
Interfaz para la implementacion de Metodos

Netbeans en su version 6.x y posteriores, nos permite a travez de sencillos pasos realizar la generacion de EJB a travez de un mapeo al esquema de base de datos y una unidad de persistencia. para ver este procedimiento por favor visite .....

JSF (Java Server Faces)

2011-08-13T06:51:00.000-07:00

JSF es uno de los frameworks java mas robustos para la realizacion de aplicaciones WEB con interfaces de usuario ricas y eficientes, sobre todo la ventaja esta cuando usamos un IDE como Netbeans 6.x que ya nos permite a partir de un buen esquema de base de datos realizar toda la generacion de codigo para las operaciones basicas conocidas como CRUD (crear, eliminar, actualizar y visualizar).

Los componentes de JSF son aquellos mismos componentes HTML pero evolucionados, que con una configuracion minima se adaptan mejor a nuestras necesidades actuales de desarrollo cuando ya usamos tecnicas como AJAX.

Ejemplo si antes teniamos un:

<form method="get" action="servlet">

<input type="submit" value="Enviar" />

</form>

ahora con JSF queda :


<h:form>

<h:inputtext action="#{controlador.accion}" ajax="true" 

update="contenedordemensajes" value="enviar"> </h:inputtext>

</h:form>

JSF tiene una gran cantidad de componentes muy elegantes y cuando lo integramos con un paquete de widgets como Icefaces o Primefaces se vuelve muy potente visualmente y sobre todo a la hora de desarrollar proyectos java es la mejor solucion para obtener beneficios en costo para el tiempo de programacion.

Cuando desarrollamos bajo componentes JSF tenemos que olvidarnos por completo de una perspectiva visual de nuestras paginas a travez de dreamweaver o cualquier otro editor HTML.
Existe en la actualidad un IDE llamada Jdeveloper 11 g de la Casa de Oracle la cual nos permite realizar una edicion visual de nuestros proyectos JSF. aqui su evolucion se llama ADF que sera tema para otro post.

Modelado de Software mediante UML2

2010-11-23T12:37:00.000-08:00

Aplicación WEB para el Control en Línea de Reservas de Salas del Departamento de TICS en la I.E. Los Pinos.

Este proyecto es desarrollado como trabajo final en la asignatura de Ingenieria de Software II bajo la supervicion del Ingeniero Edwardo Millan a quien agradezco profundamente por las enseñanzas brindadas en clase.

Propósito del sistema

Sistema de información en línea (Aplicación Web), que permite llevar a cabo el control general para un departamento de TIC (Tecnologías de la información y la comunicación), en la Institución Educativa Los Pinos de la Ciudad de Florencia.

Sistema propuesto

Se Propone el desarrollo de un sistema de control orientado a la web para el control de un Departamento de Tecnologías de la Información y la Comunicación permitiendo realizar gestión de recursos, usuarios y control de salas de sistemas. Como el proyecto abarca gran tiempo en el desarrollo de sus módulos se desarrollara para esta primera versión solo el modulo de reserva de salas en línea.

Requerimientos funcionales

· Consultar Horario de Disponibilidad de las Salas.
· Ver historiales de reservas y ver reserva actual en servicio.
· Realizar reservas en línea.
· Un administrador de salas debe aprobar o rechazar la solicitud de una reserva y enviar por correo electrónico un mensaje de aprobación o rechazo al solicitante.
· Ingresar novedades por parte del administrador o ingresar recomendaciones de parte del usuario servido, si existen, al terminar cada uso de sala (reserva).
· Gestionar Inventarios de salas de sistemas (Hardware y Software) y actualizar inventarios a medida que vallan surgiendo novedades durante el préstamo de las salas. (Pendiente por falta de tiempo)
· Gestionar usuarios del Sistema (Listar, editar, eliminar, agregar, actualizar).
· Entregar y Recibir salas por parte del administrador de las salas y el usuario que usa el servicio de reserva.
· El Administrador deberá Generar Reportes en .PDF de forma mensual para cada sala.

Requerimientos no funcionales

· El software debe estar desarrollado (construido) en una herramienta libre (NetBeans 6.8) y con almacenamiento de datos en un motor libre (mysql).
· Desarrollo en lenguaje Java (JSP) en combinación con tecnología ajax usando el Framework Ext.js de Sencha.
· Debe estar Desarrollado aplicando una arquitectura J2EE
· Uso de la metodología de desarrollo de software RUP
· Uso de la herramienta Visual Paradigm para modelamiento UML.

Tecnologia Arrastrar y soltar elementos WEB con AJAX (JSP, Java, MySql, Javascript, CSS,JQuery)

2010-05-09T11:40:00.000-07:00

La respuesta rapida y eficiente a una peticion realizada por un usuario (cliente) acredita y potencializa la vida actual del software y su sobrevivencia al medio (Servidor e Internet).

Como dijo mi amigo Darwin Todo es Evolucion, aun la mas simple libreria existente actualmente para el ambiente web, empezo con unas pequeñas lineas de codigo con redundancia y simpleza. Hoy en dia las librerias evolucionan a un ritmo impresionante con tecnicas que en realidad me asustan. Sino Veamos Algunas de ellas y de quienes vivo muy agradecido por brindar sus recursos a la comunidad desarrolladora del mundo.

Hablemos un poco de AJAX. Ajax no es un lenguaje, ni un API mucho menos, Ajax es un a tecnica de pogramacion para el engranaje de apis en diferentes lenguajes de forma eficiente y adaptable a los nuevos entornos web 2.0
Si bien diversos navegadores existen en la actualidad es porque la limitacion de la evolucion en la tecnologia no existe en esta era ni mucho menos lo sera en las que vienen, y bien, tambien muchos desarrolladores se han ido involucrando en la creacion de mecanismos (Api´s,. IDE´s, Motores de BD, Servidores, Librerias, Frameworks, etc) que con mucho esfuerzo y dedicacion nos hacen la vida facil a muchos que los usamos sus creaciones y las adaptamos a nuestras aplicaciones web.

Es Gracias a Todos Ellos que ahora puedo escribir personalizadamante este tipo de recursos y compartirlos con ustedes.

JQuery
Mootools
Mail
JfreeChart
Itext
JDom
etc.

Hasta Este momento supongo que la persona que va a observar este tutorial sabe de:

Tecnologia Java y JSP (Servlet)
Hojas de Estilo CSS
Javascript - Jquery (Framework Javacript)
Mysql (SQL)
Servidores TOMCAT o RESIN
AJAX

Bueno ahora si vamos a ver el Ejemplo 100% Funcional

Para ahorrarme la descripcion del ejemplo he puesto los comentarios en todos los codigos (API) usados.

SQL

-- 
-- Estructura de tabla para la tabla `tabla`
-- 
CREATE TABLE `tabla` (
&nbsp; `nombre_li` varchar(50) NOT NULL,
&nbsp; `posicion` varchar(100) NOT NULL,
&nbsp; `id` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

INSERT INTO `tabla` VALUES (\'listItem_1\', \'2\', 1);
INSERT INTO `tabla` VALUES (\'listItem_2\', \'1\', 2);
INSERT INTO `tabla` VALUES (\'listItem_3\', \'3\', 3);
INSERT INTO `tabla` VALUES (\'listItem_4\', \'4\', 4);
INSERT INTO `tabla` VALUES (\'listItem_5\', \'5\', 5);
INSERT INTO `tabla` VALUES (\'listItem_6\', \'6\', 6);

Stylo Visual CSS

/* Estilo Visual para la GUI
* Es muy importante conocer CSS y la aplicacion de estos
* estilos de manera dinamica con Javascript.
*/
* { margin: 0; padding: 0; }

body {
 font: 0.9em Arial;
 padding: 10px;
}

#info {
 display: block;
 padding: 10px; 
    margin-bottom: 5px;
 border: 1px solid #333;
 background-color: #efefef;
}

#test-list {
 list-style: none;
}

#test-list li {
 display: block;
 padding: 20px 10px; margin-bottom: 3px;
 background-color: #efefef;
}

#test-list li img.handle {
 margin-right: 20px;
 cursor: move;
}
#test-lista {
 list-style: none;
}

#test-lista li {
 display: block;
 padding: 20px 10px; margin-bottom: 3px;
 background-color: #efefef;
}

#test-lista li img.handles {
 margin-right: 20px;
 cursor: move;
}
#tabla{
    border: 1px solid black;
}

Java JSP

<%@page import="java.sql.*, java.util.Date, javax.swing.*, javax.servlet.*, java.util.*"  session="true" %>
<jsp:useBean id="conect" scope="session" class="Control.BeanConnection" />
<jsp:useBean id="consulta" scope="session" class="Control.Consultas" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Tecnologia Arrastrar y soltar elementos con AJAX (JSP, Java, MySql, Javascript, CSS)</title>
        <!--Llamado a los componentes Jquery
        La mejor manera de no consumir recursos en nuestro servidor
        es llamar directamente las librerias desde la zona de recursos
        de JQUERY en google Sources
        Excelente.! siempre se mantienen actualizadas.
        -->
        <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>-->
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
        <link rel=\'stylesheet\' href=\'styles.css\' type=\'text/css\' media=\'all\' />
        <script type="text/javascript">
            $(document).ready(function() {/*Nos ponemos a la Escucha*/
                $("#test-list").sortable({//Creamos el elemento
                    placeholder: \'tabla\',/*Le Programos sus propiedades y Acciones*/
                    containment: "ul",
                    items: "li",
                    axis: \'y\',
                    opacity: 0.6,
                    handle : \'.handle\',
                    update : function () {//Al Actualizarse
                        var order = $(\'#test-list\').sortable(\'serialize\');//Toma en serie los componentes y almacenelos en una variable arreglo order
                        $("#info").load("sortable.jsp",{ordenar: order, evento: "Run"}),//envio de Parametros a la Pagina Sortable.jsp
                        //Quien sera la encargada de procesar la informacion con la BD 
                        alert(order);
                    }
                });
            });
        </script>
    </head>
    <body>
        <pre>
<div id="info">Esperando Para Actualizar</div>
        </pre>
        <ul id="test-list" >
            <%
                        int cont = 0;//
                        ResultSet ListaImagenes = consulta.ListaImagenes(conect);//Llamamos el resultet
                        while (ListaImagenes != null && ListaImagenes.next()) {//Lo vaciamos y tiene registros
                            cont++;
            %>
            <li id="listItem_<%=cont+ ""/*Valor de la Serie*/%>"><img src="img.png" alt="move" width="16" height="16" class="handle" /><strong><%=ListaImagenes.getString("id") + " con nombre de fila:" + ListaImagenes.getString("nombre_li") + ""%> </strong></li>
            <%}%>
        </ul>
    </body>
</html>

Clase Java para consulta SQL

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package Control;

import java.sql.ResultSet;
import java.sql.SQLException;

/**
 *
 * @author Yovany Suarez Silva
 */
public class Consultas {

    public Consultas() {
    }
      /**
       * Este es el metodo que consulta y almacena en un componente tipo
       * resultSet todos los valores de la Tabla
       *
       * @ListaImagenes Arreglo de Registros  en la Tabla
       */

    public ResultSet ListaImagenes(BeanConnection conect) throws SQLException {
        String strSQL = "select * from tabla";
        ResultSet ListaImagenes = conect.ejecutar_select_catch(strSQL);
        return ListaImagenes;
    }
}

Pagina JSP de ACCION

<%--
    Document   : index
    Created on : 2/05/2010, 07:36:48 PM
    Author     : Yovany Suarez Silva
--%>
<%@page import="java.sql.*,  javax.servlet.*, java.util.*"  session="true" %>
<jsp:useBean id="conect" scope="session" class="Control.BeanConnection" />
<%//Esto es Java Basico De VI Semestre
            try {//Las Excepciones No permiten reventar nuestras aplicaciones y nos informan de los errores.
                if (request.getMethod().equals("POST")) { //Se recibe el metodo
                    String evento = request.getParameter("evento"); //Se recogen los parametros
                    String order = request.getParameter("ordenar");
                    if (evento.equals("Run")) {
                        String palabras[] = order.split("&");//Se separan los items que vienen en el arreglo JSON
                        for (int i = 0; i < palabras.length; i++) { //Se vacea el arreglo
                            String palabras2[] = palabras[i].split("=");
                            String b = palabras2[0];
                            String a = palabras2[1];
                            String consulta = "UPDATE tabla SET posicion=\'" + a + "\' " +
                                    "WHERE nombre_li=\'" + (b.substring(0, 8)) + "_" + (i + 1) + "\' ";//Se Actualiza y con se escribe la respuesta
                            conect.ejecutar_sql_catch(consulta);//se llama al metodo de ejecucion para enviar datos a la bd
                            out.println(consulta);
                        }
                    }
                }
            } catch (SQLException e) {//Si hay una Excepcion en SQL
                out.println(e.getMessage());
            }

%>

BEAN De Conexion

package Control;
/**
 *
 * @author Yovany Suarez Silva
 */
import java.sql.*;

public class BeanConnection{
    private Connection con = null;
    private PreparedStatement st = null;
    private Statement st1;
    private ResultSet rs;

    private int id=0;

    public BeanConnection() {

    }
    public int getId(){
        return id;
    }
    public void setId(int _id){id=_id;}
    String cadena="";

    public void instituciones(){
        cadena="ajax?user=root&password=";
    }
    public void conecta(){
        instituciones();
        try {
            Class.forName("com.mysql.jdbc.Driver").newInstance();
            con =  (Connection) DriverManager.getConnection("jdbc:mysql://localhost/"+cadena);
        } catch(Exception e) {
            System.out.println("\nERROR pool: " + e.toString());
        }
    }
    public Connection getConect(){return con;}
    public void close() {
        try {
            
        } catch(Exception e) { }
    }
    public void closing() {
        try {
            st.close();
            con.close();
        } catch(Exception e) { }
    }
    public ResultSet ejecutar_select_catch(String la_sql) throws SQLException {
        conecta();
        rs = null;
        st= con.prepareStatement(la_sql);
        rs = st.executeQuery();
        return rs;   
    }
    public int ejecutar_sql_catch(String la_sql) throws SQLException {
        conecta();
        int num_filas = 0;
        st=con.prepareStatement(la_sql);
        num_filas = st.executeUpdate();
        return num_filas;
    }
}

Espero le Aprovechen, lo remodelen y me cuenten como les fue, a traves de pequeños comentarios.

y Termino con Esta magnifica Frase "Todo lo que no Se Comparte se Pierde", Hafary.

Concatenacion de Caracteres en paginas JSP (" "+String+" ");

2010-02-12T17:28:00.000-08:00

La concatenacion en aplicaciones java web (JSP) es uno de los recursos que se hace irrelevante en el momento de obtener resultados de datos procesados en un controlador y de responder al usuario que hace la peticion o mejor dicho quien realiza la accion.

Una concatenacion permite juntar caracteres que vienen de variables ya sean (int) enteras, String (caracter), Date, etc.

Para la conbinacion de tipos de variables se emplean metodos para la conversion de datos como el famoso .toString(int); o Integer.parseInt("String");

En el siguiente codigo se define una variable tipo String que obtiene los datos de una lista, la idea basicamente es mostrar un valor String que se imprime en el html,, resultado de la concatenacion de un valor nombre1, nombre2, apellido1,apellido2 que contiene los datos de un usuario, si el usuario tiene un segundo apellido y un segundo nombre, se mostrara solo la Inicial en estilo mayuscula.


<%@page contentType="text/html"%>

<%@page pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

   "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>JSP Page</title>

    </head>

    <body>

        <h1>JSP (Concatenacion)</h1>

        <%

        try{

            

            List usuario=BeanUsuarios.getListaUsuarios(); //se crea un elemento tipo lista y se trae algunos valores de la clase BeanUsuarios y el metodo GetListaUsuarios que evidentemente sera un bean tipo list

            int contador=0;

            while(contador<=usuario.size()){ //para vaciar la lista se pregunta por el tamaño

            contador ++;

            String pdf="";

            //

            pdf+=("<span><strong>Apellidos: <strong>"+usuario.apellido1+"</span><div style=\"text-transform:uppercase;\"> ");

            if(usuario.apellido2.substring(0,1).length()!=0){

                pdf+=(""+usuario.apellido2.substring(0,1));

            }else{

                pdf+=(""+usuario.apellido2);

            }

            pdf+=(".</div> <span><strong>Nombre: <strong>"+usuario.nombre1);

            pdf+=("</span><div style=\"text-transform:uppercase;\"> "); //Estilo CSS para poner primera letra en mayuscula.

            if(usuario.nombre2.substring(0,1).length()!=0){//preguntar por el tamaño del valor de la propiedad de la lista usuarios

                pdf+=(""+usuario.nombre2.substring(0,1));

            }else{

                pdf+=(""+usuario.nombre2);

            }

            pdf+=(".</div>"); // el += hace que se siga almacendo en la variable sin eliminarse ningun caracter

            out.print(""+pdf); //Se imprime en la JSP

            }

           

        } catch (Exception ex) { //si existe un error en el codigo se obtiente una excepcion y se imprime el error en consola

            out.print("Error: "+ex.getMessage());

        }

        %>

        

        

        

    </body>

</html>

El Resultado final Sera de esta Manera.

Apellidos: Suarez S. Nombres: Yovany

Apellidos: Suarez . Nombres: Yovany M.

Pagina Dinamica con JSP

2010-02-02T22:43:00.000-08:00

JSP (Javas Servlet Pages)

Con ajax, la nueva tecnologia que combina, css, javascript y xml, se pueden realizar cargas de paginas dentro de divs o frames ubicados en una pagina principal, pero esto realmente no es dinamismo en el sentido del desarrollo web, este proceso solo se hace con lenguajes que se copilan en el navegador o el cliente en el caso de javascript, css, html, etc.

Para realizar aplicaciones web Dinamicas de alto nivel es necesario utilizar lenguaje de servidor como lo es php, jsp, aspx, etc.

En Este ejemplo ilustro de una manera sencilla como poner en marcha la logica del dinamismo en paginas JSP

La idea consiste en crear una variable que servira como pin de corte entre los diferentes fragmentos html , mediante un comando href se enviaran valores en parametros, se recibiran a travez del metodo HttpServletRequest y se pondran en la variable para luego ser condicionada por la JSP

<%-- 
    Document   : PaginaDinamica
    Created on : 3/02/2010, 12:28:41 AM
    Author     : Yovany Suarez Silva
--%>

<%@page contentType="text/html"  import="java.sql.*, java.util.Date, javax.swing.*, javax.servlet.http.*, javax.servlet.*, javax.servlet.http.HttpSession"  import="java.util.*, java.io.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<%
int pin=0; //ummmm

try{ //capturamos las excepciones para que no nos reviente la pagina, es muy importante
    if(request.getMethod().compareTo("GET")==0){ //Preguntamos si el metodo del formulario es tipo get, 
        //en este caso como viene de un href (propiedad de un <a>). viene como tipo GET
    pin = Integer.parseInt(request.getParameter("pin"));//capturamos el valor del componente pin='', 
       //que mandamos en el href="PaginaDinamica.jsp?pin=1"
    }else{
        pin=0;
        }
}catch(Exception e){//si existe una excepcion imprimimos el mensaje.
    out.print("valor: "+e.getMessage()+"; No se ha recibido un Valor.");
    }
%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Pagina Dinamica Con JSP</title>
    </head>
    <body>
        <%--Menu para enviar los parametros a la variable pin--%>
        <ul>
            <li><a href="PaginaDinamica.jsp?pin=1" <%-- Se envia el parametro con el valor pin=1 en la accion del href --%>>Mostrar el Fragmento de pagina 1</a></li>
            <li><a href="PaginaDinamica.jsp?pin=2">Mostrar el Fragmento de pagina 2</a></li>
            <li><a href="PaginaDinamica.jsp?pin=0">Volver al Inicio</a></li>
        </ul>
        <% if(pin == 0){/*si pin tiene un valor = 0 */%>
        Hola a todos este es un ejemplo muy facil para explicar un poco la logica de las paginas JSP dinamicas
        <%}if(pin == 1){/*si pin tiene un valor = 1 */%>
        Este es el Fragmento HTML 1
        <%}if(pin == 2){/*si pin tiene un valor = 2 */%>
        Este es el Fragmento HTML 2
        <%}%>
    </body>
</html>

Informacion de Ayuda.

Ver Ejemplo en Linea

Div con Esquinas redondeadas hechas con puro CSS

2010-01-20T00:52:00.000-08:00

CSS es uno de los lenguajes mas usados en el desarrollo de paginas web dinamicas con estilos visuales atractivas, las Cascading Style Sheets (CSS) son archivos que contienen clases visuales para aplicar a componentes html.

Ejemplo

<style>
.texto{
  text-aling:center; /*texto centrado*/
  font-size:15px;/*tamaño del texto*/
  color:#000000;
  border-bottom:1px solid gray; 
  /*Borde inferior de grosor 1px solido y de color gris*/
}
</style>

Ahora para aplicar este estilo a un elemento simplemente lo aplicamos en el atributo class del elemento. La mayor ventaja de usar CSS es que se puede reutilizar la clase en varios elementos html.

Ejemplo:

<div class="texto">
Este es un texto de prueba con un estilo visual aplicado.
</div>

Despues de esta breve introduccion ahora si vamos a ver tres ejemplos de Cajas (div) con bordes redondeados hechos solo con css y algunas imagenes en el caso del 3 ejemplo.

Informacion de Ayuda.

Ver Ejemplo 1 en Linea.
Ver Ejemplo 2 en Linea.
Ver Ejemplo 3 en Linea.

Validacion de Formularios usando la Libreria Prototype

2010-01-19T23:57:00.000-08:00

Este sencillo ejemplo de validacion de formularios con la libreria ajax llamada PROTOTYPE nos permite realizar una validacion de los campos de un formulario, en ocasiones es bueno y seguro para la aplicacion ya que se puede desde la capa de presentacion decirle al usuario cual es el dato requerido para cada campo en el formulario y asi evitar que los datos que lleguen a nuestra capa de controladores tengan que ser validados de nuevo.

<html>
<head>
<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/src/effects.js" type="text/javascript"></script>
<script type="text/javascript" src="fabtabulous.js"></script>
<script type="text/javascript" src="validation.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<h1>Formulario de Registro de Nuevo Usuario </h1>
<div id="mainmenu">
<div id="tab2"><ul id="taabs">
<a href="#standard">Nuevo Usuario </a>
<a href="#using-titles">Nueva Afiliacion </a>
<a href="#no-element-ids">Mas Informacion</a>
</ul><div>
<div class="bar">&nbsp;</div>
<div class="panel" id="standard">
<form id="test" action="registro.jsp" method="post">
<table width="405" border="0" align="center">
<tr>
<td width="399"><ul id="tabs1">

<a href="#standard1">Tu Cuenta</a>      

<a href="#using-titles1">Profesional</a>      

<a href="#no-element-ids1">Mas Informacion</a>      
</ul><div>
<div class="bar">&nbsp;</div>
<div class="panel" id="standard1">

<fieldset>
<legend>Datos para la Cuenta Nueva </legend>
<div class="form-row">
<div class="field-label">
<label for="nombre">Nombre Completo </label>
:</div>
<div class="field-widget"><input name="nombre" class="required" id="nombre" title="Ingrese su Nombre Completo" size="30" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="field1">Apellidos</label>
:</div>
<div class="field-widget"><input name="apellidos" class="required" id="apellidos" title="Enter your name" size="40" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="documento">Documento de Identidad </label>
:</div>
<div class="field-widget"><input name="cedula" class="validate-number" id="cedula" title="Ingrese su Nombre Completo" size="20" />
No de Cedula</div>
</div><div class="form-row">
<div class="field-label">
<label for="field1">Nombre de Usuario</label>
:</div>
<div class="field-widget"><input name="user" class="required" id="user" title="Enter your name" size="30" />
</div>
</div>
<div class="form-row">
<div class="field-label"><label for="pass">Password</label>:</div>
<div class="field-widget"><input type="password" name="pass" id="pass" class="required validate-password" title="Ingrese un password con mas de 6 caracteres" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="password">Confirmar Password</label>:</div>
<div class="field-widget"><input type="password" name="password" id="password" class="required validate-password-confirm" title="Ingrese el password de confirmacion" />
</div>
</div>
<p><a href="#" onClick="$('email-signup').toggle(); return false">Ingrese Su Correo Electronico!</a></p>
<div id="email-signup" class="form-row" style="display:none;">
<div class="field-label"><label for="email">Email</label>:</div>
<div class="field-widget"><input name="email" id="email" class="required validate-email" title="Opcional: Ingrese su Correo Electronico" size="50"/></div>
</div>
</fieldset>
</div>
<div class="panel" id="using-titles1">
<fieldset>
<legend>Informacion Profesional del Usuario </legend>
<div class="form-row">
<div class="field-label">
<label for="field1-t2">Empresa</label>:</div>
<div class="field-widget"><input name="empresa" class="required" id="empresa" title="Enter your name. This is a required field" size="50" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="field3-t2">Profesion</label>:</div>
<div class="field-widget"><input name="profesion" class="required" id="profesion"  title="Enter your employee number, please use only alphanumeric characters" size="40" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="field4-t2">Cargo Actual  </label>
:</div>
<div class="field-widget"><input name="cargoactual" class="required" id="cargoactual"  title="Optional: Enter your age, please use only numbers" size="40" /> 
(opcional)</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="field5-t2">Tiempo de Labores Profesionales  </label>
:</div>
<div class="field-widget"><input name="tlabores" class="validate-number" id="tlabores"  title="Optional: Enter a dollar amount for donation" size="10" /> 
(Anos)</div>
</div>
</fieldset>
<div align="center"><br>
<input name="evento" type="submit" class="boton" id="evento" value="Enviar" /> 
<input name="evento" type="button" class="boton" id="evento" onClick="valid.reset(); return false" value="Limpiar" />
</div>
</div>
<div class="panel" id="no-element-ids1">
<fieldset>
<legend>Registrar Otros Servicios </legend>
<div class="form-row">
<div class="field-label">
<label for="field5-t2">Informacion del Sistema   </label>
:</div>
<div>
<p align="justify" ><img src="../../../recursos/plantillas/blue2008/images/mensaje_advertencia.png" width="64" height="64" style="float:left; margin-right:10px" />Por favor ingresa los datos generales y tambien los datos laborales, luego si envia el formulario. Para Solicitar tus datos personales llena el formulario para Forzar el Password. Estos datos seran consultados y validados por el sistema y le seran arrojados los valores de la consulta en el email que se regsitro para la cuenta de usuario.</p>
<p>El Olvido de Password acarrea grandes problemas de inseguridad por favor sea prudente a la hora de almacenar sus password en lugares de recordatorio facil. </p>
</div>
</div>
</fieldset>
</div>
</div> </td>
</tr>
</table>     <script type="text/javascript">
function formCallback(result, form) {
window.status = "valiation callback for form '" + form.id + "': result = " + result;
}

var valid = new Validation('test', {immediate : true, onFormValidate : formCallback});
Validation.addAllThese([

['validate-password-confirm', 'La Confirmacion del Password es Invalida. Por favor intentelo nuevamente', {
equalToField : 'pass'
}]
]);
</script></form>
</p></div>
<div class="panel" id="using-titles">
<form id="afiliacion" action="afiliacion.jsp" method="post">
<table width="405" border="0" align="center">
<tr><td><table width="396" border="0" align="center">
<tr>
<td class="field-label">Fecha de Afiliacion:</td>
</tr>
</table></td></tr>
<tr>
<td width="399"><ul id="tabs2">

<a href="#standard2">Identificacion</a>      

<a href="#using-titles2">Domicilio</a>      

<a href="#inforeferido2">Referido</a>
<a href="#no-element-ids2">Mas Informacion</a>      
</ul><div>
<div class="bar">&nbsp;</div>
<div class="panel" id="standard2">

<fieldset>
<legend>Datos para la Afiliacion </legend>
<div class="form-row">
<div class="field-label">
<label for="nombre">Id de Usuario </label>
:</div>
<div class="field-widget"><input name="id" class="required" id="id" title="Ingrese El Id de Usuario" size="10" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="nombre">Nombre Completo </label>
:</div>
<div class="field-widget"><input name="nombre" class="required" id="nombre" size="30" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="field1">Apellidos</label>
:</div>
<div class="field-widget"><input name="apellidos" class="required" id="apellidos" size="40" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="documento">Sexo </label>
:</div>
<div class="field-widget"><input type="radio" name="sexo" id="sexo" value="M" />
Masculino<br />
<input type="radio" name="sexo" id="sexo" value="F" class="validate-one-required" />
Femenino</div>
</div><div class="form-row">
<div class="field-label">
<label for="documento">Tipo de Documento  </label>
:</div>
<div class="field-widget">
<select name="tipodocumento" class="required" id="tipodocumento">
<option>Seleccione..</option>
<option value="1">Cedula</option>
<option value="2">C. Extranjeria</option>
</select>       
Tipo de Documento </div>
</div><div class="form-row">
<div class="field-label">
<label for="documento">No de Documento </label>
:</div>
<div class="field-widget"><input name="nodocumento" class="required validate-number" id="nodocumento" title="Ingrese el numero del documento" size="20" />
No del Documento </div>
</div><div class="form-row">
<div class="field-label">
<label for="field1">Telefono</label>
Fijo:</div>
<div class="field-widget"><input name="telfijo" class="required validate-number" id="telfijo" title="Ingrese un Telefono Fijo" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="pass">Telefono Celular </label>
:</div>
<div class="field-widget"><input name="telcel" id="telcel" class="required validate-number" title="Ingrese un Numero Celular" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="password">Profesion</label>
:</div>
<div class="field-widget"><input name="profesion" class="required" id="profesion" title="Ingrese su Profesion" size="50" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="password">Web</label>
:</div>
<div class="field-widget"><input name="web" class="required validate-url" id="web" title="Ingrese el password de confirmacion" size="40" />
</div>
</div>
<p><a href="#" onClick="$('email-signup').toggle(); return false">Ingrese Su Correo Electronico!</a></p>
<div id="email-signup" class="form-row" style="display:none;">
<div class="field-label"><label for="email">Email</label>:</div>
<div class="field-widget"><input name="email" id="email" class="required validate-email" title="Opcional: Ingrese su Correo Electronico" size="50"/></div>
</div>
</fieldset>
</div>
<div class="panel" id="using-titles2">
<fieldset>
<legend>Informacion de Domicilio a Efecto de Notificaciones </legend>
<div class="form-row">
<div class="field-label">
<label for="field1-t2">Ciudad</label>
:</div>
<div class="field-widget"><input name="ciudad" class="required" id="ciudad" title="Enter your name. This is a required field" size="40" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="field3-t2">Barrio</label>
:</div>
<div class="field-widget"><input name="barrio" class="required" id="barrio"  title="Ingrese el Nombre del Barrio de Residencia" size="40" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="field4-t2">Telefono  </label>
:</div>
<div class="field-widget"><input name="telefono" class="required validate-number" id="telefono"  title="Ingrese un Numero de Telefono de Domicilio" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="field4-t2">Entidad  </label>
:</div>
<div class="field-widget"><input name="entidad" class="required" id="entidad"  title="Ingrese el nombre de la Entidad" size="40" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="field4-t2">Direccion  </label>
:</div>
<div class="field-widget"><input name="direccion" class="required" id="direccion"  title="Ingrese una Direccion Valida de Ubicacion" size="40" />
</div>
</div>
<div class="form-row">
<div class="field-label">
<label for="field5-t2">Oficina  </label>
:</div>
<div class="field-widget"><input name="oficina" class="required" id="oficina"  title="Ingrese un identificador de Oficina" size="30" />
</div>
</div>
</fieldset>

</div>
<div class="panel" id="inforeferido2">
<fieldset>
<legend>Informacion del Referido  </legend>
<div class="form-row">
<div class="field-label">
<label for="field1-t2">No Documento </label>
:</div>
<div class="field-widget"><input name="nodocrefe" class="required validate-number" id="nodocrefe" title="No del Documento de quien lo refirio" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="field1-t2">Nombre </label>
:</div>
<div class="field-widget"><input name="nombrerefe" class="required" id="nombrerefe" title="Ingrese el Nombre de Quien lo Refirio" size="40" />
</div>
</div><div class="form-row">
<div class="field-label">
<label for="field1-t2">Apellidos</label>
:</div>
<div class="field-widget"><input name="apellidosrefe" class="required" id="apellidosrefe" title="Ingrese el Apellido de quien lo Refirio" size="50" />
</div>
</div><div align="center"><br>
<input name="evento" type="submit" class="boton" id="evento" value="Enviar" /> 
<input name="evento" type="button" class="boton" id="evento" onClick="valid.reset(); return false" value="Limpiar" />
</div>
</fieldset>
</div><div class="panel" id="no-element-ids2">
<fieldset>
<legend>Informacion para el Afiliado  </legend>
<div class="form-row">
<div class="field-label">
<label for="field5-t2">Informacion del Sistema   </label>
:</div>
<div>
<p align="justify" ><img src="../../../recursos/plantillas/blue2008/images/mensaje_advertencia.png" width="64" height="64" style="float:left; margin-right:10px" />Por favor ingresa todos los datos en el formularios de afiliacion. un administrador aprobara la afiliacion y te enviara el codigo unico de usuario al email registrado.</p>
<p>El Olvido de Password acarrea grandes problemas de inseguridad por favor sea prudente a la hora de almacenar sus password en lugares de recordatorio facil. </p>
</div>
</div>
</fieldset>
</div>
</div> </td>
</tr>
</table>     <script type="text/javascript">
function formCallback(result, form) {
window.status = "valiation callback for form '" + form.id + "': result = " + result;
}

var valid = new Validation('afiliacion', {immediate : true, onFormValidate : formCallback});
</script></form>


</p></div>
<div class="panel" id="no-element-ids">
<form id="test3" action="#" method="get">
<fieldset>
<legend>Mensaje</legend>
<div class="form-row">
<div class="field-label">
<label for="field5-t2">Informacion del Sistema   </label>
:</div>
<div>
<p align="justify" class="required"><img src="../../../recursos/plantillas/blue2008/images/mensaje_advertencia.png" width="64" height="64" style="float:left; margin-right:10px" />Para Solicitar tus datos personales llena el formulario para Forzar el Password. Estos datos seran consultados y validados por el sistema y le seran arrojados los valores de la consulta en el email que se regitro para la cuetna de usuario.</p>
<p>El Olvido de Password acarrea grandes problemas de inseguridad por favor sea prudente a la hora de almacenar sus password en lugares de recordatorio facil. </p>
</div>
</div>
</fieldset><br>
</form>
</div>
</div></div>
</div></div>

<script type="text/javascript">
new Fabtabs('taabs');
new Fabtabs('tabs1');
new Fabtabs('tabs2');
</script>
</body>
</html>

Ver Ejemplo en Linea.

Mostrar y Ocultar elementos HTML en una JSP con JQuery

2010-01-19T22:51:00.000-08:00

Ahora y Desde hace mucho, Mediante la libreria jquery podemos realizar efectos especiales en los componentes html (input,select,checkbox,etc) de nuestras jsp, este es un ejemplo basico para ocultar y mostrar un campo de texto al seleccionar una casilla de verificacion.

<html>
<head>
<title>Mostrar Ocultar</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script> 
<script> 
     $(document).ready(function(){
     $("#mayoria_edad").click(function(evento){
        if ($("#mayoria_edad").attr("checked")){
       $("#formulariomayores").css("display", "block");
       }else{
       $("#formulariomayores").css("display", "none");
     }
});
});
</script>
</head>

<body>

<form>
Nombre: <input type="text" name="nombre">
<br>
<input type="checkbox" name="mayor_edad" value="1" id="mayoria_edad"> Soy mayor de Edad
<br>
<div id="formulariomayores" style="display: none;">
Solo mayores de Edad: <input type="text" name="mayores_edad">
</div>
</form>
</body>
</html>

Informacion de Ayuda.

Ver Ejemplo en Linea.

Efectos Sobre Etiquetas DIV usando Mootols y su funcion FxTween

2010-01-15T22:53:00.000-08:00

Mootools es una libreria ajax que nos permite realizar una gran variedad de efectos especiales sobre componentes html como div, span, a, etc.

En esta ocasion vamos a ver la utilidad de la funcion Fx.Tween y para ello vamos a ver dos pequeños ejemplos. El primero consite en aplicar transparencia en capas a una div, el segundo consiste en cambiar el color de fondo de una div al dar click sobre un enlace.

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Cambiar Fondo DIV</title>
<script src="libreria/mootools-1.js" type="text/javascript"></script>
<script>
function CambiarColorDiv(){
efecto = new Fx.Tween("micapa1");
efecto.start("background-color", "#ffffff");
efecto.start("color", "#ffffff");

efectoColorTexto = new Fx.Tween("micapa2", {
property: 'background-color',
duration: 'long',
fps: 200
});
efectoColorTexto.start("#ff8800"); 
};
</script>
</head><body>
<div id="micapa1" style="padding: 5px; background-color: rgb(120, 166, 0); width: 160px; font-size:11px; color:#FFFFFF;">
cambiando el color de una div usando librerias javascript MOOTOLS y la Super funcion Fx.Tween
</div>
<div id="micapa2" style="padding: 5px; background-color: rgb(120, 166, 0); width: 160px; font-size:11px; color:#FFFFFF;">
cambiando el color de una div usando librerias javascript MOOTOLS y la Super funcion Fx.Tween
</div>

<a onClick="CambiarColorDiv();">Click Aca para Cambiar el Fondo de la Div</a>
</body></html>

Simulacion de un PID en Proteus 7 Professional

2009-12-01T22:20:00.000-08:00

PID (Proporcional, Integrador y Derivativo)

El control automático desempeña un papel importante en los procesos de manufactura industrial.

El controlador PID (análogo y digital) es complejamente estudiado en la asignatura de CIBERNETICA II y III en ingenieria de sistemas de la Uniamazonia. Gracias al nuevo enfoque sobre herramientas virtuales academcias que el Ing. Gabriel Marin ofrece para el aprendizaje sobre elementos y tecnicas de control es que podemos conocer estos mecanismos ciberneticos.

Como desarrollador de software siempre me habia visto aislado de la matematica de control, tanto asi que repeti en varias ocasiones asignaturas relacionadas con la matematicas, no es que las matematicas sean el coco en mi campo mental, solo que mi vison no es la de especializarme como matematico o cibernetico.
En dias atras no veia la realidad y el beneficio de llevar el control en los sistemas a traves de procesos matematicos, ahora entiendo que los sistemas de control son muy importantes en los desarrollos tecnologicos y el ajuste de control que quiero llevar sobre estos desarrollos, especialemente ahora que nace la idea de realizar como trabajo de grado un sistema de control orienta a la web.

En esta publicacion mostrare la experiencia en el proceso de implementacion de un PID en el simulador de componentes electronicos PROTEUS

Ontologia.

Señal de salida: es la variable que se desea controlar (posición, velocidad, presión, temperatura, etc.). También se denomina variable controlada.

Señal de referencia: es el valor que se desea que alcance la señal de salida.

Error: es la diferencia entre la señal de referencia y la señal de salida real.

Señal de control: es la señal que produce el controlador para modificar la variable controlada de tal forma que se disminuya, o elimine, el error.

Señal análoga: es una señal continua en el tiempo.

Señal digital: es una señal que solo toma valores de 1 y 0. El PC solo envía y/o recibe señales digitales.

Conversor análogo/digital: es un dispositivo que convierte una señal analógica en una señal digital (1 y 0).

Conversor digital/análogo: es un dispositivo que convierte una señal digital en una señal analógica (corriente o voltaje).

Planta: es el elemento físico que se desea controlar. Planta puede ser: un motor, un horno, un sistema de disparo, un sistema de navegación, un tanque de combustible, etc.

Proceso: operación que conduce a un resultado determinado.

Sistema: consiste en un conjunto de elementos que actúan coordinadamente para realizar un objetivo determinado.

Perturbación: es una señal que tiende a afectar la salida del sistema, desviándola del valor deseado.

Sensor: es un dispositivo que convierte el valor de una magnitud física (presión, flujo, temperatura, etc.) en una señal eléctrica codificada ya sea en forma analógica o digital. También es llamado transductor. Los sensores, o transductores, analógicos envían, por lo regular, señales normalizadas de 0 a 5 voltios, 0 a 10 voltios o 4 a 20 mA.

Sistema de control en lazo cerrado: es aquel en el cual continuamente se está monitoreando la señal de salida para compararla con la señal de referencia y calcular la señal de error, la cual a su vez es aplicada al controlador para generar la señal de control y tratar de llevar la señal de salida al valor deseado. También es llamado control realimentado.

Sistema de control en lazo abierto: en estos sistemas de control la señal de salida no es monitoreada para generar una señal de control.

Bueno ahora si vamos al grano.

DISEÑO DE UN CONTROLADOR PID (Proporcional, Integrador y Derivativo) ANALOGO PARA UN CIRCUITO RC DE SEGUNDO ORDEN

Se especifica que el diseño de un sistema de control se puede realizar ya sea en el dominio del tiempo o en el de la frecuencia. También se describen algunas especificaciones de diseño pero son únicas para cada diseño.
Para realizar un buen procedimiento se debe:

Determinar que debe hacer el sistema y como hacerlo.
Determinar la configuración del compensador.
Determinar los valores de los parámetros del controlador para alcanzar los objetivos de diseño.

Se usan cálculos matemáticos y para esto nos apoyamos en el IDE Matlab para ubicar datos necesarios como los polos dominantes de nuestro sistema y observar si cumple o no con nuestras especificaciones de diseño.

Así mismo se cuenta con el IDE Proteus, el cual nos sirve para desarrollar la simulación que dará la verificación de los datos obtenidos y así poder constatar el funcionamiento de nuestro diseño de PID.

Pero, Cuales objetivos perseguimos con el diseño de este controlador?

Obtener la función de transferencia de la planta o circuito rc para el que vamos a diseñar el controlador PID.
Obtener la función de transferencia del controlador basado en el circuito con amplificadores operacionales (Proporcional - Integral - Derivativo).
Obtener mediante la sisotool de Matlab la función de transferencia del controlador con los parámetros de diseño establecidos.
Por medio de los resultados obtenidos con la sisotool de Matlab y el controlador hallado manualmente, calcular y seleccionar los elementos de circuito para el controlador PID.
Simular el sistema de control de lazo cerrado compensado y no compensado ante una entrada escalón.
Con base a los elementos de circuito calculados, simular mediante Proteus el circuito diseñado.
Ensamble y pruebas del controlador.

¡ Nuestra Planta es un circuito RC.

Como se puede observar, la planta que hemos escogido es un sistema de segundo orden, ya que contiene dos elementos almacenadores de energía que son los condensadores Ca y Cb.

Aplicaciones JSP (Java Orientado a la Web)

2009-12-01T21:52:00.000-08:00

Bien, en esta publicacion hablare un poco sobre el desarrollo de aplicaciones web alojadas bajo servidores java (resin, tomcat), explicare como configurar los archivos para el resin y como enlazar la base de datos. Como se que muchos lo estaban esperando, lo he organizado de la mejor manera para que sea lo mas entendible posible. No apto para cardiacos.

Nuestros Requerimientos.

Sitio Web para la Gestion de Imagenes Fotograficas (Galeria Fotografica).
Arquitectura J2EE.
Patron de diseño MVC.
Metodologia XP (Programacion Extrema).
Modelado de Datos.
Modelado UML.

Nuestras Herramientas.

Motor de Base de datos Access.
Servidor de Aplicaciones Resin (Caucho Tecnology)
IDE Netbeans
IDE Dreamweaver
IDE TopStyle
Acces de Microsoft Oficce
Configurar Conexion ODBC

Nota.

Si desea conectarse a POSTGRES o MYSQL Pegar el driver de postgresql-8.4-701.jdbc3.jar y el de mysql en el directorio c:archivos de programa/java/jdk6/jre/lib/ext.
Crear la odbc con windows desde herramientas administrativas con el nombre ConectToAcces
y seleccionando la bd acces de nombre contacto, porque asi esta referenciado en el bean conexion de nuestro proyecto web.
Si se conecta con postgres arrancar Postgrest para que cuando se use la opcion de conectar con postgrest este este activado.
Copiar y pegar el contenido sql del archivo sqlcontactoPostgrestoMysql.sql, anexo en esta carpeta.
Si se conecta con postgres arranque el servicio de postgres desde herramientas administrativas, servicios. (No olvidar) para que no presente problemas de conexion.

Mediante un ejemplo para descargar, se muestra este pequeño proyecto web realizado a bajo costo, pero en el que al principio tuve que invertir mucho tiempo en lecturas y practicas para entender la verdadera usabilidad de este tipo de aplicaciones.

VibroBot (FhotoProber)

2009-06-02T14:44:00.000-07:00

VibroBOT (BEAM)

Este es la segunda de mis creaciones en el engome con la robótica, al parecer es algo estúpido pero en el fondo, muy en el fondo, donde solo la ingenieria penetra se ve como una gran creación, al menos en mi galaxia, la primera creacion fue (MABE) nunca funciono, mi primer hola mundo, es mas pequeño, pero con lo que se diseño en el papel se dio como resultado el montaje de un sencillo BEAM que se alimenta con energía de baterías tamaño boton, de 3.0 voltios, sin amperaje suficiente para dar traccion al cigueñal de las extremidades de desplazamiento.
es todo un fracaso.! pero dejo ver lo que en esencia se requeria, el de hacer cosas simples con apariencia biologica y mecanismo electronicos.
Este nueva creación tiene muchas modificaciones, al menos ya toma la luz del sol como fuente de alimentación para mantenerse en simple contacto con el ambiente, cumpliendo con las características de ser un robot BEAM ,es decir tiene la capacidad de convertir la energía solar en energía electrica al pasarla por celdas fotovoltaicas.
Estas celdas fueron traidas a la universidad por el profesor Jose Antonio Marin Peña profesor de fisica En la universidad de la Amazonia quien de esta manera contribuye al estudio de ellas y su aplicacion en los proyectos de ingeniera en la universidad, Proyectos que mucho hacen falta para cambiar las dinamicas del aprendizaje en nuestra academia.
Este BEAM sera exibido en la Tercer Concurso de Robot Seguidores de Linea en la universidad de la amazonia llevada a cabo el Jueves 4 de Junio en las horas de la mañana.

A continuacion presento el metodo de elaboracion de una forma autonoma BEAM.

Materiales.
2 integrados o compuertas de Material Reciclado
30 Cm de alambre resistente de 1.5 ml de diametro.
Alambre de estaño.
Cinta Negra.
Alambres de Circuiteria.
1 condensador de 2300uf.
1 Placa de circuito reciclada para soporte del BEAM.
6 Resistencias como chasis de ajuste del motor.
1 Motor con contra peso (vibrador de XBOX).
1 Placa de lamina para soporte de la Fotocelda.
1 Fotocelda de 5.0 Voltios.

Ver Video del BEAM en funcionamiento.

MaBE. Mi primer hola mundo en Robotica BEAM

2009-05-03T12:49:00.000-07:00

___________________________________________________________________

Se aproxima el concurso de Robótica semestral organizado por el grupo de Investigación GIECOM, este semestre con la novedad "robots BEAM" y siguiendo la tradicion con el concurso de robot seguidores de línea.

Para la construcción de un robot BEAM se debe tener en cuenta ciertas características.

Desplazamiento del BEAM
- Es Decir como se desplazara el robot, mediante que sistema de rueda, brinco, pasos se moverá el BEAM.
Energía del sistema.
- como se alimentara nuestro sistema?, cómo mi robot tomara energía y se mantendrá con vida artificial?, es la energía misma que lo desplazara?.
Herramientas al alcancé
- siempre antes de empezar con nuestro diseño es necesario poder hacer un inventario de con que artefactos contamos para la elaboración, en este caso no estamos ante una gran bodega de elementos electrónicos.

Herramientas para la construcción del MaBE.

1 Motor "vibrador" de Celular.
2 Alambres de aproximadamente 2 milímetros de espesor X 3 cm de largo.
1 soporte para el motor.
1 Batería de Celular.
2 soportes para las extremidades delanteras "componente Click de un mouse".
1 Soporte con diseño de rodillo para la parte inferior.
Herramientas (soldador, alambres, pinzas, destornilladores, silicona, etc).

Primera Fase del Desarrollo.

Sistema de Desplazamiento de MaBE.

En esta figura se puede ver en brevedad como actua el sistema de desplazamiento diseñado para el robot.

Esta imagen muestra a MaBE con el sistema de eje implementado, sin los soportes en sus extremidades.	Este sistema esta conformado por dos elementos soporte en las extremidades superiores de MaBE, el cuerpo central donde reside el motor, y un soporte para la parte posterior haciendo balance al MaBE.
Tamaño Real del sistema de desplazamiento de MaBE.

RESIN - Servidor de Aplicaciones Web

2009-05-02T09:18:00.000-07:00

Servidor de Aplicaciones WEB Resin (Caucho).
Sistemas Operativos Linux - Windows

www.caucho.com

Resin es el nuevo servidor de aplicaciones web que me permite ejecutar y ver cambios en tiempos muy cortos, este servidor se ejecuta desde su directorio raíz, no necesita ningún componente instalado en el sistema , es autónomo, eso si obviamente, las jdk, controladores de bases de datos y otros recursos necesarios como la maquina virtual java. Sí necesitamos en determinado momento llevar nuestro servidor con las características configuradas por nosotros, lo podemos hacer muy fácilmente en una usb, un cd y luego montarlo en cualquier destino y sobre cualquier S.O.

Cuando trabajamos sobre un servidor de aplicaciones Tomcat, se suben los archivos a su carpeta base donde se encuentra la aplicación web y se debe esperar que el servidor ,en determinado tiempo programado, o con ejecución manual para realizar el proceso de compilación encuentre los archivos, vea cuales son lo que contiene cambios de fechas y tamaño y realiza la lectura nueva de los archivos. Esta demora perjudica el avance del desarrollo de aplicaciones web. En algunos casos es necesario ver el funcionamiento de los cambios en linea para no obviar detalles de algunas fallas o evitar excepciones y se hace muy engorroso tener que esperar para poder ver los cambios realizados en la aplicación, con Resin esta utilidad es puesta en marcha y satisface la necesidad, Resin realiza un nueva lectura de los archivos cada vez que nota cambios en los archivos base, es decir cada vez que un archivo nuevo es subido al servidor de aplicaciones este inmediatamente atiende el cambio y realiza la ejecución de estos archivos, trayendo al instante la vista de los nuevos cambios realizados, como servidor de prueba para desarrollos web, Resin presenta gran beneficio al tiempo de ver Cambios.

Características del Servidor RESIN

Compilación y recompilación automática
Se puede utilizar como un servidor completamente autónomo, independiente, obteniendo un mejor rendimiento.
El trafico de datos para el email es el adecuado.
Resin permite especificar el autenticador para su aplicación web
en web.xml.
Una de sus versiones permite tener soporte personal como apoyo al servicio. La cuenta de licencia de pago es a un costo muy económica.
Su estructura interna de directorios y archivos es ordenada.

CONTEXTO

Resin es una aplicación servidor web de alto rendimiento y de código abierto desarrollado por la compañía caucho tecnología, esta escrito en lenguaje java, sus extensiones de archivos son .jsp, esto lo hace ser mas accesible a modificaciones por parte de desarrolladores JAVA.

Una de las necesidades básicas en el desarrollo de aplicaciones web es poder llevar a cabo actualizaciones criticas en linea de la manera mas rápida y eficiente. En los servidores Resin esta tecnología es puesta en marcha.

Donde Encontrar RESIN

Resin se puede descargar directamente desde su sitio web www.caucho.com allí se encuentra mucha información sobre el proyecto y las versiones que existen actualmente. Al Igual existe documentación sobre como gestionar un buen servicio con RESIN, existen versiones de paga a muy bajo costo que beneficia a empresas inclinadas al desarrollo de aplicaciones web.

Como Instalarlo.

Resin se instala en cualquier sistema operativo, es cuestión de descargar la versión que se ajuste al S.O. de la maquina en la web oficial del resin http://www.caucho.com

En Linux.

- Para instalar RESIN en Linux basta con llevar el directorio completo del resin y pegarlo en alguna parte del sistema.

cp /Escritorio/resin/ /usr/local/share/resin/ -R -v

- Luego se ejecuta, es decir se arranca el demonio con el siguiente comando.

sudo java -jar resin/lib/resin.jar

Este comando invoca un .jar principal que contiene los archivos de arranque del servidor y ya esta.

En Windows.

- La versión para windows de Resin es un poco mas fácil de instalar, de igual manera que en Linux, se debe ubicar la carpeta del Resin en un lugar seguro del sistema.

- En la carpeta raiz se encuentra un archivo ejecutable llamado httpd.exe, se ejecuta y listo ya esta el servidor instalado y en servicio.

!Que fácil.

Matlab. IDE de apoyo al estudio de la Cibernetica.

2009-04-12T21:47:00.000-07:00

Despues de pasear un dias por la sintaxis del lenguaje Matlab y tras de consultar un poco en la red sobre el uso del IDE este es mi primer codigo realizado en la asignatura de cibernetica I como trabajo de simulacion sobre funciones: Transferencia, fracciones parciales, laplace e ilaplace, polos, ceros y ganancias o constantes de una funcion de transferencia, funcion rampa, impulse, escalon, seno y coseno de una funcion y sus respectivas graficas.

En el proceso de uso de los comandos para la solucion de funciones en matlab y de la lectura que se debe hacer sobre los resultados arrojados por el IDE, se apoyó el proceso ofrecido en clase sobre las funciones y los demas elementos que las componen y las transforman.

Este pequeño programa muestra el uso de componentes de matlab como campos de texto, slider, lista de seleccion, contenedores graficos, textos estaticos.

Voy a explicar un poco el funcionamiento del codigo y de la interfaz y al final ubicare las fuentes, el maya.m y el maya.fig para ser descargadas.

Caracteristicas Principales.

1. Interfaz grafica de usuario.

2. Evento del Boton Calcular Funcion.

Ingresamos la funcion de transferencia de la siguiente manera, es simple la libreria matematica interna del matlab identifica que el vector expande su exponente de forma creciente es por eso que la funcion aca ingresada es la siguiente.
+

% --- Evento en el boton calcular funcion

function Boton_Callback(hObject, eventdata, handles)
axes(handles.Grafica); %prepara el componente grafica llamado Grafica
num=str2num(get(handles.Numerador,'String')); %captura el vector del numerador %de la funcion de transferencia
den=str2num(get(handles.Denominador,'String')); %captura el vector del

                                                                                %denominador de la funcion de transferencia

[z,p,k]=tf2zp(num,den); %Realiza la funcion de transferencia y extrae sus polos, ceros, y ganancias
[num,den]=zp2tf(z,p,k); %Invertimos la operacion anterior, coge los polos, los ceros y las ganancias %y encuentra la funcion de transferencia
zplane(num,den), ylabel('PARTE IMAGINARIA'), xlabel('PARTE REAL'),title('Grafica de polos y ceros');
% Dibujamos en el componente grafica llamado Grafica, % como ya preparamos un componente para graficas se toma % por defecto ese componente y alli se grafican la informacion % en este caso los polos y ceros de una funcion % de transferencia.
set(handles.Polos,'String',num2str(p)); % mostramos los polos en un text edit llamado Polos.
set(handles.Ceros,'String',num2str(z)); % mostramos los ceros en un text edit llamado Ceros.
set(handles.Ganancias,'String',num2str(k)); % mostramos las Ganacias en un text edit llamado Ganancia.

3. Extracción de los polos, Ceros y Ganancias de la TF.

[z,p,k]=tf2zp(num,den); %Realiza la funcion de transferencia y extrae sus polos, ceros, y ganancias
4. Gráfica de los polos y Ceros de la Función de Transferencia.

zplane(num,den), ylabel('PARTE IMAGINARIA'), xlabel('PARTE REAL'),title('Grafica de polos y ceros');
% Dibujamos en el componente grafica llamado Grafica, % como ya preparamos un componente para graficas se toma % por defecto ese componente y alli se grafican la informacion % en este caso los polos y ceros de una funcion % de transferencia.

5. Funciones, Rampa, Impulso, Escalon, Seno y Coseno.
6. Fracciones Parciales, transformada de laplace e Inversa.
Este fue el mejor sitio de donde pude extraer algunos recursos.
http://www.mathworks.com/access/helpdesk/help/helpdesk.html
y en esta web hay una coleccion de libros que para que mas. solo es cuestion de tiempo para leer y muchas ganas para cacharrear.
http://duniaengineering.wordpress.com/2009/03/21/collection-of-matlab-books/

NetBeans y Dreamweaver. (controladores, vistas)

2009-03-02T12:48:00.001-08:00

Cuando construimos un elemento digital, (clase, HTML, jsp, jsf, beans, servlet) siempre va a ser necesario la visión de los archivos en el contenedor mostrador que nos dará el desarrollo de las vistas o de las etiquetas visuales y el entorno de desarrollo que nos dará la relación de la lógica del negocio con las bases de datos (controladores).

NetBeans 6.7 como IDE es una herramienta muy poderosa sobre todo en las relaciones entre elementos digitales, como por ejemplo, me puedo ir enlazando desde clase en clase o desde jsp a clase, o de jsp a jsp, o de servlet a servlet con un solo control + click, hasta obtener una visión general en el lugar exacto al que quiero dirigirme, características como estas son motivantes para nuestro IDE elegido el Netbeans en su ultima versión 6.7 en ingles.

Dreamweaver CS3 de la adobe system es nuestro IDE empleado para dar creación, soporte y mantenimiento a nuestros elementos vistas soportados por las aplicaciones web.

Como vemos dos grandes IDE`s, ahora, fusionemos estos dos Entornos y formaran una herramienta muy compleja, poderosa y fácil de administrar.

Mas sobre Dreamweaver CS4

Java orientada a la WEB.

2009-02-19T08:49:00.001-08:00

Las aplicaciones Java orientadas a la web generan un gran ambiente lleno de mejores interfaces mas dinámicas y efectivas a la hora de manejar un modelo de negocio, bien sea el de una tienda de calzado, una empresa, un parqueadero, una institución educativa, etc.

Es muy sencillo solo consiste en llevar la misma lógica escrita en java a nuevos scripts o archivos, JSP, jsf, js, XML, java, y configurarlos de la manera adecuada para ser interpretados por un servidor de aplicaciones web java como lo es RESIN.

Siempre será necesario conservar la estructura interna de recursos , paquetes de clases, librerías, organizados mediante estándares de aplicaciones web para que sean interpretados y leídos por el servidor.

Ejemplo.

El directorio WEB-INF contiene las clases y librerías java utilizadas para la óptima ejecución de la aplicación, cuando llamas una clase o un beans dentro de un archivo.JSP el servidor se dirige específicamente a la carpeta WEB-INF y allí busca el paquete o la librería requerida.

Paquetes de Clases en NetBeans (Package)

2008-03-03T19:32:00.000-08:00

Al igual que en Eclipse las diferentes clases se organizan por paquetes, esto con el fin de estructurar una mejor arquitectura para nuestro software en desarrollo. ver Hola mundo

File > New File > Java Classes > Java Package...proceso para crear un nuevo paquete de clases.

Un grupo de clases en el interior de un paquete se comunicaran de tal forma que no necesitan referenciarse la una de la otra, simplemente con su llamado basta.

ejemplo:

package clases; //ya con esto la clase buscara otras clases en esta ubicacion que es la misma //donde se encuentra

Cuando necesitamos clases de otros paquetes pues simplemente hacemos la importacion desde el paquete donde se encuetre dentro de nuestra aplicacion , hoy en dia grandes centros de desarrollo como la sun de microsystems permite hacer uso de sus paquetes de librerias ubicadas en centros de acopio de sus servidores.

Ejemplo:
import clases.conexion; //desde nuestra aplicacion
import http://es.sun.com/org/apache/conection; ///desde servidores externos.

los paquetes de clases que mas adelante formaran las llamadas librerias son muy importantes en la arquitectura del software, una estructura de paquetes bien delieneada podra mantener en constante evolucion un software sin importar la naturaleza de este bien sea de escritorio o de ambiente web.

Descargar Proyecto NetBeans Ejemplo_1

Explorando NetBeans

2008-03-01T21:15:00.000-08:00

(IDE) Entorno de Desarrollo Integrado. NetBeans es una de las plataformas para desarrollo de software mas robustas y faciles de usar que existen en la actualidad al igual que el IDE eclipse, son software libre o de libre distribucion y utilizacion. en su mas reciente version la 6.0.1 nos da la posibilidad de poder diseñar entornos web de la manera mas eficiente con la nueva serie de componentes J2EE, componentes que nos permiten mejores interfaces graficas para el Desarrollo web.

El desarrollo de aplicaciones a venido girando entorno al ambiente web, los programas de escritorio ya caducaron, se encuentran en proceso de migracion hacia las nuevas plataformas web. Hoy hasta la intranet ya va desapareciendo.
los primiparos en desarrollo que desean iniciar su etapa de manejo del netbeans podran hacer uso de este blog para encontrar contenido sobre el uso del netbeans. Estos temas pueden ser investigados detalladamente en la internet por ahora son solo producto de mi experiencia en el manejo del Ide NetBeans.
Se requiere la version 6 del JDK para la Instalacion.

CSS - Estilos Visuales para componentes web

2008-02-03T21:16:00.000-08:00

Las css son librerías contenedoras de clases visuales denominadas por las siglas CSS (Cascading Style Sheets).
En su comprensión lógica las css son librerías que contienen clases visuales aptas para componentes web. Su uso se a venido propagando hasta el punto de combinarse con javascript y producir la potente tecnología ajax para ejecución en tiempo real.
Ejemplo de Clase para cualquier tipo de componente, en este caso una etiqueta label para El Titulo.
.titulo{
font-size:11px;
font-family:Arial;
border:1px solid gray;
}

Otro Ejemplo. para tablas y layer.
#divlayer{
font-size:11px;
font-family:Arial;
border:1px solid gray;
padding: 3px;
}

Y otro Ejemplo, especial para aplicar a un tipo de componente general.
INPUT{
font-size:11px;
font-family:Arial;
border:1px solid gray;
background:#EAEAEA;
}

Formulario HTML dentro de una JSP

2008-02-02T08:41:00.000-08:00

Html es el lenguaje primario de la web sin ninguna duda. su contenido nos permite crear componentes como botones para acciones, áreas de texto para la entrada de datos, campos de texto, menús de selección, listas etc, básicos para la elaboración de formularios.

Pretendo realizar un script resultado de una combinación de jsp y html.
Componentes html que envían datos a un script jsp.
Dividiere este proceso en dos pasos empezare desde la lógica del script jsp hasta llegar a la simplicidad en un formulario html Dinámico.

Empezaremos por Crear un archivo con extensión.jsp de nombre formulario.jsp. la extensión .jsp es propia de la web pues es reconocida por servidores web-java y es enviada al navegador web en etiquetas html.
El siguiente paso es crear un script jsp dentro de nuestra pagina.jsp condiciones para poder recibir de manera dinamica de un evento de action de form ejecutado por un submit, parámetros de componentes html que crearemos paso siguiente a este.
Ahora diseñaremos el formulario y lo dejaremos listo para copilar y enviar los datos a través del evento post del action que retorna a la misma pagina.
Presentacion visual del formulario.

Intentando Comprender Ajax

2008-01-30T21:23:00.000-08:00

Ajax: Asincronia entre javascript y xml.
las aplicaciones de hoy requieren ser interpretadaspor la tecnologia de los navegadores de hoy, estos navegadores vienen evokucionando cada dia para permitirle al hombre el menor tiempo de ejecucion en la carga de una pagina web.
Cuando implementamos ajax podemos ver cambios muy rapidos en contenidos, imagenes.

Promiscuidad en el Desarrollo

2008-01-30T11:34:00.000-08:00

Uno de los avances mas notables en la evolución del desarrollo web es la promiscuidad a la hora de programar con diferentes lenguajes.
Embeber un script dentro de otro es una técnica útil para el programador cuando de realizar robustas plataformas se trata.

Ejemplo:

Descripción del Script.

En este ejemplo vemos como desde una etiqueta jsp se crea un tipo de dato entero que almacena el valor del tamaño de la fuente. luego cuando llegamos a la etiqueta css creamos nuestro estilo y le decimos que reciba este valor en la propiedad font-size (tamaño de la fuente).

Lógica del Script.

En realidad como las paginas html se compilan secuencialmente y como las etiquetas son String para el html entonces el siempre va a leer este String como tal y escribirá su valor.
entonces cuando se llega a la propiedad .estilo esta va a encontrar el String que viene en la etiqueta y para estilo no hay ningún problema que esta etiqueta este hay siempre y cuando lleve algo dentro igual al tipo de parámetro que necesita para satisfacer su necesidad.

Recomendaciones:
Esta tecnica solo es viable cuando se tienen todas las etiquetas dentro del mismo archivo bien sea html, jsp, php etc. En el momento de trabajar css y otros lenguajes como archivos independientes se encuentra el problema devido a la identidad privada y a la extension de cada archivo.

Desarrollo Web para principiantes

2008-01-30T10:18:00.000-08:00

Ingresar en el Desarrollo web por primera vez hace que el hombre sienta deseos de avanzar a pasos largos. leer ya no va a ser motivo de cansancio, solo sera un canal mas por donde circule el conocimiento. el tiempo de aprendizaje ya no sera limitado.