Aplicación web de anuncios con mapas de Google Maps

home title Jueves, 20 de enero de 2011 | 13 comentarios home title

Hace unos años estuve realizando pruebas con aplicaciones web simbióticas usando mapas de Google Maps, finalmente algunos clientes me pidieron productos basados en dichas pruebas, en el vídeo mostrado a continuación se muestra una de ellas, del dominio inmorusticas.com, está en fase muy beta aunque las críticas son bien recibidas, como siempre…, pero se puede dislumbrar lo fácil que es construir sin un equipo de diseño, sólo con mi trabajo como programador un sitio web como los que actualmente están “dando caña” en internet.

Está optimizado para SEO  (posicionamiento) aunque siempre se puede mejorar, por ejemplo, las direcciones amigables google se pueden optimizar más aún.

Los puntos fuertes de una aplicación de este tipo,son

  • la mayor parte hecha en AJAX con Php y MySQL
  • tiene un generador interno de formularios basado en plantillas
  • se pueden añadir categorías, subcategorías
  • inmuebles con una interminable lista de campos a rellenar, entre los que cuentan: la posición en el mapa con coordenadas de latitud y longitud, imágenes que aparecen animadas, datos de varios tipos como requisitos de la información de la propiedad
  • varias formas de indexar los elementos: filtros a medida, por provincia, categoría, subcategoría, precio,etc.
  • una administración interna para dar de alta/modificar/eliminar/aceptar las fichas en cada categoría así como los servicios e información del sitio web.
  • sindicación de contenidos por RSS: compartir los anuncios para con otros servicios web con XML

y seguramente me dejo algo más pero es sólo para dar una idea de lo que se puede hacer, básicamente todos los sitios de anuncios utilizan este tipo de estructura y arquitectura de la información, además de los mapas de Google Maps, claro.

Creación de Servicios Web con Netbeans y Glassfish – JAVA y PHP

home title Lunes, 1 de marzo de 2010 | 3 comentarios home title

INTRODUCCIÓN

Glassfish es el servidor de aplicaciones Web de Sun, como hay que crear un “dominio” dentro del servidor de aplicaciones y esto consume muchos recursos no se utiliza en máquinas convencionales ya que el coste de implementación de un servidor de dominios puede ser demasiado elevado por la carga que supone dicha tarea a pesar de que se puede implementar sobre Apache.

Si instalamos la última versión de Netbeans con Glassfish podemos pasar directamente a la sección de Crear el Modelo de datos al que acceder desde Servicios Web

Podemos configurar nuestro dominio tanto con la consola como dentro de NetBeans, usando la interfaz de usuario. Vamos a ver cómo se hace de las dos formas, primero con la consola:

  1. Descargar Glassfish: aquí e instalar con el comando:
    java -Xmx256m -jar glassfish-installer-v2.1.1-b31g-windows.jar
    y ahora, entrar en el directorio glassfish, establecer las variables de entorno JAVA_HOME a vuestro directorio de instalación JDK y lo mismo para PATH añadiéndole el directorio de glassfish,  entonces ejecutamos el comando:
    lib\ant\bin\ant -f setup.xml
    desde el directorio de glassfish.
  2. Ir a la herramienta de administración por consola del servidor, está en:
    glassfish/bin/asadmin.bat
    ahora vamos a crear un dominio mediante la instrucción (en la consola del server):
    create-domain –user nombre_usuario_admin –adminport numero_puerto nombredominio
    en nuestro caso usaremos el dominio Excalibur con usuario root y el puerto 6666:
    create-domain –user root –adminport 6666 excalibur
    esto debe de tardar un poquito, se habrá creado un directorio para el dominio en glassfish/domains/excalibur,y ahora,  justo después, “levantaremos” el dominio en el servidor con la instrucción:
    start-domain excalibur
  3. Ahora podréis hacer uso de la dirección http://localhost:6666 con los datos de usuario para administrar el server. Podéis pararlo con stop-domain.
    Sólo os diré que en mi máquina,al cargar el servidor y crear el dominio, me empezó a consumir su proceso 30MB de RAM,tras iniciar dicho dominio ya iba por 178MB y subiendo…imaginaos un servidor de decenas o cientos de dominios en memoria…más de 900MB pasa perfectamente…y además, esto en un servidor IBM es normal para un único proceso.

Después de trabajar en lecciones anteriores con NetBeans, ya deberíamos conocer las ventajas de utilizar este IDE …

  1. Arrancar NetBeans, ir a la pestaña de Servicios -> Servidores -> Segundo botón del ratón -> añadir servidor ->
    si os dá un error o no sale ninguna ventana necesitáis actualizar vuestra versión del JDK de Java y reinstalar la última versión de NetBeans que trae una versión de Glassfish 3. Servidores  -> iniciar -> http://localhost:4848/
  2. Para comprobar que el servidor está funcionando vamos a crear un nuevo proyecto de tipo Java web -> Web Application -> compilar y Ejecutar ,en el navegador debe aparecer un “Hola Mundo”

Ahora vamos a aprender cómo se crean servicios web que utilicen complejas estructuras de datos así como colecciones y anotaciones,  reutilizables, desde distintos clientes que realicen las operaciones desde JAVA o PHP. También aprenderemos a definir un fichero WSDL para crear un servicio ,ambas cosas con Netbeans y usaremos JAX-WS para construir los clientes automáticamente, es decir, el cliente del servicio web (programa que lo usa desde la máquina de un usuario que se conecta a los servicios de un servidor) traduciendo los mensajes que se comunican por el protocolo SOAP.

Crear el Modelo de datos para Servicios Web (Web services) con Java en Netbeans

Resumen de lo que vamos a hacer: crear un servicio web para registrar (en nuestro modelo de datos) usuarios, pilotos y naves en la base de datos de la clase que implementa el computador…recordar el proyecto BSGModelo…

Gracias a una clase llamada administracion que crea los usuariosse le asocia un piloto y a éste una nave (viper), todo esto queda almacenado en el modelo de datos del computador Nexus que se ejecuta sobre el servidor Excalibur (glassfish) y que lanza excepciones construidas por nosotros al nivel de aplicaciones y servicios web.

Abrir el proyecto de la lección 2: BSGModelo y haremos lo siguiente:

  1. Ya que todo servicio se construye a partir de un Proyecto Web, vamos a crear un nuevo proyecto web: File -> New Project -> Java Web -> Web Application , nombre: “Excalibur”, para que podamos almacenar datos y confeccionar asociaciones entre el proyecto BSGModelo y el proyecto de Aplicación Web con Servicios llamado “Excalibur” vamos a este proyecto -> segundo botón en “Libraries” -> Add Project -> seleccionar BSGModelo y Add Project JAR files.
  2. Ahora vamos a modificar el proyecto “BSGModelo”, “en es.ugr.battlegalactica.modelos” -> botón derecho -> New -> Java Class -> nombre: “Usuarios”, como tenemos que asociar los vipers y los pilotos, debemos cambiar primero la clase pilotos para meter dentro una lista de vipers, crear en usuarios una lista de pilotos en la clase usuarios y luego añadir una lista de usuarios en nexus. El código ha quedar así:
    Ver modelo de datos

    Descargar BSGModelo_usuarios.

    Para que probemos todos estos cambios, hemos hecho cambios a la función Main de la clase Prueba.java:

     
// Web 2.0: Arquitectura Orientada a Servicios en Java
// Primer Modelo: BSGModelo con la clase Prueba
// @author Juan Belón Pérez
 
 
package es.ugr.battlegalactica;
 
import es.ugr.battlegalactica.modelo.Elemento;
import es.ugr.battlegalactica.modelo.Nexus;
import es.ugr.battlegalactica.modelo.Piloto;
import es.ugr.battlegalactica.modelo.Usuario;
import es.ugr.battlegalactica.modelo.Viper;
import es.ugr.battlegalactica.modelo.excepciones.NoHayArmamentoException;
import es.ugr.battlegalactica.modelo.excepciones.PilotoNoEncontradoException;
import es.ugr.battlegalactica.modelo.excepciones.ViperNoEncontradoException;
import java.util.ArrayList;
import java.util.Iterator;
 
/**
* Clase con los 3 primeros ejercicios propuestos
* @author Juan Belón Pérez
*/
public class Prueba {
private static ArrayList<Elemento> elementos;
private static ArrayList<Piloto> pilotos;
private static ArrayList<Viper> vipers;
private static Nexus nexus;
 
// Función principal.
//Imprime por pantalla un mensaje fijo.
// @param args la linea de argumentos del programa
 
public static void main(String[] args) 
throws NoHayArmamentoException, PilotoNoEncontradoException,
 ViperNoEncontradoException {
System.out.println("Prueba del modelo de datos BattleStarGallactica");
//crear dos elementos e imprimir sus identificadores en la consola. 
//Si todo ha ido bien se deberían escribir los identificadores 1 y 2
init();
System.out.println("Prueba de creación de elementos:");
for (Elemento e: elementos){
System.out.printf("%d,",e.getId());
}
System.out.println("\nPrueba de creación de pilotos:\n");
for (Piloto p: pilotos){
System.out.printf("ID:%d,Nombre:%s,Destreza:%d\n",p.getId(),p.getNombre(),
p.getDestreza());
}
System.out.println("\nPrueba de creación de vipers:\n");
for (int i=0; i<4; i++){ //Disparar 4 veces con todos los vipers:
for (Viper v: vipers){
System.out.printf("#%d# Disparando con el viper ID:%d,Nombre:%s," +
"Armamento:%d\n",(i+1),v.getId(),v.getNombre(),v.getArmamento());
try {
v.disparar();
} catch (NoHayArmamentoException e){
System.err.println("\n\tError al disparar:"+e.getMessage()+"\n");
}
System.out.printf("\tEl nuevo armamento del viper con ID:%d y Nombre: %s"+
" ahora tiene %d unidad/es\n",
v.getId(),v.getNombre(),v.getArmamento());
}
}
System.out.println("\nPrueba de creación de Nexus con Pilotos:\n");
Iterator<Piloto> iter_piloto = nexus.listarPilotos();
Piloto aux_piloto = null;
while (iter_piloto.hasNext()){
aux_piloto = iter_piloto.next();
System.out.printf("Piloto %s, ID:%d\n", aux_piloto.getNombre(),
aux_piloto.getId());
}
System.out.println("\nPrueba de creación de Nexus con Vipers:\n");
Iterator<Viper> iter_viper = nexus.listarVipers();
Viper aux_viper = null;
while (iter_viper.hasNext()){
aux_viper = iter_viper.next();
System.out.printf("Viper %s, ID:%d\n", aux_viper.getNombre(),
aux_viper.getId());
}
if (aux_piloto!=null){
System.out.println("\nPrueba de búsqueda (el último:" +
aux_piloto.getId()+") de Pilotos en Nexus:\n" +
nexus.obtenerPiloto(aux_piloto.getId()).getNombre());
}
if (aux_viper!=null){
System.out.println("\nPrueba de búsqueda de Vipers (el último:"+
aux_viper.getId()+") en Nexus:\n" +
nexus.obtenerViper(aux_viper.getId()).getNombre()
);
}
 
System.out.println("\nComprobar que se generan las excepciones "+
"buscando un Piloto falso:23\n");
try {
aux_piloto = nexus.obtenerPiloto(new Long(23));
} catch (PilotoNoEncontradoException ex){
System.err.println("\n\t"+ex.getMessage());
}
System.out.println("\nComprobar que se generan las excepciones "+
"buscando un Viper falso:23");
try {
aux_viper = nexus.obtenerViper(new Long(23));
} catch (ViperNoEncontradoException ex){
System.err.println("\n\t"+ex.getMessage());
}
 
try {
Usuario usuario = nexus.obtenerUsuario("juaxix");
System.out.println("\nCreación de un usuario ("+
usuario.getUsuario() + " con piloto: " +
 
(nexus.obtenerPiloto(
usuario.getPilotos().get(0)
).getNombre()) + " y viper asociado a este piloto: "+
nexus.obtenerViper(
nexus.obtenerPiloto(
(nexus.obtenerUsuario(usuario.getId()).getPilotos().get(0))
).getNaves().get(0)
).getNombre()
);
System.out.flush();
} catch (PilotoNoEncontradoException ex){
System.err.println("\n\t"+ex.getMessage());
 } catch (Exception ex){
 System.err.println("\n\tNEXUS LOG:"+ex.getMessage());
 }
}
 
// Inicializador de elementos, pilotos, vipers y Nexus (vipers, pilotos y usuarios)
private static void init(){
Viper v_aux;
elementos = new ArrayList<Elemento>();
pilotos   = new ArrayList<Piloto>();
vipers    = new ArrayList<Viper>();
nexus     = new Nexus();
elementos.add(new Elemento());
elementos.add(new Elemento());
 
v_aux = new Viper("Trueno");
v_aux.setArmamento(4);
vipers.add(v_aux);
 
pilotos.add(new Piloto("Migue",120,v_aux.getId()));
v_aux = new Viper("Rayo");
v_aux.setArmamento(4);
vipers.add(v_aux);
pilotos.add(new Piloto("Sara",110,v_aux.getId()));
 
//INTRODUCIR DATOS EN NEXUS:
v_aux = new Viper("Trueno");
v_aux.setArmamento(4);
nexus.guardarViper(v_aux);
Piloto juax = new Piloto("Juax",130,v_aux.getId());
nexus.guardarPiloto(juax);
 
v_aux = new Viper("Fuego");
v_aux.setArmamento(5);
nexus.guardarViper(v_aux);
nexus.guardarPiloto(new Piloto("Jesús",130,v_aux.getId()));
//Creación de un usuario en Nexus:
ArrayList<Long> lista_pilotos_usuario = new ArrayList<Long>();
lista_pilotos_usuario .add(juax.getId());
Usuario usuario = new Usuario("juaxix" //nombre usuario/
, "juaxix" // password 
,lista_pilotos_usuario // lista de ids de pilotos asociados
);
nexus.guardarUsuario(usuario);
 
}
 
}

    La idea del modelo de datos es parecida a un modelo de cajas:

     La nueva línea que ha de mostrar la ejecución de esta clase (el proyecto BSGModelo) es: 

    “Creación de un usuario (juaxix con piloto: Juax y viper asociado a este piloto: Trueno”

  3. Para usar los servicios, creamos un nuevo paquete, en el proyecto Java Web llamado “Excalibur” ->  “Source Packages” -> botón derecho -> New -> Java Package -> llamado “es.ugr.battlegalactica.servicios”.

Continuar >

< volver al Curso de Arquitectura de Servicios Web con JAVA + XML + PHP

¿Cómo elegir nuestro Servidor Web?

home title Miércoles, 27 de enero de 2010 | sin comentarios home title

En esta presentación que hice para la Asociación de Webmasters de Granada y como parte de un trabajo para Redes de Computadores en la ETSIIT he explicado qué es un servidor, concretamente un servidor web, la evolución de este tipo de software hasta hoy en día desde que apareció, además de abordar otros temas relacionados: qué software usar para reconocer un webserver: apache, iis, cherokee, django, lighttpd, zeus, google web server, etc. Además de un pequeño análisis del gestor de difusión de contenidos de tuenti utilizado para compensar la carga del sistema a través de la división entre varios servidores con su caché, etc.

Además expliqué cómo hacer un nmap y un telnet a un servidor web…resumiendo

¿Cómo elegir un servidor Web?

Ver más documentos de Juan Belón Pérez.

Sistema de aplicaciones web multicapa, multidocumento y multidioma

home title Sábado, 16 de enero de 2010 | sin comentarios home title

Usar este sistema significa poder elegir la lógica de presentación que deseemos, sin tener que cambiar la lógica de programación. Puedes insertar tantos documentos e imágenes por artículo como quieras, además, en el mismo paquete se incluyen utilidades para insertar en el contenido de estos artículos las imágenes o enlaces que necesitemos como en un blog,relacionados con ficheros locales o remotos que usan las aplicaciones web. El mismo perfil de aplicación es capaz de añadir de forma sencilla tantas categorías y subcategorías como se quiera o eliminarlas para mostrar directamente los artículos de una sección.

Utiliza el framework zenphp del que hemos hablado alguna vez previamente, se conecta con las redes sociales de forma sencilla y el contenido administrable es súper fácil de utilizar, para muestra un vídeo.

La programación de los contenidos se hace a través de un modelo de datos genérico que tiene diferentes controladores y vistas de forma que con la misma tabla sólo se utilizan los campos necesarios por cada tipo de contenido de una sección y una tabla asociada guarda los nombres de las categorías y subcategorías que tienen relación directa con los artículos donde se almacena la información para cada idioma.

En este caso el cliente necesitaba una lógica distinta así como diferentes presentaciones para los mismos contenidos dependiendo de la sección/categoría de modo que los cambios realizados no ocupan apenas unas líneas.

El diseño está realizado por Agencia Q4.

Usabilidad y Arquitectura de la Información de las aplicaciones web

home title Domingo, 27 de diciembre de 2009 | 4 comentarios home title

La usabilidad de una aplicación web es mucho más fácil de revisar utilizando un Inventario de Contenido, es decir, una lista del contenido de un sitio web, y, si usamos una clase principal con referencias (punteros) a las clases que construyen la plataforma de información web nos será más fácil acceder al contenido para elaborar dicha lista.

He desarrollado sitios web donde el contenido ha sido adquirido gracias a las entradas de los usuarios, sus propias búsquedas son las generadoras de datos…, sus necesidades crean un punto de referencia que se ha tenido en cuenta en la Arquitectura de la Información, almacenándose para ser utilizadas en próximas visitas.

Diseño de Procesos

Diseño de Procesos

Para organizar dicha información se utilizan estructuras de datos, normalmente matrices (vector

es) de varios tipos que almacenan el texto de una búsqueda, su url en formato amigable para los buscadores, el números de veces que se ha repetido la misma búsqueda y otros datos opcionales como la fecha y la hora de la petición/creación de una nueva entrada en la tabla de información, nombre del usuario, procedencia, idioma, etc.

Al observar este informe APEI sobre Usabilidad me he llevado una grata sorpresa al descubrir que el esquema de wireframe utilizado para una web:

es precisamente el que utilizo en mis aplicaciones web,

Ejemplo 1:

Ejemplo 2:


Existen un conjunto de herramientas muy útiles para diseñar la AI fácilmente:

  • fluidIA: herramienta para generar varias ideas  simultáneamente construyendo sobre una pizarra prototipos de interfaces enriquecidas
  • Omnigraffle: Recursos de la AI para este programa , más información aquí
  • Text 2 Mind Map : una web para crear nuestros árboles de conceptos.

Teoría aplicable de la Arquitectura de la Información:

Presentaciones sobre AI:

Plantillas para desarrollo de contenidos:

Plantillas Wireframe

(más…)

Tecnologías AJAX, configuración XML, CMS

home title Domingo, 20 de septiembre de 2009 | 2 comentarios home title

Gestor de contenidos con animaciones AJAX.
La aplicación web usa diferentes capas, la capa del cliente puede presentar el contenido con distintas lógicas, se administra el contenido usando categorías como padres e hijos, donde a su vez pueden distribuirse los contenidos en forma de artículos con la posibilidad de añadir multimedia sin restricciones de ningún tipo. Las galerías de imágenes se muestran con lightbox y se hace uso de google maps y otras tecnologías a disposición. Se muestra el administrador y la sencilla forma de edición que permite una rápida generación de información..


Ver vídeo en youtube con explicaciones

El diseño web fue plasmado por la Agencia Creativa Q4.

Página 1 de 212
footer
jbelon © | sitemap.xml