escuela tÉcnica superior de ingenierÍa informÁtica …. no. memoria... · 2020-03-02 · este...
TRANSCRIPT
ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA INFORMÁTICA
GRADO EN INGENIERÍA INFORMÁTICA – INGENIERÍA DE
COMPUTADORES
PLATAFORMA COLABORATIVA PARA POTENCIAR
PATRIMONIO VERNÁCULO EN ENTORNOS RURALES
Realizado por JAVIER RODRÍGUEZ MAGUILLO
Dirigido por DANIEL CAGIGAS MUÑIZ
Departamento (ARQUITECTURA Y TECNOLOGÍA DE COMPUTADORES
Sevilla, Septiembre 2018
2
AGRADECIMIENTOS
Cuando una persona tiene una mala experiencia nunca quiere volver a repetirla, algo
que no es del todo cierto. Que tengas una mala experiencia en un momento concreto
no quiere decir que “eso” que haces o intentas sea malo para ti, por lo que soy de los
que piensan que aunque una primera vez se tenga una mala experiencia, siempre hay
que volver a intentarlo para resolverlo y no quedarse con esa espina clavada.
Por ese motivo presentó este documento, para superar una etapa que me marcó por
una mala experiencia y que ahora, con el paso del tiempo, observo desde otra
perspectiva. En ella repiten algunas personas, personas que me han ayudado dentro
de sus posibilidades y que me han hecho superar esta etapa, porque todo pasa por
algo.
Ese algo me ha dado la oportunidad de reencontrarme con un antiguo compañero de
clase con el que, si no es por esta oportunidad, no habría tenido la oportunidad de
conocerlo tanto. No es otro que mi compañero Luis Castro, una persona que siempre
ha estado ahí cuando se le ha necesitado y que comparte experiencia conmigo.
Sinceramente sin él, esto no habría sido posible.
He tenido de nuevo la oportunidad de reencontrarme con Daniel Cagigas, mi tutor del
proyecto. Daniel siempre ha estado ahí para apoyarnos, facilitándonos el trabajo,
aportándonos información. Sabía que no me equivocaba eligiéndolo, pero ahora está
más que confirmado.
Pero todo esto tampoco sería posible sin la ayuda y compresión de mi pareja, la que
ha tenido que aguantar mis fines de semana encerrado en casa delante de un
ordenador, el tener que aplazar viajes y planes a causa de esto. GRACIAS.
A mi familia, por todo su apoyo, ya que me han dado fuerzas para finalizar esta etapa.
A mis compañeros de trabajo, que gracias a ellos y su compresión he podido realizar
este proyecto, por sus cambios de turno, por sus facilidades a la hora de ausentarme,
etc.
A todo aquel que, dentro de sus posibilidades, me ofreciera su ayuda: GRACIAS.
3
RESUMEN
Valverde de Burguillos es una municipio de Badajoz de 19’5km2 de reducida entidad, y
próximo a Burguillos, que fué siempre aldea dependiente de esta Villa como indica su
apelativo.
Con una población de 302 habitantes censados en el año 2014 se ha convertido en la
actualidad en una población en peligro de despoblación.
El objetivo social de este proyecto es poner en valor los atractivos turísticos del
municipio, fomentar la participación activa de sus habitantes a través de fotografías
relacionadas con la historia del municipio, el testimonio de vivencias personales, etc.,
así como el intercambio de información sobre el patrimonio vernáculo del pueblo, de
forma que pueda servir de atractivo para atraer a un turismo rural que pueda asentar
las bases del crecimiento de la población.
4
ÍNDICE
1. DESCRIPCIÓN DEL PROYECTO.............................................................................5
1.1. INTRODUCCIÓN Y MOTIVACIÓN................................................................... 5
1.2. OBJETIVOS...................................................................................................... 6
1.3. ESTADO DEL ARTE ........................................................................................ 7
1.4. REQUISITOS Y ANALISIS DE RIESGOS...................................................... 13
1.4.1. HARDWARE ........................................................................................ 13
1.4.2. SOFTWARE ......................................................................................... 13
1.4.3. ANALISIS DE RIESGOS....................................................................... 13
2. EJECUCIÓN DEL PROYECTO...............................................................................14
2.1. DISEÑO DEL SISTEMA……………................................................................ 14
2.2. IMPLEMENTACIÓN........................................................................................ 16
2.2.1. TECNOLOGIAS EMPLEADAS............................................................. 16
2.2.1.1. BOOTSTRAP............................................................................. 16
2.2.1.2. PINEGROW WEB EDITOR ...................................................... 21
2.2.1.3. XAMPP ..................................................................................... 23
2.2.1.4. MONGODB................................................................................ 24
2.2.2. DESARROLLO E INSTALACIÓN......................................................... 31
2.2.2.1. BOOTSTRAP............................................................................. 31
2.2.2.2. PINEGROW .............................................................................. 33
2.2.2.3. XAMPP ..................................................................................... 36
2.2.2.4. MONGODB................................................................................ 42
2.3. INSTALACIÓN DEL ENTORNO Y PRUEBAS................................................ 44
2.3.1. INSTALACIÓN DEL ENTORNO........................................................... 44
2.3.2. PRUEBAS............................................................................................. 46
3. PLANIFICACIÓN DEL PROYECTO........................................................................49
3.1. PLANIFICACIÓN TEMPORAL INICIAL............................................................49
3.2. PLANIFICACIÓN TEMPORAL FINAL…......................................................... 50
3.3. PLANIFICACIÓN FINANCIERA…................................................................... 51
4. CONCLUSIONES....................................................................................................53
5. TRABAJO FUTURO................................................................................................54
6. BIBLIOGRAFIA…….................................................................................................55
7. ANEXO I. MANUAL DE INSTALACIÓN ….............................................................57
8. ANEXO I. MANUAL DE USUARIO ….....................................................................68
5
SINERGIA: http://institucional.us.es/sinergia/
1. DESCRIPCIÓN DEL PROYECTO
1.1 INTRODUCCIÓN Y MOTIVACIÓN
En el marco del Proyecto Sinergia se propone la creación de un grupo de trabajo
formado por profesores de distintas áreas en la Universidad de Sevilla para la tutela
coordinada de Trabajos Fin de Grado (TFG) y Trabajos Fin de Máster (TFM)
destinados a grupos multidisciplinares de alumnos.
Los profesores implicados en este grupo de trabajo se coordinan para elaborar
propuestas de proyectos interdisciplinares que puedan dar lugar a la tutela conjunta de
lo que podemos llamar trabajos fin de grado y fin de máster cooperativos (TFGC y
TFMC).
Este proyecto sienta las bases para el desarrollo de un proyecto de mayor
envergadura (TFGC y TFMC) y que será realizado por alumnos de varios Centros o
dentro de un mismo Centro pero adscritos a distintos departamentos o áreas, en
concreto alumnos de la Escuela Técnica Superior de Ingeniería Informática y de la
Escuela Técnica Superior de Arquitectura de Sevilla.
En él, cada alumno realiza aquella parte del proyecto que le compete por la titulación
en la que se encuentra matriculado o por el área al que se encuentre adscrito el
TFG/TFM.
La iniciativa Sinergia persigue un doble objetivo:
1. En cuanto al trabajo cooperativo:
Promover, tanto en los docentes como en los alumnos, aptitudes positivas
hacia el trabajo en equipo (cooperativo) y hacia el trabajo multidisciplinar.
Fomentar la interacción entre equipos docentes de distintas áreas para la
tutela de TFGCs/TFMs. La idea es ir creando una red de mentores para
actividades relacionadas con el emprendimiento que puedan surgir como
resultado de la realización de los TFGCs/TFMs.
Mejorar la excelencia académica a través de Trabajos Fin de Grado de
mayor calidad y más atractivos para los alumnos.
Impulsar los TFGs/TFMs como aplicación práctica de lo estudiado en un
equipo de trabajo interdisciplinar.
2. En cuanto al emprendimiento:
Promover, tanto en los docentes como en los alumnos, aptitudes positivas
hacia el emprendimiento.
Facilitar el proceso de emprendimiento a los alumnos.
Usar los TFGC/TFMC como catalizador del espíritu emprendedor.
6
Impulsar los TFGs/TFMs como aplicación práctica de lo estudiado en un
equipo de trabajo interdisciplinar, que redundará en la visión de conjunto
necesaria para un emprendedor.
En el ámbito del marco Sinergia [1] se propone este proyecto que surge en el contexto
social del municipio Valverde de Burguillos, un municipio que a medida que han
pasado los años ha ido viendo mermado su índice de población situándose en la
actualidad en riesgo de despoblación real.
En el caso de esta propuesta de TFG, se ha querido impulsar el desarrollo y diseño de
un prototipo de plataforma web de información, participación y toma de decisiones
para la puesta en valor, uso y difusión del patrimonio rural construido, natural e
inmaterial. Una plataforma en la que diversos tipos de usuarios van a compartir
material sobre un entorno rural.
Se parte de un trabajo previo realizado en coordinación con otros estudiantes y
profesores de la US (ETSA, EPS), técnicos locales y ciudadanos del municipio de
Valverde de Burguillos (Badajoz) para componer los requerimientos necesarios para el
desarrollo informático.
Esta información servirá como entrada para la herramienta informática que se
comienza a desarrollar en este TFG.
1.2 OBJETIVOS
Los objetivos iníciales abordados por este TFG se describen a continuación:
El objetivo social de este proyecto es poner en valor los atractivos turísticos del
municipio situándolo en el mapa.
Fomentar la participación activa de sus habitantes en una plataforma web que
cuenta la historia del municipio de la mano de las vivencias de estos a lo largo
de su vida, bien a través de textos, fotografías, videos, etc.
Intercambio de información SIG/BIM sobre el municipio entre habitantes o
público en general que quieran aportar esta información desde un punto de
vista más técnico.
Puesto que los objetivos marcados para este proyecto son ambiciosos, lo que se ha
realizado es un primer prototipo con una serie de funcionalidades básicas, que servirá
como punto de partida para un posterior desarrollo más avanzado.
7
1.3 ESTADO DEL ARTE
En un momento en el que las tecnologías web están tomando cada vez más fuerza
con el uso de dispositivos móviles, tablets, etc, gracias a HTML5, CSS3 y Javascript
se ha impulsado el desarrollo de interfaces web que se puedan visualizar en cada uno
de estos dispositivos sin que se pierda información al reducir el tamaño de la pantalla
desde la que se muestra, proporcionarnos grandes ventajas para interactuar con el
usuario, obteniendo tiempos de carga menores y una mayor compatibilidad con
navegadores móviles.
Esto ha provocado un cambio a la hora de desarrollar sitios webs de forma que los
diseñadores se preocupan por adaptar sus diseños a todos los dispositivos con el fin
de llegar a todo tipo de usuarios.
Esta tendencia tiene opiniones a favor de adaptarse al uso de dispositivos móviles y
en contra, los que defienden el desarrollo del entorno web.
En los últimos años el desarrollo web ha tomado gran importancia, pues donde se
veían interfaces web sencillas que proporcionaban cierta información, ahora existen
sitios web de usuarios influidas por aplicaciones de escritorio, mostrándonos ventanas
modales complejas con interfaces, sistemas de navegación y botones como si de un
interfaz de sistema operativo se tratará, aportando un resultado final más amigable y
natural para el usuario.
La tendencia actual a la hora de desarrollar sitios web es diseñar sitios ligeros que
eviten a los usuarios un largo tiempo de espera tanto en ordenadores como
dispositivos móviles, y que se adapten a estos aportando accesibilidad sin pérdida de
información.
El auge del término de web semántica, que aporta HTML5, da a nuestra estructura
significado semántico, enriqueciendo con información sobre los datos los contenidos,
con el fin de jerarquizar y clasificar la información haciendo que esta sea fácilmente
interpretables por los buscadores.
La utilización de los dispositivos móviles por parte de los usuarios ha provocado que
las empresas se adapten a estos dispositivos para llegar al máximo número de
clientes posibles con el fin de satisfacer sus necesidades empleando este tipo de
técnicas, dejando atrás el desarrollo de una aplicación específica para este tipo de
dispositivos.
Este proyecto plasma el diseño, desarrollo y configuración de una herramienta
software para facilitar, con una solución tecnológica a medida, al municipio de
Valverde de Burguillos (Badajoz) el intercambio de información por parte de sus
habitantes y público interesado en general.
En este Capítulo se describen la existencia de plataformas web diseñadas con similar
fin pero que, en general, no se ajustarían a la realidad de este pequeño municipio.
8
Portal web del Ayuntamiento de Madrid
El portal web del Ayuntamiento de Madrid [2] es un claro ejemplo del fin de este
proyecto y que ha motivado el desarrollo del mismo.
Para el desarrollo del mismo podemos comprobar cómo se ha utilizado el conjunto de
herramientas que nos facilita Bootstrap para diseñar sitios webs que se adaptan a todo
tipo de dispositivos:
9
Este portal web sirve, entre otras cosas:
Como punto de información sobre todo lo relacionado a la ciudad de Madrid.
Facilita información sobre su Ayuntamiento y la gestión que este lleva a cabo
en la ciudad.
Ofrece una serie de servicios al ciudadano con el fin de facilitarle dichas
gestiones.
Además de fomentar la participación activa de la población.
10
En definitiva un proyecto de gran alcance que superaría la implantación de este
modelo en la población de Valverde de Burguillos.
Sin embargo, un desarrollo de tal envergadura en una población del tamaño del
municipio objeto de este proyecto terminaría por desorientar a la población, en su
mayoría de avanzada edad, lo que provocaría su caída en desuso, algo que se quiere
evitar ya que el objetivo es totalmente lo contrario.
Portal colaborativo ciudad de Ballarat
Las herramientas en línea de este sitio web [3] son programas colaborativos a los que
contribuyen varias organizaciones. Se establecieron a partir de fondos de la Ciudad
de Ballarat (Australia) y desarrollados por el Centro de Investigación e Innovación
Digital (CeRDI) de la Universidad de Australia.
Ballarat se unió a un programa piloto internacional y firmó un Acuerdo de Cooperación
Estratégica con el centro de categoría 2 de la UNESCO, el Instituto de Capacitación e
Investigación del Patrimonio Mundial para la Región de Asia y el Pacífico bajo los
auspicios de la UNESCO (WHITRAP) Shanghai, China, en Septiembre de 2013.
Para el desarrollo del mismo podemos comprobar cómo se ha utilizado el conjunto de
herramientas que nos facilita Bootstrap para diseñar sitios webs que se adaptan a todo
tipo de dispositivos:
11
Este portal web sirve, entre otras cosas:
Para dar a conocer el patrimonio de la ciudad de Ballarat.
Fomenta la participación ciudadana a través de diferentes vías.
Muestran el desarrollo de proyectos tecnológicos aplicados a la ciudad de
Ballarat.
12
En definitiva un proyecto de gran alcance demasiado técnico para la implantación de
un primer modelo en la población de Valverde de Burguillos, ya que no lograría atraer
la atención de la población en un primer momento.
Sitio web Paisaje Transversal
Paisaje Transversal [4] asesora, diseña y coordina proyectos de innovación urbana
con la participación de todos los actores y ciudadanos interesados para mejorar la
calidad de vida de los residentes y la sostenibilidad del medio.
Siendo el objetivo de nuestro proyecto un primer desarrollo de una plataforma que
fomente la colaboración y participación ciudadana, por el momento no podemos
abordar su implantación a gran escala como se aborda en este sitio web. Pero esto sí
que sería un modelo a seguir para un futuro desarrollo en el que se extienda este
concepto a otros municipios del ámbito nacional e internacional.
13
1.4 REQUISITOS Y ANALISIS DE RIESGOS
1.4.1 HARDWARE
Los recursos hardware que se han utilizado para el desarrollo de este proyecto son:
Podemos comprobar cómo no es necesario disponer de un equipo muy potente para el
desarrollo de este tipo de sitios web.
1.4.2 SOFTWARE
Los principales recursos software utilizados en el panel de control han sido:
Bootstrap: [5] Es un kit de herramientas de código abierto para el desarrollo
con HTML, CSS y JavaScript.
Pinegrow: [6] Es un editor web multiplataforma (Mac, Windows y Linux) que
permite crear sitios web que se adaptan a todos los dispositivos de forma
rápida editando varias páginas, estilos CSS y componentes de Bootstrap.
XAMPP: [7] Es una distribución de Apache completamente gratuita y fácil de
instalar que contiene MariaDB, PHP y Perl.
MongoDB: [8] Base de datos NoSQL a documentos, de código abierto.
1.4.3 ANALISIS DE RIESGOS
En el caso desarrollado en este proyecto se opta por este tipo de base de datos para
permitir, en futuros desarrollos, el manejo de documentos y contenidos entre los
diferentes usuarios, la elaboración de encuestas de opinión, etc.
La utilización del editor Pinegrow para nuestro desarrollo no genera código en los
archivos editados ni genera archivos en el directorio del proyecto por lo que permite la
movilidad entre diferentes editores web sin poner ningún tipo de restricciones. Esto ha
sido uno de los puntos fuertes que ha llevado a su elección puesto que en futuros
desarrollos, el desarrollador puede optar por el editor web que desee sin verse
obligado a la utilización de este.
14
2. EJECUCIÓN DEL PROYECTO
2.1 DISEÑO DEL SISTEMA
Una vez presentados los requisitos del sistema en el apartado anterior se expondrá el
diseño del sitio web indicando el contexto en el cual se utilizará la aplicación, la
arquitectura y las funcionalidades que dispondrá. Posteriormente se definirán los
componentes que conforman la plataforma.
En primer lugar debemos dar una visión general del sistema, mostrar su entorno y sus
límites. En este caso, varios usuarios interactuarán en el sitio web ofreciendo datos de
entrada y consultando datos existentes en el.
Los datos se almacenan en la Base de Datos, que está conectada a la aplicación, y
que guarda a su vez datos de registro de usuarios, textos o imágenes y documentos.
Cuando un usuario intente acceder a la plataforma, la aplicación comprobará el acceso
corroborando que sus datos sean iguales que los almacenados en la base de datos
Esta imagen muestra los diferentes actores que interactuarán en la aplicación web
descrita anteriormente.
15
Diseño
Una vez conocidos los requisitos mínimos del sitio web, se toma la decisión de que
tecnologías utilizar en su desarrollo.
Siendo uno de los objetivos de la plataforma el llegar al máximo número de usuarios
posible, se toma la decisión de optar por las herramientas que ofrece Bootstrap y su
capacidad de mostrar el contenido en cualquier dispositivo. El uso de la misma así
como sus características se describirán más adelante.
Una vez conocida la tecnología a utilizar, hay que seleccionar el editor web que se va
a utilizar de forma que facilite lo máximo posible el desarrollo de la plataforma, que
permita visualizar como quedaría el resultado final en los diferentes dispositivos. En
este caso se optará por el editor web Pinegrow, el cual se describirá más adelante.
Como el desarrollo de la plataforma se realiza en un ordenador, necesitamos un
servidor en el que poder publicar nuestro desarrollo y poder visualizarlo en los
diferentes navegadores. Para ello elegimos XAMPP.
Y por último, teniendo en cuenta el tipo de información que va a alojar en un futuro la
plataforma y con el fin de facilitar su futuro desarrollo se opta por la utilización de una
base de datos NoSQL que permite alojar desde documentos, archivos, imágenes,
videos, etc.
16
2.2 IMPLEMENTACIÓN
2.2.1 TECNOLOGIAS EMPLEADAS
2.2.1.1 BOOTSTRAP
¿Qué es Bootstrap?
Bootstrap [9] es un kit de herramientas de código abierto para el desarrollo con HTML,
CSS y JavaScript. Permite crear un prototipo rápido o aplicación completa mediante el
uso de su biblioteca de componentes, sistema de cuadrícula, componentes pre
compilados y potentes complementos basados en jQuery. Contiene plantillas de
diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros
elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript.
Originalmente creado [10] por unos diseñadores y desarrolladores de Twitter,
Bootstrap se ha convertido en uno de los marcos de front-end y proyectos de código
abierto más populares en el mundo.
Bootstrap fue creado en Twitter a mediados de 2010 por Mark Otto y Jacob Thornton.
Originalmente era conocido como Blueprint de Twitter. A los pocos meses de
desarrollo, Twitter celebró su primera “Hack Week y el proyecto alcanzó su máximo
nivel cuando los desarrolladores de todos los niveles se unieron sin ningún patrón
externo. Sirvió como la guía de estilo para el desarrollo de herramientas internas en la
compañía durante más de un año antes de su lanzamiento al público.
Fue lanzado un Viernes 19 de agosto de 2011, y desde entonces se han publicado
más de veinte lanzamientos, incluidos dos reescrituras principales con la versión v2 y
v3. Con Bootstrap 2, se agrega funcionalidad responsive a todo el marco como una
hoja de estilo opcional. Sobre la base de eso, con Bootstrap 3, se reescribió la
biblioteca una vez más para que responda de manera predeterminada con un primer
enfoque móvil.
17
Con Bootstrap 4, una vez se volvió a escribir el proyecto para dar cuenta de dos
cambios arquitectónicos clave: una migración a Sass y el cambio al Flexbox de CSS.
¿Por qué Bootstrap?
Aunque Bootstrap ofrece una gama de posibilidades bastante amplia, permitiéndote
desarrollar interfaces web bastante elaboradas y complejas, destaca porque sus
diseños son simples, limpios e intuitivos, haciéndolos poco pesados lo cual reduce
considerablemente el tiempo de carga y la adaptación a todos los dispositivos.
Otra gran ventaja es su sistema de cuadrículas (grid), el cual facilita muchísimo la
distribución de la página web (1 columna, 2 columnas, 3 columnas, etc...).
En esencia, Bootstrap [11] se basa solo en CSS, pero está construido con Less, un
preprocesador flexible que ofrece mucha más potencia y flexibilidad que el CSS
común. Con Less se obtiene una gama de características como declaraciones
anidadas, variables, operaciones, funciones para el color, etc. Además, dado que
Bootstrap es puramente CSS cuando se compila a través de Less, se obtienen dos
beneficios importantes:
1. Simplemente hay que que colocarlo en el código y listo.
2. Una vez que se compile, Bootstrap no contiene nada más que CSS, lo que
significa que no hay imágenes superfluas, Flash o Javascript. Todo lo que
queda es CSS simple.
Bootstrap es modular y se basa esencialmente en una serie de hojas de estilo CSS
que implementan toda la variedad de componentes de la herramienta. Por ejemplo,
dispone de una hoja de estilo llamada “bootstrap.css” que incluye todos los
componentes de las hojas de estilo. Los desarrolladores pueden adaptar este archivo
a su desarrollo seleccionando los componentes que deseen usar en su proyecto.
Desde la versión 2.0 soporta diseños web adaptables a todo tipo de dispositivos. Esto
significa que el diseño de la página se ajusta dinámicamente, teniendo en cuenta las
características del dispositivo usado (Ordenadores, tablets, teléfonos móviles, etc).
18
Estructura
Containers:
La clase "container" [12] que se agrega al body, es simplemente para centrar toda la
página, aplicándole a toda la caja un max-width específico para cada dispositivo. Los
“containers” son el elemento de diseño más básico de Bootstrap y son necesarios para
utilizar el sistema de cuadriculas predeterminado. Se puede elegir entre un “container”
responsive de anchura fija (“fuild”, quiere decir que su “max-width” cambia en cada
punto de interrupción, ajustándose al tamaño de pantalla del dispositivo) o ancho
variable (se ajusta al 100% de la anchura).
Estos “containers” se pueden anidar pero la mayoría de los diseños no requieren un
“containers” anidados.
mediaqueries (Puntos de interrupción responsive):
Bootstrap está desarrollado para adaptarse al dispositivo en el que se visualice el
contenido, para ello se utilizan las etiquetas “@media” para crear puntos de
interrupción. Estos puntos de interrupción se basan principalmente en la anchura
mínima de la ventana y permiten ampliar los elementos a medida que cambia la
ventana.
19
Sistema de columnas:
Bootstrap proporciona un sistema de columnas (cuadrícula o rejilla) bastante fácil de
usar a la hora de diseñar layouts y bastante sólido tanto para layouts fijos como
fluidos. El sistema de columnas utiliza una serie de containers, filas (rows) y columnas
para diseñar y alinear el contenido. Está construido con flexbox (como un cajón
flexible) y es completamente responsive.
De esta forma permite que nuestra aplicación responda adaptándose a cualquier
dispositivo ocupando, si es necesario el 100% de amplitud de pantalla.
Para que el sistema de columnas funcione correctamente, el contenido de la página
debe incluirse dentro de un DIV aplicándole la clase CONTAINER que nos facilita un
contenedor centrado en el navegador y estableciendo un ancho establecido para el
contenido de la página. Dentro de este DIV contenedor se deben definir DIV
aplicándoles la clase ROW, que crea columnas dentro del wrapper manteniendo
márgenes, padding y clear entre estas filas.
Finalmente dentro de estos DIV se ocupa el espacio necesario a través de elementos
que ocupan un espacio determinado aplicándoles la clase SPAN con determinado
valor, el cual indica el número de columnas se utilizan.
Estructura
Para usar Bootstrap en una página HTML, el desarrollador solo debe descargar [13] el
paquete Bootstrap que contiene las hojas de estilo CSS y los archivos Javascripts, y
copiarlos en el directorio que contiene el proyecto a realizar.
20
El archivo descargado está estructurado en dos directorios que contienen una serie de
ficheros reutilizables e integrables en nuestro proyecto. Concretamente son los
siguientes directorios:
CSS: Esta carpeta contiene los ficheros css. Estos ficheros se utilizan para dar
estilos a los elementos de la web.
JS: Esta carpeta incluye los fichero bootstrap-xx.js donde se encuentra todo el
código Javascript necesario para el correcto funcionamiento de los widgets de
Bootstrap.
Para su utilización en nuestro código básicamente hay que enlazarlos al archivo HTML
correspondiente indicando la ruta en la que se encuentran dentro del directorio del
proyecto.
Una vez hecho esto ya se pueden utilizar las diferentes clases que contienen los
archivos CSS para el desarrollo del proyecto.
Bootstrap tiene una gran cantidad de clases ya preparadas para que simplemente se
puedan utilizar y la única dificultad sea conocer esas clases o saber buscar en la
documentación de la página como se llama.
Por ejemplo, para crear una barra de navegación, simplemente habría que crear una
caja (div), y aplicarle una clase predefinida en el archivo “.css” de Bootstrap con el
nombre de “navbar”:
21
2.2.1.2 PINEGROW WEB EDITOR
¿Qué es Pinegrow Web Editor?
Pinegrow [14] es un editor web multiplataforma (Mac, Windows y Linux) que permite
crear sitios web responsive de forma rápida editando varias páginas, estilos CSS y
componentes de Bootstrap y WordPress.
¿Por qué Pinegrow?
Pinegrow es un editor muy fácil de usar que permite al usuario crear rápidamente el
diseño de su página web con potentes herramientas visuales para agregar, editar,
mover, clonar y eliminar elementos HTML desde su amplia biblioteca de elementos.
Luego, cada elemento puede ser modificado directamente en el editor de código, tanto
el PHP como el HTML/CSS sin olvidarse de las propiedades individuales de cada
elemento, por lo que a la vez que se está modificando el código se están
comprobando visualmente todos los cambios que se están realizando. Simplemente
seleccionando un elemento podemos modificar, desde su código HTML hasta su estilo
CSS.
Características
Al seleccionar un elemento, Pinegrow muestra directamente el código HTML del
mismo y muestra la hoja de estilos correspondiente al elemento seleccionado,
permitiendo así modificar los estilos de manera visual sin necesidad de escribir código.
Permite comprobar las reglas de CSS activas, utilizar controles visuales, un editor de
cuadrícula CSS, un editor de código, potentes herramientas, todos trabajando junto en
un solo programa.
22
Convierte cientos de clases en elementos que se pueden manejar con controles
visuales, permite cambiar el tamaño de las columnas de la página y visualizar al
instante el diseño con la pantalla de visualización.
Permite comprobar el resultado visual de la página en varios tamaños de dispositivo,
diseñar fácilmente sitios web responsive con Puntos de interrupción responsive
(@media) mediante la herramienta “Media query helper”. Agregándolos de forma
personalizada Pinegrow los detectará mediante el análisis de hojas de estilo.
¿En que se diferencia Pinegrow del resto de editores web?
Pinegrow es una aplicación de escritorio que trabaja con archivos HTML y CSS.
Tiene características únicas, como la edición de varias páginas al mismo tiempo, la
gama completa de componentes Bootstrap y Foundation, el editor de estilos CSS en
vivo con soporte SASS y LESS, el generador de temas WordPress, la integración
Atom y más.
Pinegrow no agrega código sobre el código HTML y CSS. Simplemente ayuda a
trabajar con HTML y CSS de manera más eficiente, ya sea visualmente o mediante la
edición del código.
Instalación
La instalación de Pinegrow es muy sencilla [15], simplemente hay que dirigirse al sitio
web de Pinegrow y descargar el archivo de instalación correspondiente al Sistema
Operativo que se vaya a utilizar.
Una vez finalizada la descarga se procederá a su instalación. Una vez instalado se
ejecuta el programa y se selecciona la carpeta que contiene el proyecto a desarrollar
(la cual contiene los archivos Bootstrap así como las diferentes páginas del sitio web).
23
2.2.1.3 XAMPP
¿Qué es XAMPP?
XAMPP [16] es una distribución de Apache completamente gratuita y fácil de instalar
que contiene MariaDB, PHP y Perl.
A feche de hoy, XAMPP está disponible para Microsoft Windows, Linux, Solaris y Mac
OS X.
Seguridad
Oficialmente, los diseñadores de XAMPP fueron Baiker y Anthony Corporation,
quienes solo pretendían su uso como una herramienta de desarrollo, para permitir a
los diseñadores de sitios webs y programadores testear su trabajo en sus propios
ordenadores cuando no tienen ningún acceso a Internet. En la práctica, sin embargo,
XAMPP se utiliza actualmente como servidor de sitios web, ya que, con algunas
modificaciones, es generalmente lo suficientemente seguro para serlo. Con el paquete
se incluye una herramienta especial para proteger fácilmente las partes más
importantes en una página.
Instalación
Como ventaja frente a descargar e instalar1 cada componente por separado y a crear o
editar sus ficheros de configuración manualmente, XAMPP sólo requiere una pequeña
fracción del tiempo necesario para descargar y ejecutar un archivo ZIP, tar, exe o fkl.
Puede encontrarse en versión completa o en una versión más ligera, que es portable,
y permite configurar los componentes necesarios del servidor web mediante una
misma y sencilla interfaz web. XAMPP se actualiza regularmente para incorporar las
últimas versiones de Apache/MySQL/PHP y Perl. También incluye otros módulos
como OpenSSL y phpMyAdmin.
24
2.2.1.4 MONGODB
¿Qué es MongoDB?
MongoDB [17] es una base de datos NoSQL orientada a documentos, de código
abierto.
NoSQL [18] abarca una amplia variedad de diferentes tecnologías de bases de datos
que se desarrollaron en respuesta a las demandas presentadas en la construcción de
aplicaciones modernas:
Los desarrolladores trabajan con aplicaciones que crean volúmenes masivos
de nuevos tipos de datos que cambian rápidamente: datos estructurados,
semiestructurados, no estructurados y polimórficos.
Atrás quedó el ciclo de desarrollo de cascada de doce a dieciocho meses.
Ahora los equipos pequeños trabajan en sprints ágiles, iteran rápidamente y
presionan el código cada semana o dos, algunos incluso varias veces al día.
Las aplicaciones que antes servían a un público limitado ahora se entregan
como servicios que deben estar siempre activos, accesibles desde muchos
dispositivos diferentes y escalados globalmente a millones de usuarios.
Las organizaciones ahora están recurriendo a arquitecturas escalables
utilizando software de código abierto, servidores de productos básicos y
computación en la nube en lugar de grandes servidores monolíticos e
infraestructura de almacenamiento.
Las bases de datos relacionales no fueron diseñadas para hacer frente a los desafíos
de escala y agilidad que enfrentan las aplicaciones modernas, ni tampoco fueron
construidas para aprovechar el poder de almacenamiento y procesamiento de
productos disponibles en la actualidad.
MongoDB almacena datos en documentos flexibles, similares a JSON, lo que significa
que los campos pueden variar de un documento a otro y la estructura de datos se
puede cambiar con el tiempo. El modelo de documento se correlaciona con los objetos
en el código de la aplicación, facilitando el trabajo de los datos.
Las consultas ad hoc, la indexación y la agregación en tiempo real proporcionan
formas poderosas de acceder y analizar sus datos
Es una base de datos distribuida en su núcleo, por lo que la alta disponibilidad, la
escalabilidad horizontal y la distribución geográfica están integradas y son fáciles de
usar.
MongoDB es gratuito y de código abierto, publicado bajo la Licencia Pública General
Affero de GNU.
25
Historia
La compañía MongoDB (Nueva York-27 de agosto de 2013- 10gen), anunció que
cambiaba su nombre a “MongoDB, Inc” [19].
En 2007, 10gen comenzó a trabajar en una pila de computación en la nube de código
abierto. Ese fue el nacimiento de MongoDB, como la capa de datos de esa plataforma
, dijo Dwight Merriman, presidente y cofundador de 10gen. "Cuando vimos el potencial
para la base de datos que habíamos construido, decidimos centrarnos al 100% en
MongoDB. Por lo tanto, el nombre de la compañía 10gen y el nombre de la base de
datos MongoDB serán diferentes. Con este cambio, nuestro objetivo es volver a
alinear los nombres”.
El proyecto MongoDB y su sitio web de la comunidad mongodb.org no se vieron
afectados por este cambio. 10gen cambió su sitio web corporativo de 10gen.com a
mongodb.com.
Los casos de uso común para MongoDB incluyen big-data operativo y analítico,
administración y entrega de contenido, infraestructura móvil y social, administración de
datos de usuario y concentrador de datos.
MongoDB proporciona un modelo de datos JSON [20] con esquemas dinámicos,
soporte extenso de controladores, fragmentación automática, replicación integrada y
alta disponibilidad, soporte de índice completo y flexible, consultas enriquecidas,
agregación, actualizaciones in situ y GridFS para almacenamiento de archivos de gran
tamaño.
¿Por qué MongoDB?
MongoDB es una plataforma de datos de propósito general diseñada para servir
cualquier carga de trabajo OLTP / operativa:
Dondequiera que un desarrollador considere una base de datos relacional,
debería considerar MongoDB.
Dondequiera que un desarrollador considere una base de datos NoSQL,
debería considerar MongoDB.
¿Por qué? [21] Porque, MongoDB es una plataforma de datos que aprovecha:
Las innovaciones de NoSQL: modelo de datos flexible, arquitectura distribuida
y de escalamiento horizontal
Mientras se mantienen las bases de las bases de datos relacionales:
transacciones ACID, coherencia sólida de los datos, consultas enriquecidas e
indexación.
26
En el caso desarrollado en este proyecto se opta por este tipo de base de datos para
permitir, en futuros desarrollos, el manejo de documentos y contenidos entre los
diferentes usuarios, la elaboración de encuestas de opinión, etc.
¿ Cómo se almacenan los datos en MongoDB?
Los datos en MongoDB se almacenan [22] en documentos BSON [23]: estructuras de
datos estilo JSON. Los documentos contienen uno o más campos, y cada campo
contiene un valor de un tipo de datos específico, que incluye matrices, datos binarios y
subdocumentos. Los documentos que tienden a compartir una estructura similar se
organizan como colecciones.
Puede ser útil pensar que los documentos son análogos a las filas en una base de
datos relacional, los campos son similares a las columnas y las colecciones son
similares a las tablas.
Los socios del ecosistema MongoDB son: Amazon, IBM, Informatica, Intel, Microsoft,
MongoHQ, MongoLabs, Rackspace, Red Hat, Softlayer y VMware.
27
Base de datos de documentos
Un registro en MongoDB es un documento [24], que es una estructura de datos
compuesta por pares de campo y valor. Los documentos MongoDB son similares a los
objetos JSON. Los valores de los campos pueden incluir otros documentos, matrices y
matrices de documentos.
Las ventajas de usar documentos (objetos) son:
Los documentos (objetos) corresponden a tipos de datos nativos en muchos
lenguajes de programación.
Los documentos integrados reducen la necesidad de costosas combinaciones.
El esquema dinámico admite polimorfismo fluido.
Características
MongoDB proporciona persistencia de datos de alto rendimiento. En particular,
Soporte para modelos de datos integrados reduce la actividad de E/S en el
sistema de base de datos.
Los índices admiten consultas más rápidas y pueden incluir claves de matrices
y documentos integrados.
Plataformas compatibles
MongoDB está disponible en dos ediciones [25]: Community Edition y Enterprise.
Community Edition es la versión de código abierto de MongoDB. La versión Enterprise
proporciona funciones adicionales de administración, autenticación y supervisión. Los
pasos de instalación varían según la edición.
28
Desde la versión 3.4, MongoDB ya no está disponible para plataformas x86 de 32 bits.
En futuras versiones, MongoDB dará soporte a:
Windows 7 / 2008R2
Windows 8/2012
Windows 8.1 / 2012R2
Ubuntu 14.04
29
Recomendaciones
1. Mostrar todas las extensiones de nombre de archivo: Se debe configurar el
explorador de Windows para que muestre las extensiones de los archivo. Esto
puede evitar problemas donde el tipo de archivo que se muestra al usuario difiere
del tipo de archivo real.
2. Instalar todas las actualizaciones de Windows: Antes de instalar MongoDB, se
debe actualizar Windows con las últimas actualizaciones del sistema. Como
mínimo deben estar instaladas las siguientes:
Windows 2012 Server y Windows 10: KB2999226 para proporcionar
compatibilidad con Universal C Runtime para Windows.
Windows Server 2008 R2 y Windows 7: KB2731284 para resolver un problema
con los archivos asignados de memoria en Windows.
3. No exponer mongod.exe a una red pública sin configurar la autenticación.
MongoDB está diseñado para ejecutarse en entornos de confianza.
Instalación
En el desarrollo de este proyecto se instalará la versión Community de MongoDB en
su versión 4.0.2 (29 Agosto 2018) en un Sistema Operativo Windows 7 de 64 bits
siguiendo los pasos especificados en el sitio web de MongoDB [26]
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/.
La instalación es muy sencilla, simplemente hay que dirigirse al sitio web
https://www.mongodb.com/download-center?jmp=nav y descargar el archivo de
instalación correspondiente al Sistema Operativo que se vaya a utilizar, en este caso
Windows 7 de 64 bits.
Una vez descargado el archivo de instalación “.msi” se debe ejecutar y seguir los
pasos del asistente de instalación.
30
Puede elegirse el tipo de instalación, entre completa o personalizada. Si se elige la
opción de instalación personalizada, puede especificarse un directorio de instalación.
A partir de MongoDB 4.0, se puede, de manera predeterminada, configurar e iniciar
MongoDB como un servicio durante la instalación.
Si se elige no configurar MongoDB como un servicio, se debe desactivar la instalación
de MongoD como un servicio.
Si elige configurar MongoDB como un servicio, se puede:
Especificar que se ejecute el servicio como uno de los siguientes usuarios:
o Usuario remoto.
o Usuario local o dominio:
Para una cuenta de usuario local, se debe especificar el dominio de
cuenta y el nombre de cuenta y la contraseña de la cuenta.
Para un usuario de dominio, se debe especificar el dominio de la
cuenta, el nombre de la cuenta y la contraseña de la cuenta para
ese usuario.
Especificar el nombre del servicio. Si ya existe un servicio con el nombre
especificado, se debe elegir otro nombre.
Especificar el directorio de datos, que corresponde a --dbpath. Si el directorio
no existe, el instalador deberá crear el directorio y establecer el acceso al
directorio para el usuario del servicio.
Especificar el directorio de registro, que corresponde a --logpath. Si el directorio
no existe, el instalador deberá crear el directorio y establecer el acceso al
directorio para el usuario del servicio.
31
2.2.2 DESARROLLO E INSTALACIÓN
2.2.2.1 BOOTSTRAP
Instalación
Para usar Bootstrap [27] en una página HTML, el desarrollador solo debe descargar
desde el sitio web http://getbootstrap.com/ el paquete Bootstrap que contiene las hojas
de estilo CSS y los archivos Javascripts.
Una vez finalizada la descarga es necesario copiar los archivos (carpeta CSS y JS)
descargados al directorio del proyecto a realizar.
Estas carpetas contienen las hojas de estilo y archivos Javascripts que posteriormente
se utilizarán en el desarrollo del proyecto.
Seguido solo hay que enlazarlos al archivo HTML correspondiente indicando la ruta en
la que se encuentran dentro del directorio del proyecto.
32
Una vez hecho esto ya se puede utilizar las diferentes clases que contienen los
archivos CSS para el desarrollo del proyecto.
Bootstrap tiene una gran cantidad de clases ya preparadas para que simplemente se
puedan utilizar y la única dificultad sea conocer esas clases o saber buscar en la
documentación de la página como se llama.
Por ejemplo, para crear una barra de navegación, simplemente habría que crear una
caja (div), y aplicarle una clase predefinida en el archivo “.css” de Bootstrap con el
nombre de “navbar”:
33
2.2.2.2 PINEGROW
Instalación
La instalación de Pinegrow [28] es muy sencilla, simplemente hay que dirigirse al sitio
web https://pinegrow.com/ y descargar el archivo de instalación correspondiente al
Sistema Operativo que se vaya a utilizar.
Una vez finalizada la descarga se procederá a su instalación. Una vez instalado se
ejecuta el programa y se selecciona la carpeta que contiene el proyecto a desarrollar
(la cual contiene los archivos Bootstrap así como las diferentes páginas del sitio web).
Alternativas desechadas
Pingendo:
Al igual que Pinegrow , Pingendo es un editor web multiplataforma
(Mac, Windows y Linux) que permite crear sitios web responsive de
forma rápida mediante una interfaz gráfica que permite la edición de
código HTML y su visualización al instante.
El programa se divide en 3 columnas, una a la izquierda que contiene
todas las opciones disponibles para tipografía, media, componentes,
botones y diseños. La columna de la derecha indica la estructura del
elemento seleccionado y los ajustes posibles por elemento, y la
columna central es el visual del proyecto en curso así como el código
HTML.
El trabajo es bastante sencillo y consiste en arrastrar los elementos de
la columna izquierda a la parte central para ver el resultado al instante y
cambiar texto e imágenes en vivo pero también, y es la gran fuerza de
Pingendo, poder ajustar varias cosas con las opciones disponibles en la
columna derecha como indicar un ID al elemento, elegir su posición,
color, tamaño y si tiene que ser visible u oculto en Smartphone, Tablet,
portátil y/o ordenadores, es decir, que esta última columna permite
ganar un tiempo en retoques de código .
34
Esta alternativa fue desechada debido a que, a diferencia de
Pinegrow, Pingendo no muestra de forma tan exhaustiva los archivos
.css, no facilitando de esta forma la edición de los estilos de los
diferentes elementos ya creados en su correspondiente archivo .css, es
decir, permite la edición de estilos pero no indica, seleccionando el
elemento a editar, que archivo .css contiene su estilo, que etiqueta de
este archivo, que código y características, etc.
Microsoft Visual Studio 2017:
Inicialmente, el proyecto comenzó su fase de desarrollo con este
Framework de Microsoft, adaptando la estructura de carpetas para
incluir los directorios de los archivos Bootstrap. Pero a medida que
avanzó el desarrollo fueron surgiendo diferentes problemas
Aunque MVS2017 es muy potente, no es tan sencillo de utilizar
como Pinegrow, ya que a diferencia de este, no permite (con el
simple hecho de seleccionar un elemento) la edición de su
archivo de estilos. Puede parecer un detalle insignificante pero a
la hora de tener que editar los estilos de todos los elementos
seleccionados sirve de mucha ayuda que directamente el
programa te indique su etiqueta, sus estilos, el archivo CSS en
el que estos se encuentran y permita la edición de dicho archivo
CSS sin tener que escribir su código, simplemente
seleccionando las características que se quieran añadir dentro
de las diferentes opciones que permite su interfaz.
Pero no solo ha sido este el aspecto que ha llevado a la decisión
de optar por Pinegrow en lugar de MVS2017. El problema más
importante que llevó a tomar esta decisión surgió a la hora de
publicar el proyecto en el servidor IIS de Microsoft (Internet
Information Services), el cual no reconocía la estructura de
carpetas del directorio del proyecto generando un error a la hora
de acceder a cualquier página del sitio web seleccionando uno
35
de los enlaces de la página de inicio. Esto provoco la pérdida de
bastante tiempo que inclinó finalmente la balanza a favor de
Pinegrow.
36
2.2.2.3 XAMPP
Instalación
Como ventaja frente a descargar e instalar cada componente por separado y a crear o
editar sus ficheros de configuración manualmente, XAMPP sólo requiere una pequeña
fracción del tiempo necesario para descargar y ejecutar un archivo ZIP, tar, exe o fkl
descargado desde el sitio web https://www.apachefriends.org/es/index.html .
Puede encontrarse en versión completa o en una versión más ligera, que es portable,
y permite configurar los componentes necesarios del servidor web mediante una
misma y sencilla interfaz web.
La instalación es muy sencilla, simplemente hay que dirigirse al sitio web
https://www.apachefriends.org/es/download.html y descargar el archivo de instalación
correspondiente al Sistema Operativo que se vaya a utilizar, en este caso Windows 7.
Una vez descargado el archivo de instalación, se ejecuta y se siguen los pasos del
asistente de instalación de la siguiente forma [29]:
37
Los componentes mínimos que instala XAMPP son el servidor Apache y el lenguaje
PHP, pero XAMPP también instala otros elementos. En la pantalla de selección de
componentes se puede elegir la instalación o no de estos componentes. Para seguir
estos apuntes se necesita al menos instalar MySQL y phpMyAdmin.
En la siguiente pantalla se puede elegir la carpeta de instalación de XAMPP. La
carpeta de instalación predeterminada es C:\xampp. Si se desea cambiar, se debe
seleccionar el icono de carpeta e indicar la carpeta donde se quiere instalar XAMPP.
Para continuar la configuración de la instalación, se selecciona "Next".
38
Tras esto comenzará la instalación que durará unos minutos.
Durante la instalación, si en el ordenador no se había instalado Apache anteriormente,
en algún momento se mostrará un aviso del cortafuego de Windows para autorizar a
Apache a comunicarse en las redes privadas o públicas. Una vez elegidas las
opciones deseadas se debe seleccionar "Permitir acceso".
Para cerrar el programa de instalación, se selecciona el botón "Finish" y se habrá
finalizado la instalación de XAMPP en el equipo.
Configuración
Al panel de control de XAMPP se puede acceder mediante el menú de inicio "Todos
los programas > XAMPP > XAMPP Control Panel" o, si ya está iniciado, mediante el
icono del área de notificación.
39
La primera vez que se abe el panel de control de XAMPP, se muestra una ventana de
selección de idioma que permite elegir entre inglés y alemán.
Para poner en funcionamiento Apache (u otro servidor), hay que hacer clic en el botón
"Start" correspondiente:
Si el arranque de Apache tiene éxito, el panel de control mostrará el nombre del
módulo con fondo verde, su identificador de proceso, los puertos abiertos (http y https),
el botón "Start" se convertirá en un botón "Stop" y en la zona de notificación se verá el
resultado de las operaciones realizadas.
Para detener Apache (u otro servidor), hay que hacer clic en el botón "Stop"
correspondiente a Apache.
40
Problemas encontrados
Al iniciar el servidor Apache comprobamos que el puerto que utilizaba este para iniciar
estaba ocupado por otro proceso, por lo que era necesaria su modificación.
Para realizar este proceso es necesario cambiar los puertos en la configuración del
panel de administración de XAMPP y en los archivos de configuración de los servicios.
Los pasos a seguir son:
1. En el panel de control de XAMPP, acceder al menú de la parte superior
derecha “Config”.
2. En la nueva ventana se selecciona “Service and Port Settings” y accedemos a
la siguiente ventana en la que se indicará el puerto en el que se desea que
inicie Apache (8080 y 4438 en este caso). Una vez indicado el puerto, se
selecciona “Save”.
3. Una vez hecho esto, en el panel de control de XAMPP se accede al menú
“Config” correspondiente a Apache y se accede a “Apache (httpd-conf)”.
41
4. Se abrirá un documento de texto plano en el que habrá que sustituir las líneas
correspondientes al puerto 80 por el puerto 8080:
Listen 80 – cambiar 80 por el nuevo puerto (8080).
ServerName localhost:80 – cambiar por 8080.
5. Para modificar el puerto 443 se repetirá el mismo proceso, pero abriendo el
archivo de la segunda opción de la configuración de Apache “Apache (httpd-
ssl.conf)”:
6. Se abrirá un documento de texto plano en el que habrá que sustituir las líneas
correspondientes al puerto 443 por el puerto 4438:
Listen 443 – cambiar 443 por el nuevo puerto (4438).
<VirtualHost _default_:443> – cambiar por 4438.
ServerName www.example.com:443 - cambiar por 4438.
Una vez seguidos estos pasos se deberá reiniciar Apache para que se inicie
correctamente como se puede apreciar en la siguiente imagen:
42
2.2.2.4 MONGODB
Instalación
En el desarrollo de este proyecto se instalará la versión Community de MongoDB en
su versión 4.0.2 (29 Agosto 2018) en un Sistema Operativo Windows 7 de 64 bits
siguiendo los pasos especificados en el sitio web de MongoDB [30]
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/.
La instalación es muy sencilla, simplemente hay que dirigirse al sitio web
https://www.mongodb.com/download-center?jmp=nav y descargar el archivo de
instalación correspondiente al Sistema Operativo que se vaya a utilizar, en este caso
Windows 7 de 64 bits.
Una vez descargado el archivo de instalación “.msi” se debe ejecutar y seguir los
pasos del asistente de instalación.
Puede elegirse el tipo de instalación, entre completa o personalizada. Si se elige la
opción de instalación personalizada, puede especificarse un directorio de instalación.
A partir de MongoDB 4.0, se puede, de manera predeterminada, configurar e iniciar
MongoDB como un servicio durante la instalación.
43
Si se elige no configurar MongoDB como un servicio, se debe desactivar la instalación
de MongoD como un servicio.
Si elige configurar MongoDB como un servicio, se puede:
Especificar que se ejecute el servicio como uno de los siguientes usuarios:
o Usuario remoto.
o Usuario local o dominio:
Para una cuenta de usuario local, se debe especificar el dominio de
cuenta y el nombre de cuenta y la contraseña de la cuenta.
Para un usuario de dominio, se debe especificar el dominio de la
cuenta, el nombre de la cuenta y la contraseña de la cuenta para
ese usuario.
Especificar el nombre del servicio. Si ya existe un servicio con el nombre
especificado, se debe elegir otro nombre.
Especificar el directorio de datos, que corresponde a --dbpath. Si el directorio
no existe, el instalador deberá crear el directorio y establecer el acceso al
directorio para el usuario del servicio.
Especificar el directorio de registro, que corresponde a --logpath. Si el directorio
no existe, el instalador deberá crear el directorio y establecer el acceso al
directorio para el usuario del servicio.
44
2.3 INSTALACIÓN DEL ENTORNO Y PRUEBAS
2.3.1 INSTALACIÓN DEL ENTORNO
Una vez instaladas y configuradas las herramientas utilizadas para el desarrollo del
proyecto se procederá a la comprobación del funcionamiento de todas en conjunto.
Para ello se debe crear, en el directorio en el que se ha instalado XAMPP
(C:\xampp\htdocs), una carpeta en la que se va a llevar a cabo el desarrollo del
proyecto y copiar en esta los archivos descargados Bootstrap
Una vez hecho esto se procederá a ejecutar el editor web Pingerow y se accederá a
“File / Open Project” y se seleccionará el directorio del proyecto en
“C:\xampp\htdocs\Plataforma”.
El programa mostrará, de izquierda a derecha:
Directorio de carpetas y archivos del proyecto en el que se puede seleccionar
el archivo a editar.
Ventana de edición y visualización en la que, seleccionando un archivo del
directorio de la parte izquierda, se visualizará el resultado final. En esta
también se puede visualizar el código HTML del archivo seleccionado para su
edición, el cual se puede editar directamente seleccionando el elemento
correspondiente de la ventana de visualización.
Edición de estilos. En la columna que se encuentra a la derecha podemos
editar los estilos de un elemento seleccionado en la ventana de visualización.
Mostrará, según el elemento seleccionado, el archivo CSS en el que se
encuentran sus estilos, así como cada una de sus características ofreciendo la
posibilidad de editarlas directamente sin necesidad de modificar el código del
archivo CSS.
45
Llegado a este punto se procede al desarrollo del sitio web en el editor. Para visualizar
los avances en la edición, además de poder visualizarlo en la ventana central del
editor, iniciaremos el servidor Apache para poder ver el desarrollo en el navegador.
Para ello se abre el Panel de control de XAMPP y se selecciona el botón “Start”:
Con esto se iniciará el servidor Apache. Una vez iniciado podemos abrir el navegador
web y visualizar el desarrollo introduciendo la url http://localhost:8080/Plataforma/
46
2.3.2 PRUEBAS
En primer lugar se presentarán las tecnologías utilizadas para su implementación así
como la estructura en la que se ha decidido dividir el proyecto.
El sitio web deberá funcionar y mostrar la misma información independientemente del
Sistema Operativo, navegador o dispositivo en el que se visualice.
Para el desarrollo del mismo se han empleados las tecnologías mencionadas
anteriormente (apartado 2.2.1).
Base de datos
En esta sección veremos una serie de pruebas realizadas para comprobar el
funcionamiento de la base de datos.
47
Para seleccionar todos los documentos en la colección, se pasa un documento vacío
como parámetro de filtro de consulta al método de búsqueda. El parámetro de filtro de
consulta determina los criterios de selección:
db . imagenes. find ( {} )
Esta operación corresponde a la siguiente declaración SQL:
SELECT * DEL imagenes
Para especificar condiciones de igualdad, se usan las expresiones <field>:<value> en
el documento de filtro de consulta :
{ < campo1 >: < valor1 > , ... }
El siguiente ejemplo selecciona de la colección imagenes todos los documentos donde
el status es igual "D":
db . imagenes. find ( { status : "D" } )
Esta operación corresponde a la siguiente consulta SQL:
SELECT * FROM imagenes WHERE status = "D"
Especificar condiciones utilizando operadores de consulta:
{ < campo1 >: { < operador1 >: < valor1 > }, ... }
El siguiente ejemplo recupera todos los documentos de la colección imagenes donde
status es igual "A" o bien "D":
db . imagenes. find ( { status : { $ in : [ "A" , "D" ] } } )
La operación corresponde a la siguiente consulta SQL:
SELECT * FROM imagenes WHERE status in ( "A" , "D" )
Para crear e insertar elementos en la colección inventory, se ejecuta lo siguiente:
db.inventory.insertMany([ { item: "journal", qty: 25, size: { h: 14, w: 21, uom: "cm" }, status: "A" }, { item: "notebook", qty: 50, size: { h: 8.5, w: 11, uom: "in" }, status: "A" }, { item: "paper", qty: 100, size: { h: 8.5, w: 11, uom: "in" }, status: "D" }, { item: "planner", qty: 75, size: { h: 22.85, w: 30, uom: "cm" }, status: "D" }, { item: "postcard", qty: 45, size: { h: 10, w: 15.25, uom: "cm" }, status: "A" } ]);
Actualizar documentos en una colección:
{ <update operator>: { <field1>: <value1>, ... }, <update operator>: { <field2>: <value2>, ... }, }
Actualizar un documento único:
48
db.inventory.updateOne( { item: "paper" }, { $set: { "size.uom": "cm", status: "P" }, $currentDate: { lastModified: true } } )
Actualizar varios documentos:
db.inventory.updateMany( { "qty": { $lt: 50 } }, { $set: { "size.uom": "in", status: "P" }, $currentDate: { lastModified: true } } )
Reemplazar un documento:
db.inventory.replaceOne( { item: "paper" }, { item: "paper", instock: [ { warehouse: "A", qty: 60 }, { warehouse: "B", qty: 40 } ] } )
El siguiente ejemplo elimina todos los documentos de inventory:
db.inventory.deleteMany({})
Eliminar todos los documentos que coinciden con una condición. El siguiente ejemplo
elimina todos los documentos de inventory donde el campo status es igual a "A":
db.inventory.deleteMany({ status : "A" })
El método devuelve un documento con el resultado de la operación.
Eliminar solo un documento que coincida con una condición:
db.inventory.deleteOne( { status: "D" } )
49
3. PLANIICACIÓN DEL PROYECTO
El proceso de planificación del proyecto puede servirnos para obtener una
aproximación del tiempo necesario para la realización del proyecto. Para realizar este
punto nos hemos apoyado en los diagramas de Gantt. Además de las fases del
proyecto mostraremos las sub-etapas de cada apartado
3.1 PLANIFICACIÓN TEMPORAL INICIAL
Al comienzo del proyecto, se realizó una planificación inicial, poniendo unos datos
aproximados sobre el tiempo de realización de las distintas tareas. La planificación la
empezamos en el segundo cuatrimestre que sería cuando llevaríamos a cabo la
realización del proyecto, es decir, de Febrero a Septiembre.
Tendremos en cuenta las siguientes etapas en la elaboración del proyecto:
Planificación: Etapa inicial en las que se valorarán las diferentes etapas
consecutivas, los recursos y el tiempo elaboración.
Análisis Inicial: Etapa de análisis de los problemas iniciales y definición de los
objetivos.
Estudio Inicial: Estudio de las tecnologías a utilizar para el desarrollo.
Análisis General: Etapa de entrevistas con el cliente para obtener los requisitos
y los casos de uso que nos servirán para etapas posteriores.
Diseño: Teniendo claros los objetivos trataremos el diseño de la aplicación.
Trataremos temas de la base de dato, la interfaz, la estructura.
Implementación: Etapa de desarrollo de la aplicación.
Pruebas: Etapa de comprobación de del funcionamiento de la aplicación.
Trataremos pruebas unitarias y generales.
Documentación: Etapa de recopilación de datos y documentación de todas las
etapas del proyecto.
Diagrama Gantt Planificación Inicial
50
3.2 PLANIFICACIÓN TEMPORAL FINAL
Una vez finalizado el proyecto, vemos que se han producido ciertas alteraciones en los
periodos de planificación. En este punto, explicaremos las causas que nos han
llevado a estos desvíos en el desarrollo del proyecto.
Podemos enumerar las siguientes causas como las responsables de la variación en la
planificación:
Problemas en las distintas etapas del Proyecto:
Debido al estudio de la herramienta de desarrollo que ha causado demoras que
no se habían previsto.
Problemas de prototipos iniciales que en el proceso de desarrollo se decidió
que podían mejorarse, teniendo que volver a etapas anteriores para introducir
los cambios oportunos.
Retrasos en las reuniones con el Cliente por la incompatibilidad de horarios con
el Programador.
51
3.3 PLANIFICACIÓN FINANCIERA
En este apartado se mostrarán los costes asociados a los medios materiales y
recursos humanos empleados en el desarrollo de este proyecto.
Las actividades de este proyecto se han dividido en las siguientes fases:
Fase de Análisis y Estudio: Estudio y análisis de las distintas técnicas y
herramientas que existen en la comunidad web para desarrollar un sitio web
empleando un diseño que se adapte a cualquier dispositivo.
Fase de Desarrollo: Desarrollo de ejemplos y de una interfaz web empleando
las técnicas para el desarrollo de sitios web adaptables a cualquier dispositivo.
RECURSOS HUMANOS
Se ha tomado como referencia una jornada semanal de 40 horas repartidas en 5 días
laborables.
Según la Resolución de 30 de diciembre de 2016, de la Dirección General de Empleo,
por la que se registra y publica el Convenio colectivo del sector de empresas de
ingeniería y oficinas de estudios técnicos [31] se han tomado de las tablas de niveles
salariales la categoría profesional de nivel 2 para titulados de primer ciclo universitario.
El salario mensual correspondiente vigente a día de hoy para esta categoría es de
1,253,16€, por lo que el salario anual contando las doce mensualidades y dos pagas
es de 17.544,24€.
En la siguiente cifra ya vienen impuestas las retenciones al trabajador incluidas en los
bases y tipos de cotización de la Seguridad Social en el año 2018 [32]. Estos
conceptos incluyen el IRPF, la cotización a la seguridad social en concepto de
contingencias comunes y de formación profesional.
A continuación a la cifra obtenida, debemos de aplicarle la parte de correspondiente de
cotización de la Seguridad Social que debe de afrontar la empresa. En este caso se
trata del 29,90% en concepto de Contingencias Comunes (23,6%), Desempleo (5,5%),
Fondo de Garantía Salarial (0,2%) y Formación Profesional (0,6%).
ROL SALARIO ANUAL
COTIZACION A LA SEGURIDAD SOCIAL
COSTE ANUAL PARA LA EMPRESA
Titulado 1º Ciclo
Universitario
17.544,24€. 29,9% 22789,97€
52
Una vez realizado estos cálculos y tomando 1800 horas anuales como recoge el
convenio el coste a la empresa por hora del trabajador es de 12,66€.
Concepto Horas Precio por hora Total
Análisis y estudio 120 12,66€. 1519,2€
Desarrollo de ejemplos 20 12,66€. 253,2€
Desarrollo de interfaz de usuario
100 12,66€. 1266€
Total 240 12,66€. 2998,4€
RECURSOS HARDWARE
Para el desarrollo del proyecto se han empleado los siguientes medios materiales:
Concepto Unidades Total
Portátil Intel Core Duo T2250 1.73Ghz 3 Gb RAM
1 150€.
Xiaomi Mi A1 1 160€.
Tablet BQ Edison 3 mini 8’’ 1 130€.
Total − 440€
PRESUPUESTO FINAL
El presupuesto final, teniendo en cuenta los costes de recursos humanos y hardware
empleados en el desarrollo asciende a 3438,4€ de coste.
Concepto Coste
Recursos Humanos 2998,4€
Recursos hardware Mi A1 440€
TOTAL 3438,4€
53
4. CONCLUSIONES
El empleo de Boostrap framework aporta facilidad de uso, agilidad de desarrollo,
reutilización del código aportando un sencillo mantenimiento y aplicaciones ejecutables
en cualquier navegador.
Algunos desarrolladores apoyan totalmente el empleo de frameworks. Sin embargo,
otros prefieren trabajarse su diseño manualmente desde cero. La decisión del empleo
de un framework no necesariamente debe ser de un desarrollador, este arbitraje
supone un equilibrio entre las necesidades del proyecto, la experiencia del
desarrollador y de la finalidad del proyecto.
Por esta razón siempre hay que pensar en el usuario final, sus necesidades, su
contexto, su situación real y el uso de las tecnologías, a la hora de optar por un diseño
u otro, y la utilización de unas u otras herramientas.
Personalmente, el desarrollo de este proyecto ha sido una experiencia enriquecedora
ya que he podido aprender cómo funciona el Framework Bootstrap (el cual no conocía
tan a fondo) desde 0 y como facilita con sus estilos precompilados el diseño para todo
tipo de dispositivos.
También ha sido un reto ya que cuando una persona se adentra en este tipo de
proyectos suele hacerlo con una tecnología que conoce, sin embargo pienso que
realmente la finalidad de este tipo de proyectos es esta, aprender nuevas tecnologías
partiendo de la base que uno recibe en la escuela.
Otro punto positivo de esta experiencia ha sido adentrarme en un proyecto Sinergia en
un entorno multidisciplinar, en el que se unen diferentes puntos de vista sobre un
mismo tema con un fin común. Permite interactuar con compañeros que se encuentran
en el mismo punto de su etapa formativa, con el mismo fin, pero con diferentes
conocimientos que unidos hacen que el resultado sea mucho mejor y más completo en
todos los aspectos.
54
5. TRABAJO FUTURO
Puesto que los objetivos marcados para este proyecto son ambiciosos, lo que se ha
realizado es un primer prototipo con una serie de funcionalidades básicas, que servirá
como punto de partida para un posterior desarrollo más avanzado.
En este sentido, debido al tiempo que se ha tenido para el desarrollo de los
requerimientos iniciales, no se ha podido probar la usabilidad y accesibilidad del sitio
web al no disponer de usuarios y tiempo para realizar dichas pruebas.
Una de las funcionalidades que se podrían implementar en el futuro es la creación de
un sistema de encuestas/votaciones que fomente la participación de los habitantes del
municipio para la toma de decisiones sobre cuestiones relacionadas con el día a día.
Otra mejora, en caso de que le implantación de la plataforma tenga buena acogida,
sería el desarrollo de un apartado para la gestión de trámites, como por ejemplo,
solicitud de documentos, padrón, etc.
Se podría aumentar el abanico de tipos de usuarios en función de las necesidades que
vayan surgiendo con su crecimiento, nuevos roles, etc.
55
6. BIBLIOGRAFÍA
[1] Opera, Sinergia http://opera.eii.us.es/sinergia/public/trabajo/ver/id/283
[2] Portal web municipal - Ayuntamiento de Madrid https://www.madrid.es/portal/site/munimadrid
[3] HUL Ballarat http://www.hulballarat.org.au/cb_pages/research.php
[4] Paisaje Transversal – Mapa http://paisajetransversal.com/mapa/
[5] Bootstrap https://getbootstrap.com/docs/4.1/getting-started/download/
[6] Pinegrow Web Editor | Website Builder for Professionals https://pinegrow.com/
[7] XAMPP Installers and Downloads for Apache Friends https://www.apachefriends.org/es/index.html
[8] What Is MongoDB? | MongoDB https://www.mongodb.com/what-is-mongodb
[9] Bootstrap https://getbootstrap.com/
[10] Bootstrap https://getbootstrap.com/docs/4.1/about/overview/
[11] Bootstrap from Twitter https://web.archive.org/web/20120512185704/https://dev.twitter.com/blog/bootstrap-twitter
[12] Overview · Bootstrap https://getbootstrap.com/docs/4.1/layout/overview/
[13] Download · Bootstrap https://getbootstrap.com/docs/4.1/getting-started/download/
[14] Pinegrow Web Editor | Website Builder for Professionals https://pinegrow.com/
[15] Pinegrow Web Editor | Instalation
https://pinegrow.com/
[16] XAMPP Installers and Downloads for Apache Friends https://www.apachefriends.org/es/index.html
[17] What Is MongoDB? | MongoDB https://www.mongodb.com/what-is-mongodb
56
[18] NoSQL Databases Explained | MongoDB https://www.mongodb.com/press/10gen-announces-company-name-change-mongodb-inc
[19] 10gen Announces Company Name Change to MongoDB, Inc. https://www.mongodb.com/nosql-explained?jmp=footer
[20] Glossary — MongoDB Manual - MongoDB Documentation https://docs.mongodb.com/manual/reference/glossary/
[21] FAQ | MongoDB https://www.mongodb.com/faq#why-useful
[22] FAQ | MongoDB https://www.mongodb.com/faq#why-useful
[23] Glossary — MongoDB Manual - MongoDB Documentation https://docs.mongodb.com/manual/reference/glossary/
[24] Glossary — MongoDB Manual - MongoDB Documentation https://docs.mongodb.com/manual/reference/glossary/
[25] Install MongoDB — MongoDB Manual https://docs.mongodb.com/manual/installation/
[26] Install MongoDB on Windows - MongoDB Documentation https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/
[27] Bootstrap · The most popular HTML, CSS, and JS library in the world. http://getbootstrap.com/
[28] Pinegrow Web Editor | Website Builder for Professionals https://pinegrow.com/
[29] Instalación y uso de XAMPP en Windows. PHP. Bartolomé ... - McLibre http://www.mclibre.org/consultar/php/otros/xampp-instalacion-windows.html
[30] Install MongoDB on Windows - MongoDB Documentation
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/
[31] Convenio colectivo del sector de empresas de ingeniería y oficinas de estudios técnicos https://www.boe.es/boe/dias/2017/01/18/pdfs/BOE-A-2017-542.pdf
[32] Bases y tipos de cotización 2018 | Seguridad Social http://www-new.seg-social.es/wps/portal/wss/internet/Trabajadores/CotizacionRecaudacionTrabajadores/36537
57
ANEXO I. MANUAL DE INSTALACIÓN
BOOTSTRAP
Para usar Bootstrap [27] en una página HTML, el desarrollador solo debe descargar
desde el sitio web http://getbootstrap.com/ el paquete Bootstrap que contiene las hojas
de estilo CSS y los archivos Javascripts.
Una vez finalizada la descarga es necesario copiar los archivos (carpeta CSS y JS)
descargados al directorio del proyecto a realizar.
Estas carpetas contienen las hojas de estilo y archivos Javascripts que posteriormente
se utilizarán en el desarrollo del proyecto.
Seguido solo hay que enlazarlos al archivo HTML correspondiente indicando la ruta en
la que se encuentran dentro del directorio del proyecto.
58
Una vez hecho esto ya se puede utilizar las diferentes clases que contienen los
archivos CSS para el desarrollo del proyecto.
Bootstrap tiene una gran cantidad de clases ya preparadas para que simplemente se
puedan utilizar y la única dificultad sea conocer esas clases o saber buscar en la
documentación de la página como se llama.
Por ejemplo, para crear una barra de navegación, simplemente habría que crear una
caja (div), y aplicarle una clase predefinida en el archivo “.css” de Bootstrap con el
nombre de “navbar”:
PINEGROW
La instalación de Pinegrow [28] es muy sencilla, simplemente hay que dirigirse al sitio
web https://pinegrow.com/ y descargar el archivo de instalación correspondiente al
Sistema Operativo que se vaya a utilizar.
59
Una vez finalizada la descarga se procederá a su instalación. Una vez instalado se
ejecuta el programa y se selecciona la carpeta que contiene el proyecto a desarrollar
(la cual contiene los archivos Bootstrap así como las diferentes páginas del sitio web).
XAMPP
Como ventaja frente a descargar e instalar cada componente por separado y a crear o
editar sus ficheros de configuración manualmente, XAMPP sólo requiere una pequeña
fracción del tiempo necesario para descargar y ejecutar un archivo ZIP, tar, exe o fkl
descargado desde el sitio web https://www.apachefriends.org/es/index.html .
La instalación es muy sencilla, simplemente hay que dirigirse al sitio web
https://www.apachefriends.org/es/download.html y descargar el archivo de instalación
correspondiente al Sistema Operativo que se vaya a utilizar, en este caso Windows 7.
Una vez descargado el archivo de instalación, se ejecuta y se siguen los pasos del
asistente de instalación de la siguiente forma [29]:
60
Los componentes mínimos que instala XAMPP son el servidor Apache y el lenguaje
PHP, pero XAMPP también instala otros elementos. En la pantalla de selección de
componentes se puede elegir la instalación o no de estos componentes. Para seguir
estos apuntes se necesita al menos instalar MySQL y phpMyAdmin.
En la siguiente pantalla se puede elegir la carpeta de instalación de XAMPP. La
carpeta de instalación predeterminada es C:\xampp. Si se desea cambiar, se debe
seleccionar el icono de carpeta e indicar la carpeta donde se quiere instalar XAMPP.
Para continuar la configuración de la instalación, se selecciona "Next".
61
Tras esto comenzará la instalación que durará unos minutos.
Durante la instalación, si en el ordenador no se había instalado Apache anteriormente,
en algún momento se mostrará un aviso del cortafuego de Windows para autorizar a
Apache a comunicarse en las redes privadas o públicas. Una vez elegidas las
opciones deseadas se debe seleccionar "Permitir acceso".
Para cerrar el programa de instalación, se selecciona el botón "Finish" y se habrá
finalizado la instalación de XAMPP en el equipo.
Configuración
Al panel de control de XAMPP se puede acceder mediante el menú de inicio "Todos
los programas > XAMPP > XAMPP Control Panel" o, si ya está iniciado, mediante el
icono del área de notificación.
62
La primera vez que se abe el panel de control de XAMPP, se muestra una ventana de
selección de idioma que permite elegir entre inglés y alemán.
Para poner en funcionamiento Apache (u otro servidor), hay que hacer clic en el botón
"Start" correspondiente:
Si el arranque de Apache tiene éxito, el panel de control mostrará el nombre del
módulo con fondo verde, su identificador de proceso, los puertos abiertos (http y https),
el botón "Start" se convertirá en un botón "Stop" y en la zona de notificación se verá el
resultado de las operaciones realizadas.
Para detener Apache (u otro servidor), hay que hacer clic en el botón "Stop"
correspondiente a Apache.
63
Problemas encontrados
Al iniciar el servidor Apache comprobamos que el puerto que utilizaba este para iniciar
estaba ocupado por otro proceso, por lo que era necesaria su modificación.
Para realizar este proceso es necesario cambiar los puertos en la configuración del
panel de administración de XAMPP y en los archivos de configuración de los servicios.
Los pasos a seguir son:
7. En el panel de control de XAMPP, acceder al menú de la parte superior
derecha “Config”.
8. En la nueva ventana se selecciona “Service and Port Settings” y accedemos a
la siguiente ventana en la que se indicará el puerto en el que se desea que
inicie Apache (8080 y 4438 en este caso). Una vez indicado el puerto, se
selecciona “Save”.
9. Una vez hecho esto, en el panel de control de XAMPP se accede al menú
“Config” correspondiente a Apache y se accede a “Apache (httpd-conf)”.
64
10. Se abrirá un documento de texto plano en el que habrá que sustituir las líneas
correspondientes al puerto 80 por el puerto 8080:
Listen 80 – cambiar 80 por el nuevo puerto (8080).
ServerName localhost:80 – cambiar por 8080.
11. Para modificar el puerto 443 se repetirá el mismo proceso, pero abriendo el
archivo de la segunda opción de la configuración de Apache “Apache (httpd-
ssl.conf)”:
12. Se abrirá un documento de texto plano en el que habrá que sustituir las líneas
correspondientes al puerto 443 por el puerto 4438:
Listen 443 – cambiar 443 por el nuevo puerto (4438).
<VirtualHost _default_:443> – cambiar por 4438.
ServerName www.example.com:443 - cambiar por 4438.
Una vez seguidos estos pasos se deberá reiniciar Apache para que se inicie
correctamente como se puede apreciar en la siguiente imagen:
65
MONGODB
En el desarrollo de este proyecto se instalará la versión Community de MongoDB en
su versión 4.0.2 (29 Agosto 2018) en un Sistema Operativo Windows 7 de 64 bits
siguiendo los pasos especificados en el sitio web de MongoDB [30]
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/.
La instalación es muy sencilla, simplemente hay que dirigirse al sitio web
https://www.mongodb.com/download-center?jmp=nav y descargar el archivo de
instalación correspondiente al Sistema Operativo que se vaya a utilizar, en este caso
Windows 7 de 64 bits.
Una vez descargado el archivo de instalación “.msi” se debe ejecutar y seguir los
pasos del asistente de instalación.
Puede elegirse el tipo de instalación, entre completa o personalizada. Si se elige la
opción de instalación personalizada, puede especificarse un directorio de instalación.
A partir de MongoDB 4.0, se puede, de manera predeterminada, configurar e iniciar
MongoDB como un servicio durante la instalación.
66
Si se elige no configurar MongoDB como un servicio, se debe desactivar la instalación
de MongoD como un servicio.
Si elige configurar MongoDB como un servicio, se puede:
Especificar que se ejecute el servicio como uno de los siguientes usuarios:
o Usuario remoto.
o Usuario local o dominio:
Para una cuenta de usuario local, se debe especificar el dominio de
cuenta y el nombre de cuenta y la contraseña de la cuenta.
Para un usuario de dominio, se debe especificar el dominio de la
cuenta, el nombre de la cuenta y la contraseña de la cuenta para
ese usuario.
Especificar el nombre del servicio. Si ya existe un servicio con el nombre
especificado, se debe elegir otro nombre.
Especificar el directorio de datos, que corresponde a --dbpath. Si el directorio
no existe, el instalador deberá crear el directorio y establecer el acceso al
directorio para el usuario del servicio.
Especificar el directorio de registro, que corresponde a --logpath. Si el directorio
no existe, el instalador deberá crear el directorio y establecer el acceso al
directorio para el usuario del servicio.
67
ANEXO I. MANUAL DE USUARIO
Página Principal:
En la página principal encontramos varias secciones importantes:
Barra superior de Menús: En ella encontramos las diferentes secciones de la
plataforma del desarrollo inicial. En ella podemos encontrar los enlaces a las
secciones:
.1. NOSOTROS: En estas secciones se han creado diferentes secciones para dar
a conocer el municipio.
.2. CONOCE: En esta sección se publicarán estudios sobre el municipio, agenda
de actividades, etc.
.3. PARTICIPA: Sección en la que se fomentará la participación ciudadana
.4. CONTACTA: Formulario de contacto.
.5. BLOG: Futuro desarrollo de un blog.
.6. REPOSITORIO: Cajón de enlaces de interés
.7. MI CUENTA: Zona de registro de usuarios.
Justo bajo la barra de menús nos encontramos un Carrusel que muestra imágenes
sobre el municipio así como enlaces de interés de la plataforma
En la zona central podemos encontrar imágenes sobre el municipio así como
información e historia del mismo.
Nosotros:
68
En esta sección observamos las secciones:
Quienes somos: En la que se explicará un poco la historia del municipio, su localización así como lugares de interés.
Presentación: En esta sección se hablará de la finalidad de la plataforma.
Concepto: En esta sección se explicará la motivación del desarrollo del sitio.
Conoce:
En esta sección observamos las secciones:
Estudios sobre Valverde: Se irán publicando diferentes estudios realizados sobre el municipio.
Agenda de actividades: Un calendario en el que mostrarán las fechas relevantes para el municipio y se indicará la celebración de diferentes eventos.
Anécdotas: Historias peculiares ocurridas en el municipio.
Historias: Contadas por sus habitantes.
Lugares populares: En esta sección se mostrarán, mediante imágenes, los diferentes lugares importantes del patrimonio.
Participa:
En esta sección observamos las secciones:
Encuestas: Se publicarán encuestas para pulsar la opinión de la población en relación a decisiones relevantes.
Mapa: Zona en la que, usuarios con ciertos conocimientos, podrán intercambiar información SIG/BIM.
69
Cápsula del tiempo: Futuro desarrollo de un mapa en el que la población puede señalar sitios de interés del mismo, así como escribir textos relacionados con el lugar.
Contacta:
Sección en la que se muestra un mapa del municipio, datos de contacto y un formulario de contacto con el que poder contactar con los administradores de la plataforma.
Nosotros - Blog:
Sección en la que, más adelante, se publicará un blog sobre el municipio.
Repositorio:
Cajón de enlaces de interés.
70
Mi Cuenta:
Zona de registro de usuarios:
Registro en la plataforma:
Una vez registrado el usuario tendrá permisos para dejar opiniones en la plataforma, escribir historias personales y vivencias en el municipio, subir imágenes o videos, subir información SIG/BIM relacionada con la zona, así como una serie de funciones que se pueden implementar en el futuro. Del mismo modo, en la sección MI CUENTA podrá modificar una serie de datos personales. Usuario administrador
Alta de usuario: Se podrá dar de alta usuarios.
Alta de noticias: Se podrá dar de alta noticias.
Alta de proyectos.
71
Alta de contenido en la sección “CONOCE” para que los usuarios puedan aportar contenido.
Baja de usuario: Se podrá dar de baja un usuario.
Modificaciones de roles o perfiles que en un futuro se puedan implementar.
El usuario administrador se facilitará dado de alta en la plataforma con sus credenciales de acceso, de forma que no sea necesario su registro.