lunes, 3 de diciembre de 2012

Añadir marcador dada una dirección - Aportes al Proyecto

Para esta ocasión he trabajado en la tarea de ubicar un marcador en el mapa de google dada una dirección. En el momento que un usuario de nuestro sitio desee hacer una denuncia, el primer requerimiento luego de estar logueado es especificar el lugar físico de la denuncia. Por razones de accesibilidad a los usuarios no podíamos dejar un marcador en el mapa y hacer que esto lo moviese hacia el lugar de la denuncia, hacerlo de esta forma nos hacia tener ubicaciones poco reales y además dejábamos una primera mala impresión para lo usuarios.

Para controlar esto, he agregado un textbox y un botón de tipo HTML por razones de incompatibilidad que tenían los elementos de ASP .Net con las funciones que necesitaba utilizar.



En el primer textbox el usuario introduce una dirección correspondiente a la ubicación geográfica del evento que desea denunciar y luego de presionar el botón buscar, se llama a la siguiente función realizada en JavaScript para obtener desde la dirección, la latitud y longitud para luego crear el marcador. El proceso es el siguiente:


Con esta función primero capturo la dirección desde el textbox y luego uso la función "geocoder" de google. Con esto obtengo la latitud y longitud que son guardadas en un arreglo llamado "results" para luego crear el marcador y ubicarlo dentro del mapa.



La función geocode según el texto buscado hace coincidir la latitud y longitud de un lugar geográfico. Si estos no coinciden dentro de un espacio geográfico, se captura el error y enviamos una advertencia al usuario del sitio:


Referencias:



Marcadores desde una Base de Datos - Aportes al Proyecto

Los problemas de conexión a la base de datos fue caótica, ninguno de los integrantes podía lograr hacer actualizaciones o consultas por lo cual solo se avanzaba en formularios, validación de estos y uso de funcionalidades del mapa de google.

Luego de varios intentos por tratar de conectarnos decidimos comenzar nuevamente con la creación de la base de datos dentro del proyecto. Visual Studio al momento de crear un nuevo proyecto, por defecto nos crea una base de datos la cual está hecha principalmente para controlar funciones como loguín y registro dentro de un proyecto Web Forms de ASP . Net. Esta base de datos nos causaba complicaciones, es por esto que la eliminamos y dejamos solamente la nuestra.

El siguiente paso fue lograr la conexión a la nueva base de datos, esta vez fue mas simple y solo se realizaba con unas pocas lineas de código:


Con la primera línea de código nos simplificamos la vida, el que esté declarada de esa forma nos permite compartir el proyecto entre los integrantes del equipo y no tener problemas de ruta para el acceso a la base de datos, la sentencia se encarga de encontrar el archivo SB.mdf dentro de la carpeta del proyecto y realizar la conexión.

Ahora que ya tenemos lista la conexión, trabajé de a pares con un integrante del equipo para definir el como cargaríamos los eventos nuevos al mapa de google. El consenso fue optar por utilizar una solución propuesta para PHP que consistía en crear un archivo XML a partir de una consulta en la base de datos y luego mediante javascript cargar cada marcador en el mapa.

Con la siguiente sentencia logré crear un XML con los datos de las denuncias registradas en la base de datos:


Primero hacemos la consulta para encontrar la lista de denuncias, luego creamos un objeto de tipo DataSet y luego con "Fill" guardaremos la tabla completa generada por la consulta en este objeto. 

Ahora por razones de manejo a futuro del archivo XML, hemos tenido que trabajar en definir la estructura de este archivo y es por eso que se creó la función "ChangeColumnMapping" que nos da el formato que necesitamos para capturar los eventos nuevos registrados y marcarlos en el mapa.

XML


Eventos cargados al mapa desde el archivo XML


Referencias:


Marcadores en Google Maps - Aportes al Proyecto

Para esta ocasión se ha trabajado de a pares en el manejo de la nueva versión de la API de Google Maps. Esta vez el control  del mapa se realiza con código JavaScript y ha sido dificultoso debido a la poca experiencia de los integrantes del equipo.

Luego de haber podido cargar el mapa de google en nuestra página se nos ha presentado varios problemas. Uno de esto son los marcadores, pues logramos posicionar el mapa en la ciudad de la Serena pero tuvimos éxito para poder dejar más de un marcador en el mapa.


En primera instancia esto es lo que habíamos logrado, posicionar un marcador en un punto específico dado una latitud y longitud. La finalidad de nuestra aplicación es cargar una serie de eventos en el mapa por lo cual la solución momentánea para ubicar más marcadores fue crear una estructura de datos en nuestra página principal (código de ASP .Net) debido a que la conexión a la base de datos nos había traído algunos problemas.

Estructura inicial para escribir mas de un marcador en el mapa:

Una vez declarada la estructura, se pasa a construir los marcadores en el mapa con las siguientes sentencias:


Y el resultado es el siguiente:


Una vez realizada la inserción de más de un marcador, el proceso siguiente será realizarlo desde luego de hacer una consulta a la base de datos de eventos denunciados.

Diagrama de Casos de Uso - Aportes al Proyecto

Para esta semana se ha realizado un diagrama de casos de uso para nuestro proyecto Stamp-Bach, de manera tal que podamos identificar de mejor forma todos los elementos y funciones que nuestra aplicación Web deberá tener al final del semestre.


Hemos identificado tres tipos de usuarios distintos: denunciante, fiscalizador y administrador. En mi caso se me designó detallar dos casos de uso que le corresponden al fiscalizador, estos son informar arreglo y tramitar arreglo.


Esta actividad es realizada por un fiscalizador siempre y cuando se haya realizado antes
la tramitación del mismo arreglo. Ésta se detalla en la siguiente tabla:


En base a la especificación de cada uno de los casos de uso se trabajará en la planificación de las actividades que hará cada integrante del equipo de proyecto durante el desarrollo de la aplicación Web.



viernes, 12 de octubre de 2012

Mockups - Aportes al Proyecto

Luego de definir los wireframes de nuestra aplicación Web Stamp-Bach, pasamos a definir el estilo de nuestro sitio mediante el uso de Mockups, que en pocas palabras, mostrar el diseño final de cada una de las páginas que componen nuestro sitio.

Definición de Colores


La combinación de colores entre el fondo, logo y botones del sitio fue algo difícil de decidir en el grupo. Opté por sugerir esta combinación de naranjo, negro y gris basándome en el sitio al cual le hice arquitectura inversa en la publicación anterior www.despertarciudadano.mx. A pesar de que esta página no está muy bien diseñada, he encontrado agradable la combinación de colores y buscando ahora en Internet me he encontrado con varias sugerencias que mencionan a estos colores como una buena combinación. 

En cuanto a la tipografía para cada uno de los textos decidimos diferenciarlos según los elementos presentes en el sitio. En mi caso escogí la fuente "Eras Medium ITC" para los botones, creo que su estilo no representa a un grupo de personas en particular. A mi gusto, creo que si usáramos una tipografía muy elegante o punteada en cada terminación de una letra incomodaría a gran parte de los usuarios a los cuales queremos llegar y lo mismo pasaría si usáramos la fuente "Comic Sans", un estilo de fuente de ese tipo me parece un tanto "chacotero" y no apropiado para un sitio de denuncias formales.

Mockups: diseños realizados

El grupo "Kobura" nos recomendó "Cacoo" como herramienta para realizar los mockups. Es una aplicación Web gratuita que funciona como editor de diagramas y está compuesto de muchas herramientas de diseño e imágenes pre diseñadas. La característica principal de Cacoo que nos llevó a seleccionarla como herramienta de diseño definitiva fue su modo de edición colaborativo en el cual todos los integrantes del grupo tenemos la posibilidad de editar un diagrama en forma paralela y de esta manera, facilitar la corrección de errores en tiempo real.



Tareas Asignadas

Para esta semana se me asignó realizar tres mockups: ingreso a Intranet (para administrador y fiscalizadores), publicar reparación (administrador) y eventos por reparar (administrador). Estos tres diseños son un poco distintos al sitio de los usuarios, cambia el tipo de logueo y el menú de botones. 

Mockup "Ingreso a Intranet": login dedicado al administrador y a fiscalizadores.


Mockup "Publicar Reparación": el administrador decide si publicar o no un arreglo informado por un fiscalizador.



Mockup "Eventos por Reparar": el administrador tendrá una vista de todos los eventos registrados en el mapa los cuales podrá filtrar por tipo de evento y fecha. Esta página en particular fue realizada para que el administrador pueda ver los eventos de la misma forma que los usuarios pero desde la misma Intranet.



Referencias:

- Herramienta para diseño de diagramas: http://www.cacoo.com/
- Referencia de opiniones respecto a combinaciones de colores: http://ar.answers.yahoo.com/question/index?qid=20070304113459AAdNhpW

lunes, 1 de octubre de 2012

Arquitectura de la Información

En la siguiente publicación mostraré la arquitectura de información inversa del sitio Web http://www.despertarciudadano.mx/, identificando el contexto bajo el cual se ha creado la página, tipos de usuarios, contenidos y un diagrama de arquitectura. He seleccionado este sitio debido a las similitudes que tiene en cuanto a sus funciones con el proyecto Stamp-Bach, realizado por mi grupo para la asignatura de Aplicaciones Internet.

Sitio Web "despertar ciudadano"


Contexto

Es una aplicación Web de apoyo a la ciudadanía mexicana, pues permite que cualquier tipo usuario sea capaz de realizar una denuncia que referente a problemas viales, ecología, educación, derechos humanos, entre otros. El usuario denunciante tiene la posibilidad de ubicar las denuncias en un mapa, etiquetarlas según el tipo y además adjuntar una imagen. Este sitio se caracteriza por tener un sistema de votos para cada denuncia. 

Por lo que he podido notar, no existe una asociación de la página con alguna institución o fiscalizador de la ciudadanía para registrar las resolución de problemas. Esto conlleva a que el control del sitio que bajo responsabilidad de los usuarios y un administrador.

Usuarios

Administrador del Sitio

Descripción: a pesar de la ausencia que puedo notar de este tipo de usuario en el sitio, podría decir que es el encargado de borrar del mapa aquellos problemas que hayan sido solucionados.

Capacidades: borrar denuncias registradas en el mapa de Google. 

Necesidades y tareas: mantener el control del sitio.

Nota: el sitio no mantiene ningún tipo de control sobre las publicaciones realizadas actualmente (es posible publicar datos completamente erróneos y no he visto algún tipo de gestión). La identificación de este usuario como partícipe del sitio ha sido realizada con el fin de explicar que en algún momento debió existir un administrador que controlara las publicaciones registradas por los usuarios.



Denunciantes


Descripción: cualquier visitante del sitio puede ser un denunciante y por lo tanto, tiene la capacidad de identificar un problema y registrarlo en la página.

Capacidades: aparte de realizar denuncias, este usuario puede participar en el sistema de votos del sitio donde cada denuncia publicada lleva un contador que aumenta según las votaciones realizadas por los mismo usuarios.

Necesidades y tareas: es el encargado de publicar información verídica de acuerdo a los problemas que puede identificar como ciudadano.

Nota: no existe un registro de usuario y por lo tanto, cualquier persona puede publicar denuncias lo que conlleva a perder el control del sitio, registrando de alguna manera información que no represente la realidad.


Contenido

Elementos
  • Mapa de localización de denuncias
  • Formulario para la publicación de denuncias
  • Sistema de votos para cada denuncia
  • Formulario para propuestas ciudadanas


Funciones
  • Realizar la denuncia de un problema ciudadano
  • Realizar una propuesta para la mejora de la ciudadanía
  • Ubicar denuncias en un mapa de la ciudad
  • Votar por una denuncia o propuesta ya registrada en el sitio
  • Ver el estado actual de denuncias y propuestas: gráficos



Diagrama de Arquitectura

Debido al mal etiquetado de las páginas del sitio que he escogido, detallaré las funciones que se pueden realizar en cada una de ellas.






Al ingresar al sitio http://www.despertarciudadano.mx se carga automáticamente la pestaña de "Inicio" donde se da la bienvenida a los usuarios que visitan la página.

Siguiendo el orden de sus pestañas, el ingreso a "Denuncia" nos da la posibilidad de realizar tres acciones: "Votar por una Denuncia", "Ver Denuncias" y  "Formulario Denuncia". Ésta última página es la que le permite a los visitantes ingresar los datos de la denuncia para luego acceder a "Enviar Denuncia" y terminar el proceso de publicación.

En la siguiente página "Alza la Mano" se realizan propuestas para la mejora de la ciudadanía. En esta sección del sitio podemos ingresar datos al "Formulario de Propuesta" y dejar registrada la acción en el mapa.

La siguiente pestaña corresponde a "Victorias" donde se publican gráficos para ver las estadísticas de las denuncias y propuestas registradas por los usuarios.

La última pestaña llamada "Artículos" nos muestra información referente a la ciudadanía.


Conclusiones

Cada falencia detectada en este sitio me ha sido de gran ayuda para definir de mejor forma el etiquetado, elementos y funciones de mi proyecto, pues me resultó difícil explorar el sitio y comprender las funciones que se podían realizar en cada sección, debido a la mala organización del contenido.


Referencias










jueves, 6 de septiembre de 2012

Cómo montar un Servidor en casa

Luego de leer varios tutoriales y pasar por una serie de problemas, mostraré la manera más sencilla para montar un servidor en casa, reutilizando una computadora que ya no usemos e instalando un sistema operativo y aplicaciones de libre distribución.

¿Por qué montar un servidor propio?

En mi caso, lo he montado para manejar distintos proyectos de las asignaturas que actualmente estoy cursando, dentro de él podemos tener un servidor Web y hospedar de esta forma una o más páginas Web, también podemos tener en él distintos sistemas gestores de base de datos, en mi caso MySQL y PostgreSQL, también podemos compartir archivos mediante el servicio FTP y por último, un servidor SSH para conectarnos remotamente a nuestra máquina. Estas son algunas de las tantas herramientas que pueden ser  instaladas en un servidor y obviamente, como es propio, se tiene acceso completo a él y de esta forma  podemos hacer las configuraciones que se deseen. Ahora, yo y mis compañeros de proyecto podemos trabajar remotamente y todos sobre una misma máquina de forma paralela gracias al servidor que he montado.

Materiales:

Una CPU que ya no uses, en mi caso he reutilizado una con procesador Intel Pentium 4 de 1.8 Ghz., 1 gb de Memoria RAM y 40 gb de Disco Duro.




Sistema operativo Ubuntu Server 12.04, lo pueden encontrar en la siguiente dirección
http://www.ubuntu.com/download/server (se encuentra disponible la versión para 32 y 64 bits).


Esquema de la Instalación

Esta es la forma como quedará conectado nuestro servidor, está demás decir que debe estar conectado a Internet y como es común hoy en día, usaremos el router de nuestra casa para lograrlo y también para hacer algunas configuraciones que veremos más adelante.




Si tenemos nuestro servidor conectado como se muestra en la imagen, la conexión a Internet se hará automáticamente, pues nuestro router se encargará de asignarle una IP mediante el protocolo DHCP.


Comienzo de la Instalación

Una vez que tengamos grabado Ubuntu Server 12.04 en un CD, encendemos nuestra computadora y comenzamos la instalación.

1. Primero nos pide escoger el idioma, seleccionamos "Español"


2. Una vez seleccionado el idioma, damos comienzo a la instalación seleccionando la primera opción del siguiente menú:


3. En la siguiente pantalla debemos seleccionar el país, en mi caso Chile y continuamos con la instalación.


4. En el siguiente paso nos preguntan por la detección automática del teclado que estamos utilizando, en mi caso lo hice manualmente dando en la opcion "NO" y seleccionando un teclado español-latinoamericano.


5. Una vez configurado nuestro teclado, se nos preguntará el nombre que le asignaremos a la máquina, pueden escoger el que ustedes quieran, en mi caso he usado "ubuntu".


6. El paso siguiente es definir la zona horaria, es recomendable darle a "SI" para que se mantenga la zona horaria de acuerdo al país que seleccionamos unos pasos antes.



7. En el siguiente paso vemos el particionado de discos. Es probable que si estamos montando un servidor es para dejarlo dedicado a ser utilizado como tal, por lo tanto, es recomendable "utilizar todo el disco" y de esta forma ocupar todo el espacio del disco duro a nuestro Ubuntu Server.


8. Una vez terminado el proceso de particiones, debemos escoger un nombre de superusuario.


9. Luego de ingresar el nombre del superusuario, debemos ingresar un nombre para un usuario normal que no pertenecerá al grupo de superusuarios.



10. En el siguiente paso debemos asignarle  una contraseña al nuevo usuario creado. Luego, reingresarla nuevamente para comprobar que ha sido escrita correctamente.


11. Una vez confirmada nuestra contraseña nos pregunta si queremos cifrar nuestra carpeta personal. En mi caso no lo he hecho y tampoco se de que manera funciona. Por el momento le damos a "No".



12. En el siguiente paso se nos pregunta si queremos ingresar algun proxy server que tengamos en uso. En mi caso no uso alguno y paso a dejar en blanco el cuadro de texto y selecciono la opción "Continuar".



13. En este paso debemos seleccionar el cómo administrar nuestras actualizaciones. Depende de cada usuario la opción que estime necesaria. En mi caso lo he dejado "Sin actualizaciones automáticas". 



14. Este es uno de los puntos mas importantes a mi parecer, es donde escogimos los programas que desearemos instalar en nuestro servidor según nuestras necesidades. En mi caso he tomado como primera opción instalar "LAMP", es un paquete que contiene el servidor web "Apache", el sistema gestor de base de datos "MySQL" y el lenguaje de programación "PHP". Otro de los programas que también he instalado son "OpenSSH" para conectarme remotamente al servidor, "PostgreSQL" como sistema gestor de base de datos alternativo a "MySQL", "Print Server" por si necesito conectar una impresora a futuro y "Samba File Server" para transferencia de archivos. Si hay alguna herramienta que necesiten y no se encuentra en este menú, pueden instalarla una vez que nuestro servidor esté corriendo.


15. Una vez que todo se instale en nuestro servidor, finalizará el proceso mostrando la siguiente pantalla donde se nos indica que debemos sacar nuestro disco de instalación y reiniciar el computador.


Una vez reiniciado nuestro servidor, nos pedirá el nombre de usuario y contraseña. Una vez logueados esta es la pantalla que debería aparecerles:


Con esto ya damos por finalizada la instalación del servidor. Ahora nos queda encontrar a nuestra máquina de forma remota.


IP del Servidor

Una vez dentro del servidor escribiremos el comando ifconfig para revisar la IP de nuestra máquina:


Aquí podemos comprobar que la IP asignada por nuestro router al servidor es 192.168.2.9. Esta IP es asignada automáticamente por DHCP. Con esta IP es imposible encontrar a nuestro servidor desde afuera, pues es una IP asignada para una red local y obviamente, es igual a millones de IPs en el mundo, pues los routers independiente de la marca trabajan de la misma manera.

Para encontrar a nuestro servidor remotamente debemos hacerlo por medio de la IP pública, que es la que nos asigna nuestro proveedor de Internet. 

Pero surge un problema, los actuales proveedores de Internet trabajan bajo IPs Dinámicas, esto quiere decir que cada vez que nuestro router es reiniciado por algún motivo nuestra IP cambiará y de esta forma será imposible volver a encontrar a nuestro servidor. Para resolver este problema tenemos 2 opciones:


1. Instalar "No-IP" que es un software que se encarga de enviar la IP Pública a un dominio asociado cada cierto tiempo (asignado por el usuario) y de esta forma, aseguramos que si nuestro router es reiniciado, cuando llegue el tiempo que se ha escogido se asignará la nueva IP al dominio ya mencionado.
2. Usar Dinamyc DNS desde el router. Esta opción a mi gusto es la mejor, pues asignamos un dominio a nuestro router y cada vez que la IP Pública cambie, el router se encargará de asignarla al dominio y de esta forma, podremos encontrar a nuestra máquina en cualquier instante independiente de las veces que la IP cambie en el transcurso del tiempo. Para lograr esto primero verificamos desde otro computador conectado a la misma red del servidor si nuestro router permite Dynamic DNS:

Este es un router Belking el cual acepta Dynamic DNS de dos proveedores, uno es "DynDns" que ahora es de pago y el que uso actualmente, "DtDNS" que es gratuito. Para usar el servicio solo hay que registrarse y crear un dominio, en la imagen anterior se puede ver el dominio que yo he creado y asociado al router para que cada vez que sea reiniciado, la nueva IP asignada por mi proveedor de Internet sea asignada al dominio que me he creado. Una vez ingresado aplicamos los cambios y ya tenemos asegurada una dirección para encontrar a nuestro servidor de forma remota.


Redireccionamiento de Puertos

Ahora que ya tenemos un dominio asociado a nuestra IP Pública, es necesario que cada petición remota sea direccionada al servidor y no a otra computadora que esté conectada a la misma red. Para lograrlo debemos ingresar a nuestro router desde otro computador conectado a la misma red e ingresar a "Virtual Servers".


De esta configuración depende que cada petición hecha al dominio que creamos anteriormente junto a un puerto xxxx sea dirigida al servidor y no a otra máquina conectada a la misma red. En la imagen se puede notar que puertos son direccionados a la IP 192.168.2.9 que es la IP del servidor.

Los puertos que he asignado al servidor son los siguientes:

Puerto 80: cada vez que alguien ingrese el nombre del dominio creado a un explorador, será mostrado el archivo index.html alojado en la carpeta "www" del servidor Web Apache.

Puerto 22: puerto para conexión por SSH, podemos conectarnos a nuestra máquina remotamente siempre y cuando seamos usuarios del servidor y tengamos los permisos necesarios.

Puerto 5432: puerto para conexión a PostgreSQL, si existen usuarios y privilegios correspondientes, podrán crear tablas, hacer consultas, borrar tuplas, etc.

Con esto ya finalizamos el tutorial, espero que haya sido de utilidad. Para comprobar el funcionamiento de mi servidor Web Apache, dejo el siguiente enlace: http://mvaldivia12.flnet.org

Nota: lo mas probable es que después de las 01:00 a.m. el servidor esté apagado por si no llega a abrir la página.

Referencias: