:: Desarrollo de Aplicaciones Web ::

Foto categoria

Esta es la Pagina para realizar un ingreso en el cual podemos apreciar 3 campos principales

Fecha : La cual indica cual será la fecha considerada para el ingreso de dinero para un Empleado en particular.

Empleado: El cual se encuentra representado por un select el cual muestra todas los Usuarios que cumplan con el rol =”Empleado”, al cual se le realizara el Ingreso.

Valor : Es el valor Total asignado en el Ingreso.

consulta de presupuesto

Esta es la consulta del presupuesto, donde el Administrador puede seleccionar el empleado al cual desea consultarle,  y elegir el rango de fechas, en esta tabla formada con yui, vamos a mostrar el nombre del empleado, la fecha en q se realizo el presupuesto, el total del presupuesto, las categorias q fueron presupuestadas, y el valor q se le presupuesto a cada categoria.

consulta por 3 parametros

Esta es una consulta por 3 parametros, nombre, apellido y rol de los usuarios.

consulta por iniciales

Aqui podemos tambien consultar por iniciales

autocompletar

La caja de texto nombre tiene la opcion de autocompletar con los usuarios que existen en la base de datos

balance de un empleado

Aqui consultamos el Balance de un empleado en particular, por un rango de fechas, comunmente el balance se lo saca cada mes, y es el detalle de los ingresos menos los egresos, en este caso en el mes de Enero a el le quedo un Total de $1000.  Esto lo realiza en Administrador.

movimiento de un empleado

Esta es la consulta de Movimientos que realiza el Administrador a cualquier Empleado, en este caso la consulta fue de tipo egreso, aquí aparecen en una tabla de yui los datos del empleado, el tipo de movimiento, la fecha en q se realizo el egreso, el ítem en el q realizo un egreso, la categoría a la que pertenece ese ítem, y el valor que se gasto en ese ítem, en caso de haber un movimiento tipo Viaje, aparecerá un mapa de google,  que al hacer click en consultar le mostrara los lugares donde viajó, y al hacer click izquierdo en el marcador le mostrará mas detalles de ese movimiento de egreso. Aquí consultamos por Empleado,  por Tipo,  y por un rango de fechas.

Google tambien implementa charts y como ya hemos utilizado YUI para la generacion de las tablas de las consultas, hemos optado por probar los charts de GOOGLE..!!

Primero revisamos un poco el API de los charts en: http://code.google.com/apis/charttools/ para el proyecto hemos decidido utilizar los Image Charts.

En la consulta de los Gastos por Categoria usando esta tecnologia obtenemos el siguiente grafico:

En la consulta de los Gastos por Categoria y Mes usando esta tecnologia obtenemos el siguiente grafico:

Para hacer esto «jugamos» un poco con el Code Playground… que nos genera ya el codigo para usar los charts..!!

Al parecer se cerro el grupo de facebook de nuestra aplicación con la cual se generó el script, por lo cual cree un nuevo grupo de Facebook para SAC – Sistema de Administración de Viáticos y con el nuevo id del grupo 336693737774 generé nuevamente el script con el cual podemos hacernos fans del grupo y unirnos a la comunidad en facebook, a continuación pongo el nuevo script el cual debemos reemplazar y la demostración gráfica de actualmente que sí funciona.<script src=’http://cdn.wibiya.com/Loaders/Loader_247612.js’ type=’text/javascript’></script>

Para la creación del gadget me base en el tutorial de la página de seoish el cual se encuentra en el siguiente link http://www.seoish.com/how-to-make-google-gadgets/,  el tutorial está en inglés pero cabe recalcar que la mayoría de la información realmente importante casi siempre la vamos a encontrar en inglés, retomando el tema en esta página nos explican paso a paso en 7 lecciones como elaborar nuestro propio gatget, para poder crear un gadget se necesita acceder a la página del Google Gadgets Editor que se encuentra en el siguiente link http://code.google.com/intl/es-ES/apis/gadgets/docs/legacy/gs.html#GGE, allí se escribe el código del gadget, en dicha página encontramos un ejemplo el cual presentamos a continuación.

Si el gadget generado no contiene errores podremos observar una vista previa de la apariencia del gadget elaborado.

Para probar nuestra aplicación generamos el gadget y lo guardamos con el nombre prueba.xml, nuestra propuesta para el proyecto SAC fue generar un gadget de nuestra aplicación y agregarlo en tres diferentes lugares los cuales son: gmail, igoogle y google desktop, tanto en gmail como en google desktop pudimos acceder a la aplicación pero en igoogle surgió un inconveniente que aún no logro resolver el cual consiste en que no se puede ver totalmente la página web sólo la parte superior izquierda, la parte del login está en la parte derecha y no logro hacer el gadget más grande para poder logearse en la aplicación, en los otros dos lugares se pudo acceder con éxito, a continuación se detalla desde la vista previa del gadget hasta la agregación del mismo en los sitios especificados con anterioridad.

Ya instale el virtualBox en mi maquina el sistema operativo que escogi para virtualizar fue windows xp, tuve ciertos problemas con el reconocimiento de los dispositivos por los puertos usb por lo que opte por compartir carpetas de mi sistema operativo anfitrion (antes windows vista actualmente windows xp) con el sistema operativo huesped (windows xp) con lo cual se hizo muy facil la transferencia de archivos entre ambos sistemas tambien instale un complemento que permite cambiarse con facilidad entre los sistemas operativos sin aplastar la tecla control derecha que es lo habitual, para acceder a las carpetas compartidas en el sistema operativo huesped hay que escribir en la barra de direcciones \VBOXSVR en esa ubicación se encuentran las diferentes carpetas que compartidas entre ambos sistemas.
El link que utilice para la instalación y configuración del apache tomcat 6.0 para windows xp fue el siguiente.
http://jcalderon.wordpress.com/2008/01/04/instalacion-y-configuracion-de-apache-tomcat-60-en-windows-xp/

Para hacer el deployment primero ir  a la dirección

http://tomcat.apache.org/download-60.cgi

Descargar el archivo que contiene Apache Tomcat para la versión del sistema operativo que se esté utilizando,  en nuestro caso elegimos la opción 32-bit Windows zip (pgp, md5, una vez descargado el archivo lo descomprimimos y lo colocamos en una ubicación del disco duro.

Declarar las variables de entorno para el jdk y el apache tomcat. Por ejemplo:  CATALINA_HOME=C:\apache-tomcat-6.0.20 y JAVA_HOME=C:\Program Files\Java\jdk1.6.11

Aqui muestro gráficamente el acceso a las variables de entorno y la creación de las variables de para CATALINA_HOME Y JAVA_HOME

En miPc se da click derecho y despliega un menú, se elige la opción propiedades

Luego seleccionamos la opción Opciones Avanzadas

Damos click en la opción nueva para crear las variables de entorno

Aquí colocamos el nombre de la variable para este caso es CATALINA_HOME y la ruta donde se encuentra la carpeta del apache tomcat

Aquí colocamos el nombre de la variable de entorno en nuestro caso JAVA_HOME y la ruta donde se encuentra instalado el jdk

Luego copiamos en el ${CATALINA_HOME}/webapps creamos una carpeta con el nombre de nuestra aplicación web en la imagen se detalla los archivos que se deben incluir.

Luego procedemos a levantar el Tomcat para esto accedemos a la carpeta ${CATALINA_HOME}/bin y le damos doble click al archivo startup como se muestra a continuación

Asi quedara la pagina del empleado, en la que ingresara su presupuesto